Martin Snížek píše o webu O mně     Twitter

ARCHIV – tento článek je již staršího data. Doufám, že mnoho myšlenek v něm je stále platných, avšak některé informace již mohou být zastaralé.  

Tipy a postupy k navrhování použitelných webů

10.7.2006

Vysoký konverzní poměr, tedy udělat z co nejvíce návštěvníků webu zákazníky, je jeden z klíčů k úspěchu na internetu. Zajistí vám ho použitelný a dobře navržený web. Přečtěte si 13 praktických tipů a postupů, jak takový web vytvořit!

Dobře použitelný web začíná od uživatelů a začneme u nich i v tomto článku:

Jak se uživatelé na webu chovají

Stručně by se dalo říct – jako zvířata v džungli:

1. Většinu stránek nečtou, pouze je rychle prohlíží a hledají, co je zaujme. Postupují rychle, z nutnosti hledat nejsou příliš nadšeni a snaží se co nejdřív dosáhnout cíle.
2. V první chvíli na stránce hledají klíčová slova, která mají na mysli (a která předtím možná zadali do vyhledávače). Nesoustředí se na význam textu na stránce, pouze strojově hledají svá slova – např. ledničky. Pokud se na webu tato slova nenachází, mohou web opustit (i když je jedna z hlavních položek navigačního menu chladničky). Klíčová slova se obvykle zdůrazňují v souvislosti s marketingem ve vyhledávačích, ale v tomto případě jsou důležitá i pro použitelnost.
3. Uživatelé nebádají nad logikou a strukturou webu – spíše kliknou na první odkaz, o kterém si myslí, že by je mohl dovést k cíli. Pokud nedovede, kliknou na tlačítko Zpět a a pokračují dalším odkazem, který vypadá nadějně (metoda pokus-omyl). Všimněte si, že se uživatelé nesnaží najít nejlepší cestu, vyhýbají se delší analýze, důležitá je pro ně rychlost.

Zdůrazňuji, že toto chování platí do chvíle, než uživatel dosáhne jednoho ze svých cílů – např. najít informace o výrobku. Když tyto informace najde, obvykle již postupuje pomaleji a často si i stránku pečlivě pročte (pokud je dobře napsaná).

Tipy a postupy

Jak vidíte, chování uživatelů na webu není zrovna takové, jaké bychom asi nejvíc uvítali. Nyní bych vám rád představil několik obecných postupů, zásad a tipů, které mi při navrhování webů vykrystalizovaly a zdají se mi užitečné.

Méně je většinou více

Umístění jakéhokoliv prvku na stránku pečlivě zvažujte. Měli byste se ptát: Je tento prvek na stránce nutný? Co ztratím, když dám tento prvek pryč? Všimne si uživatel vůbec tohoto prvku mezi ostatními? Jakou přináši prvek uživateli hodnotu?

Uživatelé věnují vaší stránce pouze omezené množství pozornosti, které se dělí mezi její jednotlivé části. Toto množství pozornosti nemůžete žádným způsobem zvýšit, můžete ho pouze vhodně rozdělit mezi jednotlivé prvky stránky. Nezapomeňte tedy, že každý prvek navíc ubírá určité množství pozornosti ostatním prvkům.

Toto pravidlo by mělo být aplikováno např. na výpis nejčtenějších článků nebo na pole pro zapsání do e-mailového newsletteru – ani jedno se nemusí nacházet na každé stránce (např. v pravém sloupci), tyto prvky by spíše měly být prezentovány v kontextové navigaci. Pokud se nachází standardně na celém webu v levém či pravém sloupci, skoro nikdo na ně nekliká a výsledkem je pouze nižší přehlednost stránky.

Zpětná vazba

Kdykoliv uživatel provede nějakou akci, musíte mu poskytnout zpětnou vazbu – zobrazit potvrzovací nebo chybovou hlášku, která musí být tak výrazná, že ji nikdo nepřehlédne (v tomto případě zapomeňte na grafický cit a nebojte se výrazných barev ani velkého písma). Co konkrétně myslím tou „akcí“?

• přihlášení do webu
• přihlášení k odběru newsletteru
• přidání zboží do košíku
• odeslání komentáře
• odstranění položky z košíku
• provedení objednávky
• poslání dotazu kontaktním formulářem
• a další – obecně se skoro vždycky jedná o odeslání nějakého formuláře

Chybová hláška by měla srozumitelným a příjemným tónem vysvětlit, k jaké došlo chybě, a co udělat k její nápravě. Obvykle mívá červenou barvu (méně často žlutou) a vhodné je doprovodit ji i grafickou ikonou. (Více ve starším příspěvku Chybové hlášky by měly nabízet řešení.)

Potvrzovací hláška by měla srozumitelně vyjádřit, co uživatel právě udělal, a ujistit ho, že akce proběhla úspěšně. Bývá také vhodné zamyslet se, jestli by nemohl mít uživatel k této akci nějaké otázky (např. po provedení objednávky uživatele zajímá, za jak dlouho mu přijde zboží, případně jaký bude další postup) – pokud ano, měla by mu je potvrzovací hláška zodpovědět. Co se týče vzhledu, potvrzovací hlášky jsou obvykle zelené a mohou být také doprovozeny vhodnou ikonou.

Zpětná vazba je jedno z vůbec nejdůležitějších pravidel použitelnosti. Málo co způsobí takové zmatení uživatele, jako absence zpětné vazby – uživatel v takovém případě neví, jestli se akce podařila, jestli ji má opakovat, jak má pokračovat. Bohužel, i přesto bývá toto pravidlo na webu často porušováno (pravděpodobně i proto, že se zpětná vazba špatně zahrnuje do návrhových dokumentů).

V jednom momentu jen jedno rozhodnutí

Neměli byste uživatele nutit rozhodovat se v jednom momentu o více věcech zároveň. Ukažme si to na příkladech:

• Na stránce s výpisem více produktů nechte uživatele vybírat pouze mezi jednotlivými produkty. Nenuťte ho zvolit si rovnou i barvu či velikost produktu, to může udělat až na stránce detailu produktu.
• Nedávno jsem se u jednoho klienta, internetového prodejce zájezdů, setkal s touto situací: na stránce s výsledky vyhledávání, kde se nachází pohromadě mnoho zájezdů, si uživatel nemohl kliknout na konkrétní zájezd, ale musel rovnou vybrat i jeho termín – jinak se nedalo dostat dál. Daleko lepším řešením by ale bylo jednotlivé termíny pouze uvést v informacích o zájezdu a nechat mezi nimi uživatele vybrat až při objednávání zájezdu (případně na stránce detailu zájezdu).
• Pokud máte internetový obchod s bílou techniku a člověk si k vám přijde pro pračku, měl by na úvodní stránce nalézt položku Pračky. Neměl by být nucen se hned rozhodnout pro pračku s předním plněním či pro pračku s vrchním plněním.
• Jako poslední příklad jsem si nechal odkazy na RSS – kolikrát jste už viděli výběr mezi různými verzemi RSS (0.91, 2.0, 1.0, Atom)? Vzhledem k tomu, že každá rozumná čtečka podporuje všechny verze RSS, je tento výběr opravdu naprosto zbytečný – lepší je vybrat pouze jednu verzi a tu nabízet osamoceně.

Pokud jste už posílali někomu nějaký dotazník, pravděpodobně jste si všimli, že úspěšné jsou pouze ty otázky, které se ptají na jednu informaci. Pokud se jednou otázkou ptáte na více informací současně, lidé obvykle nejsou schopni uspokojivě odpovědět – vždy na něco zapomenou.

A obdobně je to i na webu – pokud musí uživatel udělat více rozhodnutí zároveň, mate ho to a je mnohem náchylnější k chybám. Zkrátka je pro něj daleko těžší, někdy i nemožné (s energií, kterou chce webu věnovat), si vybrat.

Kontext

Dobrá použitelnost spočívá v kontextu. V každém momentu interakce uživatele s webem byste měli přemýšlet, jaké informace a funkce z webu by mohly být zrovna potřeba.

Na každou stránku byste měli na správná místa (za delší text, k formuláři…) doplnit odkazy na související stránky. Měli byste se dokonce snažit vést tímto způsobem uživatele webem – neustále mu nabízet možnosti, jak pokračovat v cestě po stránkách, až ho nakonec dostanete tam, kam chcete.

Vizuální blízkost souvisejícího

Co spolu na stránce souvisí, mělo by se nacházet u sebe. Týká se to hlavně různých funkcí a formulářů – pokud např. neumístíte nápovědu bezprostředně k funkci či formulářovému poli (ale někam jinam na stránku, např. před formulář), pravděpodobně ji uživatelé nezaregistrují.

Často porušuje toto pravidlo funkce Přepočítat v košíku internetového obchodu. Tlačítko se nachází úplně jinde, než textová pole pro zadání počtu kusů, takže si je uživatelé jenom těžko spolu asociují. Pokud k tomu přičteme ještě nesrozumitelnost tlačítka (Přepočítat mi nepřijde jako nejvhodnější pojmenování), pochybuji, že dokáže mnoho uživatelů tuto funkci správně používat. Přitom by stačilo umístit tlačítka pro přepočítání bezprostředně vedle textových polí – potom problém s jejich vzájemnou asociací odpadá.

Prvky funkce Přepočítat v obchodě Cybex.cz (zvýrazněny červeným rámečkem) jsou spolu těžko asociovatelné.

Potlačení zbytečné logiky

Především při pojmenovávání stránek a funkcí a při vytváření hierarchie se neřiďte tím, jakou mají věci logiku, ale tím, jak jejich logiku vnímá většina lidí. Příklady:

• I když pro syndikaci obsahu nabízíte kromě RSS i Atom, pojmenujte syndikaci pouze RSS. Atom sice není součástí RSS, je to rovnocenná technologie, ale ta hrstka lidí, kteří používají čtečku, pochopí název RSS daleko lépe než logicky správný název Syndikace obsahu, XML apod.
• I když patří iPody do kategorie MP3 přehrávače, jsou natolik populární, že byste je měli uvést i v názvu kategorie – např. MP3 přehrávače, iPody. Opět, logika ustupuje snadnému pochopení uživatelem.

Co není, to se nezobrazuje

Často se stává, že nějaký prvek stránky nemá zrovna žádný obsah, ale přesto se zobrazí – např. neexistuje žádný související článek, ale přesto se objeví nadpis Související články. Nebo není ještě nic v diskusi pod článkem, ale už jsou nabízena tlačítka Zobrazit vše, Zobrazit vybrané atd.

Toto chování webu je plýtvání pozorností uživatele. Když už máte na stránce prvky, pro které není žádný obsah, je hřích s nimi stránku znepřehledňovat. Neměli byste je radši zobrazit vůbec nebo připravit nějakou jejich speciální podobu pro případ, že zrovna nemají žádný obsah.

Skrývání implementace

Ne, tato zásada není o programování. Pouze chci nadpisem vyjádřit, že ať je určitá funkce na vašem webu jakkoliv složitá, měli byste nabídnout uživateli to nejjednodušší rozhraní pro její používání.

• Podívejte se třeba na Google – stovky programátorů každý den pracují, aby jeho vyhledávání bylo ještě přesnější a chytřejší, ale uživatel má před sebou pouze textové pole a tlačítko pro odeslání. Google chce po svých uživatelích pouze tento jednoduchý způsob vyjádření přání a o všechno ostatní se již postará sám – vyhodí přebytečná slova, najde synonyma, vezme v úvahu jazyk uživatele a podívá se, jestli není vhodné předložit nějaké speciální výsledky (např. výsledek fotbalového zápasu, obrázek). Určitě by se dalo vytvořit mnohem složitější rozhraní, Google se ale správně snaží co nejvíce „myslet za uživatele“ – dovtípit se správného významu jeho dotazu.
• Porušení této zásady lze najít u různých rezervačních a vyhledávacích systémů, kde je uživatelské rozhraní často obětí složité vnitřní logiky aplikace (např. nutnost pracovat s nesourodými databázemi od různých dodavatelů). Požaduje potom po uživateli informace, které by požadovat nemuselo, prezentuje své výstupy ve formě, která není pro uživatele logická, a nutí uživatele naučit se různé oborové odborné výrazy.

Pozornost k detailům

Použitelnost spočívá v detailech a pokud chcete použitelný web vytvořit, musíte k nim být pozorní. Jedno přebytečné nebo chybějící slovo, opomenutí jednoho souvisejícího odkazu, špatné umístění prvku – to vše může zásadním způsobem ovlivňovat úspěch či neúspěch webu.

Promýšlení chyb a jejich kombinací

Na webu, který navrhnete, určitě bude docházet k chybám. Vyhledávání nic nenajde, uživatel vyplní špatně formulář, stránka nebude nalezena – nemyslete si, že se tomu právě vy vyhnete. Vzhledem k tomu, že k těmto stavům dochází často, měli byste si dostatečně promyslet, jaké informace a možnosti při nich uživatelům nabídnete, aby se z nepříjemné situace hladce dostali.

Viditelnost

Všechno, co se dá v rozhraní provádět, musí být viditelné, aby uživatel měl přehled o tom, jaké má možnosti (jinak je zmaten).

Viditelnost je jedním ze základních konceptů návrhu obecně jakéhokoliv uživatelského rozhraní, na webu s ní ale obvykle problém není (nemusíme zde bojovat s nedostatkem fyzického prostoru). Přesto jsou zde dva zajímavé důsledky:

• Měli byste být hodně opatrní u dynamických aplikací využívajících Ajax se skrýváním a postupným objevováním prvků stránky. Snadno se vám může stát, že to přeženete, uživatel nebude mít přehled o funkcích a obsahu stránky a nebude schopen je správně používat. (Další hřebíček do rakve použitelnosti Ajaxu.)
• Viditelnost také odůvodňuje používání globální navigace a uvádění standardních prvků na všech stránkách webu (vyhledávání, logo…). Právě proto, aby uživatel měl přehled o tom, co se dá na webu dělat, jsou tyto statické součásti důležité. (Globální navigaci tedy zatím smrt nečeká.)

Dostupnost

Ze vzhledu a textu prvku je poznat, k čemu slouží, a s prvkem jde provádět jen takové akce, s kterými uživatelské rozhraní počítá (to samozřejmě nejde splnit vždycky, ale měli byste se o to snažit tam, kde to možné je). Příklady:

• Často je tento princip porušován u tlačítek pro odeslání formuláře – obsahují text „Odeslat“ a pod nimi je uvedeno něco jako „Odesláním formuláře zboží závazně objednáte“. Tento text si ale uživatelé nemusí přečíst, je lepší jim ho dát přímo před oči – jako text tlačítka rovnou použít „Závazně objednat“. V takovém případě si uživatel text určitě přečte (vždyť na to tlačítko kliká) a navíc se zbavíme jedné zbytečné věty.
• Možnost provádět s prkvem jen omezenou množinu akcí je na webu často vidět u formulářů – pro některé položky jsou nabízeny prvky, z kterých jde vybrat pouze omezená množina hodnot (např. select boxy), místo obyčejných textových polí (zde je množina hodnot neomezená, a tak častěji dochází k chybám).

Cíle a strategie webu

Při návrhu webu se dostanete do situací a diskusí s realizačním týmem, kdy bude mnoho možností, jak zpracovat určitou funkci, sekci, stránku, jestli zařadit na web nějaký obsah, jak zpracovat menu, jak zpracovat stránky výpisu produktů… V této chvíli se často stává, že do diskuse či přemýšlení nad problémem natolik zabřednete, že se v něm ztratíte a nevíte, jak ho vyřešit.

Mně vždycky v takové chvíli pomáhá zeptat se (ať už sebe nebo ostatních), jak která možnost přispěje ke splnění cíle webu, jestli bude něco platná při předpokládaném chování uživatelů na webu, a jak pomůže k naplnění strategie webu. Obvykle poté okamžitě vypadnou některé možnosti a ty ostatní vidíte v úplně novém světle, takže se dokážete snadno rozhodnout.

Závěrem

Pamatujte: pokud něco na vašem webu potřebuje návod, téměř vždycky to znamená, že jste to navrhli špatně. Doufám, že vám dnešní porce tipů a postupů pomůže se podobných situací vyvarovat.