Lekce 12 - Informační architektura v UX

V minulé lekci, Interakční design v UX, jsme si představili interakční design - obor, který se zabývá komunikací uživatele s technologií a řeší, jak spolu ideálně vzájemně interagovat tak, aby nám technologie rozuměla a my rozuměli jí.

Na každé webové stránce či v aplikaci je důležité, aby uživatel jednoduše našel, co hledá. Jeho pohyb by měl být intuitivní a snadný. Proto nesmíme zanedbat důležitou část tvorby v UX a připravit kvalitní informační architekturu. V této lekci si vysvětlíme, co je informační architektura, jak ji vytvořit, zaznamenat a otestovat.  

Informační architektura

Informační architektura je obor, který se zabývá systematizací informací. Jejím úkolem je usnadnit uživateli orientaci a vyhledávání díky kvalitní a srozumitelné navigaci a organizaci informací. Čím složitější je web či aplikace, tím je informační architektura více a více třeba.

Proč informační architekturu řešit?

Mít dobře zpracovanou informační architekturu pro náš projekt znamená, že bude přehledný, logicky řazený a dobře navazující. Obsah zde bude informačně soudržný, jak z hlediska rozsahu, tak i složitosti a hloubky tématu. Je důležité, aby jedna kategorie nebyla přehnaně odborná či široká a jiná zase povrchní.

Informační architektura je i obor velmi užitečný. Je významný pro SEO, jelikož kvalitní hierarchizace informací a správné větvení je jeden z významných hodnoticích faktorů vyhledávačů. A dokonce až 80 % chyb na webových stránkách je způsobeno špatnou informační architekturou.

Nevytvářejme na webu "odpadkové koše"

Je velmi důležité, abychom neschovávali klíčové informace. Přílišná hloubka (vnoření) informací v subkategoriích vede k tomu, že uživatel nenalezne rychle potřebnou informaci a může odejít jinam, kde má informace lépe k nalezení. Proto bychom si měli dát pozor na stránky, které by mohly být tzv. odpadkovým košem na různé informace. Je tedy nezbytné se vyhnout kategoriím jako "základní informace", "další služby" atd., které pod sebou skrývají to, co se jinam nevešlo nebo někdo nevěděl, kam tyto informace zařadit. Tyto věci by měly mít své jasné místo jinde. A pokud jsou to informace natolik vágní, že nevíme, kam s nimi, možná by na webu či v aplikaci ani neměli být.

Typy informační architektury

Dříve na začátku vzniku webových stránek byly stránky spíše lineární a provázané tak, že stránka navazovala na předchozí a odkazovala na následnou stránku. Později se začala informační architektura tvořit hierarchickou metodou, kde je nadřazené kategorii přiřazeno několik dalších a struktura se jasně větví. Nyní již ale webové stránky odpovídají spíše nelineárnímu vzájemně velmi prolinkovanému systému, kdy se z jedné stránky lze dostat na mnoho míst. Příkladem může být stránka produktu v e-shopu, kde vidíme informace o výrobku, ale odkazuje nás dále pro nákup do košíku, přihlášení či registraci, spojené produkty, příslušenství, akce, ale i třeba newsletter.

Základní principy informační architektury

Nyní se podíváme na základní principy informační architektury.

Pojmenování

Při přípravě obsahu našeho projektu bychom měli pracovat se správným pojmenováním toho, o čem se hovoří. Některé obory mají svůj slang či odborný žargon. Jindy zase koncoví zákazníci vyhledávají produkt pod obecně známým názvem, který však není správným pojmenováním. Toto je pro nás na začátku klíčové. Musíme používat správná slova s ohledem na cílovou skupinu. K tomu slouží analýza klíčových slov a jejím výstupem bychom se měli bezpodmínečně řídit.

Analýza klíčových slov – Jde o přehledně zpracovaný dokument, obsahující slova relevantní pro daný projekt. Je zde zhodnocena nejen souvztažnost s tématem, ale i běžná hledanost ve vyhledávačích či konkurenčnost. Nejde jen o nejběžnější slova, ale i celé slovní obraty a jejich možné varianty.

Prioritizace a hierarchie

To co je na webu nejvíce důležité, je podstatné mít v rámci celého rozsahu webu na homepage a v rámci stránky do jejích horní části, nejlépe do viditelné části obrazovky, která se zobrazí po načtení dané stránky. 

Strukturování a kategorie

Celkový obsah je třeba vhodně strukturovat a předkládat uživateli vždy po určitém množství dle prioritizace. K tomu slouží rozřazení veškerého obsahu do sekcí a kategorií, které jsou vhodně seřazené.

Odkaz a propojení

Když máme informační strukturu našeho projektu dobře připravenou, dle předchozích dvou bodů, je dalším krokem vhodně propojit veškerý obsah a provázat informace, které k sobě patří. Důležité je ale myslet i dál a nabídnout uživateli propojení na další věci, které třeba v dané chvíli netuší, že by mohl potřebovat. Kvalitní informační architektura ho na ně ale může navést. Můžeme si například představit, že v rámci prodeje tiskáren na e-shopu nabídneme uživateli i další věci, jako je například napájecí kabel, který není součástí či náhradní cartridge.

Nyní již víme, co informační architektura je a k čemu slouží. Je tedy na čase naučit se ji navrhovat.

Tvorba informační architektury

Na začátku si připravíme celkovou mapu stránek. To znamená, určit si, jaké budeme mít stránky, kategorie a jak bude vše provázané. K tomu nám může sloužit mnoho různých metod. Některé si tu představíme:

• Mind mapa - Myšlenková mapa, která díky grafickému uspořádání klíčových slov a myšlenek zobrazuje vzájemné vztahy a propojení. Do středu si tedy napíšeme hlavní téma projektu, od něho vedeme několik čar k hlavním kategoriím a od nich další čáry na podstránky.
• Post-it lepítka a tužka – Hlavní témata si napíšeme na jednotlivé lepítka, které pak sdružujeme na stole či tabuli.

• Seznamy a jejich sdružování – Můžeme využít i sepsání našich témat na seznamy a ty pak různé zkusit propojovat.
• Scénáře use-case – K tvorbě informační architektury můžeme přistoupit i tak, že si představujeme různé sekvence kroků, které by uživatel měl či chtěl dělat pro splnění určitého úkolu.
• Akce dle cílů – Podle cílů našeho projektu si definujeme akce, jaké by měl uživatel udělat. Jde o opačný postup oproti předchozí metodě. 
• Prioritizace a číslování – Můžeme si sepsat i odrážkový seznam, co vše chceme v našem projektu mít a pak přiřazovat prioritu čísly.

Pokud už máme vytvořenou mapu stránek našeho projektu, musíme jí dobře a srozumitelně zachytit.

Jak si informační architekturu můžeme zapsat

Je několik možností, jak k tvorbě přistupovat. Nejjednodušší je vzít tužku a papír a základní kategorie a stránky si prostě rozkreslit a provázat. Můžeme použít i tabulkový zápis v Excelu nebo zapsat vše pomocí stromového diagramu. Toto dělení je velmi přehledné i pro neodborníky. Může sloužit i k základní prezentaci klientovi:

Testování navržené informační architektury

I proces tvorby informační architektury by měl podléhat testování. Můžeme využít například následujících postupů.

Card sorting

Metoda třídění karet je testování, které v informační architektuře využijeme, pokud již máme připravenou stromovou architekturu. Jde o to, jak uživatelé klasifikují obsah. Metoda by se dala jednoduše uskutečnit tak, že bychom kategorie našeho projektu napsali na lístečky a lístečky dali testujícím subjektům, aby je sami setřídili do určitých kategorií.

Treejack

Jde o tzv. ověřování navigace bez navigace. Pomocí této metody otestujeme, jak uživatelé chápou menu a celkovou strukturu.

Definujeme otázky, které chceme ověřit tímto testem (většinou ověřujeme naše cíle). Využít můžeme nástroj Treejack na stránkách Optimal Workshop. Vytvořený test rozešleme na naši databázi (nejlépe 50+ lidí) a program nám vytvoří následně diagram, zda se uživatelé chovali dle našeho očekávání nebo nikoliv a zanalyzuje spoustu dalších informací.

Dle těchto a dalších testů si ověříme, zda běžní uživatelé by náš web či aplikaci používali tak, jak si myslíme, či budeme muset přistoupit ke změnám, které budou respektovat právě uživatele.

Díky všem těmto krokům budeme mít připravenou ideální informační architekturu pro náš projekt.

V následujícím kvízu, Kvíz - Interakční design a informační architektura v UX, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.