Zašto vaš mobilni sajt frustrira korisnike i kako to da popravite danas

Danas svi imaju sajt koji „radi na telefonu“. To je standard koji smo postigli još pre deset godina. Ako otvorite svoj sajt na pametnom telefonu i vidite da se sadržaj smanjio i složio jedan ispod drugog, imate responzivni dizajn. Ali to što vaš sajt „radi“ ne znači da ga je lako koristiti.

Velika je razlika između sajta koji se prilagođava ekranu i sajta koji je napravljen za ljudsku ruku.

Broj poseta sa mobilnih uređaja raste i kod mnogih sajtova čini veliku većinu ukupnog saobraćaja, ali stopa konverzije je i dalje osetno manja nego na desktopu. Zašto? Zato što korisnici na telefonu nisu samo „posetioci na manjem ekranu“. Oni su ljudi u pokretu, sa ograničenim strpljenjem, koji koriste samo jedan prst da završe posao.

Ako želite da prestanete da gubite novac na mobilnom saobraćaju, morate prestati da razmišljate o pikselima i početi da razmišljate o palčevima.

Problem: responzivni dizajn je samo polovina bitke

Većina vlasnika biznisa misli da je posao gotov onog momenta kada programer kaže: „Sajt je optimizovan za mobilne“. Problem je u tome što je ta optimizacija često samo vizuelna. Elementi se ne preklapaju, tekst je čitljiv, slike su tu. Ipak, korisnik se oseća kao da pokušava da operiše pincetom dok nosi bokserske rukavice.

Najveći neprijatelj konverzije na mobilnom uređaju je trenje (engl. friction).

Trenje je svaka sekunda koju korisnik potroši razmišljajući gde da klikne. Svaki put kada promaši dugme jer je premalo. Svaki put kada mora da koristi drugu ruku da bi dohvatio meni u gornjem levom uglu. Svako takvo trenje povećava šansu da korisnik napusti sajt.

Zašto je mobilna konverzija manja?

Kada sedimo za kompjuterom, mi smo u „radnom režimu“. Imamo miš koji je precizan u jedan piksel. Imamo veliki ekran i stabilnu internet vezu. Na telefonu, mi smo u „tranzitnom režimu“. Možda čekamo u redu, vozimo se prevozom ili sedimo ispred TV-a.

Prsti su široki, ekran je mali, a pažnja nam je podeljena. Ako vaš sajt zahteva od korisnika napor, on će jednostavno otići kod konkurencije kod koje je to lakše.

Nevidljivi trošak lošeg UX-a

Zamislite da ste u prodavnici. Želite da kupite cipele. Prodavac vam kaže da su cipele na drugom spratu, ali stepenice su toliko uske da morate da se penjete postrance. Kada stignete tamo, kasa je zaključana u maloj kutiji na plafonu koju jedva možete da dohvatite.

Da li biste kupili te cipele? Verovatno ne.

To je ono što radite svojim korisnicima kada im ponudite klasičan responzivni sajt bez razmišljanja o ergonomiji.

Psihologija frustracije

Kada korisnik klikne na oglas i dođe na vaš sajt, on ima određenu dozu mentalne energije. Svaki problem na koji naiđe smanjuje tu energiju.

• Dugme koje je preblizu drugom linku? Malo manje strpljenja.

• Pop-up koji ne može da se zatvori jer je „X“ premalo? Mnogo manje strpljenja.

• Obavezna registracija sa 12 polja? Korisnik izlazi.

Rezultat nije samo propuštena prodaja danas. Rezultat je narušen brend. Korisnik podsvesno povezuje vaš brend sa osećajem frustracije. Sledeći put kada vidi vaš oglas na Google-u, podsvest će mu reći: „Tamo je teško kupiti bilo šta“.

Rešenje: zona palca (thumb zone) kao polazna tačka

Da bismo rešili ovaj problem, treba krenuti od jednog pitanja: kako ljudi drže telefon?

Većina ljudi koristi palac za interakciju sa ekranom i telefon vrlo često drži jednom rukom. To znači da je radijus kretanja palca ograničen na luk koji se proteže od donjeg dela ekrana ka sredini.

Šta je zona palca?

Zamislite ekran telefona.

• Zelena zona (lako): donja trećina i sredina ekrana. Ovde palac prirodno odmara.

• Žuta zona (srednje): gornja sredina. Zahteva blago istezanje prsta.

• Crvena zona (teško): gornji uglovi ekrana. Zahteva promenu položaja šake ili korišćenje druge ruke.

Ako je vaše glavno dugme („Dodaj u korpu“, „Pošalji upit“, „Prijavi se“) u crvenoj zoni, vi direktno radite protiv anatomije svojih kupaca.

Kako odmah popraviti zonu palca?

1. Navigacija na dnu: izbegavajte „hamburger meni“ (one tri linije) u gornjem levom uglu. To je najteže dostupno mesto na ekranu. Pomerite glavne kategorije ili meni na dno ekrana, baš kao što to rade Instagram ili Facebook.

2. Fiksirana (sticky) CTA dugmad: dugme za kupovinu ili kontakt treba da bude fiksirano na dnu ekrana dok korisnik skroluje. Tako mu je uvek „pod palcem“.

3. Veličina je bitna: Apple preporučuje da kontrole budu najmanje 44 x 44 tačke, a Google da površine za dodir budu najmanje 48 x 48 dp. Na manjim elementima korisnik lako prstom pogodi pogrešnu stvar.

Od responzivnog dizajna ka dizajnu bez trenja: ključni koraci

Da biste napravili sajt koji zaista konvertuje, pratite ove korake.

1. Optimizacija brzine: svaka sekunda se računa

Na mobilnim mrežama (4G, 5G), brzina učitavanja je presudna. Ljudi na telefonu nemaju vremena. Prema Google-ovoj analizi mobilnih sajtova iz 2016. godine, 53% poseta se verovatno prekida ako se stranica učitava duže od 3 sekunde.

• Smanjite slike: ne koristite slike od 2 MB. Koristite WebP format.

• Izbacite nepotrebne skripte: svaki dodatak koji ne radi ništa konkretno usporava renderovanje stranice.

• Odloženo učitavanje (lazy loading): učitavajte slike tek kada korisnik dođe do njih tokom skrola.

2. Forme

Popunjavanje formi na telefonu je naporno. Smanjite broj polja na najmanju moguću meru.

• Automatsko popunjavanje: omogućite Google ili Apple Pay za plaćanje kako korisnik ne bi morao da kuca broj kartice dok balansira u autobusu.

• Pravi tip tastature: ako polje traži broj telefona, neka se automatski otvori numerička tastatura, a ne tekstualna. To je mali detalj koji primetno smanjuje trenje.

• Forme u jednoj koloni: ne stavljajte dva polja jedno pored drugog na mobilnom, već uvek jedno ispod drugog.

3. Vizuelna hijerarhija i skeniranje

Ljudi na mobilnom ne čitaju. Oni skeniraju.

• Kratki pasusi: najviše 2 do 3 rečenice.

• Naslovi sa koristima: umesto „O našem proizvodu“ napišite „Uštedite 2 sata dnevno“.

• Kontrastne boje: glavno dugme mora jasno da se izdvaja od ostatka stranice. Ako je sajt plav, dugme neka bude narandžasto ili zeleno.

4. Pokreti prstom umesto kliktanja

Pametni telefoni su napravljeni za prevlačenje prstom, ne samo za kliktanje.

• Galerije koje rade na dodir: ako imate galeriju slika, dozvolite korisniku da ih prevlači prstom.

• Povlačenje za osvežavanje (pull to refresh): koristite ponašanje koje korisnici već poznaju iz aplikacija.

Primer: šta se desi kada pomerite jedno dugme?

Zamislite online prodavnicu odeće u kojoj korisnici na mobilnom uređaju dodaju proizvode u korpu, ali retko završavaju kupovinu. Toplotne mape pokazuju da pokušavaju da kliknu na „Plaćanje“, ali često promaše i kliknu na link „Politika privatnosti“ koji je odmah pored.

Šta tu treba uraditi?

1. Povećati dugme za plaćanje.

2. Postaviti ga kao „sticky“ element na dnu ekrana.

3. Ukloniti sve ostale linkove iz vidokruga tokom procesa plaćanja.

Ovakve izmene mogu da podignu konverziju, bez menjanja cena ili trošenja više novca na oglase.

Zašto je ovo važno za vaš profit?

Možda mislite: „Pa dobro, moji kupci su navikli, snaći će se.“ To je rizična pretpostavka. Vaši kupci se ne „snalaze“. Oni trpe. A čim se pojavi neko ko im omogući da istu stvar završe sa tri klika manje, oni će otići tamo.

Mobilno iskustvo bez trenja nije luksuz, već osnovni uslov da sajt prodaje.

• Manji trošak pridobijanja kupca: kada sajt bolje konvertuje, svaki dinar koji date na Facebook ili Google oglase se više isplati.

• Veća lojalnost: ljudi se vraćaju tamo gde im je bilo lako da završe posao.

• Bolji SEO: Google koristi „mobile-first indexing“. Google ne potvrđuje da stopu napuštanja direktno koristi za rangiranje, ali njegovi sistemi gledaju iskustvo na stranici, a sajt koji se na telefonu lako koristi ljudi češće čitaju, dele i linkuju, što posredno pomaže vašoj poziciji u pretrazi.

Kako da testirate svoj sajt odmah (bez programera)?

Uzmite svoj telefon u ruku koju inače koristite. Pokušajte da uradite sledeće stvari koristeći samo palac te ruke:

1. Dodajte proizvod u korpu sa naslovne strane.

2. Otvorite kontakt stranu.

3. Zatvorite bilo koji pop-up koji se pojavi.

4. Pronađite pretragu na sajtu.

Ako ste u bilo kom trenutku morali da upotrebite drugu ruku ili da neprirodno istežete palac ka vrhu ekrana, vaš sajt otežava posao korisnicima.

Plan za danas

• Pomerite najvažnije akcije u „donju zonu“.

• Povećajte font teksta na minimum 16px (niko ne želi da zumira da bi čitao).

• Testirajte brzinu sajta u alatu Google PageSpeed Insights.

• Uklonite nepotrebna polja iz kontakt forme.

Mobilni telefon nije samo manji ekran. To je drugačiji način korišćenja sajta. Ako korisniku olakšate da sve završi jednim palcem, lakše će se odlučiti na kupovinu.

Jedan primer iz mog rada je dizajn mobilne aplikacije eNovcanik.

Želite da proverite gde vaš mobilni sajt gubi kupce? Kontaktirajte me za besplatnu osnovnu UX proveru: prolazim kroz sajt stranu po stranu i ukratko kažem šta ne valja. Detaljan UX audit je plaćena usluga.