Co je to přehyb?

Velmi zjednodušeně se jedná o imaginární linii na webu, která dělí část stránky viditelnou už při načtení stránky, a oblast, která bez posouvání po stránce není viditelná. Poměrně rozšířená je metafora přehybu s novinami, které leží na pultu v trafice. Výtisk leží většinou přeložený. Abyste viděli oblast pod přehybem, tedy spodní polovinu titulní stránky, musíte noviny vzít a otočit. A to vyžaduje vaši aktivitu – ale je to pořád méně námahy než pokud byste museli noviny vzít a otočit celou stránku. A proto se také v horní polovině titulní stránky uvádějí nejdůležitější informace – a to nejen v novinách, ale i na webu.

Umístění přehybu na webu H1.cz.

(Téměř) neměnná pravidla použitelnosti

Obecně platí, že ačkoliv se technologie velmi rychle mění, chování uživatelů, a tedy i doporučení týkající se použitelnosti, se mění jen relativně pomalu. Je tomu tak proto, že použitelnost je z velké části závislá na tom, jakým způsobem náš mozek zpracovává informace. Ale aby to nebylo tak jednoduché, máme také zkušenosti, které naše zpracování informací ovlivňují. A ty se mohou měnit.

Oborový guru Jakob Nielsen v roce 2005 provedl revizi 944 pravidel použitelnosti, která sepsalo americké letectvo pro své návrháře uživatelských rozhraní v polovině 80. let minulého století. Z 60 pravidel vybraných napříč všemi kapitolami původní zprávy jich i po 20 letech platilo 54, tedy 90 %.

Přesto je právě přehyb jednou z oblastí, kde ke změnám doporučení v průběhu času došlo. Zatímco na počátku webu znělo jasně: Dělejte stránky krátké a nenuťte uživatele scrollovat dolů. Vše důležité umístěte nad přehyb a ideálně na webu nenechávejte nic dalšího. Už v roce 1997 Jakob Nielsen zajásal – dělat stránky delší, než byl přehyb, bylo nyní dovoleno. Tento proces později podpořilo i rozšíření myší se scrollovacím kolečkem.

Uživatelé sice tvrdili, že takové stránky nemají rádi, statistiky a výzkumy ale ukazovaly opak. A tak po období debat o tom, zda to uživatelé rádi dlouhé, nebo krátké, se změnila i doporučení týkající se přehybu. Nyní musely být všechny klíčové informace nad přehybem a v místě přehybu bylo doporučováno umisťovat text nebo obrázek tak, aby vypadal „useknutý,“ a tedy nutil uživatele intuitivně scrollovat stránku dolů.

Ovšem k tomu, abyste mohli navrhnout stránku tak, aby vypadala „useknutá,“ potřebujete vědět, kde se nachází přehyb. 

Kde ho tedy najdete?

Přehyb je dnes všude a nikde. Na cestě do práce na mobilním zařízení ho budete mít jinde než v práci, v práci jinde než doma – a to jsme stále u jediného uživatele. Tři nejčastější umístění přehybu, jak můžete vidět na grafu od ClickTale níže, se v roce 2006 týkala pouhých 10 % uživatelů. Nejde totiž jen o rozlišení obrazovky, ale také typ prohlížeče, nainstalované doplňky v prohlížeči a také třeba velikost okna.

V roce 2006 se nejčastější umístění přehybu týkalo necelých 10 % uživatelů. Dnes je to ještě méně. (Zdroj: ClickTale Blog).

Abychom si to ještě více zkomplikovali, do hry vstupuje čím dál tím vyšší počet mobilních zařízení se zcela netypickým rozlišením a přibývájí nové možnosti, jak si personalizovat prohlížeč. 30 % uživatelů ve Spojených státech se pravidelně připojuje na internet z mobilních zařízení a odhady říkají, že v roce 2013 překročí počet přístupů k internetu z mobilních zařízení počty přístupů z pevného připojení.

Obrázek ilustruje srovnání rozlišení monitorů návštěvníků webu H1.cz v letech 2006 a 2010. V roce 2006 mělo téměř 70 % návštěvníků jedno z dvou nejběžnějších rozlišení. Dnes to není ani 40 %.

Čeho byste se tedy měli držet při návrhu webu, aby vyhovoval takto variabilnímu využití?

7 zásad pro přehyb stránky v roce 2010

1. Vyhněte se vodorovným liniím - pokud se stane, že některý uživatel uvidí linku na konci stránky, může si ji splést s koncem stránky nebo patičkou. Navíc je pravděpodobné, že toto pravidlo bude platit dlouhodobě. V případě vodorovné linky se totiž jedná o optické vodítko působící převážně podvědomě. 

2. Není třeba se snažit všechno umístit nad přehyb. Pokud se budete snažit nahustit maximum obsahu nad přehyb, dopadne to tak, že z této části stránky vznikne nepřehledná změť odkazů, textu a grafických prvků. Nebojte se kolem důležitých prvků nechat více volného prostoru. Místo toho se neustále ptejte, jaké prvky jsou důležité a klíčové z hlediska obchodních cílů webu.

3. Navigaci raději umístěte do spodní části hlavičky. Uživatelé totiž často odscrollují horní část hlavičky, kde se nachází logo, vyhledávání, přepínač jazykových mutací a případné další konvenční navigační prvky.

4. Pokud to s webem myslíte vážně i do budoucna, zajistěte také mobilní verzi webu. Mobilní zařízení by mělo být automaticky detekováno a přesměrovat uživatele na mobilní verzi, která bude odpovídat pravidlům použitelnosti pro mobilní zařízení. Zároveň by měl mít uživatel možnost vrátit se na původní verzi webu. Použitelnost webu na mobilních zařízeních doporučujeme také otestovat.

5. Stále platí, že nejdůležitější je obsah. Pokud je stránka opravdu dlouhá, nabídněte na konci stránky odkazy na související informace – veďte uživatele dál bez toho, aby se museli vracet k navigaci. 

6. Dlouhá stránka může být někdy příjemnější a vést k lepším výsledkům, než krátké stránky, kterých musíte projít mnoho. Například v případě, že máte v kategorii e-shopu hodně produktů, zvolte přiměřenou délku stránky do 2 000 px. Na začátku i na konci výpisu produktů uživatelům nabídněte možnost přizpůsobit si počet zobrazených produktů na stránce.

7. Texty ilustrujte obrázky. Uživatelé stránky spíše skenují, při scrollování pod přehybem to však platí dvojnásob.

Jak se k problematice přehybu stavíte vy? Počítáte se zobrazováním webu na mobilních zařízeních s menším rozlišením? Těšíme se na vaše komentáře a zkušenosti.

Zvyšování konverzních schopností webu je poměrně širokým tématem, a proto se zaměření jednotlivých informačních zdrojů celkem liší. V přehledu naleznete jak úzce zaměřené blogy (např. Google Website Optimizer Blog), tak blogy, které pokrývají širší spektrum oblastí (např. The ROI Revolution Blog).

Přehled je rozdělený na dvě části. V první části představujeme nejzajímavější odborné blogy. Převážná většina je v anglickém jazyce, ale na to jste už jistě zvyklí. V druhé části pak představíme dva weby, kde jsou zajímavým způsobem agregovány případové studie A/B testování. Proč zajímavým? Vždy předtím, než si prohlédnete případovou studii, máte možnost si tipnout, která verze stránky byla úspěšnější. Výs­ledky vás pak nezřídka překvapí a právě tak utvrdí v důležitost testování.

Odborné blogy

Conversion Rate Experts je londýnská konzultační společnost, která se zaměřuje výlučně na zvyšování konverzních schopností webů. Ve svém oboru patří k nejuznávanějším firmám na světě. Na svém blogu v průběhu podzimu nevydali ani jeden článek, ale na jaře byli aktivnější a publikovali několik zajímavých příspěvků. Za zmínku stojí např. nedávná případová studie SEOmoz nebo 101 tipů ke Google Website Optimizeru. Doporučujeme proto tento blog i přes nepravidelnou aktualizaci sledovat.

The ROI Revolution Blog (www.roirevolution.com/blog)

ROI Revolution je další úspěšnou konzultační firmou působící v USA. Mají širší nabídku služeb než Conversion Rate Experts a odráží se to i na jejich blogu. Mimo článků o zvyšování konverzních schopností webů publikují i články, které se týkají sociálních sítí, online reklamy a webové analytiky. Z posledních článků doporučujeme Segmentace u testů v Google Website Optimizeru.

Google Website Optimizer Official Blog (websiteoptimi­zer.blogspot.com)

Tento blog je oficiálním blogem nástroje Google Website Optimizer, a proto pokud tento nástroj používáte nebo o jeho využití uvažujete, doporučujeme tento blog sledovat. Objevují se zde zajímavé případové studie, rady a tipy a také informace o plánovaných odstávkách a updatech.

Occam’s Razor by Avinash Kaushik (www.kaushik.net/avinash)

Avinash Kaushik je přední světový guru webové analytiky. Tento charismaticky Ind se podílí na vývoji Google Analytics a je autorem bestsellerů Web Analytics: An Hour a Day a Web Analytics 2.0. Na svém blogu už po několik let publikuje nesmírně zajímavé články o všem, co se točí kolem webové analytiky, která se zvyšování konverzních schopností webu úzce dotýká. Nenechte se zastrašit délkou jednotlivých příspěvků, po jejich dočtení nebudete litovat.

20 bits (20bits.com)

20 bits.com píše Jesse Farmer. Jesse je programátor z Kalifornie, který, jak sám tvrdí, je posedlý daty. Na svém blogu publikuje zajímavé články hlavně o A/B testování a sociálních sítích. Některé články jsou poněkud techničtějšího rázu, ale rozhodně stojí za přečtení. Velmi hezky např. vysvětluje statistiku v pozadí A/B testování nebo problematiku rychlosti a jistoty výsledků u A/B testování.

Conversion Room Blog (conversionro­om.blogspot.com)

Conversion Room Blog je opět blogem společnosti Google, tentokrát zaměřený obecně na zvyšování konverzí. Kromě článků věnovaných práci s Google Website Optimizerem, tu pravidelně najdete i rady, návody a novinky týkající se dalších Google nástrojů, zejména Google AdWords a Google Analytics.

Optimics Blog (www.optimics.cz/blog)

Optimics je asi první českou společností, která se zaměřuje primárně na zvyšování obchodní výkonnosti webů a webovou analytiku. Tuto společnost založili v roce 2009 náš bývalý kolega z H1.cz, Martin Snížek, a organizátor Web Analytics Wednesday, Jiří Brázda. Na firemním blogu Optimics najdete velmi dobré články, které se točí okolo zvyšování konverzních schopností webu. Doporučujeme také povedenou případovou studii Kentico Software.

Sbírky případových studií zaměřených na A/B testování

Anne Holland’s Which Test Won? (whichtestwon­.com)

Web WhichTestWon, který je dílem marketingové specialistky a vydavatelky Anne Holland, obsahuje sbírku provedených A/B testů. Jak jsem již psal v úvodu tohoto článku, u každého testu si můžete před prohlédnutím výsledků tipnout vítěze. Určitě se leckdy zmýlíte a přesvědčíte se, že zdánlivě lepší varianta (alespoň podle best-practices) nemusí být ve skutečnosti tím nejlepším řešením. Bez testování to prostě někdy nejde a ani sebelepší expert nemusí mít vždy pravdu.

Kromě sbírky A/B testů na webu najdete i velice dobrý slovník pojmů nebo rady, jak prosadit testování ve své firmě (PDF).

ABtests.com (www.abtests.com)

Princip tohoto webu je stejný jako v případě Anne Holland’s Which Test Won? Také zde naleznete sbírku provedených A/B testů a můžete si tipnout vítěze testu. Nenajdete zde ale žádný doplňkový materiál typu slovník pojmů nebo rady a tipy. Případové studie se ale liší od sbírky Anne Holland, a proto také stojí za prohlédnutí.

To je z dnešní sbírky užitečných zdrojů vše. Našli jste v seznamu weby, které také čtete? Nebo máte jiné favority? Jsme přesvědčeni, že existuje nespočet dalších kvalitních zdrojů o zvyšování konverzních schopností webu. Pokud o nějakém víte, podělte se o něj s námi v diskusi!

Prezentace tedy pokryla tyto okruhy:

• Obecně doporučovaný postup hledání problematických míst na webu a jejich nápravy,
• kategorizace nástrojů, které lze pro získání kvalitativních dat využít,
• popis a příklady výstupů z těchto nástrojů,
• Zajímavosti ze světa optimalizace.

Live-testing

Během tohoto „uživatelského testování“ jsme probrali řadu drobných nedostatků, což se stalo velmi hodnotným feedbackem pro všechny zúčastněné. V řadě případů byla některá problematická místa trochu sporná a rozvinula se kolem nich zajímavá debata. Vždy jsme se ale nakonec shodli na určitém řešení, které by v případě daného webu přispělo ke zlepšení.

Poslední středa se tedy protáhla, nikdo z přítomných si ale nestěžoval, spíš naopak. Zapojení účastníků se osvědčilo a určitě bychom jej chtěli příště zopakovat.

Připomínáme, že prosincová Poslední středa se nekoná. Lednové téma ještě není vypsáno a zveřejníme jej na začátku roku.

Termín CAPTCHA, neboli „Completely Automated Public Turing test to tell Computers and Humans Apart“, je metoda, jak na webu automatizovaně rozpoznat počítač od člověka. Obvykle se s ní setkáte u formulářů, kde má typicky podobu obrázku s deformovaným textem, pod nímž se nachází vstupní textové pole. Úkolem uživatele je správně opsat text z obrázku. Pokud udělá chybu, formulář se neodešle a systém vygeneruje nový obrázek.

CAPTCHA byla vyvinuta na konci 90. let minulého století. Důvodem byl zvyšující se počet spamu, vkládaného na stránky prostřednictvím tzv. botů, což jsou aplikace schopné rozpoznat a automaticky odeslat formuláře vyplněné nežádoucími odkazy. Metoda je založena na předpokladu, že počítač (využívající technologii OCR) na rozdíl od člověka nedokáže správně rozpoznat a přepsat zdrojový text.

Achillovou patou této metody je přílišná deformace textů, která vede k tomu, že ani lidé nedokážou text správně přečíst. CAPTCHA pak uživatele nutí k opakovanému přepisování obrázku nebo v horším případě odeslání formuláře úplně znemožní. Příkladem může být následující jen obtížně čitelná CAPTCHA:

Osobně považuji CAPTCHU za velký problém z hlediska použitelnosti. Proto jsem rád, že Dr. Peters J. Meyers, ředitel konzultační společnosti User Effects, nedávno přišel se zajímavým nápadem, jak učinit CAPTCHU lépe použitelnou (čitelnější) se zachováním vysoké úrovně bezpečnosti.

Řešení je poměrně prosté. Meyers doporučuje obrázek s textem horizontálně rozpůlit na dvě části (každá část obsahuje přesně půl textu) a na webu jej prezentovat kompletní pomocí kaskádových (CSS) stylů. Počítač na rozdíl od člověka neuvidí výslednou stránku s CSS styly, ale jen zdrojový kód, kde jsou obrázky dva a samostatně nedávají smysl. Text na obrázku tak může být dobře čitelný a počítač jej stejně nedokáže přečíst.

Asi vás napadne, že toto řešení skýtá problémy pro uživatele, kteří web neprohlížejí se zapnutými CSS styly nebo obrázky a také pro zrakově postižené. Tento problém by měl ve většině případů vyřešit odkaz, který umožňuje přehrát zvukovou stopu s textem z obrázku. Kromě toho doporučujeme vedle obrázku doplnit odkaz typu „Jiný obrázek, tento nepřečtu.“ pro uživatele, kteří mají i při použití této metody problém s čitelností textu.

Domníváme se, že tato CAPTCHA bude bezpečná a zároveň použitelná, a proto bychom si přáli, aby se na webu ujala. Co si o tomto řešení myslíte vy? Jak se bráníte SPAMu zasílanému přes formuláře? Podělte se s námi o své zkušenosti v diskusi.

Přesměrovávejte z nesprávných adres tvořených cizími CMS (s tečkou či závorkou na konci) na správné adresy.

Znamená to, že jakékoli URL webu by mělo fungovat i tehdy, pokud se na konec přidá tečka, závorka (případně i čárka, středník) – například by mělo být funkční URL blog.h1.cz/. nebo blog.h1.cz/). Ideálně by obě tyto adresy měly být přesměrovány pomocí stavového kódu 301 na správnou URL blog.h1.cz.

Ač jsem napsal hezkých pár heuristických analýz, nepamatuji si, že by to měl nějaký web kdy ošetřeno. Osobně jsem toto pravidlo považoval za poměrně málo důležité, ostatně na webech se většinou našla řada podstatně závažnějších prohřešků proti dobré použitelnosti. Existuje však typ webů, kde je toto pravidlo naopak dosti podstané, protože jejich URL se velmi často umísťují právě do různých CMS, které z textové podoby URL generují aktivní odkaz. Těmito weby, či spíše webovými službami, jsou zkracovače URL, mající za úkol vytvořit co nejkratší alternativu k existující adrese.

Mám ještě v živé paměti, jak jsem v duchu spílal autorům těchto služeb za nefunkční URL na Twitteru, která byla zapříčiněna právě kombinací ne zcela ideálního převodu URL v textu na aktivní odkaz na straně Twitteru a neošetřeném přesměrování na straně zkracovadel URL. Dnes se s tímto problémem už nesetkávám, ale vyřešen byl zřejmě na straně Twitteru, nikoli zkracovadel URL. Jak vidíte v následující tabulce, ani dnes si řada zkracovadel s chybnými URL neporadí, některé (twurl.cc a zkracovatko.cz) dokonce vracejí na chybná URL stavový kód 200 OK.

Pokud byste si sami chtěli otestovat další podobné služby, může vám pomoci seznam zkracovátek URL.

Na zmíněném pravidle se dá hezky ilustrovat jedna vlastnost heuristické analýzy – pravidla, která jsou její součástí (a aktuální počet pravidel v naší firemní heuristice se pohybuje kolem 270), jsou obvykle výsledkem nějakého zobecnění situací, které se vyskytly např. u uživatelských testování. U různých typů webů tak jednotlivá pravidla nabývají různé důležitosti.

Přestože je při psaní heuristické analýzy daná sada pravidel, které se kontrolují, velmi záleží na správném posouzení důležitosti určitého pravidla pro testovaný web. Osoba autora heuristické analýzy, potažmo její zkušenosti s použitelností a uživatelským testováním, je tak velmi důležitá, může zásadním způsobem ovlivnit vyznění analýzy. Proto se také s našimi heuristickými pravidly příliš netajíme a například na workshopu uživatelského testování je účastníci dostávají jako bonus.

Video

Prezentace

Velmi atraktivní téma připravuje pro příští Open Monday Vladimír Saur. Potěší všechny, kdo se zajímají o SEO i tvorbu webů. Vysvětlí, jak se provádí analýza KW a jak ji použít pro návrh struktury webu. Registrujte si své místo už teď.

Kolega Michal Pařízek vyzkoušel celkem sedm nástrojů, z nichž pět je zpoplatněných a dva jsou k dispozici zdarma. Zajímavostí také je, že se na seznam relativně sofistikovaných nástrojů dostala jedna čistě webová aplikace a program, který lze dokonce používat jako rozšíření prohlížeče Firefox. Teď ale k tomu nejdůležitějšímu – kdo je vítěz?

Po zralé úvaze jsme se rozhodli zůstat u Axure RP. Relativně vysokou cenu tohoto software (přes 10 000 Kč za licenci) totiž kompenzuje celá řada vlastností, které jsou pro naši práci důležité. Patří mezi ně především:

• Specializace na návrh webových stránek.
• Široká škála užitečných rozšíření (widgetů), která umožňují dělat interaktivní návrhy (klikatěný kalendář, drop-down menu, formuláře apod.).
• Propracované možnosti exportu – od PDF, přes obrázky až po sadu odkazy provázaných HTML stránek.
• Možnost vygenerovat k wireframům detailní specifikaci obsahující popis jednotlivých součástí stránky, komentáře apod.
• Třešničkou na dortu je pak možnost přizpůsobit šablonu specifikace, takže z wireframu můžete vyexportovat v podstatě hotový dokument pro klienta.

Kromě Axure RP jsme vyzkoušeli:

• Protoshare
• Microsoft Visio 2007
• Flair Builder
• Balsamiq Mockups
• Serena Composer
• Pencil Project

Pozornější z vás si možná všimli, že na seznamu chybí OmniGraffle, software dominující na jablíčkářské platformě Mac OS X. To je pravda, ale protože jsme rešerši prováděli především pro interní potřeby a v H1.cz všichni používáme Windows, logicky jsme OmniGraffle vynechali. Rádi si však přečteme váš názor v komentářích.

Stáhněte si celou rešerši (formát PDF, velikost 1MB), a pokud vám přijde užitečná, pošlete ji i svým známým.

Představení Clicktale

• Form analytics umožňuje komplexní sledování interakce uživatele s formulářem na stránce. Pomocí něj lze např. zjistit, které z polí je uživateli v průměru vyplňováno nejdéle (a tím pádem by tedy zasluhovalo upravit). Lze dokonce sledovat, jaké konkrétní hodnoty jednotliví uživatelé vyplňují (vhodné pro testování problematických polí, typicky např. formát telefonního čísla či PSČ).

• Dalším zajímavým výstupem je Scroll Mapa zobrazující, která část stránky je pro uživatele nejvíce atraktivní. Princip měření je založen na sledování pozice posuvníku v prohlížečia  všechna měření jsou následně agregována. Měření tedy není tak dokonalé jako u klasického eye-trackingu, ale pro získání alespoň hrubé představy určitě postačí. Součástí Scroll Mapy je ještě Link Analytics, tedy detailní monitorování odkazů na stránce (počty kliků, hover time a time-to-click a další statistiky).

• Nejsilnější “zbraní” je ovšem Visitor Playback. Pomocí vložených JavaScript kódů je návštěva uživatele nahrávána ve formě připomínající klasický screencast. Je sledován pohyb kurzoru myši, kliknutí a stisk kláves. Samozřejmě nemá cenu při vyhodnocování sledovat jednoho návštěvníka po druhém, ale díky pokročilým možnostem filtrace (přístupné u placené verze) lze získat segment návštěvníků, u kterých to smysl mít bude. Příkladem takového segmentu mohou být uživatelé, kteří přišli z rozeslaného e-mailingu a navštívili zvolenou konverzní stránku. Následnou analýzou pohybu těchto uživatelů po jednotlivých stránkách lze zjistit potenciální nedostatky.

Implementace

Cena

Výsledky měření

Titulní stránka

Měřením jsme zjistili, že vyhledávací pole na titulní stránce používá necelých 40 % uživatelů a jeho vyplnění jim zabere v průměru 50 s.

Z výstupu je patrné, že některé prvky formuláře mají podstatně větší „klikavost“ než ostatní. V nově připravované verzi tedy jednotlivé prvky lépe uspořádáme podle priorit. Zároveň  odstraníme některé prakticky nepoužívané prvky – konkrétně například skupinu radio-buttonů v pravém horním rohu a dále pak také odkaz na nápovědu (Chci s hledáním poradit) v levém dolním rohu.

Katalog hotelů

Na této stránce je podobně jako na titulní stránce nejčastější akcí uživatele vyhledávání (necelých 30 %), takže by mu měla být věnována velká pozornost. Z výstupu je patrné, že některé země (Egypt, Řecko) dominují nad těmi ostatními, jejich řazení by tomu tedy mělo být přizpůsobeno. V připravované verzi proto nahradíme řazení abecední řazením podle populárnosti a stejnou úpravu provedeme u volby parametrů.

Samotný výpis hotelů bude rovněž přepracován – odebereme stránkování v horní části a nabízené možnosti zobrazení, které jsou uživateli prakticky ignorovány. Tím by mělo dojít k výraznému zjednodušení celé stránky.

Stránka země Řecko

Na stránce věnované zájezdům do Řecka se hezky potvrdilo, že oblast pod přehybem stránky je pro většinu uživatelů prakticky neviditelná. Při jejím novém návrhu tedy budeme toto zjištění respektovat a úplně odebereme výpis konkrétních zájezdů pod mapou. Tím by mělo dojít k celkovému zpřehlednění stránky.

Závěrem

Na problém subjektivnosti bychom při úpravách neměli zapomínat. Pomocí Clicktale (a jemu podobných nástrojů) si svoje hypotézy můžeme ověřit a následně je buďto přijmout anebo naopak zamítnout. Připravte se na to, že pravděpodobně budete velmi často překvapeni tím, jak je chování uživatelů diametrálně odlišné od vašich očekávání.

Přestože ze zdrojů popsaných níže získáte mnoho znalostí, platí, že teoretické poznatky nedokážou nahradit praktickou zkušenost z oblasti tvorby, analýzy a testování webů. Pro začátek třeba sledujte známé a kamarády při práci s internetem. I tak si dostatečně zažijete základní „motto“ použitelnosti, kterým je fráze Steva Kruga: Nenuťte uživatele přemýšlet. Shoduje se s názvem jedné z jeho knih, o které ještě bude řeč.

Internetové zdroje

Seriál článků napsal Jakob Nielsen, který je považován za největší osobnost v oblasti použitelnosti. Články vycházejí dodnes pravidelně, přibližně jeden za čtrnáct dní. Jedná se o velmi kvalitní zdroj informací. Doporučuji projít si i články z minulosti. Je jich opravdu hodně a většina z nich má nadčasovou platnost.

Na weblogu Henrika Olsena už dnes nevycházejí aktuální články, autor pouze upozorňuje na zajímavý obsah ostatních webů. Soubor starších textů však stojí za přečtení, protože bez zbytečné „omáčky“ mapují ty nejdůležitější principy použitelnosti. Důraz je také kladen na tvorbu wireframů, která bude tématem připravované knihy. Na ní Henrik Olsen v současné době pracuje.

Jedná se o weblog Petera Morvilla, zakladatele společnosti Semantic Studios, spoluautora bestselleru Information Architecture for the World Wide Web a uznávané osobnosti v oblasti informační architektury. Na svém weblogu se kromě informační architektury věnuje i UX (User Experience). Z poslední doby stojí za zmínku článek o tom, co neopomenout při návrhu dobrého webu.

Hodnotný zdroj informací představuje publikační činnost Software Usability Research Laboratory, výzkumné organizace v oblasti použitelnosti a HCI (Human Computer Interaction) kansaské Wichita State University. Právě z jejich výzkumů pochází mnoho dnešních pravidel použitelnosti.

Weblog Martina Snížka – našeho bývalého konzultanta – je věnován internetovému marketingu. Velký prostor patří právě použitelnosti a jedná se o takřka jediný a velice kvalitní český zdroj o tomto tématu. Doporučuji věnovat pozornost zejména kategorii Nejlepší články.

Weblog společnosti FutureNow, kde články vycházejí skoro denně, je zaměřen zejména na online marketing a optimalizaci konverzí. Články mají proměnlivou kvalitu a hodně se navzájem prolínají, ujistěte se však, že ty opravdu hodnotné vám neutekly.

Poměrně nový weblog Dmitry Fadeyeva o designu a použitelnosti nejen webových stránek, ale i desktop aplikací. Články vychází pravidelně. Za zmínku stojí např. článek 8 charakteristik dobrého uživatelského rozhraní.

Další z weblogů o použitelnosti, který je zaměřen spíše na začátečníky. V současnosti zde vychází pár článků měsíčně, v minulosti byli aktivnější a v archívu lze najít množství článků různé kvality. UserEffects nedávno například zajímavě popsalo rozvržení prvků dobře použitelné stránky.

Weblog prestižní americké konzultační a výzkumné společnosti User Interface Engineering, mezi jejíž klienty patří giganti typu Apple, Microsoft či IBM. Přestože se zde často objevují pouze upoutávky na konference či semináře, najdete mezi jednotlivými spoty i zajímavé články nebo podcasty.

Tento on-line magazín je zaměřený především na webdesignéry, ale často jsou publikovány i články zaměřené na použitelnost (např. článek věnující se přihlašovacím formulářům). Autoři občas udělají tzv. Usability redesign stránky (viz. návrh změn na serveru Craigslist.org), který se podobá již ukončenému projektu 37 Better.

Knihy v češtině

Na závěr doporučím i dvě knihy o použitelnosti, které jsou přeloženy do češtiny.

Autor: Steve Krug

Skvělá kniha o použitelnosti webových stránek, která je bohatě ilustrována a psána velmi čtivě. Autor se snaží přimět čtenáře, aby se při tvorbě webu zamysleli nad tím, jak na něj budou nahlížet uživatelé. Hlavní myšlenka je shodná s názvem knihy: Nenuťte uživatele přemýšlet.

Autoři: Jakob Nielsen a Marie Tahir

Neméně skvělá kniha, která se, jak z názvů vyplývá, zaměřuje na titulní stránky. Ta je pro každý web velmi důležitá, protože se často jedná o místo, kde se uživatel poprvé setká s webem. Jakob Nielsen s Marií Tahir v této knize hodnotí použitelnost titulní stránky několika webů známých společností a vždy navrhnou její lepší provedení. Kniha obsahuje také úvodní teoretickou část se základními pravidly použitelnosti pro domovské stránky. Menší nevýhodou této publikace je, že vyšla v originále v roce 2001. Analyzované titulní strany již nejsou aktuální.

Mám-li k přečtení doporučit tři nejdůležitější zdroje na téma použitelnost, vybral bych tyto: seriál článků Alertbox od Jakoba Nielsena, weblog GUUUI od Henrika Olsena a knihu Nenuťte uživatele přemýšlet od Steva Kruga.

Máte-li nějaký tip na hodnotný zdroj o použitelnosti, podělte se o něj s námi v komentářích! A za týden si přečtěte o Nejzajímavějších zdrojích o měření návštěvnosti prostřednictvím Google Analytics.

Proč testovat na mobilních zařízeních

• Počet uživatelů přistupujících na internet prostřednictvím mobilních zařízení neustále roste, a to meziročně řádově až o stovky procent. (Zdroj: State of the Mobile Web, November 2008)
• Velká část uživatelů internetu se již celkem dobře naučila používat webové stránky v běžných prohlížečích. Mnohem menší zkušenosti však mají s ovládáním webů v mobilu. K tomu je potřeba při návrhu a úpravách mobilních webů přihlížet a právě uživatelské testování pro vás může být v tomto případě dobrým vodítkem.
• Na poli mobilních zařízení panuje mnohem větší různorodost v platformách, které mohou uživatelé pro přístup ke stránkám používat. Zatímco běžné webové prohlížeče se z hlediska zobrazování a ovládání webových stránek liší jen minimálně, u mobilních zařízení hraje použitá platforma stále velmi významnou roli.

Specifika testování na mobilních zařízeních

• Pro záznam průběhu testování například nelze použít software snímající dění na obrazovce tak, jak to děláme v případě klasických testování.
• Aby výsledky testování nebyly znehodnoceny neschopností uživatele vybrané zařízení používat, je rozumné provádět testování na zařízeních patřících přímo testovaným osobám, nebo aspoň takových, na jaká jsou zvyklí. Na to je dobré myslet již při rekrutaci testerů.
• Testování by mělo probíhat v prostorách s dobře nastaveným osvětlením. Jednak je totiž potřeba, aby uživatelé dobře viděli na displej, a navíc, pokud se rozhodnete nahrávat testování videokamerou, tak aby také záznam z ní byl dobře čitelný.

Jak jsme testovali my

• Jaký má být výstup z testování a k čemu budou výsledky použity.
• Jaká mobilní zařízení mají být pro testování použita.
• Které služby jsou nejpoužívanější a jaké stránky nejnavštěvovanější.
• Jak mají být v rámci testování zastoupeni různě pokročilí uživatelé.

Na základě těchto informací jsme nakonec testování prováděli na skupině přibližně deseti osob, v rámci které byli mírně pokročilí uživatelé mobilního internetu zastoupeni přibližně z jedné čtvrtiny a zbytek tvořili pokročilejší uživatelé.

• Velikost displeje,
• rozlišení displeje,
• vstupní zařízení (stylus, číselná klávesnice, QWERTY klávesnice apod.),
• operační systém, firmware či prohlížeč.

Při rekrutaci vhodných testerů si pak nemusíte tolik lámat hlavu s tím, jaké konkrétní zařízení by měl používat, ale stačí vám vybírat vhodné kandidáty právě podle příslušnosti k definovaným „rodinám“.

• Krátký úvodní rozhovor.
• Plnění uživatelských úkolů.
• Závěrečný rozhovor a vyplnění krátkého dotazníku.

Pro dotazník jsme se rozhodli i s vědomím, že na základě tak malého vzorku nelze dělat žádné kvantitativní závěry. Nakonec však byly některé získané poznatky velmi cenné a ještě se jim budu věnovat dále.

Celé testování jsme zaznamenávali videokamerou zaměřenou na displej mobilního telefonu s dostatečným přiblížením, aby bylo možné záznam zpětně analyzovat.

Zajímavá zjištění

Datový objem stránek

Jako velký problém se ukázala datová velikost stránek. Ta ovlivňuje rychlost jejich načítání, a pokud se to neděje dostatečně rychle, uživatele to nejen odrazuje, ale často také vede k jejich zmatení.

Přehlednost stránek

Zatímco u klasického webu se již uživatelé naučili poměrně rychle orientovat i ve větším množství informací, na mobilních zařízeních s omezeným zobrazovacím prostorem je nutné klást mnohem větší důraz na jednoduchost a přehlednost stránek.

Navigační mechanizmy

Na rozdíl od klasického webu, kde více navigačních mechanizmů, pokud jsou použity promyšleně, může uživatelům používání stránek značně zjednodušit, u mobilního webu se zdá být efektivnějším způsobem použití pouze jedné dobře propracované navigace. Přehlednost zmiňovaná v předchozím odstavci by měla být dodržena i v rámci navigace, zejména pak pokud jde o počet odkazů zobrazených na stránce.

Obsah nad a pod přehybem

Většina lidí zabývajících se použitelností webových stránek ví, že tzv. přehyb (část stránky viditelná při daném rozlišení po jejím načtení bez použití posuvníku) hraje při prezentaci informací na stránce významnou roli. Při testování na mobilech se však ukázalo, že u mobilního webu je přehyb ještě řádově důležitější a často může pro uživatele být i nepřekonatelnou bariérou.

Konzistence napříč stránkami

Velkým problémem pro uživatele bylo, pokud se od sebe jednotlivé stránky mobilního webu výrazněji lišily celkovým zpracováním. Uživatel si pak v extrémních případech dokonce nebyl jistý, zda se ještě nachází na původním webu, nebo zda se již dostal mimo něj. Je důležité si uvědomit, že mobilní zařízení většinou uživateli poskytuje mnohem méně kontextových informací, než klasický webový prohlížeč. Uživatel tak ve většině případů nemá před očima URL, na které se právě nachází, a často také nevidí titulek jednotlivých stránek, což mu orientaci ztěžuje.

Informační architektura

• V jaké části webu se momentálně nachází.
• Jaké jsou možné další kroky.
• Jak se snadno vrátit o krok zpět.

Další zdroje informací

• Jakob Nielsen: Mobile Web 2009 = Desktop Web 1998
• Usability Testing of Mobile Applications: A Comparison between Laboratory and Field Testing (PDF, 274 kB)
• Mobile & handheld usability testing – why it matters

Závěr

Uživatelské testování webů na mobilních zařízeních je v našich končinách zatím spíše v plenkách. S jejich vzrůstajícím počtem a zvyšující se penetrací mobilního internetu mezi českými uživateli však bude získávat stále více na důležitosti. A co vy, máte s testováním mobilních webů nějaké zkušenosti?

Chtěli byste také otestovat svůj mobilní web? Rádi vám pomůžeme!