V závěrečných 7 krocích se nyní budu věnovat důležitým předpokladům funkcionality webu.

Živnostenský rejstřík (MPO)

15. Aby se návštěvník na web dostal…

Možná vás překvapí, že i tuto podmínku zahrnuji do použitelnosti. Nejdřív přece člověk na stránky přijde a až potom je začne používat.

Zpravidla je však žádoucí přimět návštěvníka, aby se na web jednou opět vrátil – tedy pokračoval v používání. Když mu návrat ztížíme nebo přímo znemožníme, přestane pro něj být tento web použitelný.

Doména by měla fungovat ve tvaru www.domena.cz, ale také domena.cz. Ač se to zdá být samozřejmé, mnohdy se na tuto funkcionalitu pohříchu zapomíná. Když už si návštěvník zapamatuje naši doménu, neměl by za odměnu dostat chybové hlášení.

Výhodou je rovněž snadná nalezitelnost ve vyhledávačích podle klíčových slov, která si z našich stránek uživatel zapamatuje (podle typu webu je to zpravidla nadpis článku, název společnosti či produktu apod.).

Titulek všech stránek by měl obsahovat jejich název či hlavní nadpis. Dnešní prohlížeče pak stránku snadno najdou v historii při zadání tohoto názvu do adresního řádku.

Obsah a základní prvky webu by se neměly příliš dlouho načítat (vysokorychlostní připojení stále ještě nemá každý, zvlášť na mobilních zařízeních).

Pro zkrácení doby načítání webu je vhodné nepoužívat tabulkový design, optimalizovat grafické prvky, snížit počet požadavků na server (např. použít tzv. CSS Sprites, spojit externí soubory s JavaScriptem do jednoho, případně některý načítat paralelně z Google code aj.), dále komprese kódu a jiné.

Když už se stránky načtou, neměly by přetěžovat procesor „ošklivě“ napsaným JavaScriptem nebo Flashem.

Novinky z webu

16. Upozornění na nový obsah

Webové stránky, jež nemají ze své podstaty stálý a neaktualizovaný obsah, by měly návštěvníkům nabídnout způsob, jak se nechat informovat o novém obsahu.

Typicky to bývá RSS nebo Atom feed. Další možností je využít pro tento účel některých sociálních sítí – např. účet na Twitteru nebo fanouškovskou stránku na Facebooku. U obchodů je dobré neopomenout export do nějakého vyhledávače zboží.

Trochu to souvisí s předchozím bodem. Pokud tuto funkci návštěvníkovi nenabídnete, nebude v jeho silách váš web stále kontrolovat a po čase se tam přestane vracet – přestane ho používat (toto ovšem neplatí u webových aplikací, kam se již z jejich podstaty v různých intervalech rád vrací – sociální sítě, diskusní fóra apod.).

Použitelné a přístupné webové formuláře

17. Pozor na formuláře

Základním konverzním prostředkem na webových stránkách jsou formuláře. Vyskytují se v nejrůznějších podobách a často mají zcela zásadní úlohu při reálném plnění účelu webu. Proto je třeba se na jejich použitelnost soustředit obzvlášť.

Snižte počet polí na nutné minimum. Často dochází ke zbytečným komplikacím, když se rozděluje jméno a příjmení, protože pod slovem „jméno“ si člověk vybaví celé jméno, ne jenom to křestní. Málokdo si prohlíží formulář dopředu, aby si toho mohl všimnout.

Zřetelně označte pole, která je nutné vyplnit pro úspěšné odeslání formuláře. Pokud dojde k chybě, viditelně ji označte (v žádném případě nenuťte uživatele vyplňovat formulář znovu). Buďte trochu předvídaví, a pokud je to možné, nechte předvyplněnou očekávanou hodnotu (např. státní příslušnost, @ v poli pro e-mail apod.).

Dejte uživateli jasnou zprávu, že byl formulář úspěšně odeslán, a nabídněte mu, kam může pokračovat dál. Nezapomeňte ošetřit opětovné odeslání formuláře při aktualizaci stránky.

Výzva „Vytiskněte se“ – LaTrine.cz

18. Tisková podoba stránky

I když jsou dnes již počítače nebo chytré mobilní telefony téměř všude, stále je vhodné nechat návštěvníkovi možnost stránku si vytisknout. Nejlepším řešením je vytvořit speciální styl pro tisk, díky kterému by měly na výstupu být body 1–4, tedy název webu, případný podtitul, nadpis stránky, obsah, jméno autora (případně i kontakt na něj), datum a URL stránky.

Nezapomeňte, že ne vždy je papír interaktivní médium , a tak není od věci za odkazy vypsat jejich adresy. Význam barev často ustupuje do pozadí, je třeba počítat s tiskem černobílým. Pěkný článek na téma CSS pro tisk je Going to Print na aListApart.com.

Částečným řešením může být i využití externí služby, která verzi pro tisk sama vygeneruje a ještě dá návštěvníkovi na výběr, co všechno chce tisknout.

WCAG 2.0 česky

19. Přístupnost webu

Pokud chcete, aby byly vaše stránky bez problému použitelné pro co největší množinu lidí, včetně zrakově postižených, měli byste dbát také na pravidla přístupnosti webu.

Řídit se přitom můžete přívětivě přeloženým kontrolním seznamem pro WCAG 2.0, jenž vás navede k dodržování pravidel z oficiálního dokumentu bez zbytečných řečí okolo.

Doporučit lze také přednášku Radka Pavlíčka z WebExpa 2009 s názvem WCAG 2.0 – nový pohled na přístupnost.

Cílová skupina

20. Poznejte vaši cílovou skupinu

Dokážete se dobře seznámit s vaší cílovou skupinou, sledovat její chování a trendy, které v ní vládnou? Pokud ano, máte velkou výhodu. Můžete díky tomu přemýšlet jako vaši návštěvníci a zjistit, jaké funkce či obsah by na vašem webu ocenili.

Po vynuceném uživatelském testování přichází uživatelé skuteční. Snažte se jim naslouchat.

Google Analytics

21. Sledujte a analyzujte návštěvnost

Stejně jako uživatelské testování je i pravidelná analýza návštěvnosti nezbytná pro dosahování optimální použitelnosti webu.

I v ideálním případě je sledování návštěvnosti důležité jako zpětná vazba, že všechno děláte dobře a návštěvníci jsou u vás spokojení.

Navíc díky ní můžete získat velmi cenná data, která dobře poslouží při budoucím rozvoji webu. Pamatujte, že web nemá konečný stav.

.

Toto je tedy ve zkratce jedenmecítma kroků, kterými se můžete s čistým svědomím řídit při budování dobré použitelnosti webu.

Pokud máte pocit, že jsem nějaký důležitý bod opomněl, budu rád, když mě upozorníte v komentáři, abych mohl seriál doplnit. Díky!

Tomáš Pojeta, Pojeta.cz

8. Dobrý design

Kvalitní design webové stránky napomáhá žádanému vedení návštěvníkovy pozornosti za pomoci správně voleného kontrastu barev, velikosti prvků nebo případně i animací. Vzhled webu je to první, co na člověka udělá dojem. Ve spojení s logem je základnou webového brand-buildingu. Měl by být také v souladu s tématem webu. Může v návštěvníkovi vzbudit důvěru, sympatie, nadšení a mnoho dalšího – web si díky dobrému designu zapamatuje a v budoucnu se vrátí zpět. To vše se dá však snadno pohřbít jinými částmi webu.

Především design nesmí v návštěvníkovi nechtěně vyvolávat úzkost, zmatení, vztek, nebo dokonce nějaký záchvat.

Compose to a vertical rythm – 24ways.org

9.  Dobrá typografie

Aby byl obsah pro návštěvníka čitelný, je třeba dodržovat aspoň ta nejdůležitější typografická pravidla. Velikost písma by měla přímo odrážet zanoření ve struktuře textu – tedy čím výše ve struktuře, tím větší písmo. Text by měl mít dostatečnou výšku řádku (většinou kolem 1,5 velikosti písma) a také vhodné zarovnání.

Podmínkou čitelnosti Velkým plusem pro čitelnost a orientaci v textu je také dobrý vertikální rytmus, tedy horní a spodní okraje jednotlivých částí textu. Zdařilý článek na toto téma (včetně komentářů) je Compose to a vertical rythm, kde jsou uvedeny i konkrétní rady a styly.

BezChyb.cz

10. Strukturovaný obsah

Obsah stránku by měl být přehledný a dobře strukturovaný. Toho dosáhneme členěním textu na kratší odstavce, vkládáním podnadpisů a používáním seznamů tam, kde je to na místě. V přehlednosti může také pomoci shrnutí obsahu několika větami v úvodu a v případě některých druhů textu i odlišení závěru – tedy co si má člověk z textu odnést.

Důležité je i vyznačování podstatných částí odstavce – zpravidla tučným písmem. To proto, aby si návštěvník mohl text prohlédnout bez nutnosti čtení a měl zhruba tušení, o čem je.

Maximize the Use of Hover (WebDesignerWall.com)

11. Odlišené odkazy

Odkazy v obsahovém textu by měly být barevně odlišené od okolí a nejlépe i podtržené. Pokud odkazy nepodtrhnete, musíte počítat s tím, že tak znevýhodníte návštěvníky se zhoršeným vnímáním barev, kterých nemusí být zrovna malé procento. Vhodným doplňkem může být rovněž odlišení již navštívených odkazů, což je věc často zbytečně opomíjená.

Aspoň většina odkazů na webu, jak textových tak i grafických, by měla mít nějaký efekt po najetí myší. Pro návštěvníka je to jasné znamení, že na odkaz může opravdu kliknout a často ho k tomu ještě motivuje.

Použitelnost také značně zvyšuje použití atributu title – tedy po najetí myší podrobněji popsat, co se pod odkazem vlastně nachází. Hodně lidí tuto část podceňuje… často se v titulku odkazu jen zopakuje jeho text a to už je pak lepší ho neuvádět vůbec.

SushiAndRobots.com

12. Konzistence webu

Design, typografie a rozvržení jednotlivých prvků stránek by měly být jednotné a konzistentní na všech stránkách webu.

Konzistentní web působí silně a spolehlivě – návštěvník ví, že na stránkách může získat jakoukoliv informaci tak, jak je zvyklý a nedočká se žádného nepříjemného překvapení nebo zmatení.

Design Patterns – SmileyCat.com

13. Šablony prvků webu

Tzv. design patterns, tedy modelové příklady prvků stránek, mohou být velice užitečnou inspirací při rozmisťování a samotném provedení jednotlivých částí stránek.

Databáze s těmito šablonami sdružují řešení jednotlivých prvků používaná na úspěšných a z velké části i použitelných webech. Na tato řešení jsou návštěvníci zvyklí a je zkušeností ověřené, že fungují. A přesně to na použitelném webu chceme. Další pěkné pattern databáze jsou: box.mepholio.com, PatternTap.com či UI-Patterns.com.

Mobilní verze Twitteru

14. Myslete na mobilní zařízení

Chytré mobilní telefony s dotykovými displeji ve stále větší míře zaplavují trh. Pokud se vám mobilní internet ještě nezdá natolik rozšířený, abyste se na něj museli ohlížet, vězte, že v příštích letech se bude stále rychleji rozvíjet a myslete tedy aspoň na budoucnost.

Speciální vzhled stránek pro mobilní telefon s viditelným přepínáním na standardní verzi může vašim návštěvníkům v terénu ušetřit mnoho starostí.

… poslední díl ve znamení funkčnosti

Mohlo by se zdát, že vše důležité v otázce použitelnosti již bylo řečeno. Už je jasné, jaké informace návštěvníkovi nabídnout a jakým způsobem, aby pro něj byly snadno a příjemně čitelné. V poslední části však ještě stále zbývá místo pro aspekty funkčnosti webu, které jsou mnohdy stejně zásadní jako body v prvních dvou dílech, a není tedy radno je opomenout.

V první části trilogie o použitelnosti webu připomenu základní informace, které by měla každá stránka obsahovat a také zásadní předpoklady každého dobrého webu. Druhý díl pak věnuji spíše otázce designu, typografie a zvyklosti rozvržení – tedy jakým způsobem by měly být ony základní  informace z první části návštěvníkovi podány, aby je optimálním způsobem spokojeně vstřebal. V závěrečných 7 krocích se pak objeví některá doporučení a častá očekávání uživatelů na funkčnost webu.

ultimatestrapless.co.uk

1. Logo / název webu

Na každé stránce webu by měl být zřetelně patrný jeho název a nejlépe i logo. Jedná se o jednu ze základních informací, a proto je zvykem umisťovat ho do levého horního rohu stránky – tedy na místo, kam se člověk zpravidla podívá nejdříve.

Logo je také zcela zásadní pro brand building – člověk si díky němu web a značku snáze zapamatuje a vytvoří si k ní nějaký vztah. Například tyto stránky kvůli absenci loga v tomto ohledu tratí. Možná bych měl nějaké vyrobit.

WebDesignerWall.com

2.  Čím se web zabývá?

Jednou ze základních otázek, které návštěvník při prohlížení stránky pokládá je „Proč?“ Tedy proč vlastně ten který web existuje, jaký má účel nebo čím se zabývá. Tato otázka by měla být zodpovězena stručně a jasně – nejlépe pár slovy u loga nebo sloganem v hlavičce.

Pokud je zaměření webu jasné už z loga / názvu webu, není tento prvek nezbytný. Rozhodně je však vhodné aspoň na úvodní stránce na onu otázku odpovědět, nejraději tak výrazně, aby návštěvník věděl a nemusel si ji vůbec pokládat.

PSDTuts.com

3. Obsah webu

Každá stránka by měla mít smysluplný, nebo aspoň nějak hodnotný obsah. Koneckonců návštěvník zpravidla na web přichází kvůli tomu, že hledá informaci pontenciálně ukrytou v obsahu. Nebýt něj, web se stane pro návštěvníka takřka bezcenný, ať už by měl jakkoli dokonalý design, kód, redakční systém, nebo mýty opředené SEO.

To samé platí pro webové aplikace, na které člověk chodí kvůli službám nebo nákupu. Tam navíc přibývá požadavek na jednoduchost a intuitivnost ovládání takové aplikace.

BookCoverArchive.com

4. Kdo za webem stojí?

Ač se tato informace nemusí na první pohled zdát tolik důležitá, opak je pravdou. Původ získané informace je dost podstatný údaj, podle kterého návštěvník může určit její důvěryhodnost nebo kontaktovat autory, když kupříkladu bude potřebovat doplňující informace.

Je vhodné umístit jméno autora či provozovatele a kontakt na něj do zvláštní sekce s kontaktními údaji. Podle typu webu je možné tento údaj doplnit i přímo pod/nad obsah (článek) společně s datem vydání. Odkaz na sekci s kontaktními údaji by se měl každopádně vyskytnout v patičce webu.

Ecoki.com

5. Navigace

Stránky by měly mít konzistentní navigaci – tedy menu. Značným plusem v použitelnosti je zřetelně odlišený odkaz na aktuální sekci a u obsahově delších webů i drobečková navigace a případně zopakování menu v patičce.

S navigací také úzce souvisí požadavek na dobře navrženou a logicky uspořádanou informační architekturu, kterou je pak možné se pochlubit v tzv. mapě webu. Bez dobré informační architektury webu se návštěvník po chvíli ztratí i s graficky sebelepším menu.

KevAdamson.com

6. Vyhledávání

Dalším velice důležitým prvkem použitelných stránek, zvláště těch rozsáhlejších, je vyhledávání. Návštěvník, který na první stránce nenajde to, co hledá, má běžně dvě možnosti. Buď začne na webu hledat, co potřebuje, nebo odejde a hledá jinde. Procházet ručně navigací je zdlouhavé a pracné.

Je na vás, abyste na stránky umístili vyhledávací pole, které zabrání předčasnému opuštění webu. Výjimku tvoří weby obsahově menší nebo zkrátka ty, kde by se nejspíše nikdy nevyužilo.

Mapa pohybu očí

7. Uživatelské testování

Tento bod by bylo možná logické uvést až  na závěr trilogie článků… Nicméně jedná se o tolik důležitou součást budování dobré použitelnosti webu, že má rozhodně místo již zde v první sedmičce. Pokud si chcete být skutečně jistí, že je web pro návštěvníka dobře použitelný, sežeňte několik nezaujatých lidí, kterým web ukážete a poté s nimi proberete, co jim na vašich stránkách chybělo nebo v kterých oblastech měli nějaký problém.

Kdybyste chtěli věc dotáhnout do extrému, můžete nasadit i software pro snímání obrazovky či tzv. eye-tracking kameru (snímá pohyb očí na stránce). To už byste ale testovací návštěvníky museli dostat do vámi vybavených prostor a o to více jim také zaplatit…

… a co bude v příštích dílech?

Toto je tedy prvních 7 podmínek pro dobrou použitelnost webových stránek. V příštím díle se dočkáte rozboru použitelnosti z pohledu designu, typografie a také několika doporučení pro rozložení a podobu jednotlivých prvků webu. V poslední části se pak zaměřím na důležité aspekty funkčnosti webu.