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!

Určite si, kto z týmu bude za finálny grafický návrh zodpovedný

V prvom rade pri návrhu novej grafiky je veľmi dôležité stanoviť hlavnú osobu, ktorá bude niesť za celý projekt zodpovednosť. Ku grafickému návrhu sa často vyjadruje celá firma, čo nebýva vždy prínosné. Práve táto osoba by mala všetky pripomienky korigovať a brať do úvahy len tie, ktoré sú v prospech celého konceptu. V opačnom prípade sa úplne vytratí pôvodná idea grafika a vznikne návrh, ktorý síce vyhovuje celej firme, ale neberie do úvahy to najdôležitejšie – požiadavky cieľovej skupiny. Aké znalosti by mala mať táto osoba?

• Veľmi dobre pozná vašu firmu, cieľovú skupinu, celkovú stratégiu spoločnosti i konkurenčné stránky.
• Orientuje sa v oblasti internetového marketingu alebo reklame.
• Má prehľad v súčasných trendoch designu webových stránok.
• Pozná základné pravidlá použiteľnosti a tvorby webových stránok.

Ujasnite si s grafikom základnú víziu

Pred samotným grafickým návrhom odporúčam ujasniť si s grafikom vašu predstavu o jeho práci. Vysvetlite mu základné informácie o vašej spoločnosti, obore a cieľovej skupine. Rozhodne nie je na škodu vopred mu vytipovať stránky, ktorým by ste sa chceli priblížiť a pripraviť mu prehľad konkurenčných stránok, od ktorých by sa mal odlíšiť. Na základe týchto údajov ľahšie pochopí celý koncept a dokáže k nemu vytvoriť odpovedajúci grafický design.

V prípade, že grafik vychádza z pripravených wireframes je dôležité mu stanoviť hranice ako môže s nimi pracovať. Wireframes definujú základný koncept rozmiestnenia dôležitých prvkov na stránke, ako je hlavná a vedľajšia navigácia a samotný obsah stránky. Grafik by však mal mať voľnosť pri práci s nimi a využiť naplno svoj potenciál. Preto i v tejto fázy môže dôjsť k zmenám v návrhu rozloženia prvkov v prípade, že to bude k prospechu pre projekt.

Ako hodnotiť prvotný výstup od grafika

Prvú vec, ktorú musí každý pri hodnotení grafického návrhu pochopiť je, že „vy“ nie ste typickým predstaviteľom cieľovej skupiny. A to čo sa páči Vám, to sa nemusí pozdávať tým, ktorí vaše produkty a služby skutočne nakupujú. I v tejto fázy Vám môžu pomôcť persóny (tj. fiktívne osoby, ktoré majú hlavné charakteristiky vašej cieľovej skupiny).

Pokiaľ nechcete skončiť na zozname ClientsFromHe­ll.net, netyranizujte designéra prázdnymi komentármi v duchu „Mne sa to nepáči“. Hlavnou úlohou grafika totiž nie je trafiť sa do vkusu marketingového manažéra, ale zákazníka, ktorému má pomôcť orientovať sa na stránkach. Vyvarujte se preto komentárom ako:

“The website should have the passion of Eleanor Roosevelt, but the charm and charisma of Bill Clinton.”

Hodnoťte objektívne nasledujúce parametre

Ako grafik splnil vaše zadanie

Celkový design stránok by mal odrážať zameranie vašej spoločnosti i to ako chcete pôsobiť na ľudí. Zatiaľ čo u e-shopu s detským tovarom si môžete dovoliť použiť sýte farby a nápadité ilustrácie, na finančnom serveri alebo u poisťovne užívatelia očakávajú skôr striedmu grafiku evokujúcu seriózny a dôveryhodný prístup. Preto sa na začiatku pokúste zamyslieť nad tým, či grafický design vystihuje atmosféru vašej spoločnosti a vychádza z vašej firemnej identity.

Skôr ako sa pustíte do kritiky, skúste sa s ním porozprávať a nechať si vysvetliť jeho zámer. Ak Vás jeho dôvody nepresvedčia, požiadajte ho o ďalšie návrhy, aby ste mali možnosť porovnávať. V prípade, že máte záujem dozvedieť sa o použití farieb na web trochu viac, odporúčam prečítať si článok A Look into Color Theory in Web Design.

Následne porovnajte nový návrh s grafickými webmi vašej konkurencie. Dajte si pozor či ho dokážu užívatelia ľahko rozpoznať, prípadne či medzi nimi nezapadne. V tejto fázy rozhodne nie je na škodu ukázať nový grafický návrh nezainteresovaným osobám, u ktorých si môžete overiť aký prvý dojem v nich vyvoláva.

V prípade, že grafik vychádzal z pripravených wireframov skontrolujte taktiež, či sa v grafikom návrhu nachádzajú všetky požadované prvky. Už sa nám niekoľkokrát stalo, že z hlavnej stránky napríklad vypadol dôležitý reklamný banner, ktorý sa proste do grafiky nehodil.

Prioritizácia informácií

Úlohou grafika rozhodne nie je iba „dať farbu“ wireframom, ale mal by do nich vložiť svoju pridanú hodnotu. Zatiaľ čo vo wireframes sa dôležité prvky na stránke znázorňujú použitou veľkosťou písma, ohraničením alebo komentárom, v grafickom návrhu se pre tento účel používajú piktogramy, veľkosť a farby písma a iné varianty zvýraznenia. Typicky by mali mať najvýraznejšiu vizuálnu prioritu prvky, ktoré vyzývajú návštevníka z nejakej akcii, tzv. call-to-action prvky (tlačítko objednať pri detaily produktu, registrovať sa a pod.).

Práve grafik by mal pomocou vhodných techník zvýrazniť dôležité prvky a tie menej významné upozadiť (tzv. prioritizácia informácií). Zároveň je jeho úlohou udržať na všetkých stránkach webu konzistentný vzhľad prvkov s rovnakou funkciou (tlačidla, formuláre, odkazy) a zaistiť vizuálne jednotný štýl všetkých stránok.

Dodržanie pravidiel použiteľnosti

Grafický návrh samozrejme musí spĺňať i základné požiadavky z hľadiska použiteľnosti. Medzi tie základné patria:

• dostatočný kontrast farieb pozadia a popredia,
• dostatočne veľké písmo,
• odlíšené odkazy od normálneho textu,
• dodržanie základných konvencií tvorby webu.

Pokiaľ i v tomto ohľadu dodaný návrh vyhovie vášmu očakávaniu, môžete sa pustiť do ďalšieho kroku, ktorým je zvyčajne kódovanie šablón a ich implementácia.

Zhrnutie

S grafikom si vždy dopredu nastavte vzájomné očakávanie, jasný spôsob komunikácie, termíny i presný proces tvorby grafických návrhov. Po dodaní prvej verzie návrhu sa vyvarujte všeobecným pripomienkam, ale kritizujte konkrétne problémy, pričom svoje tvrdenie ideálne doplňte príkladmi webu, na ktorých ľahko ukážete svoje predstavy. Pokiaľ bude obom stranám od začiatku jasný cieľ i proces práce, vyhnete sa 90 % nedorozumeniam, čo je to najlepšie, čo môžete pre svoj web urobiť.

A s akými úskaliami sa pri spolupráci s grafikom stretávate vy? Podeľte sa s nami o vaše skúsenosti v komentároch.

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ř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!

Potýkám se momentálně s problémem uspořádání produktové stránky (detail produktu) našeho budoucího obchodu. Když už jste na začátku nakousli ten Megapixel, tak se to pokusím vysvětlit na něm. Na stránce detailu produktu jsou fotky, stručný popis, do košíku, cena, sklad apod. Potud všechno fajn. Pokud ovšem máme k produktu co říci (podrobné parametry, plusy, mínusy, hodnocení a komentáře k produktu). Otázka je, jak to vyřešit co nejlépe.

Jak už to tak bývá, možností je požehnaně. Pojďme si popsat ty smysluplné, přičemž se vždy zaměříme na hlavní výhody a nevýhody nabízeného řešení:

1. Záložky s vlastními stránkami

Tuhle možnost můžete vidět například na současné verzi webu Megapixel.cz nebo v obchodech patřících k Mall.cz. Používá se obvykle u výrobků, u nichž máte k dispozici velké množství informací, které chcete přehledně rozdělit do skupin a jednotně prezentovat napříč celým webem.

Výhody

• Každá skupina informací má vlastní stránku. Větší množství stránek může být výhodné z hlediska SEO – získáte větší kontrolu nad rozmístěním a hustotou klíčových slov a strukturou obsahu.
• Přehlednost. Vyšší přehlednost není jistá, nicméně ze zkušenosti vím, že při menším množství obsahu na stránce je nižší šance, že se designér dopustí závažných chyb.
• Rychlost načítání stránky. Tato vlastnost je v dnešní době spíše zanedbatelná.

Nevýhody

• Při každém přechodu mezi záložkami se znovu načte celá stránka. Obvykle přitom zobrazí web od vrchního okraje případně od pruhu se záložkami (pokud míří odkaz záložky na kotvu ve stránce), což většinou vede k většímu či menšímu „cuknutí“ stránky a následnému zmatení uživatele. Tohle je z hlediska použitelnosti dost nepříjemné.
• Hrozí vznik duplicitního obsahu. Pokud některé záložky obsahují jen malé množství unikátního obsahu, hrozí, že budou vyhledávače stránky záložek považovat za duplicitní.

2. Záložky přepínané JavaScriptem

Na pohled vypadá toto řešení úplně stejně jako předchozí, po technické stránce je ale zcela odlišné. K vidění je třeba v e-shopu Palm PC. Záložky tentokrát přepínáme JavaScriptem, takže veškerý obsah všech záložek máme pouze na jediné stránce. Přepínání mezi záložkami je rychlejší a nedochází při něm ke znovunačtení stránky.

Výhody

• Rychlost přepínání mezi záložkami.
• Žádné poskakování stránky při přepínání záložek.
• Hodně obsahu na jedné stránce. Ve vyhledávačích máte pro každý produkt jedinou stránku, na kterou můžete zaměřit veškerou svoji pozornost. Obsah se tak nedělí mezi větší množství velice podobných stránek.

Nevýhody

• Hodně obsahu na jedné stránce. Některý obsah, jako například hodnocení nebo diskuse, vám může stránku produktu obsahově neúměrně natáhnout, zaplevelit velkým množstvím balastu a vůbec nabourat vaše snahy o její optimalizaci pro vyhledávače.
• Vyšší doba načítání stránky. Všechny informace k produktu se nacházejí na jediné stránce, proto je vyšší její celkový objem, a tudíž i doba načítání.
• Větší zátěž databáze. Při otevření stránky produktu načítáte všechny informace (například včetně komentářů), což výrazně zvyšuje počet dotazů do databáze.
• Zmatení uživatele při příchodu z vyhledávačů. Vyhledávače indexují obsah všech záložek, nicméně při příchodu na stránku je otevřena jen jedna z nich. Uživatel na ní přitom vůbec nemusí najít obsah, který mu vyhledávač zobrazil ve výsledcích vyhledávání.

3. Vše na jedné stránce

V hlavě bohužel nemám žádný vhodný příklad, ale toto řešení spočívá jednoduše v tom, že všechny informace zobrazíte na jediné stránce bez jakýchkoliv záložek. Můžete je přitom rozdělit do sloupců, vypsat je pod sebe s nadpisy nebo využít jakékoliv jiné rozvržení stránky.

Výhody i nevýhody ve vztahu k vyhledávačům jsou v tomto případě obdobné jako u záložek přepínaných JavaScriptem. Co se týče uživatelů, tam nese toto řešení velké riziko plynoucí z dlouhých a často nepřehledných stránek. Kromě toho klade zpracování velké nároky na správnou prioritizaci informací, nutí vás totiž obvykle některé údaje umísit výše a jiné až na konec stránky. Hrozí, že k některým z nich se uživatel vůbec nedoscrolluje.

4. Úryvky na jedné stránce

Světoznámým reprezentantem tohoto přístupu je Amazon. Všechny informace umisťuje na jedinou stránku, většinu z nich ale pouze ve formě „ochutnávky“ s odkazem na kompletní výpis. Přečíst si tu tak můžete například 3 z celkových 150 komentářů, vidíte jen přibližně první desítku z uživateli použitých štítků atd.

Toto řešení je podobné výpisu všech informací na jediné stránce, obvykle ale bývá přehlednější, méně zatěžuje databázi a jeho výsledkem je kratší stránka. Stejně jako předchozí se hodí především v případech, kdy by už záložek u každého produktu bylo příliš. Tentokrát si ale musíte dát velký pozor při určování kritérií, podle kterých chcete „útržky“ z jednotlivých sekcí vybrat, a opět je důležité obsah na stránce logicky rozmístit a seřadit.

5. Kombinace výše uvedených řešení

Všechna výše uvedená řešení můžete samozřejmě podle libovůle kombinovat. Obecně však platí, že v takovém případě je dvojnásob důležité mít po ruce zkušeného designéra a provádět při vývoji testování chystaného rozvržení na uživatelích. Příkladem budiž dle mého názoru výborně navržený obchod NewEgg.com, který kombinuje výpis úryvků na jediné stránce s JavaScriptem přepínanými záložkami.

Doporučení na závěr

Asi už tušíte, že žádné z nabízených řešení nelze označit za nejlepší a univerzálně použitelné. Vždy musíte vycházet ze specifik vašeho oboru a sortimentu a v každém případě je při návrhu dobré zkoušet různé možnosti a testovat je na lidech. Přesto se pokusím uvést malý tahák, který by vám mohl při výběru pomoci:

Záložky s vlastními stránkami se nejlépe hodí pro weby, které mají omezený počet typů obsahu (záložek), ale každý z nich je velice rozsáhlý a specifický. Je tedy žádoucí rozdělit obsah na více stránek a zabezpečit tak větší množství potravy pro vyhledávače a zrychlení načítání stránek při menší zátěži databáze.

Záložky přepínané JavaScriptem bych doporučil pro většinu běžných případů. Vyhnete se s nimi zmatení uživatelů i riziku duplicitního obsahu, vše bude probíhat rychle a hladce. Pokud se bojíte načítání všech diskusních příspěvků na stránce produktu, můžete na jejich záložce vypsat jen část z nich a ostatní zobrazit až na zvláštní stránce.

Vše na jedné stránce by měly zobrazovat jen obchody s menším množstvím informací a dobrým designérem (provádějícím uživatelské testování). V takovém případě uživatelům usnadníte skenování veškerého obsahu dostupného k vybranému produktu, jen si dejte pozor, ať si uživatel všimne, že stránka pokračuje i pod „přehybem“.

Úryvky na jediné stránce kladou asi největší nároky na designéra i informačního architekta. Je potřeba dbát na kvalitní výběr a pořadí obsahu, proto bych je doporučil jen obsahově tak rozsáhlým obchodům, kde už záložky nemohou efektivně plnit svou funkci.

Máte také dotaz?

Napište nám ho na info@h1.cz nebo do komentářů pod článkem a my se vám pokusíme tady na blogu poradit.