Premýšľate nad novým webom alebo nad redizajnom toho súčasného? Vyhnite sa s nami najčastejším chybám responzívneho dizajnu.
Je to pre môj biznis dôležité?
Odpoveď je pravdepodobne Áno: mobilný web dnes potrebuje prakticky každý. Ak si to však chcete overiť, skontrolujte návštevnosť webu v Google Analytics. V časti „audience“ si rozkliknite časť pre „mobile“.
Následne si zoberte napríklad polročnú návštevnosť webu pri zobrazení na týždne a graf ukáže, koľko návštevníkov prišlo cez mobilné zariadenie. Zároveň môžete zistiť aj podiel mobilnej návštevnosti na celkovej návštevnosti.
Chyby, ktorých sa treba vyvarovať
Existujú tri riešenia, z ktorých si môžete vybrať, a nezáleží na tom, aký typ mobilného webu si vyberiete. Či už sa rozhodnete pre responzívny dizajn, dynamické servírovanie podľa návštevníkovho prehliadača alebo mobilnú verziu webu na samostatnej adrese.
Z hľadiska dizajnu a použiteľnosti ako takej však odporúčame, aby ste sa pri akomkoľvek riešení vyhli nasledujúcim chybám – ku ktorým, samozrejme, prikladáme aj ich možné riešenia.
1. Problémy s menu
Hamburger alebo textové tlačidlo „MENU“ nič nepokazí. Pre čo najlepšie pochopenie je vhodné využiť spojenie písaného textu a ikonky menu.
Dôležité je menu v rámci webu vhodne umiestniť. Často sa využíva umiestnenie do ľavého horného rohu, no pri zväčšujúcich sa veľkostiach mobilov odporúčame skôr využiť pravý horný roh, pretože je takto umiestnené menu na dosah palca, bez nutnosti zapojenia prstov druhej ruky.
UX odborník Zoltán Gócza z UXMyth presvedčivo argumentuje, že menu netreba obmedzovať na 7 položiek. Dôležitejšie ako ich počet je, aby položky menu vystihovali obsah stránok – napríklad služby, produkty, kontakt a podobne.
Ak sa rozhodnete neschovávať menu za ikonku, musíte ho vhodne zjednodušiť. V Analytics zistíte, ktoré stránky sú málo navštevované cez mobilné zariadenia a posuniete ich pozíciu v rámci menu na záver, napríklad za položku „ďalšie“. Zároveň v Analytics zistíte, ktoré stránky sú pre mobilných používateľov dôležité a posuniete ich v menu na vyššie pozície.
Pekný príklad ponúka nemecký web designmadeingermany.de. V plnej verzii obsahuje menu všetky pod-stránky. Pri zmenšovaní je používateľ ukrátený o sociálne siete. V najužšom bode stránka obsahuje len hlavné prvky menu. Pod-menu, ktoré obsahuje kategórie, je taktiež odstránené, pričom používateľ neprichádza o veľa.
2. Skrývačka s obsahom
Zjednodušovanie menu prináša riziko skrývania obsahu pred používateľom. Veľké množstvo mobilných webov nezobrazuje svojim používateľom určité informácie. Nejde o zavádzanie, skôr sa niektoré informácie nezmestia do mobilnej verzie, a tak sú brané ako nepotrebné a používateľ sa k nim nemá ako dostať.
Skrývanie je nežiaduce, pretože mätie používateľa, ktorý web pozná. Sám seba sa pýta: „Kde to je? Veď doma som to na počítači našiel presne tu!” Následná frustrácia používateľa nahlodáva jeho dôveru voči webu.
3. Tučné prsty či malé tlačidlá?
Tvorcovia aplikácií niekedy zabúdajú, že ich mobilné weby budú ľudia využívať pomocou prstov. Štandardne by mali byť použité ikonky a tlačidlá s veľkosťou minimálne 44 x 44 pixela. Toto je pravidlo (presadzované Apple), ktoré zaručuje minimálnu „stlačiteľnosť“.
Príkladom použitia malých tlačidiel a buniek formulárov je mobilná verzia imhd.sk.
Potrebujete pri nej presne mieriť prstami, lebo trafiť input okienko je dosť náročné. Tlačidlá sú taktiež malé a stlačiť sa dajú len vďaka svojej šírke.
4. Problematické obrázky
Obrázky sú často dôležitou súčasťou webov, či už ilustrujú a/alebo pomáhajú ku konverzii. Pre dosiahnutie pozitívneho zážitku na desktope i na mobilnom zariadení potrebujeme, aby sa zariadeniam prispôsobovali aj obrázky.
Pozor na veľkosť obrázkov! Mobilné surfovanie sa z veľkej miery realizuje po mobilných sieťach a nie všetci vaši používatelia majú 3G či 4G internet. Obrázky by mali byť načítané rýchlo – tak aby neoberali používateľa o čas a predplatené dáta.
Je kontraproduktívne, aby bola stránka načítavaná dlho, napríklad kvôli 2 MB obrázku v titulke stránky. Adekvátnym riešením je úprava obrázkov pomocou kódu.
Erik Portis vo svojom článku podrobne opisuje úpravu obrázkov s HTML a CSS. Vďaka takémuto riešeniu je možné nadefinovať, aké obrázky sa majú zobraziť v závislosti od zariadenia. Vznikajú tak flexibilné – responzívne – obrázky, ktoré nestrácajú kvalitu a nespomaľujú načítavanie stránok.
Dobrým riešením pre pekný a čistý dizajn môže byť aplikácia svg obrázkov, ktoré sú vytvorené vo vektore, a teda zväčšovaním/zmenšovaním nestrácajú na kvalite. Ideálne je využívanie svg obrázkov pri ikonkách či logách, ktoré budú vďaka tomuto formátu vždy ostré.
5. Odstrašujúce formuláre
Pre prihlásenie alebo registráciu skúste využívať Facebook alebo Google účty. Urýchlia a zjednodušia vstup do systému. V prípade formulárov sa snažte zachovať iba nutné minimum. Pri dlhších formulároch (napr. v prípade objednávok) celý proces rozčleňte tak, aby používateľa množstvo potrebných údajov neodradilo.
Dizajn nie je všetko
Otestujte svoj mobilný web a zistite, či práve vaši zákazníci nemusia bojovať s vyššie zmienenými problémami.
Nemáte ešte mobilný web? Môžeme vám s ním pomôcť – s prerobením toho existujúceho alebo vytvorením nového.