11. diel - Informačná architektúra v UX
V minulej lekcii, Interakčný dizajn v UX , sme si predstavili interakčný dizajn - odbor, ktorý sa zaoberá komunikáciou užívateľa s technológiou a rieši, ako spolu ideálne vzájomne interagovať tak, aby nám technológia rozumela a my rozumeli jej.
Na každej webovej stránke či v aplikácii je dôležité, aby používateľ jednoducho našiel, čo hľadá. Jeho pohyb by mal byť intuitívny a ľahký. Preto nesmieme zanedbať dôležitú časť tvorby v UX a pripraviť kvalitnú informačnú architektúru. V tejto lekcii si vysvetlíme, čo je informačná architektúra, ako ju vytvoriť, zaznamenať a otestovať.
Informačná architektúra
Informačná architektúra je odbor, ktorý sa zaoberá systematizáciou informácií. Jej úlohou je uľahčiť užívateľovi orientáciu a vyhľadávanie vďaka kvalitnej a zrozumiteľnej navigácii a organizácii informácií. Čím zložitejší je web či aplikácia, tým je informačná architektúra viac a viac potrebná.
Prečo informačnú architektúru riešiť?
Mať dobre spracovanú informačnú architektúru pre náš projekt znamená, že bude prehľadný, logicky radený a dobre nadväzujúci. Obsah tu bude informačne súdržný, ako z hľadiska rozsahu, tak aj zložitosti a hĺbky témy. Je dôležité, aby jedna kategória nebola prehnane odborná či široká a iná zase povrchná.
Informačná architektúra je aj odbor veľmi užitočný. Je významný pre SEO, pretože kvalitná hierarchizácia informácií a správne vetvenie je jeden z významných hodnotiacich faktorov vyhľadávačov. A dokonca až 80 % chýb na webových stránkach je spôsobených zlou informačnou architektúrou.
Nevytvárajme na webe "odpadkové koše"
Je veľmi dôležité, aby sme neschovávali kľúčové informácie. Prílišná hĺbka (vnorenie) informácií v subkategóriách vedie k tomu, že používateľ nenájde rýchlo potrebnú informáciu a môže odísť inam, kde má informácie lepšie k nájdeniu. Preto by sme si mali dať pozor na stránky, ktoré by mohli byť tzv. odpadkovým košom na rôzne informácie. Je teda nevyhnutné vyhnúť sa kategóriám ako "základné informácie", "ďalšie služby" atď., ktoré pod sebou skrývajú to, čo sa inam nezmestilo alebo niekto nevedel, kam tieto informácie zaradiť. Tieto veci by mali mať svoje jasné miesto inde, a pokiaľ sú to informácie natoľko vágne, že nevieme, kam s nimi, možno by na webe či v aplikácii ani nemali byť.
Typy informačnej architektúry
Predtým na začiatku vzniku webových stránok boli stránky skôr lineárne a previazané tak, že stránka nadväzovala na predchádzajúcu a odkazovala na následnú stránku. Neskôr sa začala informačná architektúra tvoriť hierarchickou metódou, kde je nadradenej kategórii priradených niekoľko ďalších a štruktúra sa jasne vetví. Teraz už ale webové stránky zodpovedajú skôr nelineárnemu vzájomne veľmi prelinkovanému systému, kedy sa z jednej stránky možno dostať na mnoho miest. Príkladom môže byť stránka produktu v e-shope, kde vidíme informácie o výrobku, ale odkazuje nás ďalej pre nákup do košíka, prihlásenie či registráciu, spojené produkty, príslušenstvo, akcie, ale aj napríklad newsletter.
Základné princípy informačnej architektúry
Teraz sa pozrieme na základné princípy informačnej architektúry.
Pomenovanie
Pri príprave obsahu nášho projektu by sme mali pracovať so správnym pomenovaním toho, o čom sa hovorí. Niektoré odbory majú svoj slang alebo odborný žargón. Inokedy zase koncoví zákazníci vyhľadávajú produkt pod všeobecne známym názvom, ktorý však nie je správnym pomenovaním. Toto je pre nás na začiatku kľúčové. Musíme používať správne slová s ohľadom na cieľovú skupinu. Na to slúži analýza kľúčových slov a jej výstupom by sme sa mali bezpodmienečne riadiť.
Analýza kľúčových slov – Ide o prehľadne spracovaný dokument, obsahujúci slová relevantné pre daný projekt. Je tu zhodnotená nielen súvzťažnosť s témou, ale aj bežná hľadanosť vo vyhľadávačoch či konkurenčnosť. Nejde len o najbežnejšie slová, ale aj celé slovné obraty a ich možné varianty.
Prioritizácia a hierarchia
To čo je na webe najviac dôležité, je podstatné mať v rámci celého rozsahu webu na homepage av rámci stránky do jej hornej časti, najlepšie do viditeľnej časti obrazovky, ktorá sa zobrazí po načítaní danej stránky.
Štruktúrovanie a kategórie
Celkový obsah je potrebné vhodne štruktúrovať a predkladať užívateľovi vždy po určitom množstve podľa prioritizácie. Na to slúži rozradenie všetkého obsahu do sekcií a kategórií, ktoré sú vhodne zoradené.
Odkaz a prepojenie
Keď máme informačnú štruktúru nášho projektu dobre pripravenú, podľa predchádzajúcich dvoch bodov, je ďalším krokom vhodne prepojiť všetok obsah a previazať informácie, ktoré k sebe patria. Dôležité je ale myslieť aj ďalej a ponúknuť užívateľovi prepojenie na ďalšie veci, ktoré napríklad v danej chvíli netušia, že by mohol potrebovať. Kvalitná informačná architektúra ho na nich ale môže naviesť. Môžeme si napríklad predstaviť, že v rámci predaja tlačiarní na e-shope ponúkneme užívateľovi aj ďalšie veci, ako je napríklad napájací kábel, ktorý nie je súčasťou či náhradný cartridge.
Teraz už vieme, čo informačná architektúra je a na čo slúži. Je teda na čase naučiť sa ju navrhovať.
Tvorba informačnej architektúry
Na začiatku si pripravíme celkovú mapu stránok. To znamená určíme si, aké budeme mať stránky, kategórie a ako bude všetko previazané. Na to nám môže slúžiť mnoho rôznych metód. Niektoré si tu predstavíme:
- Mind mapa - Myšlienková mapa, ktorá vďaka grafickému usporiadaniu kľúčových slov a myšlienok zobrazuje vzájomné vzťahy a prepojenia. Do stredu si teda napíšeme hlavnú tému projektu, od neho vedieme niekoľko čiar k hlavným kategóriám a od nich ďalšie čiary na podstránky.
- Post-it lepítka a ceruzka – Hlavné témy si napíšeme na jednotlivé lepítka, ktoré potom združujeme na stole či tabuli.
- Zoznamy a ich združovanie – Môžeme využiť aj spísanie našich tém na zoznamy a tie potom rôzne skúsiť prepájať.
- Scenáre use-case – K tvorbe informačnej architektúry môžeme pristúpiť aj tak, že si predstavujeme rôzne sekvencie krokov, ktoré by užívateľ mal alebo chcel robiť na splnenie určitej úlohy.
- Akcie podľa cieľov – Podľa cieľov nášho projektu si definujeme akcie, aké by mal užívateľ urobiť. Ide o opačný postup oproti predchádzajúcej metóde.
- Prioritizácia a číslovanie – Môžeme si spísať aj odrážkový zoznam, čo všetko chceme v našom projekte mať a potom priraďovať prioritu číslami.
Ako si informačnú architektúru môžeme zapísať
Je niekoľko možností, ako k tvorbe pristupovať. Najjednoduchšie je vziať ceruzku a papier a základné kategórie a stránky si jednoducho rozkresliť a previazať. Môžeme použiť aj tabuľkový zápis v excele alebo zapísať všetko pomocou stromového diagramu. Toto delenie je veľmi prehľadné aj pre neodborníkov. Môže slúžiť aj na základnú prezentáciu klientovi:
Testovanie navrhnutej informačnej architektúry
Aj proces tvorby informačnej architektúry by mal podliehať testovaniu. Môžeme využiť napríklad nasledujúce postupy.
Card sorting
Metóda triedenia kariet je testovanie, ktoré v informačnej architektúre využijeme, pokiaľ už máme pripravenú stromovú architektúru. Ide o to, ako používatelia klasifikujú obsah. Metóda by sa dala jednoducho uskutočniť tak, že by sme kategórie nášho projektu napísali na lístočky a lístočky dali testujúcim subjektom, aby ich sami zotriedili do určitých kategórií.
Treejack
Ide o tzv. overovanie navigácie bez navigácie. Pomocou tejto metódy otestujeme, ako používatelia chápu menu a celkovú štruktúru.
Definujeme otázky, ktoré chceme overiť týmto testom (väčšinou overujeme naše ciele). Využiť môžeme nástroj Treejack na stránkach Optimal Workshop. Vytvorený test rozošleme na našu databázu (najlepšie 50+ ľudí) a program nám vytvorí následne diagram, či sa používatelia správali podľa nášho očakávania alebo nie a zanalyzuje množstvo ďalších informácií.
Podľa týchto a ďalších testov si overíme, či bežní používatelia by náš web či aplikáciu používali tak, ako si myslíme, či budeme musieť pristúpiť k zmenám, ktoré budú rešpektovať práve užívateľov.
Vďaka všetkým týmto krokom budeme mať pripravenú ideálnu informačnú architektúru pre náš projekt.
V nasledujúcej lekcii, UX: Dojem rýchleho načítavania , sa budeme zaoberať technikami a radami, ktoré nám pomôžu navodiť dojem rýchleho načítavania aplikácie.
