Mobilni meni: najbolje prakse za navigaciju na telefonu

Mobilni meni je deo sajta koji posetilac na telefonu koristi skoro na svakoj poseti, a o kome se u dizajnu često najmanje razmišlja. Na računaru imamo ceo red linkova u zaglavlju; na telefonu taj prostor ne postoji, pa navigaciju moramo da sakrijemo, skratimo ili preuredimo. Loše rešen meni znači da ljudi ne pronalaze usluge, cene ili kontakt – i odlaze. U ovom tekstu prolazimo kroz najbolje prakse: hamburger meni ili traka na dnu, lepljivo zaglavlje, veličina elemenata za dodir i pristupačnost.

Šta dobar mobilni meni treba da postigne

Pre izbora tipa menija, dobro je znati cilj. Dobar mobilni meni:

• pokazuje najvažnije odmah – kontakt, glavne usluge ili proizvode;
• je lako dostupan palcem, bez preciznog gađanja sitnih ikonica;
• ne zauzima previše ekrana, jer je sadržaj ono zbog čega je posetilac došao;
• radi predvidivo – otvara se, zatvara i vraća kako korisnik očekuje;
• radi za sve, uključujući ljude koji koriste čitač ekrana ili tastaturu.

Opšte principe dizajna za male ekrane objasnili smo u tekstu responzivan dizajn: zašto je mobilna verzija najvažnija, a ovde se fokusiramo samo na navigaciju.

Hamburger meni ili traka na dnu ekrana

Dva najčešća obrasca su hamburger meni (ikonica sa tri crte koja otvara listu linkova) i traka sa nekoliko ikonica na dnu ekrana, poznata iz mobilnih aplikacija. Oba imaju mesto:

U praksi često najbolje radi kombinacija: hamburger meni za kompletnu navigaciju i uska traka na dnu sa dve-tri najvažnije radnje, na primer „Pozovi“, „Viber“ i „Upit“. Takvu traku za kontakt opisali smo u tekstu Viber i WhatsApp dugme na sajtu.

Saveti za hamburger meni

• uz ikonicu dodajte reč „Meni“ – mnogi korisnici je bolje razumeju od same ikonice;
• najvažnije stavke stavite na vrh liste, kontakt neka bude lako uočljiv;
• podmenije otvarajte na dodir strelice, a ne na prelaz mišem, koji na telefonu ne postoji;
• izbegavajte više od dva nivoa – duboka navigacija na telefonu brzo postaje lavirint.

Lepljivo zaglavlje: da ili ne

Lepljivo (sticky) zaglavlje ostaje na vrhu ekrana dok korisnik skroluje, pa su meni i kontakt uvek dostupni. To je korisno na dugim stranicama, ali ima cenu – svaki piksel zaglavlja je piksel manje za sadržaj. Nekoliko pravila:

1. Neka bude nisko. Logo, dugme menija i eventualno jedno dugme za kontakt. Bez slogana, bez dva reda.
2. Razmislite o skrivanju pri skrolovanju nadole i ponovnom prikazivanju pri skrolovanju nagore. Tako čitanje nije ometeno, a meni je na jedan pokret.
3. Ne kombinujte previše lepljivih elemenata. Zaglavlje, traka na dnu, baner za kolačiće i plutajuće chat dugme zajedno mogu da ostave tek polovinu ekrana za sadržaj.
4. Pazite na sidrene linkove. Kada link vodi na sekciju iste stranice, zaglavlje ne sme da prekrije njen naslov; u CSS-u se to rešava svojstvom scroll-margin-top.

Veličina elemenata za dodir

Prst nije miš. Linkovi i dugmad koji su premali ili preblizu jedni drugima vode do pogrešnih dodira i frustracije. Smernice koje se najčešće koriste:

• WCAG 2.2 na nivou AA traži da ciljevi za dodir budu najmanje 24×24 CSS piksela ili dovoljno razmaknuti, a strožiji nivo AAA preporučuje 44×44;
• Apple u smernicama za dizajn navodi minimum od 44 poena, a Googleov Material Design 48 dp;
• stavke u otvorenom meniju neka imaju punu širinu reda i dovoljno visine, a ne samo tekst koji se može dodirnuti;
• između susednih linkova ostavite razmak, posebno u podnožju gde se često nagomilaju.

Dobra praktična mera je da se meni lako koristi jednom rukom, u prevozu, dok se telefon drži palcem.

Pristupačnost mobilnog menija

Meni koji izgleda dobro ne mora da radi za sve. Ljudi koji koriste čitače ekrana, uvećanje ili tastaturu (i na telefonu, uz spoljnu tastaturu) zavise od toga kako je meni napravljen u kodu:

• dugme menija treba da bude pravi <button> element, sa tekstom ili oznakom aria-label, a ne obična slika ili div;
• stanje menija označite atributom aria-expanded (otvoren ili zatvoren) i povežite dugme sa menijem pomoću aria-controls;
• navigaciju obuhvatite elementom <nav>, kako bi je čitači ekrana prepoznali;
• meni mora da se zatvori tasterom Escape i ponovnim dodirom na dugme, a fokus treba da se vrati na dugme;
• kontrast teksta i ikonica mora biti dovoljan i u otvorenom meniju, ne samo na stranici.

Više o osnovama pristupačnosti pročitajte u tekstu pristupačnost sajta: WCAG osnove.

Česte greške u mobilnoj navigaciji

• Kontakt sakriven duboko u meniju ili samo u podnožju.
• Meni koji prekriva ekran bez jasnog dugmeta za zatvaranje.
• Nejasne ikonice bez teksta, pa korisnik mora da pogađa šta znače.
• Nazivi stavki koji ništa ne govore, poput „Rešenja“ ili „Više“, umesto konkretnih usluga.
• Spor meni koji čeka učitavanje teške skripte pre nego što reaguje na dodir; brzina odziva meri se i kroz Core Web Vitals, pokazatelj INP.
• Različit meni na različitim stranicama, što zbunjuje posetioce.

Mnoge od ovih grešaka nalaze se i na listi u tekstu UX greške koje teraju posetioce.

Kako testirati mobilni meni

Alati za razvoj u pregledaču su korisni, ali ne zamenjuju pravi telefon. Otvorite sajt na nekoliko uređaja – bar jednom Android telefonu i jednom iPhone-u, po mogućstvu i na manjem ekranu – i proverite: da li možete jednom rukom da otvorite meni i stignete do kontakta, da li se meni zatvara kako očekujete, da li zaglavlje prekriva sadržaj i da li stavke reaguju odmah. Zamolite i nekoga ko ne poznaje sajt da pronađe određenu uslugu i posmatrajte gde zastaje.

Ako želite da proverimo kako se vaš sajt ponaša na telefonu i predložimo jednostavniju navigaciju, pošaljite nam upit za besplatnu analizu i ponudu.