Poslechněte si audio verzi tohoto článku
Jako standardní součást procesu UX vytvářejí designéři při tvorbě produktů informační architekturu. Informační architektura, která definuje všechny uličky a cesty, jimiž mohou uživatelé procházet aplikací nebo webem, je mnohem víc než jen mapa stránek, která ukazuje, která stránka kam vede.
Podobně jako stavební architekti používají plán ke konstrukci každé části domu, od fyzických konstrukcí až po složitější vnitřní prvky, jako je elektroinstalace a vodovod, informační architektura popisuje hierarchii, navigaci, funkce a interakce webu nebo aplikace. A stejně jako jsou plány pro architekta nejcennějším dokumentem, který může použít při stavbě budovy, může být informační architektura nejmocnějším nástrojem v arzenálu designéra.
Její vytvoření však není tak jednoduché, jako dát dohromady seznam funkcí a zmapovat jejich fungování – prozkoumejme tento proces.
Co je informační architektura a proč je důležitá?
Informační architektura (IA) je podobně jako plán vizuální znázornění infrastruktury, funkcí a hierarchie produktu. Úroveň detailů záleží na návrháři, takže IA může zahrnovat také navigaci, funkce a chování aplikace, obsah a toky. Neexistuje žádný stanovený limit pro velikost nebo tvar IA, nicméně by měla zahrnovat zobecněnou strukturu produktu, takže by ji měl být kdokoli (teoreticky) schopen přečíst a pochopit, jak produkt funguje.
Budeme často používat odkaz na blueprint, protože účel obou dokumentů je téměř totožný. Stejně jako plán poskytuje IA návrhářům (a také týmům zabývajícím se vývojem a konstrukcí výrobků) pohled na celý výrobek z ptačí perspektivy. Mít k dispozici jediný dokument, který poskytuje jednoduchou a srozumitelnou představu o tom, jak aplikace nebo webové stránky fungují, je nezbytné pro vývoj nových funkcí, aktualizaci stávajících a pro zjištění, co je možné s ohledem na stávající produkt.
Když máte k dispozici IA, je podstatně snazší přijímat klíčová rozhodnutí pro nové funkce a implementace, pochopit časový harmonogram změn produktu a sledovat chování uživatelů v rámci více procesů.
Ponořme se do základního videa, abychom viděli, jak se IA vytváří.
Jak navrhovat informační architekturu
Jako součást procesu UX se návrh IA řídí velmi podobnými vzorci jako vývojové diagramy: Přidejte tvary a spojte je organizovaně čarami do jednoho dokumentu. Výzva při vytváření IA spočívá v pochopení toho, jak vaše aplikace nebo web skutečně funguje z pohledu uživatele, a v tom, jak tyto informace uspořádat do čitelného a srozumitelného formátu.
Ve skutečnosti existují dva hlavní požadavky na konstrukci IA: uspořádání pomocí vizuální hierarchie (tj. hierarchie funkcí, vlastností a chování) a vytvoření legendy pro zobrazení různých typů funkcí, interakcí a toků. U standardního vývojového diagramu se tvary řídí specifickými požadavky (obdélníky jsou procesy, kosočtverce jsou rozhodovací body atd.); dodržení tohoto názvosloví však není podmínkou.
Jinými slovy, nejdůležitějšími faktory pro sestavení IA je, kde jsou jednotlivé součásti architektury umístěny (hierarchicky) a jak jsou označeny a zobrazeny.
Pochopení a zobrazení vizuální hierarchie
Nejnáročnějším aspektem tvorby nové informační architektury je téměř vždy její hierarchické sestavení. Častým omylem je, že IA musí být budována „shora dolů“. To je téměř vždy obtížnější, pokud se nejedná o existující produkt, jako například ve výše uvedeném videu.
Při budování IA od nuly, pokud se vaše webové stránky nebo aplikace neřídí standardním formátem, je zakreslení čehokoli po nejvyšší úrovni velmi obtížné. Je to jako chtít po mechanikovi, aby sestavil auto od shora dolů, a ne po částech. Každá část musí být předem zkonstruována s vlastním výzkumem, časem na návrh a vývoj. Totéž platí pro IA.
Zobrazení vizuální hierarchie je pro IA cenným přínosem nejen proto, že poskytuje čtenáři lepší kontext, ale také zobecňuje klíčové oblasti produktu. Pokud je nejvýznamnější funkcí vaší aplikace objednání jízdy (a la Uber nebo Lyft), které lze provést z domovské stránky, pak tato stránka bude mít nejvíce styčných bodů a největší hodnotu produktu. Totéž bude platit pro vizuální hierarchii.
Pro pochopení hierarchie se hodí mapy stránek, protože uspořádávají stránky číselně (například 1.0 Domů, 2.0 Platba, 2.1 Přidat způsob platby atd.). Nebo si vezměte příklad na obrázku níže pro webové stránky knihovny Dukeovy univerzity, kde je horní navigace nejen nahoře, ale také zvýrazněná, aby byla viditelná v celé aplikaci.
Hierarchie tvarů, barev a dalších vizuálních prvků
Kromě hierarchie dělá výše uvedená architektura dobře ještě jednu věc: Prostřednictvím jednoduché legendy a několika klíčových frází zobrazuje každý bod zapojení jedinečně podle potřeby. Legenda označuje typ stránky a obsahu a označuje variace mezi barvami tvarů. To je důležité, protože ačkoli Dukeův web vypadá poměrně jednoduše, IA jde pouze do tří úrovní. Každý žlutý obdélník označuje aplikaci, takže procesy v každém z těchto políček nejsou v tomto dokumentu zahrnuty!“
I bez těchto dostupných částí je struktura taková, že můžeme pochopit, jak se na webu pohybovat pouze pomocí IA. To skončí, jakmile se dostaneme k aplikaci v rámci webu – nemusí to tak být.
Následující IA je pro hru. Díky použití čtyř tvarů, žádné barvy a chytře umístěným útržkům textu je každá hlavní interakce srozumitelná i bez prototypů, a co je důležitější, pochopí ji každý, kdo na ní pracuje.
Tento model není dokonalý, ale přehledně uspořádává hierarchii aplikací a vymezuje, co uživatel buď vidí, nebo dělá v daném okamžiku.
Nejlepší nástroje informační architektury
Existuje spousta softwarových aplikací, které umožňují vytvářet IA, ale jen málo z nich je dostatečně jednoduchých a rychlých, aby to bylo příjemné. Nebo přinejmenším snadno ovladatelné.
Draw.io, použitý ve videu výše, je zcela zdarma pro osobní i profesionální použití a automaticky se připojuje k Disku Google. Má také integrace s Confluence a JIRA, které jsou placené. Draw.io je vynikající pro tvorbu vývojových diagramů, uživatelských toků a informační architektury a díky funkci Drive může na jednom dokumentu pracovat více lidí a vidět změny v přímém přenosu. K dispozici je také bezplatná offline verze.
Lucidchart je další skvělý nástroj, který poskytuje o něco lepší zkušenosti než Draw.io a má další výhody, jako jsou předpřipravené šablony, mnohem více integrací, mobilní aplikace (v App Store hodnocena 2,5 hvězdičkami) a podpora pro podniky.
Omnigraffle a Visio jsou dlouholeté stálice v oboru a výborně fungují při vytváření a udržování návrhu IA, i když Visio je pouze online (starší offline verze je pouze pro Windows), zatímco Omnigraffle je pouze pro Mac a vyžaduje samostatné nákupy pro verze pro MacOS a iOS. OmniGraffle má oproti hlavním konkurentům jednu výhodu v tom, že poskytuje automatizaci v jazycích JavaScript a AppleScript, což pro většinu návrhářů může být zbytečné, ale obvykle to ocení informační architekti na plný úvazek.
Všechny výše uvedené nástroje jsou vytvořeny pro rychlost a snadné používání, konkrétně kolem vývojových diagramů, které se řídí téměř totožnými principy jako informační architektura. Další aplikace jako Balsamiq, MindMeister, MindManager nebo XMind nabízejí chování v podobném stylu, ale jsou vytvořeny pro jiné hlavní účely, jako je prototypování nebo myšlenkové mapování.
Nejlepší postupy informační architektury
Přestože existuje jen málo definovaných pravidel pro to, co je informační architektura, při procházení procesem zvažte následující:
Nezaměřujte se na hierarchii, zaměřte se na strukturu
Hierarchie je nastavitelná. Domovská stránka bude vždy domovskou stránkou, ale kam vede, jak se uživatelé na tato místa dostanou a co všechno je mezi nimi a za nimi, se určí později.
Všechny procesy by měly být logické
Přestože IA v procesu UX slouží k interakci s uživateli, každý krok na cestě musí dávat smysl. Registrační obrazovky by neměly vést k nastavení, funkce fotoaparátu by neměla přeskočit na zobrazení mapy… seznam by mohl pokračovat.
Pamatujte na proces UX
Častou chybou je, že se IA vytváří jen tak, bez zdrojů, výzkumu nebo jiných prostředků či práce. To je jako říct autorovi, aby napsal knihu bez osnovy, nebo programátorovi, aby nakódoval aplikaci bez prototypů.
Jste kartograf
Kartografové berou v úvahu vše, co se týká mapy, od pohoří po státní hranice. Stejně jako tvůrci map i designéři určují, co bude součástí návrhu IA. Jednotlivé stránky, specifické chování uživatelů, kontext rozhodovacích bodů… a tak dále.
Kartograf nakonec na základě potřeb uživatelů rozhodne, co se na mapu dostane. Totéž platí pro designéry, takže konstruují IA pro koncového uživatele, konkrétně pro týmy vývoje produktu a designu.
Informační architektura se neustále mění a vyvíjí
Abychom si to ještě jednou zopakovali, všechny IA jsou konstruovány pro změny. Produkty se vyvíjejí, návrhy se mění, uživatelé se přizpůsobují a tento cyklus pokračuje stále dokola. Neberte to příliš vážně a vězte, že vždy bude co zlepšovat. Nesnažte se o dokonalost; vytvořte jednoduchou, přizpůsobivou architekturu informací.
Moje informační architektura je hotová… Co teď?
Běžně se říká, že jakákoli návrhářská práce není nikdy skutečně hotová, a to je určitě případ informační architektury. Rostou, zmenšují se a mění se stejně jako naše produkty. Na rozdíl od projektu budovy se IA bude vždy vyvíjet na základě čehokoli, od potřeb uživatelů až po nové funkce nebo přepracování produktu. Velká část struktury může zůstat stejná a zajistit konzistenci mezi verzemi, aby uživatelé nebyli zmateni.
A to je dobře. Vědomí, že IA je tekutý dokument – takový, který se pravděpodobně mění každý týden a někdy dokonce denně -, je účinný způsob, jak udržovat celkovou strukturu aplikace nebo webu, aniž byste museli sahat do kódu nebo vytvářet nové prototypy. Čím lépe bude celý tým vývojářů produktu znát IA, tím rychleji budou všichni vědět, co je a co není možné a jak vážná je jakákoli domnělá „snadná práce“.
Což nás přivádí ke skutečné kráse informační architektury: Neexistuje žádný předem definovaný výchozí bod. Zatímco tradiční proces návrhu UX diktuje, že IA se vytváří po dokončení dostatečného množství uživatelských toků; vyzbrojena množstvím uživatelských a konkurenčních průzkumů může být také první věcí, kterou uděláte… nebo poslední. Proces prototypování často přináší informace o tom, jak by mělo probíhat určité chování nebo akce, které by bylo těžké si představit z logického nebo nepředstavitelného IA.
Jako neustále se vyvíjející praxe je návrh IA uměním stejně jako dovedností, což je částečně důvod, proč velké korporace mají pozice informačních architektů. Tito návrháři jsou strážci masivních systémů a díky svému porozumění růstu produktů v čase pomáhají řídit produktové, návrhářské a inženýrské týmy, aby v průběhu let činily správná rozhodnutí. Takový rozsah organizace není pro všechny návrháře, ale každý návrhář může vytvořit jednoduchou a srozumitelnou informační architekturu.
– – –
Doporučená literatura o informační architektuře
IA pro web a nejen pro něj
Jak se vyznat v jakémkoli nepořádku: Informační architektura pro každého
Základy informační architektury
Rozdíl mezi informační architekturou a UX designem
.