U dizajnu ne postoje ograničenja. Dizajn zavodi i, što je još važnije, budi emocije. Dizajn nije samo dobar izgled, već i dobra funkcionalnost.

b

Trendovi u digitalnom svijetu

Zašto „hambi“ nije user-friendly i što je Paradeiser?

Hamburger je dizajnirao Norm Cox za Xerox Star. Norm Cox je američki dizajner, suosnivač Cox&Hall kompanije i UI/UX konzultant još od 1982. Hamburger je potom na neko vrijeme nestao iz svijeta dizajna pa ga je Apple ponovno vratio 2009. godine (iPhone3Gs). Kako se povijest voli ponavljati, tako se sve više čini da će hamburger opet nestati iz svijeta dizajna ili barem više neće biti glavno rješenje za navigaciju.

Dizajneri će vrlo često reći da je odlično rješenje za navigaciju na mobitelima i da su primorani koristiti ga zbog male veličine ekrana. Zašto ga onda sve više viđamo i na desktopu? Firefox je svoje postavke sakrio iza hamburgera, Chrome je otišao „korak dalje“ i umjesto tri linije stavio tri točkice… Jasno, mobiteli su mali i treba sav taj sadržaj nagurati, a da kakti lijepo izgleda. No, što je s desktopom? Zar ne postoje kreativnija rješenja koja su i user-friendly?

Je li web dizajn postao nešto što developerima olakšava posao (samo serviraju već viđen i proban hambi) ili nešto što na prvo mjesto stavlja korisnika, a dizajnere na neki način iz dana u dan tjera da postanu i ostanu inovativni?

“Hamburger navigacija može biti sekundarna navigacija gdje će korisnici moći pristupiti manje važnim informacijama.”

Lokacija hamburgera nije prirodna za uobičajen položaj prstiju kod držanja mobitela

Hamburgere nam najčešće serviraju na gornjem lijevom kutu. Istraživanja su pokazala da je to mjesto najteže za dohvaćanje. Kada još uzmemo u obzir to da ekrani mobitela postaju sve veći, tada nije teško zaključiti da će čin klika postati dodatno otežan, naročito za dešnjake. Navigacija na tom mjestu ne potiče interakciju.

Slika iznad opisuje zone mobilnih ekrana. Zelena zona je zona koja je korisniku prirodna i u kojoj može normalno kliktati tako da drži mobitel u prirodnom položaju. Narančasta zona polako već postaje kritična i korisnik se tu počinje naprezati. Crvena zona (hamburger zona) je kritična, pomalo izaziva bol i korisnik počinje u većini slučajeva koristiti drugu ruku.

“Vama je u interesu da korisnik bez previše kliktanja dođe do onoga što traži, a s hamburgerom se nalazi u labirintu i veća je vjerojatnost da će jednostavno napustiti vašu aplikaciju.”

Korisnik će dati sve od sebe da klikne na taj hambi pa će onda opet morati kliknuti na stranicu koju želi, a ako mu se to ne sviđa, opet će morati kliknuti na hambi i tako će se vrtiti u začaranom krugu. Navigacija je u ovom slučaju poput labirinta, a ne nešto što na prirodan način vodi kroz aplikaciju.

Jedan od razloga zašto hamburger nije user-friendly jest vidljivost navigacije. Navigacijski elementi nisu vidljivi – vidljiv je jedino gumb, čijim klikom se prikazuju elementi. Hamburger navigacija nije intuitivna, barem ne za prosječnog korisnika. Za intuitivan navigacijski sistem su ključne dvije stvari – korisniku treba pokazati gdje je trenutno i otkriti gdje sve može biti.

Korisnik surfajući aplikacijom traži određenu informaciju na način da gleda ikonice i riječi koje su povezane s informacijom koju traži – znači intuitivno. Korisnik na neki način „njuši“ aplikaciju i nagađa gdje bi mogla biti informacija. Pitate li dizajnera ili developera gdje se nalazi korisnički račun i kako do njega doći, vjerojatno će vas blijedo pogledati i objasniti na način: „Pa lako, samo klikni na hamburger i sve je tu!“. Prosječan korisnik ne zna da hamburger ima sve, za njega tri linije ne predstavljaju apsolutno ništa.

Iako je već dosta korisnika naviklo na hamburger i znaju da trebaju kliknuti na njega kako bi dobili više informacija, hamburger im dosta otežava snalaženje i surfanje aplikacijom. Vama je u interesu da korisnik bez previše kliktanja dođe do onoga što traži, a s hamburgerom se nalazi u labirintu i veća je vjerojatnost da će jednostavno napustiti vašu aplikaciju.

Koje je rješenje?

Istina, navigacija na mobitelima je zahtjevnija jer treba stati na mali ekran. Mora biti u skladu s minimalizmom, ne smije preuzeti dizajn aplikacije, a istovremeno mora biti dovoljno velika za velike palčeve. Uvijek trebate testirati svoju aplikaciju i navigaciju prilagoditi arhitekturi informacija.

Hamburger navigacija može biti sekundarna navigacija gdje će korisnici moći pristupiti manje važnim informacijama, ali ne bi smjela biti glavna navigacija, odnosno rješenje za ono što korisnici najčešće koriste i čemu žele kontinuirano nesmetano pristupati.

YouTube je svoj problem riješio trakom s karticama. Ako se pitate kako će vam svi elementi navigacije stati na traku, ne morate brinuti niti oko toga. Istaknite ono najvažnije na traku, copy možete i zanemariti ako ćete koristiti dobru (dovoljno opisnu) ikonografiju. Ostale (manje važne) elemente stavite u hambi.

Nije li to kompliciranije za izvedbu?

Sada, ako obratimo pažnju na tehničku izvedbu i implementaciju, svojim developerima sigurno nećete biti naročito dragi ako počnete „komplicirati“ oko hambija koji im je tako drag i na kojeg su naviknuli. Vjerojatno možete očekivati taj blijedi pogled iza kojeg se kriju tko zna kakve misli – prvo o vama koji filozofirate i drugo o korisnicima koji ne bi ni trebali koristiti aplikacije i na koje treba baciti bombu („Zašto uopće imaju aplikacije ako ne znaju koristiti hambi, zaštoooo!?“)

Srećom, razvijen je navigacijski sustav koji se uistinu lako implementira, već ima ugrađenu traku s karticama i (vjerojatno najbolje od svega) ne zahtijeva ni jQuery, a ni JavaScript. Paradeiser je mali i lagan za upotrebu, a unutar njega postoji i hamburger navigacija gdje možete staviti manje važne informacije.

Sa samo 1.3kb gzipped u jednom zahtjevu, Paradeiser je vjerojatno trenutno jedan od navigacijskih sustava najlakših za implementaciju. Vaši dizajneri, developeri i korisnici će vas obožavati, a vi ćete na kraju dana imati bolju konverziju.