Baš prošlog tjedna, dok sam bio na igralištu s djetetom, primijetio sam kako jedan roditelj pored mene na mobitelu pregledava dječje bicikle. Jednom je rukom gurao dijete na ljuljački, a u drugoj je držao mobitel. Svakih nekoliko sekundi mijenjao je fokus između dva zadatka – ljuljati i pogledati dijete, zatim vratiti fokus na mobitel.
Gurne ljuljačku. skrola. Popravi držanje mobitela u ruci. Ponovno gurne. Ispruži palac malo dalje kako bi nešto dohvatio na mobitelu i tako u krug.
Nakon trećeg puta, mobitel mu je iskliznuo iz ruke i pao na beton ispred ljuljačke. Podigao ga je, provjerio ekran, uzdahnuo i spremio ga u džep.
Možda će se vratiti kasnije, možda i neće, ali trenutak za kupnju je prošao.
Dizajn potiče iz stvarnih potreba
Korisničko iskustva web trgovine često ocjenjujemo kroz vizualnu prizmu – koliko je tipografija čista, koliko je sučelje minimalističko, koliko su animacije glatke ili koliko su fotografije dotjerane.
No, web trgovine iz konteksta mobitela imaju jedno jednostavnije, ali dublje ograničenje. Ljudi ne stupaju u interakciju s webom u statičkom okruženju. Stoje u redu u trgovini, nose namirnice, piju kavu, hodaju, idu na posao ili, poput onog roditelja s igrališta, pokušavaju obaviti kupnju dok rade nešto drugo.
Mobitel nije samo umanjena verzija stolnog računala. Ljudi ga ne koriste s mišem i tipkovnicom, sjedeći statički za stolom. Drže ga u ruci, mijenjaju stisak i poziciju u ruci, prebacuju ga iz ruke u ruku i često navigiraju koristeći isključivo palac.
Dizajnirati za mobitele znači dizajnirati upravo unutar tih fizičkih ograničenja, a cilj takvog dizajna nije jednostavno stvoriti responzivni izgled, nego smanjiti trenje kada je pažnja ograničena, a interakcija se odvija isprekidano.
“Zona palca” je više od same teorije
Ako ste u zadnje vrijeme proveli imalo vremena u krugovima UX dizajnera, vjerojatno ste čuli za istraživanje o “Zoni palca” (engl. Thumb zone) Stevena Hoobera. Hooberovo istraživanje pokazalo je da je jednoručno korištenje jedan od najčešćih načina na koji ljudi stupaju u interakciju s mobilnim uređajima (uz držanje objema rukama ili podupiranje jednom rukom).
Još važniji zaključak istraživanja jest da pri korištenju mobitela jednom rukom palac može udobno dohvatiti samo određena područja zaslona.
- Zelena zona – gdje palac prirodno leži*
- Žuta zona – dostupna uz istezanje palca
- Crvena zona – zahtijeva promjenu položaja ruke u dlanu
*Točno dostupno područje varira ovisno o veličini šake, dimenzijama uređaja i stilu držanja, no istraživanja dosljedno pokazuju da neka područja zahtijevaju znatno manje truda od drugih.
Unatoč tome, brojne web trgovine i dalje postavljaju navigaciju, tražilicu i filtere bliže vrhu ekrana. Stavljanjem ovih ključnih značajki u tu fizičku “crvenu zonu”, zapravo prisiljavamo kupce na nespretnu gimnastiku palcem.
Zašto i dalje zadržavamo ključne stvari na vrhu?
Ako je dno ekrana toliko bolje za naše palčeve, zašto, pobogu, i dalje forsiramo tražilice i “hamburger” izbornike na vrhu?
Lako je pretpostaviti da se radi o običnoj lijenosti i dizajnu koji u prvi plan stavlja stolna računala (desktop-first). No stvarnost je ipak drugačija
Zapravo postoji nekoliko praktičnih razloga zašto ove ključne stvari i dalje pronalazimona vrhu kao standard.
Mentalni modeli
Jedno od najtemeljnijih načela UX-a je Jakobov zakon
Korisnici većinu svog vremena provode na drugim web stranicama.
Tijekom posljednja dva desetljeća, milijarde korisnika interneta duboko su kondicionirane da gledaju u vrh stranice kad god žele pretraživati, filtrirati ili pristupiti navigaciji.
Ako biste ovo odjednom premjestili na dno ekrana, možda biste riješili fizički problem dosega, ali biste uveli novi kognitivni problem. Korisnik mora zastati, prekinuti svoj uobičajeni obrazac skeniranja stranice i aktivno tražiti alat koji želi.
Prirodni tok hijerarhije informacija
Kao ljudi, pratimo obrazac informacija od vrha prema dnu. Strukturalno ima smisla da se tražilica nalazi iznad rezultata i navigacija iznad sadržaja. Osim toga, pretraga je poseban slučaj jer tipkanje mijenja cijeli kontekst interakcije. Kada se pojavi tipkovnica, sučelje se mora prilagoditi unosu teksta, rezultatima i navigaciji.
Pokretanje pretrage na dnu može dobro funkcionirati, ali aktivno iskustvo pretraživanja i dalje mora biti dizajnirano oko stanja i položaja tipkovnice.
Sprječavanje slučajnih dodira
Dno ekrana je iznimno vrijedan prostor. Njegova snaga je upravo razlog zašto bi trebao biti rezerviran za radnje koje imaju koristi od stalne dostupnosti. To znači da ga treba koristiti namjerno, a ne tretirati ga kao univerzalno odlagalište za svaku akciju. Moderni mobiteli koriste ovo područje za sistemske geste, poput povratka na početni zaslon ili prebacivanja između aplikacija. To je također mjesto gdje ljudi prirodno odmaraju ruke ili prilagođavaju stisak. Postavljanje kontrola u ovo područje može povećati broj slučajnih interakcija.
Balansiranje ergonomije i informacija
Kupovina putem mobitela rijetko prati uredan, pravilan slijed radnji. Ljudi uspoređuju proizvode, skaču s jedne kategorije na drugu, kasnije se vraćaju na stranicu proizvoda, gube pažnju i nastavljaju pregledavati kada ugrabe slobodan trenutak.
Zbog toga se dobar dizajn mobilne web trgovine ne svodi na premještanje svakog elementa u najlakšu poziciju za palac. Riječ je o prepoznavanju radnji koje se često ponavljaju i prebacivanju istih u zonu u kojoj ne zahtijevaju napor, uz istovremeno očuvanje poznatih obrazaca tamo gdje su oni važni.
Najbolja iskustva balansiraju dvije stvarnosti:
- Gdje korisnici očekuju da se stvari nalaze
- Gdje ih njihove ruke mogu ugodno dohvatiti
Evo nekolika načina kako to postići.
Fiksirani gumb “dodaj u košaricu” na dnu
Na stolnom računalu sasvim je u redu da gumb “dodaj u košaricu” stoji statično na stranici. Na mobitelu, ako korisnik skrola prema dolje kako bi pročitao detalje ili recenzije, taj gumb nestaje. Da bi kupio proizvod, morat će skrolati skroz natrag do vrha.
Implementacijom fiksiranog gumba na dnu koji se “lijepi” za donji rub ekrana dok korisnik skrola, primarni poziv na akciju (CTA) trajno držite unutar zelene zone.
Cilj nije praktičnost radi same praktičnosti. To izravno štiti namjeru kupnje. Kupac koji je već odlučio kupiti ne bi trebao tragati za radnjom koja dovršava to putovanje.
Fiksne donje navigacijske trake
Dok će se polja za unos pretrage vjerojatno pomicati prema gore zbog tipkovnice, opći navigacijski tabovi (naslovnica, profil, košarica, lista želja) mogu sigurno boraviti na dnu. Mnoge uspješne mobilne aplikacije koriste ovaj obrazac jer su te radnje česte, predvidljive i ne ovise o pojavljivanju tipkovnice.
Premještanje ovih pasivnih navigacijskih elemenata na donju traku drži palac ondje gdje mu je najprirodnije.
Interakcije prilagođene povlačenju prstom
Umjesto da tjerate korisnike da pronalaze i dodiruju sitne gumbe “sljedeće/prethodno” ili male strelice kako bi pregledali više stavki ili slika proizvoda, dopustite im da povlače prstom (swipe). Prirodno zakrivljeni pokreti palca su prirodni, zahtijevaju minimalan napor i nultu preciznost.
Pristupačnost uz ergonomski dizajn
Dizajniranje za jednoručno korištenje nije samo pomicanje elemenata gore ili dolje. Ono također zahtijeva da pogledamo same elemente koje korisnici dodiruju (tzv. touch targets). Naši palčevi nisu kursor miša; oni su znatno širi i manje precizni.
Ako su vaše opcije filtriranja ili selektori boja premali ili postavljeni preblizu jedni drugima, kupci će stalno dodirivati pogrešne stavke – klasični problem “debelog prsta” (fat-finger problem).
Kako bi se to spriječilo, veličine elemenata za dodir trebale bi biti oko 48×48 piksela, uz jasan razmak između njih. To posebno vrijedi za destruktivne radnje ili radnje s velikim posljedicama, poput uklanjanja artikla iz košarice.
Kako mobilnu trgovinu učiniti jednostavnom
Mobilna web trgovina daleko je od pukog “uguravanja” desktop stranice na manji ekran. To je stalin kompromis između fizičke, ergonomske stvarnosti načina na koji čovjek drži mobitel i duboko ukorijenjenih mentalnih modela.
Najbolja iskustva u mobilnoj trgovini ne biraju između navike i ergonomije. Ona poštuju oboje – zadržavajući poznate obrasce tamo gdje ih korisnici očekuju, dok česte radnje smještaju tamo gdje ruke prirodno idu.
Na kraju krajeva, što je vašu trgovinu lakše koristiti jednom rukom, to vaši kupci imaju manje razloga da je privremeno napuste.
