15 savjeta za mobilni dizajn za povećanje prodaje putem e-trgovine

Jeste li znali da 55% cjelokupnog prometa e-trgovine je sada na mobilnom uređaju?


Tako je, više od polovice svih ljudi koji gledaju mjesta za kupovinu nalaze se na njihovom telefonu ili tabletu.

Ipak, evo problema: 46% od prvih 50 trgovaca na malo još uvijek nemaju prilagođenu mobilnu web lokaciju. Dakle, iako se polovica cjelokupnog prometa obavlja putem mobilne telefonije, polovica maloprodaje nije postavljena za to. To znači da polovica kupaca pritišće i zumira i izvrće telefon kako bi pravilno vidjeli web mjesto.

Dakle, složili smo se, reaktivna i privlačna mobilna web stranica je od ključne važnosti. Ali to je tek početak Kao i na radnoj površini, možete prilagoditi i optimizirati svoju mobilnu stranicu kako bi još više povećao prodaju. Evo kako:

1. Jednostavnost

Rad s tako malim ekranom uvijek će biti težak. Zato je jednostavnost vaš cilj broj jedan. Na web lokacijama e-trgovine posebno je teško jer postoji toliko sadržaja koji bi se mogao stisnuti. Kako promovirate sve svoje proizvode bez gužvanja prostora na malom zaslonu?

Pogledajte kako ETQ prikazuje asortiman cipela na svojim mobilnim stranicama. To je lijepo u svojoj jednostavnosti. Oni su ostavili većinu prostora na zaslonu potpuno besplatno kako bi dali svoje proizvode središnjoj pozornici. Čak je i paleta boja odabrana tako da odgovara njenoj ponudi proizvoda. Čitavom mjestu pruža jednostavan, kohezivan osjećaj. Iako je ekran malen, prostran je osjećaj.

2. Razmislite o palcu!

Pokušajte odmah pridržati pametni telefon. Pomičite palac po zaslonu i osjetite gdje je najugodnije i najprirodnije. Svi su veličina palca različita, ali uglavnom se ta slika u nastavku odnosi na većinu ljudi:

praćenje palca

Imajući to na umu, ne želite stavljati gumbe ni osnovne dijelove u gornje odjeljke. Ostavite to samo za zaglavlja. U sredinu stavite sav pomični sadržaj i gumbe kako biste lako i ugodno došli. (Ne zaboravite razmisliti o ljevorukama! Preokrenite slike da biste vidjeli kako stvari funkcioniraju za ljevice).

3. … Naročito velike palčeve

Osim palca “doseg”, trebali biste uzeti u obzir i “veliki palac”. Svi smo koristili mobilnu web stranicu na kojoj morate kliknuti na najsitniju vezu. Teško je i frustrirajuće, zar ne? Opće se pravilo odlučuje za veće elemente nego što smatrate potrebnim.

Dobar primjer je mobilna web lokacija Hobbycraft. Prije svega, njihove veze sa velikim slikama olakšavaju velike palac. Ali pogledajte njihove ikone na vrhu (“trgovine, račun, košarica”). Oni su puno veći nego što obično očekujete. Hobicraft misli na veliki palac, a isto tako i vi.

4. Hamburger navigacijski izbornici

Jedan od najpopularnijih trendova dizajna u posljednjih dvanaest mjeseci je izbornik ‘hamburger’. Primjer možete vidjeti na web mjestu Hobbycraft iznad. To su tri retka koja izgledaju kao hamburger – kliknite na nju i cijeli navigacijski izbornik se proširuje.

Nema mjesta za tradicionalnu navigaciju u zaglavlju i jednostavno će zatrpati zaslon. Umjesto toga, odlučite se za nav. Ovdje se može naći dobar saldo. Treba biti uredan i vani. Ali istodobno, to bi trebalo biti očito i lako dodirnuti.

Ako imate puno proizvoda i kategorija u ponudi, koristite prošireni izbornik kako biste ga olakšali. Ne bojte se koristiti cijeli prostor na zaslonu. Pogledajte kako Argos u nastavku predstavlja svoj prošireni izbornik.

IMG_3663

5. Odaberite veliki font

Mali mobilni ekran prisiljava nas da dugo i teško razmišljamo o fontu koji koristimo. Nema mjesta za male zamršene fontove. Umjesto toga, mislite jednostavno, podebljano i veliko. Općenito, font sans-serif čišći je i jednostavniji (tj. Ariel je bolji od Times New Roman-a).

71950dee059b803c4a7caa30dce8f5bf

Imajte na umu da će vas ova odluka također prisiliti da pažljivije odaberete svoj primjerak i tekst. Iskoristite ovu priliku za pojednostavljenje i optimizaciju svoje kopije. Pokušajte svoju poruku prenijeti što jednostavnije i jednostavnije. Neka to bude kratko. Učinite ga užurbanim. Ovo neće samo poboljšati vaš dizajn mobilnih uređaja, on će poboljšati cijelo vaše poslovanje.

6. Koristite “pametno pretraživanje”

Ljudi mrze korištenje sitnih obrazaca za pretraživanje na mobilnom uređaju. Prisiljava nas da zumiramo, kliknemo na okvir za pretraživanje i unesemo fidno tipkovnicu. Pogreške su jednostavne i mogu dovesti do frustracija.

Da biste poboljšali korisničko iskustvo, upotrijebite okvir “pametnog pretraživanja”. Kada kliknete na okvir, dizajn bi se trebao automatski preusmjeriti tako da okvir za pretraživanje ispunjava zaslon. Zatim provjerite ima li prediktivno pretraživanje tako da korisniku treba unijeti samo prvih nekoliko slova.

To možete vidjeti u akciji na Europcar-ovom web mjestu. Kupac počinje tipkati “Norw”, a web mjesto automatski predlaže razne podružnice Norwicha. Jednostavan.

IMG_4331

7. Pojednostavite obrasce za prijavu i kupnju

Mnogo razgovaramo o tome kako svoju registraciju i kupovinu obrazaca učiniti što jednostavnijom i bržom. To je ključni dio vaše UX dizajnerske strategije. To je i mjesto na kojem web mjesta e-trgovine gube do 60% konverzija prekompliciranim stvarima. Ako su pokrenuli postupak, kupac je već uvjeren. Jedini način na koji ćete izgubiti prodaju ili prijavu je otežavanje stvari.

Pokušajte ponovo ograničiti potrebnu količinu tipkanja. Koristite prediktivne okvire tipa i omogućite opcije automatskog punjenja. Pomoću alata za pomicanje možete, primjerice, odabrati mogućnosti rođenja. Znamo da obrasci za kupnju često zahtijevaju poprilično malo informacija. Međutim, postoji način da se ovaj postupak pojednostavi.

Pogledajte kako Firebox koristi brojčani sustav kako bi korisnicima pokazao koje su faze u procesu. Ključni trik u dizajnu UX-a je obavještavanje korisnika gdje su. Kao kupci volimo znati što možemo očekivati, a Firebox to radi vješto.

img_1292-blog-pola

8. Tri sloja maksimalno

Mnogo je lakše ‘izgubiti se’ na mobilnom web mjestu. U idealnom slučaju želite biti sigurni da je vaša web lokacija za mobilne uređaje duboka samo tri sloja. Primjer kako ovo može raditi na modnom mjestu e-trgovine je sljedeći:

  1. Početna stranica: Kupac odabire “kategoriju: djevojke”
  2. Kupac odabire “potkategoriju: obuća”
  3. Kupac klikne na stranicu proizvoda.

To su tri jednostavna sloja otkrića. Jedina daljnja opcija trebala bi biti stranica za kupnju ili prijavu. Pokušajte izbjeći zečje rupu potkategorija i daljnjih mogućnosti. Kao i uvijek, budite jednostavni i obavijestite korisnike da se u svakom trenutku nalaze.

9. Olakšajte povratak na početnu stranicu

Jednom kada je vaš kupac dubok tri sloja, uvijek im pružite hrabar i jednostavan način povratka na početnu stranicu. Zapamtite, lako se osjećati izgubljeno na web-lokaciji za mobilne uređaje, pa korisnicima olakšajte “resetiranje” i vratite se na početak.

Pogledajte stranicu proizvoda tvrtke Lush. Ako je vaš kupac nekako navigirao ovdje, možda će htjeti početi ispočetka. Veliki logotip ‘LUSH’ na vrhu je jednostavan i očit identifikator za povratak kući. Bez obzira gdje se nalazite na web stranici, uvijek imate ono sidro koje će vas vratiti na početak.

img_1304-blog-pola

10. Nema pinch-zooma!

Dugo su mobilne web stranice bile jednostavno kopija dizajna radne površine. To je značilo da morate povećati zupčavanjem zaslona. Ovo je opasno zastarjeli trend dizajna i treba ga izbjegavati. U idealnom slučaju, sve bi trebalo biti proporcionalno zaslonu. Svi bi fontovi trebali biti čitljivi bez zumiranja. Sve veze trebaju se kliknuti bez prženja.

Apple-pinch-to-zoom

Postoji samo jedna iznimka kada je štipanje korisno: slike proizvoda. Za kupce je i dalje korisno štipanje i približavanje slikama proizvoda. Žele biti u stanju vidjeti svaki detalj prije kupnje.

11. Riješite brigu o sigurnosti

Unatoč ogromnoj količini prometa na web lokacijama za mobilnu e-trgovinu, još uvijek postoji opća zabrinutost da kupovina nečega s mobilne web lokacije nije tako “sigurna” kao desktop. Naravno, nema razlike u sigurnosti od mobilnog do tabletnog računala. Ali a 2013. studija pokazuje da se gotovo polovica svih online kupaca osjeća manje sigurno kada kupuju nešto na pametnom telefonu. Taj strah će vjerojatno ubiti vaše pretvorbe.

To je jednostavno pitanje povjerenja. Vaš je posao omogućiti kupcima da se osjećaju sigurnije na vašoj web lokaciji. U idealnom slučaju vaša web lokacija za e-trgovinu već mora imati SSL sigurnosni certifikat. Ako ne, kupite ga. To vam daje mali žuti katanac na alatnoj traci. Na svom mobilnom mjestu obavezno prikažite SSL katanac što je moguće bolje.

image18

Druga mogućnost je osigurati da vaši kupci mogu spremiti proizvod za kasnije ili ga poslati e-poštom. U nekim slučajevima sigurno će ih kupiti kasnije na radnoj površini.

12. Slaganje sadržaja

Za mnoge ljude stvaranje web lokacije za mobilne uređaje jednostavno znači odabrati “odgovarajuću” temu na WordPressu ili Shopify ili bilo kojoj platformi koju koristite. Iako je to dobar početak, morat ćete obratiti veliku pažnju na temu kako tema automatski prebacuje sadržaj na sebe. Niste sigurni što mislim? Pogledajte ovaj dijagram u nastavku:

15_contentStacking

Ovo je način na koji reaktivna tema može automatski složiti vaš sadržaj za tablet (slika lijevo) ili pametni telefon (slika desno). Pažljivo razmislite koji su vaši najvažniji dijelovi sadržaja i osigurajte da su pravilno složene. Na primjer, s desne strane proizvodi (kutija 5 – vrste kupelji) tjeraju se niz zaslon. Možda su čak gurnuti ispod „preklopa“.

Eksperimentirajte sa svojim izgledom i slaganjem sadržaja kako biste bili sigurni da se vaš najvažniji sadržaj pojavljuje na pravom mjestu.

13. Izgubite bilo koji Flash sadržaj

Flash je relativno zastarjeli format na bilo kojem uređaju. (Zapravo su dizajneri boreći se da ga ubiju jednom zauvijek! On guta resurse, spor je i igralište za hakere). Iako su to loše vijesti na radnoj površini, još je gore na pametnom telefonu ili tabletu.

Većina mobilnih uređaja uopće neće reproducirati flash medije Ako se na to oslonite za demonstraciju videozapisa ili proizvoda, riješite ga se – kupci ga ne mogu vidjeti na mobilnom uređaju. Apple ga je blokirao prije mnogo godina, a Android je odmah nakon toga slijedio odijelo.

Alternativno je osigurati da vaša web lokacija bude kompatibilna s HTML5 (saznajte više ovdje) i koristite YouTube za hostiranje bilo kojeg videozapisa.

14. Prihvatite ograničenja!

Mnogi ljudi s kojima sam razgovarao izrazili su frustraciju zbog ograničenja mobilnog web mjesta. Jednostavna činjenica je sljedeća: tu ništa ne možete učiniti! Umjesto toga, prigrlite ta ograničenja.

Prisiljava vas na donošenje važnih odluka koje će pomoći cijelom vašem poslu. Kako mogu pojednostaviti web mjesto? Kako mogu preći na nešto manje riječi? Kako mogu biti precizniji i uvjerljiviji u manjem prostoru? Kojim bih proizvodima trebao dati prednost?

Čvrsto vjerujem da odgovaranje na ta pitanja čini vaše poslovanje jačim. Kad god možete destilirati svoj prijedlog, učinite to snažnijim. A to je bitno za dobru web lokaciju za mobilne uređaje.

15. Donosite dizajnerske odluke koristeći Google Analytics

Problem s dizajniranjem za mobilne uređaje je što postoji toliko puno uređaja koje treba uzeti u obzir. Optimizirate li svoj izgled i dizajn za iPad ili Android tablete? Optimizirate li za iPhone 5 ili iPhone 6? Ili Samsung Galaxy?

Odgovarajući dizajn znači da će se oblikovati na drugačiji način od svakog. Evo gdje vam Google Analytics može pomoći. Najnovija inačica usluge Google Analytics omogućuje vam da vidite koji mobilni uređaji najčešće pristupaju vašoj web lokaciji:

mobilni-uređaji-analitika praćenje

U ovom slučaju iPhone su vodeći uređaj – na daleki put. Stoga ima smisla obaviti sva testiranja na iPhoneu. Dajte prednost najvišem uređaju kada optimizirate svoju mobilnu web lokaciju.

Iako mobilni uređaji sada dominiraju na tržištu internetske kupovine, mobilne web stranice još su daleko iza. Polovina najvećih trgovaca na njih smatra se slijepcem.

Ako napravite ove promjene i promjene, možete postići korak ispred konkurencije tako što ćete iskoristiti ovaj ogroman protok prometa.

Volio bih čuti što ste napravili za optimizaciju svoje mobilne web lokacije. Koji su tvitovi radili za vas?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map