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, čestitam - imate responzivni dizajn. Ali, evo jedne neprijatne istine: to što vaš sajt „radi” ne znači da ga ljudi vole.

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

Broj poseta sa mobilnih uređaja raste, čini 70% ili 80% ukupnog saobraćaja, ali stopa konverzije je i dalje duplo 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 mobilni optimizovan”. 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 (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. U svetu gde je pažnja najskuplja valuta, svako trenje vodi ka napuštanju sajta.

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.

Naši prsti su debeli, ekran je mali, a pažnja nam je podeljena. Ako vaš sajt zahteva od korisnika napor, on će jednostavno otići kod konkurencije koja mu je olakšala život.

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? -10% energije.

• Pop-up koji ne može da se zatvori jer je „X” premalo? -30% energije.

• 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: „Beži, tamo je teško kupiti bilo šta”.

Rešenje: „Thumb Zone” (Zona palca) kao temelj uspeha

Da bismo rešili ovaj problem, moramo se vratiti osnovama biologije. Kako ljudi drže telefon?

Istraživanja pokazuju da preko 75% ljudi koristi palac za interakciju sa ekranom. Još važnije, većina ljudi telefon 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 „Thumb Zone”?

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 (Add to Cart, Pošalji upit, Prijavi se) u crvenoj zoni, vi direktno radite protiv anatomije svojih kupaca.

Kako popraviti „Zonu palca” odmah?

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

2. „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 i Google preporučuju da interaktivni elementi budu najmanje 44x44 ili 48x48 piksela. Sve manje od toga dovodi do „fat finger” sindroma, gde korisnik slučajno klikne na pogrešnu stvar.

Od responzivnog ka frictionless dizajnu: Ključni koraci

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

1. Optimizacija brzine: Svaka milisekunda vredi

Na mobilnim mrežama (4G, 5G), brzina učitavanja je kritična. Ljudi na telefonu nemaju vremena. Ako se sajt učitava duže od 3 sekunde, 53% posetilaca će odustati.

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

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

• Lazy loading: Učitavajte slike tek kada korisnik dođe do njih tokom skrola.

2. Forme

Popunjavanje formi na telefonu je pakao. Smanjite broj polja na apsolutni minimum.

• 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 drastično smanjuje trenje.

• Jednokolone forme: Nikada ne stavljajte dva polja jedno pored drugog na mobilnom. Uvek jedno ispod drugog.

3. Vizuelna hijerarhija i skeniranje

Ljudi na mobilnom ne čitaju. Oni skeniraju.

• Kratki pasusi: Maksimalno 2-3 rečenice.

• Naslovi sa koristima: Umesto „O našem proizvodu”, napišite „Uštedite 2 sata dnevno”.

• Kontrastne boje: Vaše glavno dugme mora da „vrišti” u odnosu na ostatak stranice. Ako je sajt plav, dugme neka bude narandžasto ili zeleno.

4. Gestikulacija umesto kliktanja

Pametni telefoni su napravljeni za prevlačenje (swiping), ne samo za kliktanje.

• Slideri koji rade na dodir: Ako imate galeriju slika, dozvolite korisniku da ih prevlači prstom.

• „Pull to refresh”: Implementirajte logiku koju korisnici već poznaju iz aplikacija.

Studija slučaja: Šta se desi kada pomerite jedno dugme?

Jedna velika e-commerce prodavnica odeće primetila je da korisnici na mobilnom uređaju dodaju proizvode u korpu, ali retko završavaju kupovinu. Analizom toplotnih mapa (heatmaps) videli su da korisnici pokušavaju da kliknu na „Checkout”, ali često promaše i kliknu na „Privacy Policy” koji je bio odmah pored.

Šta su uradili?

1. Povećali su dugme za plaćanje.

2. Postavili su ga kao „sticky” element na dnu ekrana.

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

Rezultat: Porast konverzije od 22% u roku od mesec dana, 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 opasna 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.

Bezšavno mobilno iskustvo nije luksuz. To je higijena modernog poslovanja.

• Manji trošak akvizicije (CAC): 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”. Ako je vaš UX loš i ljudi brzo izlaze sa sajta (high bounce rate), Google će vas kazniti nižom pozicijom 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 frustrira vaše korisnike.

Akcioni 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 na Google PageSpeed Insights.

• Uklonite nepotrebna polja iz kontakt forme.

Mobilni telefon nije samo manji ekran. To je potpuno drugačiji način interakcije sa svetom. Ako poštujete palac svog korisnika, on će vas nagraditi svojim poverenjem i novcem.

Želite da proverite koliko novca gubite na mobilnim konverzijama? Kontaktirajte nas za besplatnu UX reviziju vašeg mobilnog sajta. Sredićemo vašu zonu palca pre nego što vaša konkurencija sazna šta je to.