Postup při tvorbě informační architektury webové prezentace

Článek přináší přehled základních principů při tvorbě informační architektury webové prezentace. Projekt tvorby webu se skládá z několika fází, v této práci se autorka věnuje teoretickým postupům, jak definovat projekt a dále se zabývá vývojem struktury stránek (jejich obsahu, stránkám jako takovým či uživateli).

Poznámka redakce: jedná se o výtah z bakalářské diplomové práce: FILKUKOVÁ, Anna. Postup při tvorbě informační architektury webové prezentace. Brno : Masarykova univerzita, Filozofická fakulta, Ústav české literatury a knihovnictví, 2010. 76 s. Vedoucí bakalářské diplomové práce Mgr. Robert Němec.

Úvod

Jaká je role informační architektury (dále jen IA) v samotném procesu tvorby celé webové prezentace? Pro relevantní odpověď je potřeba IA uvést do souvislosti v rámci celého projektu tvorby webu. Takový projekt se skládá z několika fází a informační architekt se na některých z nich ve větší nebo menší míře podílí. Tyto fáze prakticky shrnují autoři knihy Web ReDesign 2.0: Workflow that works:[1]

  1. Definování projektu - Sběr veškerých informací týkajících se projektu a nastavení výstupu.
  2. Vývoj struktury stránek - Informační architektura stránek a problematika uživatele.
  3. Design vizuálního rozhraní - Vzhled webu.
  4. Budování & integrace - Programování a testování.
  5. Spuštění & ostatní - Předání hotových stránek klientovi, spuštění a údržba stránek.

V následujícím obsahu se budeme zabývat prvními dvěma fázemi, jelikož jsou s IA úzce spjaty. Na konci každé následující kapitoly se vždy nachází souhrnný obrazový příklad dané fáze. Podtržený text v obrázku znamená aktivní účast informačního architekta v této části. Tyto podtržené části jsou hlavním předmětem popisu.

1 Definování projektu

Definování projektu zahrnuje sběr informací a znalost obsahu. Obecně to znamená vymezení cílů stránek, jejich kultury, rozpočtu, požadavků na technologie a určení součástí produkčního týmu.[2] Při definování projektu je předpokládaná znalost budoucího obsahu a pro IA platí pravidlo stejně jako pro všechny ostatní disciplíny, že čím více o dané problematice víme, tím lépe se v ní orientujeme.

1.1 Sběr informací

Definice projektu zahrnuje sběr veškerých dostupných informací, které se ho týkají. Zadavatel nebo klient by měl poskytnout maximum materiálů o sobě, čímž zajistí snazší pochopení hlavních cílů a vizí.

1.2 Pochopení publika

Nemalou roli hraje analýza publika[3]. Ta může být usnadněna díky datům od klienta a pomáhá vyjasnit, kdo jsou návštěvníci webu, o co mají zájem, jaké jsou jejich technické schopnosti atd. Pochopení publika souvisí také s tvorbou uživatelských scénářů.

1.3 Analýza klientova prostředí

Kromě sběru informací a poskytnutí materiálů od klienta je zapotřebí se co nejlépe seznámit s prostředím, ve kterém klientova firma funguje. Znalost klientova prostředí umožňuje mnohem snáze pochopit některé z jeho požadavků. V případě rozsáhlých firem je s oblibou využívána analýza firemního prostředí i za pomocí rozhovorů s různými zaměstnanci na různých pozicích, zejména pak těmi, kteří mají na starosti aktivní komunikaci se zákazníky. Na místě je také využití competitive intelligence, SWOT analýza a další sběr zajímavých dat, které by mohly být při tvorbě WWW využity. Informační architekt využívá veškerých dostupných zajímavých zdrojů pro svou práci.

1.4 Rozvíjení funkčních požadavků

Některé požadavky klienta mohou být na úkor použitelnosti webu. Proto je nezbytné neustále udržovat aktivní kontakt s klientem a argumentovat, proč není vhodné některé z jeho požadavků splnit, popř. proč je naopak potřeba některé věci implementovat. Je zapotřebí vycházet z toho, že klient je zákazník, jenž pravděpodobně nedisponuje kvalitními znalostmi týkajícími se tvorby webu. Rozvíjení funkčních požadavků znamená hledání ideálního východiska pro všechny strany a netýká se pouze fáze definování projektu, ale i momentů kdy jsou již stránky modelovány, testovány atp. Informační architekt je v prvních dvou hlavních fázích (definice projektu a vývoj struktury stránek) klíčovým předělem mezi klientem a specialisty poskytujícími technické zázemí, který nastoluje základní rovnováhu mezi oběma stranami.

1.5 Stanovení globálních cílů

Stanovení globálních cílů vymezuje produkčnímu týmu hlavní úkoly, které je potřeba splnit.

Definování projektu[4]

2 Vypracování a vývoj struktury stránek

Jedná se o fázi, na které se informační architekt nejvíce podílí, dalo by se říct, že je zejména v jeho režii. Tato fáze zahrnuje systém organizování a popisování informací a to takovým způsobem, aby je uživatelé mohli snadno a rychle najít. Obsah je přitom organizován ze tří perspektiv - hlediska celého webu, stránky a uživatele.

2.1 Obsah

2.1.1 Řešení obsahu

Tato část se týká primární organizace celého obsahu stránek. Vychází z předchozí analýzy, jež určuje, co na stránkách vzhledem k jejich účelu nesmí chybět. Pod adresování obsahu spadá třídění a tvorba seznamu hlavních pojmů, které jsou nakonec členěny do organizačních schémat a struktur. Díky nim vzniká nástin nového obsahu.

Obsah lze organizovat dvojím způsobem a to vytvořením organizačních schémat nebo struktur.

2.1.1.1 Organizační schémata

Skrze organizační schémata (dále jako OS) vymezujeme přesné pojmy, které se budou na stránkách nacházet a jsou východiskem pro další práci. Stavba schémat je vhodná zejména pro web, který se skládá převážně z homogenních prvků. Je v zásadě jednoduchá a usnadňuje vyhledávání v případě, že uživatel zná přesně svůj dotaz (řazení schémat podle chronologie, abecedy a geografie).

Výstižným příkladem přesného OS jsou Zlaté Stránky. Existují však také nepřesná OS, která řeší veškerá úskalí správné organizace. Může se jednat například o organizaci podle:

1. Tématu - Jedná se například o katalogy s výrobky, encyklopedie.

2. Úkolů - Příkazové funkce jako "přihlásit se, hledat, registrovat, koupit" pro uživatele. Obvykle fungují v souvislosti s navigačními systémy (užitková navigace).

3. Uživatelů - rozčleňuje návštěvníky webu s ohledem na pohlaví, věk a jiné vlastnosti uživatele.

4. Oblíbenosti - za pomocí statistik a vyhledání seznamů oblíbených výrazů, které odpovídají obsahu stránek.

5. Hybridních schémat - Kombinace hned několika schémat, může vést k překombinování, což má v důsledku negativní dopad.

2.1.1.2 Organizační struktura

Na základě vymezených pojmů vytváříme základní organizační strukturu dat (dále jako OST). V současnosti jsou stanoveny tři základní typy OST:

1. Hierarchická - Hierarchická OST člení pojmy na nadřazené a podřazené. V praxi to vypadá obvykle tak, že se uživatel dostává od obecnějšího ke konkrétnějšímu.

2. Databázová - Databázová verze OST naopak staví svá data do rovnocenného modelu (např. seznam výrobků s určitými parametry).

3. Hypertextová - Hypertextová verze OST volně prolíná jednotlivé informace, což umožňuje rychlý pohyb bez přemýšlení, ale následkem toho může být ztráta kontextu až „zabloudění" na stránkách.

Na webu není stanovena jednoznačná OST, ale obvykle se tu vyskytují a prolínají všechny její typy.

Hierarchická OST je počátkem modelování strukturální navigace webu. Skrze základní organizaci dat vzniká první hrubý nástin, nebo lépe řečeno podklad pro tvorbu mapy webu. Předchází tak zmíněnou strukturální navigaci, která pak dále umožňuje vytvářet a rozvíjet vzájemné souvislosti mezi jednotlivými pojmy, což je typický aspekt tezauru.

Dává také prostor k doplňování dalších funkcí, které obvykle spadají pod navigaci užitkovou.

Jednoduchý příklad hierarchické organizační struktury[5]

Databázová OST přináší množství metadatových popisů na základě seznamu informací, které jsou jednotně indexovány do určité podoby jako výsledek vyhledávání. V
souvislosti s webem se používá zejména pro administraci rozsáhlých dat, která lze podle daných parametrů sjednotit.

Vizitky jako příklad jednoduché databáze[6]

Hypertextová OST přináší vědomí provázanosti jednotlivých stránek (asociativní navigace).

Síť hypertextových propojení[7]

Je zřejmé, že velká pozornost při adresování obsahu musí být věnována systému řízených slovníků, kterým jsme se zabývali v předchozích kapitolách. Aplikace řízených slovníků a metadat v adresování obsahu je velmi zásadní a zajišťuje základní pevný kámen pro celou stavbu webu. Správnost členění jednotlivých pojmů z uživatelské perspektivy pak lze kontrolovat pomocí metody card-sortingu[8].

2.1.2 Audit stávajícího obsahu

V případě, že jsou komplexně předělávány staré stránky na nové, je zde výhoda existujícího obsahu, závisí ovšem na jeho kvalitě. Přesto mohou mnohé pojmy na stránce pomoci k modelování nových OS a OST. Audit stávajícího obsahu znamená detailní analýzu a vyhodnocení stávajícího obsahu stránek včetně zvážení, zda je tento obsah použitelný i pro novou verzi stránek:

Model auditu obsahu[9]

2.1.3 Nový přehled obsahu

Vytvoření přehledu obsahu stránek poskytuje definitivní ucelený náhled na to, co budou stránky obsahovat a v jaké míře. Vyjasňuje také, kde je potřeba obsah dopracovat za pomoci specialistů, protože tvorba obsahu webu nezahrnuje pouze organizaci, třídění a popisování informací. IA probíhá z velké části na pozadí stránek. V interface toho, co vnímá uživatel, jsou samotné texty, odstavce a jiné pokyny, jak se na stránkách pohybovat. Informační architekt obvykle není tvůrce obchodně úspěšných, reklamních a jiných textů. Na tuto činnost existují specializovaní členové týmu (autoři, copywrighteři), kteří se touto činností zabývají.[10]

2.1.4 Dodací plán obsahu

Poté co byl proveden audit stávajícího obsahu a vytvořen seznam hlavních pojmů, které pak mohly být dále organizačně rozčleněny do nového přehledu obsahu, nastává vhodný okamžik pro vymodelování plánu pro tvorbu nového obsahu.

Veškerý setříděný obsah je v této fázi vyčleněn do částí, na kterých je potřeba jednotlivě pracovat. Plán určuje časový rozsah pro tyto dílčí prvky (obvykle jednotlivé webové stránky), upozorňuje na základě analýzy na věci, jež je potřeba splnit, vyjasňuje, nakolik je již obsah zpracován, kolik toho ještě zbývá a zahrnuje další poznámky týkající se tvorby:

Náčrt tabulky dodacího plánu obsahu[11]

2.2 Web

Přestože již máme za sebou rozsáhlou analýzu obsahu, jeho vymezení a nakonec i dodací plán, stále nemáme k dispozici nový obecný pohled na celkovou funkčnost webu. Ten nám umožní realizace následujících fází.

2.2.1 Mapování webu

Dodací plán může být dobrou pomůckou pro nadcházející fázi týkající se mapování webu. Tato část zahrnuje tvorbu základního schématu veškerých stránek včetně jejích podsekcí, hlavních odkazů atp. Na tvorbě této fáze by se měli bez výjimky podílet všichni členové týmu. Schematická mapa webu může být tvořena dvojím způsobem - horizontálně nebo vertikálně.

Náhled na vertikální schéma mapy webu[12]

Z obrázku je patrné, že nám toto mapování webu demonstruje strukturální navigaci. Zobrazený příklad schematického mapování webu může vést k dojmu, že organizace obsahu webu je bezprostředně srozumitelná. Jedná se však o dlouhodobý proces, který může (a pravděpodobně bude) v průběhu prodělávat různé změny. Tyto změny by však už neměly narušit základní stanovenou strukturu. Čím větší je množství obsahu, tím náročnější je organizace jednotlivých stránek, korektní přiřazení podsekcí včetně jejich popisování a zřetelných hypertextových a jiných propojení na stránkách.

Čím je obsah na stránkách dynamičtější, tím více je potřeba znázornit, jak data protékají. Součástí mapování webu je tedy vývojový diagram, známější jako „flowchart". Ten obecně definuje funkční vztahy mezi jednotlivými položkami:

Příklad flowchart diagramu společnosti Parents&teachers[13]

Způsobů tvorby flowchartů je velké množství, stejně jako bezpočet úrovní od jednoduchých základních diagramů po podrobné příkazy.

2.2.2 Stávající organizace webu

V případě, že předěláváme staré stránky, je vhodné vytvořit také diagram starého webu. Na základě analýzy obsahu a komunikace s klientem by mělo být zřejmé, které části považuje za důležité anebo naopak, které jsou naprosto bezpředmětné. Výsledné schéma může poskytnout zajímavé podněty, na co se více zaměřit, popř. čemu se vyhýbat.

2.2.3 Nastavení zásad pojmenování

Zajištění zásad pojmenování složek během strukturování celého webu pomáhá nejen organizovat jeho hlavní části, ale poskytuje opěrné konzistentní body pro další práci ostatních členů v týmu.

Na základě povahy klienta, týmu a webu informační architekt určuje co nejsrozumitelnější způsob pojmenovávání hlavních prvků, které jsou při tvorbě použity. Tato pojmenování později usnadňují práci vývojářům stránek, kteří tak nejsou nuceni vytvářet své vlastní specifické až nelogické názvy pro složky, čímž by mohli některé další procesy v rámci tvorby webu zkomplikovat. V současnosti se používají dvě hlavní zásady pojmenování[14]:

  1. Organizační/číselné pojmenování - aplikace standardního číselného pojmenování na veškerý obsah, ať už se jedná o textové složky, obrázky nebo jiné soubory. Číselné řazení dat usnadňuje snadnou identifikaci dokumentu a toho, kde se nachází. Číselné pojmenování připomíná klasifikační schéma, kterým jsme se zabývali v rámci řízených slovníků.
  2. HTML názvy - nastavení jednotného HTML názvu pro danou položku.

Obvykle se tyto metody překrývají, díky číselnému pojmenování s HTML vzniká přehledná dokumentace.[15] Modelace nám může připomínat tvorbu řízeného slovníku včetně tezauru s použitím klasifikačního schématu:

Ukázka - organizační/číselné a HTML názvy[16]

2.3 Stránka

Nyní když je obsah organizovaný, seřazený a pojmenovaný, lze přejít k návrhu jednotlivých stránek. Úprava jednotlivých stránek řeší tamní rozvržení pomocí tzv. drátěných modelů neboli wireframes, dále je navržena navigace a popisování/štítkování.

2.3.1 Wireframing

Wireframy jsou základem pro vizuální rozvržení stránky a HTML tvorbu. Nejsou zde podstatné barvy nebo tvary tlačítek. Jedná se o jakési skeče, které poskytují hrubý nástin navigace, rozložení stránky, klíčových nadpisů a případně v jakých místech by měla být s hojností využívána grafika a naopak.

Tvorba těchto modelů může spočívat od jednoduchého rozvržení po komplexní soubor všech funkcí, jež se na stránkách mají nacházet a neměla by se vztahovat pouze k hlavním stránkám, ale k veškerému obsahu, který je potřeba nějakým způsobem na stránkách vyčlenit. Je potřeba mít na paměti, že se jedná o rozložení informací na stránce, nikoliv o design.

 Jednoduchý návrh pro rozvržení domovské stránky

Při tvorbě wireframů je vhodné držet se postupu od jednoduššího ke složitějšímu. Prvotní jednoduché rozložení postupně specifikujeme pomocí vkládání přesných informací, které máme k dispozici díky veškerým dosavadním krokům. Členění veškerých informací na stránce je stanoveno na základě dosavadního mapování webu a jeho nastavených zásad pojmenování. Prvotní rozložení stránek vychází z toho, jakým způsobem jsou stránky zaměřeny. Jsou to stránky zaměřené na prodej produktů? Nebo stránky, které mají pouze informativní charakter? Nebo stránky, které v digitálním prostředí reprezentují společnost? Vše je pak koncipováno tak, aby byla zachována organizační struktura dat a síť hypertextových propojení.

Nyní si můžeme ve velmi zjednodušené podobě ukázat bližší specifikaci wireframů a to za pomocí aplikace dat z obrázku 27 do obrázku 28, čímž vzniká nová forma náhledu na stránku:

Blíže specifikovaný nákres pro stránku O nás - kontaktní informace

Z obrázku lze pochopit, že hlavní/globální navigace je statická a zachovává tak jednotnost stránek. Levý panel slouží jako lokální nebo asociativní navigace a mění se v závislosti na hlavní navigaci. Užitková navigace v pravém horním rohu vede uživatele k akci stejně jako pole pro vyhledávání. Pravý panel pod názvem „Již brzy" je samostatný, protože mu byla již v mapování určena samostatná sekce, i když by mohl spadat například pod „Novinky".[17]

Kelly Goto a Emily Cotler stanovili několik hlavních prvků, které by měly spadat pod tvorbu wireframů[18]:

  • Obrázky/ilustrace/animace - položky které nejsou vytvořeny za pomocí HTML.
  • Obsah - linie hlavního obsahu popř. aktuálního textu (je-li kdispozici).
  • Složená navigace - navigační menu shlavními pojmy, které se zobrazují na každé stránce.
  • Funkčnost - popis základní funkce stránek.
  • Hlavní odkazy - (navržení a navigace důležitých odkazů).
  • Vedlejší odkazy - (ostatní odkazy).
  • (Média - je-li to vhodné).
  • Cílová velikost okna - stanovená velikost jednotlivých elementů na stránce včetně velikosti stránky samotné.
  • Dokumentace v záhlaví/zápatí - název projektu, stránek, číslo verze, datum, autor, copyright.

2.3.1.1 Domovské stránky

Na domovské stránky je kladen obzvláště velký důraz, protože prezentují celý web. Pokud jsou stránky obzvláště rozsáhlé, je doporučeno udělat wireframing alespoň domovských stránek a dalších hlavních stránek webu včetně těch, které mají specifické vlastnosti anebo se vztahují k uživatelovým klíčovým cestám (např. proces rezervace letenky). Poukazuji v této souvislosti na několik nejdůležitějších doporučení, z oblasti designu od Jakoba Nielsena, experta na použitelnost webu:

  1. Doba stahování - Nejvýše 10 sekund při obvyklé rychlosti připojení vašich zákazníků. V případě modemových uživatelů to znamená velikost souboru méně než 50 kB. Čím rychleji, tím lépe.[19]
  2. Rámce - Ne.
  3. Umístění loga - Vlevo nahoře.
  4. Vyhledávání - použít vyhledávání. Na domovské stránce. Pomocí políčka.
  5. Umístění vyhledávání - Horní část stránky, preferován je pravý nebo levý roh.
  6. Barva vyhledávacího políčka - Bílá.
  7. Úvodní stránka - Ne.
  8. O firmě - Vždy uveďte tuto informaci.[20]
  9. Ochrana soukromí - Uveďte informace o ochraně soukromí, pokud web shromažďuje data od uživatelů; odkaz na ně uveďte na domovské stránce.
  10. Automatické přehrávání hudby - Ne.
  11. Pevná velikost hlavního textu - Ne. Vždy použijte alternativní rozměry, které uživatelům umožňují text zvětšit či zmenšit podle potřeby.
  12. Barvy odkazů, různé pro navštívené a nenavštívené odkazy - Ano. Nenavštívené odkazy by měly mít co nejsytější barvu. Navštívené odkazy by měly mít méně sytou nebo méně výraznou barvu, ale ne světle šedou.[21]

Důvod, proč jsem uvedla tato doporučení, je úzká spojitost některých bodů s IA. Informační architekt pomocí wireframů a použitých poznámek předává podklady pro práci grafikovi a programátorovi, jež by měli respektovat sled jednotlivých informací a dávat jim výslednou podobu.

2.3.2 Řešení navigace

Hlavní navigace webu skrze své rozdělení do sekce strukturální, asociativní a užitkové určuje budoucí rozložení stránek. Díky strukturální navigaci je dostupný přehled o veškerých úrovních stránek, což bývá často opomíjeno.[22] Asociativní navigace zase spojuje tematicky, či jinak příbuzné stránky a užitková navigace navádí uživatele k akci. To však stále neřeší problematiku rozložení navigace na stránce a její použitelnost. Tím se zabývá globální, lokální a kontextová navigace.

Wodtke a Govella jako východisko navrhují tři základní otázky pro tvorbu globální a lokální navigace, kterými se pokouší o optimalizaci do uživatelského rozhraní: [23]

  1. Jak je obsah webu organizovaný?

Kompletní organizace obsahu je vyřešena ve fázi vypracování struktury stránek. Obecný pohled na tuto strukturu vyjasňuje vizi toho, co od nás uživatel může očekávat. Úkolem IA je stanovit, kde může požadovanou informaci čekat a jak se k ní za pomoci složené navigace dostane. Výsledek takového úkolu nemusí být totožný s dosavadní organizací webu (viz další otázka).

  1. Co uživatelé na stránkách chtějí dělat?

Navigace v uživatelském rozhraní má za úkol uživateli pomoci najít požadovanou informaci, ať už se jedná o dlouhodobého návštěvníka, nebo někoho, kdo na stránky vstoupil poprvé. Stránky by měly vyhovět oběma skupinám - „nováčkovi" srozumitelně ukázat co zajímavého stránky nabízí a stálému návštěvníkovi dlouhodobě efektivně zprostředkovávat to, co na stránkách obvykle používá. Přestože chování jednotlivých uživatelů nelze generalizovat, lze z jejich chování vysledovat, co je pro ně na stránkách důležité. Navzdory perfektně zorganizovanému obsahu mohou uživatelé preferovat jiný způsob navigace než ten, který mají k dispozici. To vede k závěru, že se navigace na stránce může ve výsledku lišit od organizace obsahu, protože je v této fázi optimalizovaná pro uživatelské rozhraní.

  1. Co chcete, aby uživatelé na stránkách dělali?

Tato otázka velmi ovlivňuje rozložení a využití navigace. Existence webových stránek má obvykle určitý záměr. Tento záměr však musí být správně nastavený prostřednictvím plnění uživatelových potřeb. Umění dobře prodat spočívá ve schopnosti umět nabídnout a nasměrovat. Navigace uživateli nejen pomáhá získat požadovanou informaci (produkt), ale i směruje uživatele k tomu, aby dělali to, co je po nich prostřednictvím navigace požadováno.

Informační architekt obvykle věnuje hodně času poznávání prostředí, ve kterém stránky fungují. Tvorba navigace není pouze v jeho režii. Je konzultována s ostatními lidmi, ať už se jedná o vedoucího projektu nebo ostatní členy v týmu, experty v marketingu nebo potenciálního zákazníka.

Rozložení navigace by mělo být maximálně intuitivní, logicky uspořádané a tím i srozumitelné a přehledné. Eliminuje se tím pravděpodobnost, že se uživatel na stránkách ztratí.[24] Použití ostatních navigačních prvků (doplňková navigace) závisí na povaze stránek. Neméně důležitou součástí navigace je její perzistence. Při procházení webu by se navigace vzhledem k zajištění přehlednosti neměla výrazně měnit.

2.3.3 Popisování a štítkování

Kvalitní systémy pojmenování jasně vysvětlují obsah webu a vyjadřují charakter společnosti. Způsob, jakým jsou pojmenovány jednotlivé odkazy, názvy nadpisů, ikony, tlačítka a jiné navigační elementy, vypovídá o vlastnostech a také záměru stránek. K optimálnímu vytváření popisků je doporučováno využívat různých prostředků včetně těch, které zahrnují tvorbu metadat a řízených slovníků.

Pět základních druhů textu pro popisování:

  1. Kontextové odkazy - Vytváření kontextových odkazů souvisí úzce s otázkou „Jakou informaci uživatel očekává při kliknutí na odkaz?"[25] Úkolem informačního architekta je reprezentativně označit odkaz, který směřuje k požadované informaci. Tvorba odkazů není pouze výsadou informačního architekta, ale mnohdy za ni nese odpovědnost autor obsahu. Informační architekt může jeho práci svými návrhy korigovat.
  2. Nadpisy - Blíže specifikují obsah, který bude následovat. Uživateli tak objasňují, zda jim následující text poskytne informaci, kterou hledají. Účelem nadpisů je:

a. Zaujmout uživatele.

b. Získání všeobecného přehledu, co je na stránce.

c. Nastavení rámce pro každý oddíl (=> větší přehlednost).

d. Pochopení smyslu toho, co následuje.

e. Usnadnění prohlížení celého textu tak, aby usnadnil nalezitelnost sekce, kterou uživatel potřebuje.

f. Oddělení jednotlivých částí, vytvoření dojmu prostornosti.

g. Informace působí méně hutně a tím pádem je lépe čitelná.[26]

  1. Volby v navigačním systému - Při popisování navigačního systému je v této části nejdůležitější zachovat konzistenci. Názvy polí navigačního systému by se neměly v průběhu měnit, stránky by mohly jinak působit chaoticky a nepřehledně.[27]
  2. Termíny pro indexování - Jedná se o tvorbu metadat, která pak usnadňují vyhledávání. Zahrnuje také tvorbu řízených slovníků, tezauru.
  3. Ikony - Vizuální informace mnohdy představují více než text a zvyšují estetický dojem stránek. Některé z nich se na webu již běžně používají a jsou uživateli dobře zažité. Jedná se například o ikonu nákupního košíku nebo lupy. V jiných případech je při použití ikon zapotřebí postupovat obezřetně, mají-li správně plnit svůj význam. Na vybraných stránkách je použití obrázkových symbolů mnohdy nezbytné. V takovém případě se používají popisky objektu, které vystihují název ikony.[28]

    2.4 Uživatel

    Pojem uživatel je rozsáhlý a souvisí s mnoha aspekty, ať už se jedná o analýzu cílové skupiny, vytváření tzv. person[29], uživatelských scénářů nebo testování použitelnosti. Pojem se vztahuje zejména k použitelnosti webu a jejímu testování. Samotné testování je již pouhým ověřováním kvality vytvořených stránek a nakolik web plní svůj účel. V této kapitole se budeme ve stručnosti zabývat tím, co předchází uživatelskému testování.

    2.4.1 Definice klíčových cest uživatele

    Díky užitkové navigaci jsou specifikovány veškeré „aktivní prvky" stránky, které vybízí uživatele k vybrané činnosti. Aktivní prvek na stránce zjednodušeně znamená posun uživatele od klikání myší ke psaní na klávesnici. Může se jednat o přihlášení na účet, registraci na stránce, ale také vyhledávání a jednoduché vkládání komentářů.

    Jak nejlépe rozložit tyto „aktivní prvky" na stránce? Jak bude vypadat průběh vyplňování formuláře, které bude uživatel vyplňovat nebo jaké budou možnosti vkládání komentářů/diskusních příspěvků? A zejména kam ve výsledku povede tato aktivita uživatele? Definice klíčových cest uživatele samozřejmě závisí na charakteru stránek.[30] Jejím hlavním účelem je objasnit postup uživatele při dané činnosti. Cesta je navržena pomocí wireframů.[31]

    Hlavním důvodem, proč je vhodné směr uživatelových úkonů zakreslit do wireframů, je přesná specifikace jeho kroků a provázanosti jednotlivých stránek mezi sebou. Tento popis je ve výsledku hodnotným podkladem jak pro grafika, tak pro programátora a zejména pak pomáhá optimalizovat budoucí stránky ve prospěch uživatele.[32]

    Při definování klíčových cest je veškerý proces konzultován s ostatními experty, protože některé vyžadované prvky nemusí být proveditelné, nebo mohou být zbytečně náročné na funkčnost atp. Kelly Goto a Emily Cotler definují dva typy uživatelových cest:

    1. Funkční cesty - zahrnují specifika dopředu definované za pomoci technického týmu[33] (nákupní košík, získávání dat, přihlášení s heslem, vyhledávače). V tomto ohledu se více angažuje technický tým.

    2. Nefunkční (nezávislé) cesty - nejsou závislé na technických požadavcích, princip je jednodušší (např. kontaktování společnosti, vyhledávání sídla obchodu atp.).

    V praxi jsou obvykle definovány zejména funkční cesty vzhledem k technickým požadavkům a náročnosti. Funkční cesty navíc mohou kromě technických požadavků obsahovat nezávislé fáze, které mají charakter nefunkční cesty.

    2.4.2 Vývoj jednoduchých HTML náhledů

    Vývoj jednoduchých HTML náhledů v této fázi znamená konverzi[34] dosavadních vytvořených wireframů do HTML. Tento stručný náhled pak umožňuje první přímou kontrolu funkčnosti navigace, odkazování a obsahu. Vzhledem k omezenému rozpočtu a času nepatří tato část mezi klíčové. HTML náhledy slouží jak pro kontrolu dosavadní práce, tak pro další nadcházející práci, která je tentokrát v režii ostatních členů v produkčním týmu.

    Wireframy a HTML náhledy jsou obrazovou demonstrací a výsledkem činnosti, která byla v rámci IA provedena a jsou spolu s vytvořenými dokumentacemi a diagramy hlavním podkladem pro další práci.

    2.4.3 Tvorba uživatelských scénářů

    Jedná se o část, která uzavírá hlavní fázi týkající se procesu tvorby IA webu. Tato činnost již není předmětem IA, souvisí však s touto fází proto, že přináší nové podněty o tom, jak budou stránky v nastávající fázi dále modelovány (design vizuálního rozhraní).

    Uživatelský scénář je souhrn typických aktivit, které uživatelé vykonávají na daném webu. Vzniká na základě analýzy cílové skupiny a jejích typických charakteristik. Tato analýza zahrnuje tvorbu klíčových slov a frází, které jsou pro tuto skupinu typické. Dále jsou zjišťovány její kulturní a sociální faktory, hodnoty a počítačová gramotnost. Na tvorbě scénářů se podílí celý produkční tým. Scénáře jsou čím dál více spojovány s personami obsahujícími nejen typické vlastnosti cílové skupiny, ale také jiné charakteristiky, jako jsou různé zdravotní vady, špatná dostupnost, pomalé připojení internetu atp.

    Vývoj struktury stránek[35]

     

    Zdroje


    [1] KELLY, Goto; EMILY, Cotler. Web ReDesign 2.0: Workflow that works. 2 edition. Indianapolis: Peachpit Press, 2004. 296 s. ISBN 0735714339. (dále citováno jako Web Redesign 2.0).

    [2] Viz kontext na s. 5-6.

    [3] Tato oblast je více specifikována v kapitole o uživateli na s. 55-61.

    [4] Web Redesign 2.0, s. 18.

    [5] Information architecture for the WWW, s. 66.

    [6] Information architecture for the WWW, s. 70.

    [7] Information architecture for the WWW, s. 73.

    [8] "Card-Sorting (pořádání karet) je jednoduchá technika, která umožňuje zkoumat, jakou kategorizaci položek uživatelé preferují. (...) Testeři jsou požádáni, aby smysluplně seřadili přidělené kartičky do kategorií a vytvořené kategorie pojmenovali, pokud již nejsou předem určeny. Výsledek testu přináší infromace o problémových položkách, které je obtížné zařadit a vyhledat, preferované terminologii, o vyhovující kategorizaci přímo od uživatelů a tipy pro strukturování webu."

    LICHNOVSKÁ, Pavla; KARBEROVÁ, Eva. Testování a hodnocení [online]. 2009/2010 [cit. 2010-05-02]. Card-sorting. Dostupné z WWW: <http://human-computer-interaction.webnode.cz/testovani-a-hodnoceni-rozhr....

    [9] Web Redesign 2.0, s. 93.

    [10] Práce těchto specialistů je však korigována i za pomoci informačního architekta.

    [11] Model vychází z knihy o ReDesignu. Web Redesign 2.0, s. 96.

    [12] Vytvořeno podle http://iac.dtic.mil/images/site_map.jpg.

    [13] Účelem tohoto diagramu na stránkách Parentsandteachers.net je objasnit uživatelům stránek funkce jednotlivých položek, popř. dává jednoduché instrukce, jak s danou položkou pracovat.

    Původní obrázek na https://parentsandteachers.net/help/flowchart_sitemap.png.

    [14] Web Redesign 2.0, s. 103.

    [15] Viz obrázek 24 - Náčrt tabulky dodacího plánu obsahu, s. 44. Jedná se o kolonku ID, kde každá položka má svůj číselný identifikátor (Úvod: 0.0, Novinky: 1.0...). Kromě toho je zde i HTML pojmenování (Úvod: Index.html, Novinky: news.html...).

    [16] Web ReDesign 2.0, s. 105.

    [17] Účelem obou předchozích obrázků je pouze jednoduchým způsobem demonstrovat princip wireframů.

    [18] Web ReDesign 2.0, s. 110.

    [19] Publikace byla vydána roku 2005, za tu dobu již došlo k posunu rychlosti připojení, přesto je toto pravidlo stále aktuální.

    [20] Tato informace zvyšuje kredibilitu stránek, o které jsem se zmínila v souvislosti se současnými trendy webu.

    [21] NIELSEN, Jakob; TAHIR, Marie. Použitelnost domovských stránek. Brno: Zoner Software, s.r.o., 2005. s. 60-61. ISBN 80-86815-18-8.

    [22] Steve Krug upozorňuje na jeden z nejčastějších problem webdesignu " nevěnování pozornosti navigaci na nižších úrovních. Jakmile se dostanete pod druhou úroveň, navigace se zhroutí a stane se z ní navigace ad hoc. (...)".

    KRUG, Steve. Webdesign: Nenuťte uživatele přemýšlet. Brno: Computer Press, a.s., 2003, s. 50-52. ISBN 80-7226-892-9.

    [23] Information Architecture: Blueprints for the Web, s. 212-215.

    [24] V současnosti tento problém, i když ne zcela, řeší stále úspěšnější drobečková navigace, viz s. 18.

    [25] Information architecture for the WWW, s. 82.

    [26] Letting Go of the words, s. 235.

    [27] Např. položka „Domů" by neměla být zaměňována za „Hlavní stránka" nebo „Úvod" na jiných stránkách.

    [28] Jedná se o popisek, který se zobrazí najetím myši nad daný obrázek. Ikony hojně využívají např. weby, které obsahují databáze ubytování a prostřednictvím ikon významově objasňují parametry hotelu.

    [29] "Persona je popis "prototypu" uživatele, který slouží jako vodítko v procesu grafického návrhu a uspořádání informací. Lze si ji představit jako model fiktivního uživatele na základě určitých charakteristik (např. cílové skupiny či úkolu, který řešíme). Nejedná se o nahrazení uživatelského testování na skutečných lidech ani snížení počtu jeho testerů. Je to spíše jakési vcítění do mysli určitého typického uživatele, které nám pomáhá posuzovat návrh z jiného úhlu pohledu z pohledu uživatelů."

    SYMBIO Digital, s. r. o. [online]. 1999 [cit. 2010-04-29]. Personas (persony). Dostupné z WWW: <http://www.symbio.cz/slovnik/personas-persony.html>.

    [30] Například e-shopy budou řešit proces od přidání produktu do košíku, přes vyplňování formuláře objednávky, po způsob platby a dodání.

    [31] Později je tato cesta zapsána jako podrobná textová dokumentace, popř. jsou použity vývojové diagramy, což znamená rozšíření dosavadní chartflow.

    [32] Optimalizace v takovém případě znamená jednoduchost použití, srozumitelnost a přehlednost.

    [33] Technický tým (programátoři, vývojáři atp.), který zajišťuje budoucí funkčnost těchto prvků.

    [34] V současné době existují programy na tvorbu wireframů, které samy vygenerují do HTML náhledů. Mezi nejznámější patří například vyspělý program Axure RP. Více informací na tomto odkaze: http://www.axure.com/tour.aspx.

    [35] Web Redesign 2.0, s. 18.

    Fotogalerie

    Líbil se vám článek?
    Stáhnout článek v PDF

    0 komentářů

    Přidat komentář

    (If you're a human, don't change the following field)
    Your first name.
    (If you're a human, don't change the following field)
    Your first name.

    Přečtěte si také

    Přihlášení Registrace
    RSS Facebook Twitter YouTube
    Zobrazit standardní verzi webu

    Taky děláme

    Feedback