Navigacija

Navigacija je sve preko čega se posjetilac kreće kroz sajt: glavni meni u zaglavlju, meni koji se otvara na telefonu, linkovi u podnožju i putokazi poput breadcrumbsa. Najvidljiviji dio je glavni meni.

Posjetilac rijetko dođe preko početne stranice. Češće uđe na stranicu iz pretrage ili oglasa, i tada mu je navigacija jedini način da vidi šta još firma radi i gdje je kontakt. Zato je ona jedan od prvih poslova u UX dizajnu.

Šta ide u glavni meni

U meni idu stranice koje ljudi zaista traže, nazvane onako kako ih oni zovu. Kod uslužne firme to su najčešće usluge, reference ili radovi, o nama i kontakt. Kod trgovine su to kategorije proizvoda.

Što je stavki manje, to se lakše bira. Meni s dvanaest stavki u jednom redu tjera čovjeka da pročita sve, a na telefonu postane duga lista. Stranice koje su važne firmi, a kupci ih rijetko traže, kao karijera, politika privatnosti i uslovi, idu u podnožje.

Nazivi koje kupac razumije

Naziv stavke je češći problem od broja stavki. Stavka Rješenja ne kaže ništa čovjeku koji traži servis klime. Portfolio, Kompetencije i Ponuda isto traže klik da bi se znalo šta je iza.

Dobar naziv je riječ koju bi kupac ukucao u pretragu: Usluge, Cijene, Radovi, Kontakt. Ako firma ima dvije ili tri glavne usluge, one mogu stajati direktno u meniju, svaka sa svojim imenom.

Redoslijed

Ljudi najviše pažnje daju prvoj i zadnjoj stavki menija. Zato usluge ili proizvodi idu prvi, a kontakt zadnji, gdje ga ljudi traže po navici.

Kontakt vrijedi istaknuti kao dugme, a broj telefona staviti u zaglavlje. Kod nas mnogo upita dolazi telefonom, i čovjek koji je odlučio da zove ne treba tražiti broj. To je najkraći put od navigacije do CTA.

Navigacija na telefonu

Na telefonu se meni najčešće sakrije iza ikone s tri crte, takozvanog hamburgera. To štedi prostor, ali sakrije i ono što je na računaru bilo vidljivo. Zato se uz ikonu ostavi vidljivo ono najvažnije, dugme za poziv ili glavni CTA.

U otvorenom meniju stavke trebaju biti dovoljno velike za prst, s razmakom između njih. Podmeniji u dva ili tri nivoa se na telefonu teško koriste. Kod responsive dizajna meni se zato često planira posebno za telefon.

Padajući meniji i trgovine

Trgovine s mnogo kategorija koriste padajući ili veliki meni, mega meni, u kojem se odjednom vide kategorije i podkategorije. Radi kad je složen po tome kako kupci traže, recimo po vrsti proizvoda. Raspored po dobavljačima ili šiframa iz skladišta kupcu ništa ne znači.

Padajući meni koji se otvara samo kad se mišem pređe preko njega ne radi na telefonu ni s tastaturom. Mora se otvarati i klikom. To je dio pristupačnosti, i tiče se svakoga ko ne koristi miš.

Navigacija i pretraga

Linkovi u meniju su interni linkovi koji stoje na svakoj stranici sajta. Google iz njih zaključuje koje su stranice najvažnije. Stranica usluge koje nema u meniju, i na koju ne vodi nijedna druga stranica, teže se pronađe i u pretrazi.

Meni zato mora biti u HTML-u stranice, s pravim linkovima. Meni koji se sastavlja tek skriptom, ili stavke napravljene kao dugmad bez linka, Google može i da ne vidi.

Kako se provjerava

Najbolja provjera je jednostavna. Dajte telefon nekome ko ne poznaje firmu i zadatak, recimo da nađe cijenu servisa ili radno vrijeme. Gledajte gdje klikne prvo i gdje zastane.

Heatmapa pokazuje koje stavke menija ljudi zaista klikću. Stavka koju niko ne klikne može izaći iz menija. A navigacija se najlakše mijenja na wireframeu, prije nego se sajt dizajnira.

Podnožje

Podnožje je druga navigacija sajta, i tu ljudi skrolaju kad ne nađu nešto u meniju. U njega idu adresa, radno vrijeme, broj telefona, linkovi na glavne usluge i stranice koje moraju postojati, poput politike privatnosti. Kod firme s više poslovnica to je dobro mjesto za sve adrese.

Podnožje ipak ne treba postati spisak svih stranica sajta. Kad u njemu stoji sve, u njemu se ništa ne nađe.

Primjer iz prakse

Stolarija iz Teslića ima meni sa stavkama Početna, O nama, Djelatnost, Galerija, Novosti i Kontakt. Kupci zovu i pitaju prave li unutrašnja vrata, iako ih firma pravi godinama.

Djelatnost se zamijeni s tri stavke: Kuhinje, Unutrašnja vrata i Namještaj po mjeri. Galerija postaje Radovi, Novosti idu u podnožje, a broj telefona stoji u zaglavlju kao dugme. Na telefonu se uz ikonu menija vidi dugme Pozovite.

Nekoliko mjeseci kasnije najviše klikova u meniju ima stavka Unutrašnja vrata, a upiti za vrata stižu preko forme s te stranice.

Kad ovo nije vaša briga

Sajtu od jedne stranice, na kojem se sve vidi skrolanjem, trebaju samo nekoliko sidrenih linkova i dugme za kontakt. Dovoljno je da rade na telefonu.

Greške koje najčešće viđamo

Najčešće su to nazivi stavki koje kupac ne razumije.

Česta je i usluga koja donosi posao, a nema mjesto u meniju.

Viđamo menije koji na telefonu ne pokazuju broj telefona.

Tu su i podmeniji koji se otvaraju samo mišem.

Na kraju, stavka Početna koja zauzima mjesto u meniju, iako logo već vodi na početnu.

Lista za provjeru

• Kaže li svaka stavka menija šta je iza nje?
• Staje li meni na računaru u jedan red?
• Vidi li se kontakt ili telefon na svakoj stranici?
• Otvaraju li se podmeniji klikom, i na telefonu?
• Jesu li sve stavke pravi linkovi u kodu?

Pojmovi koje ćete čuti uz navigaciju

• Hamburger meni: ikona s tri crte koja na telefonu otvara meni.
• Mega meni: veliki padajući meni s više kolona.
• Sticky zaglavlje: zaglavlje koje ostaje na vrhu dok se skrola.
• Podnožje (footer): dno stranice s dodatnim linkovima.
• Sidreni link: link koji vodi na dio iste stranice.