Menu

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“.

Mobilná návštevnosť v Google Analytics

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.

Neresponzivny web

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.

Variácie 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.

nemecký web designmadeingermany.de

nemecký web designmadeingermany.de

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.

Mobilná verzia imhd.sk

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.

Pekný príklad zmenšujúceho sa obrázku lietadla na southwest-heart.com

Pekný príklad zmenšujúceho sa obrázku lietadla na southwest-heart.com

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.

Screenshot_62

m.alza.sk je príkladom výborne zvládnutého prihlasovania a nákupu

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.

Páčil sa Vám článok?

Nenechajte si újsť raz mesačne naše najdôležitejšie novinky!
  • Toto pole je pre validačné účely a mal by zostať nezmenený.