Na telefonu otevřete stránku klubu, ale adresu přečtete až po zvětšení. Čas začátku koncertu hledáte mezi obrázky a tlačítko pro vstupenky snadno přehlédnete. Podobně může zákazníka zdržet nečitelný jídelní lístek kavárny nebo telefonní číslo servisu, na které nejde klepnout. Mobilní web není jen zmenšený počítačový web: člověk na něm potřebuje vyřídit svůj úkol na úzké obrazovce, často jednou rukou a při proměnlivém připojení.
Mobilní přívětivost není jen otázka šířky
Responzivní web přizpůsobí rozvržení velikosti obrazovky. To je základ, ale text se může na displej vejít a přesto být příliš drobný. Za ikonou nabídky se může ztratit program, otevírací doba i kontakt. A formulář, který vyžaduje dlouhé vyplňování, člověk cestou v tramvaji snadno odloží.
Mobilně přívětivý návrh znamená čitelný obsah, ovládání prstem, rozumnou rychlost a informace uspořádané podle toho, co návštěvník hledá. Záleží na něm i podnikům, kde lidé nakonec nakupují osobně nebo na počítači. Na telefonu si totiž často nejdřív ověří adresu, otevírací dobu, cenu či možnost objednání. Když odpověď nenajdou, k dalšímu kroku se nemusí dostat.
Co se na malém displeji skutečně mění
Na monitoru se vedle sebe vejde nabídka, fotografie i kontakt. Telefon je řadí pod sebe, a tak záleží na pořadí. Velké logo a automaticky spuštěné video mohou odsunout datum akce nebo tlačítko pro nákup vstupenky hluboko dolů. Nahoře by mělo být to, kvůli čemu lidé na stránku přišli.
Obsah podle úkolu návštěvníka
U koncertu jsou to datum, místo, čas, cena a způsob, jak získat vstupenku. U zkušebny spíš vybavení, cena za hodinu, adresa a rezervace. Jinde se budou potřebné údaje lišit, postup je ale stejný: zjistit, co zákazník potřebuje k rozhodnutí, a podle toho stránku uspořádat. Podrobnosti není nutné škrtat. Stačí dát základní odpovědi na viditelné místo a detaily nechat snadno otevřít nebo rozbalit.
Prsty místo kurzoru
Prstem se netrefíte tak přesně jako myší a na telefonu nefunguje najetí kurzorem na prvek. Odkazy namačkané těsně vedle sebe vedou k chybným klepnutím; nabídka, která se otevírá jen po najetí myší, může být nepoužitelná. Tlačítka proto potřebují dost velkou plochu a odstup. Důležitá informace navíc nemá být schovaná jen v obrázku, který se na malém displeji zmenší.
Rychlost ovlivňuje použitelnost
V kanceláři na stabilní síti může stránka působit svižně, na mobilních datech se ale táhne. Přenos i telefon zatěžují přerostlé fotografie, automaticky spouštěné video, množství externích skriptů a složité efekty. Kulturní web se kvůli tomu nemusí vzdát své vizuální podoby: plakát lze připravit v přiměřené velikosti a vhodném formátu, program uvést jako skutečný text a video spouštět až na vyžádání.
Nejde jen o to, kdy se objeví první část stránky. Obsah by se při načítání neměl posouvat pod prstem a tlačítko by mělo reagovat bez zjevné prodlevy. Jinak může pozdě načtený obrázek odsunout termín rezervace právě ve chvíli, kdy na něj člověk klepne — a otevře se něco jiného.
Přístupnost pomáhá i v běžném provozu
Dostatečný kontrast, srozumitelné názvy odkazů a viditelné popisky formulářových polí pomáhají lidem se zrakovým nebo pohybovým omezením. Ocení je i ten, kdo čte venku na slunci, drží telefon jednou rukou nebo má zvětšené písmo. Stránka má zůstat použitelná při větším textu i při ovládání klávesnicí, nejen v ideálních podmínkách na jednom telefonu.
Fotografie, která nese informaci, potřebuje výstižný alternativní text. Program vystoupení by ale neměl být dostupný pouze jako grafický plakát: datum je užitečné zkopírovat, text zvětšit nebo si ho nechat přečíst asistivní technologií. Stejně praktická je adresa uvedená jako text a telefonní číslo, na které lze klepnout.
Jak poznat, co je potřeba opravit
Nezačínejte dojmem z úvodní stránky. Vezměte skutečný telefon a zkuste bez přibližování najít cenu, provozní dobu a kontakt, případně dokončit rezervaci či objednávku. Průchod opakujte na menší obrazovce a při pomalejším připojení. Kde musíte zbytečně čekat, udělat krok navíc nebo hádat, co se stane po klepnutí?
- Text: Dá se číst bez zvětšování a nezakrývá ho pevně umístěná lišta?
- Navigace: Je jasné, kde najít nejžádanější informace, i po zavření nabídky?
- Ovládání: Lze odkazy a tlačítka spolehlivě stisknout prstem?
- Formuláře: Jsou pole pojmenovaná, chyby vysvětlené a požadované údaje omezené na nezbytné?
- Obsah: Nejsou datum, cena nebo adresa dostupné jen v obrázku či souboru, který se na telefonu špatně čte?
Analytika ukáže, ze kterých mobilních stránek lidé často odcházejí nebo kde nedokončí formulář. Důvod z čísel samotných nepoznáte; pomůže projít stránku na telefonu a vyslechnout uživatele. U kulturního webu je přitom dobré sledovat zvlášť čtenost článků a chování na stránkách s praktickými údaji. Základní práci s čísly popisuje text Jak měřit návštěvnost článků na kulturním blogu.
Ne každá stránka potřebuje stejnou úpravu
Malý podnik nemusí hned předělávat celý web. Pokud lidé hledají hlavně cestu do provozovny, mají přednost čitelná adresa, otevírací doba a funkční kontakt. V obchodě může víc vadit košík, na hudebním blogu nečitelný dlouhý text nebo obtížný návrat k seznamu článků. Rozhoduje závažnost překážky a to, kolika důležitých úkolů se týká.
Vyberte jednu často navštěvovanou stránku a napište si konkrétní úkol: třeba najít začátek koncertu a otevřít nákup vstupenky. Projděte ho na telefonu. První místo, kde musíte zvětšovat, čekat nebo pátrat, opravte jako první — a pak stejný průchod zopakujte.
