12 preporuka za uspješan mobilni web shop danas

U procesu promjene platforme za bio&bio, radili smo dizajn korisničkog iskustva (User Experience) posebno za mobitele, posebno za tablete, a posebno, naravno, i za desktop uređaje. Nacrti i rješenja rezultat su analize korištenja prethodne platforme ovog trgovca, kao i testova i preporuka nekih od vodećih stručnjaka na tom području: Normana Nielsena, Baymard instituta i drugih.

Rezultati koje danas na mobilnim prikazima ostvaruje bio&bio, a i drugi trgovci s optimiziranim webshopovima, pokazuju da je mobilna trgovina živa i uspješna danas u Hrvatskoj. I da stranice treba prilagoditi za mobilne uređaje odmah jer su rezultati izvanredni. Jezikom trgovaca robom široke potrošnje – rezultati su šokantni. 🙂

12 koraka prilagodbe za mobilne uređaje

Stoga donosimo preporuke za uspješnu prilagodbu standardnog dizajna webshopa za mobilne uređaje:

1. Mobilni prikaz trebao bi sadržavati sve proizvode, kategorije i statične stranice, ali prilagođene malim zaslonima. Testiranja su pokazala da korisnici ne razumiju posebne mobilne verzije s prikazom djelomičnog sadržaja i preusmjerenja na verziju s potpunim sadržajem. Da ne govorimo o kompleksnijem održavanju, paralelnom razvoju i međusobnom natjecanju za SEO pozicije između mobilne i standardne verzije.

2. Suprotno od prvog savjeta, sve informacije koje nisu primarne – sakrijte iza ekspandera kako se stranica ne bi produljila u nedogled – na primjer, pri učitavanju stranica može biti prikazan tek dio opisa proizvoda, samo najpopularniji komentari, skrivene dodatne opcije u procesu plaćanja i slično

3. Razmislite o kontekstu korištenja i podržite ga. Primjer: korisnik će newsletter otvoriti na mobitelu i dodati proizvod u košaricu ili na listu želja. Ali će kupovinu vrlo često dovršiti navečer na desktop računalu. Podržite taj proces košaricom koja pamti.

Pazite na prste korisnika!

4. Viewport (vidljivi dio stranice na ekranu) na mobilnim uređajima je znatno manji nego područje iznad folda na desktopu. Brinite da je pri učitavanju svake stranice korisnicima jasan kontekst stranice i navigacija na svim stranicama.

5. Prsti korisnika neće vremenom postati manji i precizniji. Područja gumba, posebno onih za dodavanje u košaricu i napredak u procesu plaćanja, moraju biti dovoljno velika i međusobno razmaknuta tako da pogrešni klikovi ne frustriraju korisnike. Krivi link odvodi na neočekivanu lokaciju i dok se korisnik snađe – zazvonit će mu poziv i zaboravit će na vaš sajt.

6. Smanjite nepromjenjive elemente stranice, prije svega header i footer, na najmanju potrebnu mjeru. Mobilni webshop nije mjesto za brendiranje i prikaz velikog loga, misije i vizije i slično. Navigacija, tražilica i košarica trebaju uvijek biti dostupni na ekranu.

Webshop je namijenjen kupovini

7. Dizajnirajte početnu stranicu tako da je korisnicima pri brzom skeniranju jasno o čemu se radi i što tu može očekivati. Mislite na obje kategorije korisnika – prve posjetitelje i fanove koji su tu već bili mnogo puta. Oprezno s content sliderima i inače, a posebno na mobilnim uređajima.

8. Webshop je namijenjen kupovini. Važno je da se pri učitavanju stranica kategorije vide proizvodi, a manje baneri promotivnih akcija, naslovi, opisi, navigacija i drugi korisniku često manje zanimljivi sadržaji.

9. Na stranicama proizvoda bi link “Dodaj u košaricu” trebao biti vidljiv odmah u prvom viewportu ili barem što je prije moguće. To je odmah putokaz korisniku što napraviti, a kako je ta stranica landing stranica, i jasan signal da se radi o webshopu, a ne blogu ili katalogu.

Koje uređaje koriste kupci?

10. Smanjite količinu informacija u procesu plaćanja na minimum, a opise polja pri upisu podataka za dostavu smjestite iznad područja upisa podataka. Oprezno koristite padajuće izbornike za najviše 6-8 opcija. Ne zaboravite da pola ekrana pri ispunjavanju forme zauzima otvorena tipkovnica.

11. Posložite proces plaćanja tako da korisnik ima najmanje potrebnih koraka i interakcija. Ako kupci najviše plaćaju pouzećem – neka to bude zadana opcija. Integrirajte kartično plaćanje jer otvaranje novog prozora na mobilnim uređajima je jako loše iskustvo.

12. Stranice nisu namijenjene samo vlasnicima iPhonea. Testirajte na raznim uređajima, raznim operativnim sustavima, preglednicima i rezolucijama, u portret i landscape pregledu.

Bonus savjet

Brzo i ispravno učitavanje presudni su na mobitelima. Ne propustite provući svoju stranicu kroz besplatne validatore i popravite što vam kažu da nije dobro. Na primjer Googleov Speed test i Mobile-friendly test otkrit će prostor za poboljšanja. Očekuje se da će uskoro i upozoravati na spore stranice.

Često se čuje kako su mobilni uređaji budućnost trgovine, ali se zanemaruje njihova uloga danas. Ovi rezultati pokazuju da potencijal sigurno postoji, samo ga treba iskoristiti na pravi način.

Ovaj popis ni izbliza ne pokriva sve što je važno za m-commerce. Dodajte u komentarima što mislite da sam izostavio i što je vama donijelo porast (ili pad) prometa.