jan korbel

Označování obsahu tagy se stalo neodmyslitelnou součástí mnoha stránek a webových aplikací. Nadefinujeme klíčová slova a podle nich své informace zase najdeme – krásně jednoduché. Jak už to bývá, převést jednoduchou myšlenku do života před nás postaví nejednu výzvu. Pokusím se tu rozvést základní koncept tagování a nadhodit další možnosti jeho využití.

Začnu dvěma problémy, kterými tagování trpí¹:

1. Komplikované vyhledávání v rozsáhlém seznamu tagů
2. Velké množství výsledků i po výběru jednoho tagu

Příliš těžké mraky

Obrázek č. 1 ukazuje seznam tagů (tag cloud), které byly použity pro označení fotografií na Flickru. Když kliknete na clouds objeví se fotografie s tímto tagem.

Obrázek č. 1 - příklad seznamu tagů (tag cloud) na Flickru

Z obrázku je dobře patrný první problém tagování: Časem vytvoříme tolik různých tagů, že je obtížné v nich najít ten, který hledáme². K čemu nám pak jsou vlastní dveře, když je nedokážeme v záplavě jiných dveří najít?

K čemu nám jsou vlastní dveře, když je nedokážeme v záplavě jiných dveří najít?

Příliš mnoho kapek

Další problém vyvstane s přibývajícím tagovaným obsahem: Když už konečně najdeme hledaný tag, zúžíme sice množinu výsledků, ale ještě pořád bude výsledků tolik, že bude obtížné v nich najít ten váš.

Příklad hledání fotografií je přitom relativně jednoduchý. Představme si, že používáme tagy pro označování odkazů na stránky a tyto odkazy jsou přístupné i  dalším uživatelům. Třeba jsme někde viděli skvělý návod na fotogalerii vytvořenou čistým HTML kódem, javascriptem a formátovanou pomocí CSS. Víme, že jsme nejspíš použili tagy html, javascript, css. Jenže přesně tyto tagy použili jiní uživatelé pro svoje odkazy, takže se velmi rychle dostaneme do situace, kdy na námi zvolený tag vyběhne tolik “šumu”, že je systém nepoužitelný.

Solení mraků

Pojďme se podívat na možná řešení prvního problému: Najít v seznamu tagů ten svůj.

Obrázek č. 1 nám opět udělá dobrou službu, protože na něm vidíte jedno oblíbené řešení – zvýraznění nejčastěji používaných tagů zvětšením jejich velikosti.

V případě “most popular” tagů Flickr používá ještě, řekněme opačnou metodu – nezobrazování tagů, které jsou používány relativně málo. Kompletní seznam tagů je k dispozici zvlášť.

Pokud opravdu hledáme obsah otagovaný zvýrazněnými tagy, je to fajn, když nás ale zajímají tagy jiné, je orientace ještě těžší, protože naši pozornost zaměstnávají pro nás nepodstatné objekty³.

Počáteční písmeno následujících tagů usnadní orientaci v seznamu

Ne tak očividnou, rozhodně však důležitou pomůckou je abecední řazení tagů. Umožňuje nám to téměř podvědomě odhadnout, kde zhruba náš tag bude. Já osobně ještě preferuju, od určitého množství tagů ulehčit orientaci navíc tím, že výrazně zobrazíme počáteční písmeno následujících tagů, viz obrázek č. 2. Je to screenshot z aplikace, kterou jsem si naprogramoval, abych mohl snadno vyhledávat v různých odkazech, které si chci archivovat. Pro srovnání jsem nechal tagy jednou vypsat i bez úvodních písmen.

Obrázek č. 2 - Výpis seznamu tagů s úvodnímu písmeny

Obrázek č. 3 - Výpis seznamu tagů bez úvodních písmen

Kombinací výše uvedených pomůcek jsme schopni obstojně vyřešit problém přehledného vypisování seznamu tagů pro většinu aplikací, na které můžeme narazit. Je potřeba mít na paměti, že každá aplikace bude mít svoje specifika a proto nebude existovat nějaký jediný správný způsob, jak při tvoření seznamu tagů postupovat. Vžijte se do myšlení uživatelů, zaměřte se na to, v čem jim má aplikace pomoci.

Druhý problém – příliš mnoho výsledků i po zúžení pomocí jednoho tagu – bude mnohem zajímavější oříšek.

Okap pro silný déšť

Už jsem zmiňoval svou aplikaci na archivaci různých odkazů, poznámek, kusů kódu apod. Říkám jí Matrix a vytvořil jsem ji proto, že mi možnosti organizace bookmarků v prohlížeči naprosto nevyhovovaly. Uložil jsem si to do složky /esej, /články nebo snad /to read?

Problém je v tom, že komplexní údaje si při větším množství žádají složitější třídění, takže jsem měl složku /css, která dále obsahovala něco ve stylu /layout, /rohy, /forms apod. V jiných oblastech obdobně nebo ještě více úrovní zanoření. Nevyhnutelně docházelo k tomu, že jsem pak při pokusu o vyhledání uložené informace (kterou obvykle člověk potřebuje hned), neměl náladu na procházení podadresářů složek a hledání toho správného článku – Google byl pořád o dost rychlejší.

Přitom jsem ale častokrát naprosto jistě věděl, že už jsem věc, která mě zrovna trápila viděl někde vyřešenou, na nějaké stránce, nebo blogu, nebo kde… Znáte ten pocit?

Což takhle zkombinovat klasickou stromovou strukturu s tagy?

Pak jsem se dozvěděl o Delicious. Nejdřív jsem jásal a podivoval jsem se, jak to, že mě něco tak prostého nenapadlo – prostě přidám k bookmarku ještě klíčová slova a je to. Sdílení s jinými uživateli je bonus.

No jo, jenže Delicious trpí přesně tím problémem, o kterém je tahle část článku – vyberete tag a vyběhne na vás tolik výsledků, že jste stejně ztraceni.

A pak mě napadlo “Což takhle zkombinovat klasickou stromovou strukturu s tagy?”, ten proces zanořování a logického zužování s tím, že hledaná informace vlastně není na jednom konkrétním místě, ale je pouze popsaná klíčovými slovy – tagy.

Přišlo mi přirozené, že by tagování mělo fungovat následovně:

1. Vybereme tag
2. Jsou zobrazeny výsledky, které daný tag mají
3. Zároveň se ale seznam tagů změní a bude obsahovat už jen ty tagy, které mají příspěvky, jež mají zároveň i tag vybraný v kroku 1
4. Můžu pokračovat v dalším zužování nebo se vrátím o tag zpět

Názorný příklad: „Jak se sakra jmenuje taková ta javascriptová fotogalerie… taková ta pěkná, s animacema při otevírání fotky…“ První tag, který mě napadne je javascript.

Obrázek č. 4 - Část stránky aplikace Matrix po výběru tagu javascript – klikněte pro zvětšení

Kliknu tedy na javascript v seznamu tagů a vyjedou mi všechny příspěvky, které jsou jím označeny. Ačkoli aplikaci používám sám, výsledků už je tolik, že by mi takovéhle zúžení nebylo nic platné (celý screenshot, PNG 600 KB). Ale jak vidíte na obrázku č. 4, můj seznam tagů se nyní změnil – obsahuje už jen tagy, které mají příspěvky, které zároveň mají i můj tag javascript⁴.

Všimněte si, jak se mi vypisuje tagová cesta, kterou jsem se k aktuálním výsledkům dostal. Můžu se kdykoli vrátit o krok zpět a vybrat jiný tag, pokud bych nebyl s výsledky spokojen.

Já už ale vidím tag fotogalerie, klikám na něj a jásám “Lighbox, jasně… to je taky název pro fotogalerii…” ;-)

Obrázek č. 5 - Stránka po výběru tagů javascript, fotogalerie

Samozřejmě jsem nemusel jít jen cestou javascript > fotogalerie. Mohl jsem začít u kteréhokoli z tagů, kterým je daná informace označena. Mám tedy stejný pocit postupného zanořování jako u klasického adresářového stromu, jenže s tou výhodou, že můj cíl není na jednom jediném místě a já se nemusím hned na začátku jednoznačně trefit, jinak ho nemám šanci najít – ne, k mému cíli vede tolik cest, kolik je kombinací tagů definovaných pro popis informace.

K cíli pak vede tolik cest, kolik je kombinací tagů definovaných pro popis informace

Možnosti použití

Vsadil bych se, že vás napadá pár příkladů, kde by se vám tenhle způsob navigace mohl hodit. Obecně je to vždy tam, kde je hodně položek, ve kterých se vyhledává a nestačí nám pouze jedno kritérium třídění, jedna úroveň adresářů, např. /javascript.

Kromě různých aplikací na archivaci bookmarků, poznámek, dokumentů apod., mě láká třeba použítí pro online obchody. Nevím jak vy, ale já někdy opravdu trpím, když hledám něco, řekněme na stránkách Alza.cz. Jejich základní menu produktů čítá 57 kategorií! Dovedu si představit, že použití stromového tagového systému⁵ by uživatelům umožnilo vyhledávat rychleji.

Příklad: Hledám toner do tiskárny. Vídím seznam kategorií a můj myšlenkový pochod je asi takovýhle: „Toner do tiskárny… toner, toner… T… T… T… ne, tonery tu jako kategorie nejsou. Hm, tak vezmu Tiskárny„, klik a načte se stránka příslušné kategorie. Teď musím očima projít submenu (což mi zabere nějaký čas), abych zjistil, že v této kategorii tonery také nejsou. Zpátky do hlavního menu kategorií. Ale teď ho nejspíš budu muset projet očima celé a zkusit, jestli mě nějaká kategorie neupoutá. „Hele, kancelářské potřeby“. Klik. Prozkoumání submenu. „Aaaa, ne…“ Zpátky očima do hlavního menu. Míjím očima všechny kategorie a musím u toho myslet. Vynechám nástrahu v podobě „Smíšeného zboží“ a kliknu na „Spotřební materiál“. Projedu submenu. „Ha, tonery!“ Teď ještě vyklikat filtry na moji značku a je to doma. Uf, to byl výkon.

A teď to samé ve stromovém tagovém systému: „Toner do tiskárny… toner, toner… T… T… T…“, písmeno T najdu snadno, protože je zvýrazněno jako počáteční písmeno skupiny tagů, „A hele tag toner!“ Klik. Vyjede stránka a seznam tagů se změní už jen na tagy, které mají položky, které mají také tag toner. „HP, HP…“ Klik. Načtení stránky, nový seznam tagů, který už bude velmi konkrétní a jsem u cíle.

Já vím, šedá je teorie a zelený strom života, ale věřím, že by to fungovalo lépe, než stávajících 57 kategorií.

Další příklad použití může být třídění firemních kontaktů. Náš klient, firma Nextlan, má několik webů, kde se uživatelé registrují, aby si mohli stáhnout ceník, přičemž vyslovují souhlas s tím, že jim budou zasílána obchodní sdělení. Těch kontaktů je přes 10000. Po registraci je každému automaticky přidělen tag s názvem webu, ze kterého jde a tag koncák. Kontakt je zařazen do fronty a čeká na schválení. Při schvalování, nebo kdykoli později může pracovník Nextlanu změnit koncák na distributor nebo cokoli jiného. Před rozesílávkou zúžíme celou skupiny kontaktů přes výběr příslušných tagů, např. netcam > dealer a máme velmi dobře cílenou skupinu, kterou náš email zajímá.

Tyhle všechny, a určitě mnohé jiné, aplikace můžou ze stromového tagového systému něco vytěžit.

Je mi jasné, že jsem tady jen tak škrábnul povrch a spoustu věcí nezmínil (kombinace s full-textovým prohledáváním třeba), ale zároveň věřím, že jsem vám nasadil brouka do hlavy, a že se vám bude můj koncept v nějakém projektu hodit.

---