Optimizarea checkout-ului pe mobil – o prioritate

Suntem în era în care ne bazăm tot mai mult pe dispozitivele mobile. Nu ne desprindem de telefoane nici când mergem la culcare, iar shoppingul de pe mobil este în creștere de la an la an. 

La nivel global, în 2019, 67.2% din totalul vânzărilor din ecommerce au venit de pe dispozitive mobile. Pentru 2021, prognoza e că procentul cumpărăturilor de pe mobil va depăși 72%.

Având aceste date, nu mai încape discuție că magazinele online trebuie gândite și optimizate în primul rând pentru device-urile mobile. Asta include și optimizarea checkout-ului pe mobil, subiect pe care îl dezbatem pe larg în acest articol, structurat în mai multe teme:

Comerțul de pe mobil în România

Sursă: GPeC.ro

În România, 63,6% din cumpărăturile online se fac de pe telefonul mobil, conform raportului GPeC pentru 2019 . În 2019 tendința s-a accentuat, tot mai mulți români preferând să cumpere online de pe telefon în detrimentul desktop-ului.

72% din traficul magazinelor online din țară este generat de telefoanele mobile. În concluzie, atât traficul, cât și comenzile magazinelor online din România vin majoritar de pe dispozitivele mobile. 

Adopția telefoanelor smart și a internetului mobil este ridicată

Rata de penetrare a internetului mobil la noi în țară este extrem de mare. Potrivit ANCOM, la finalul anului 2019, existau 19,9 milioane de conexiuni internet mobil și 5,3 milioane conexiuni internet fix. Dintre cele mobile, 94% sunt 3G și 4G. 

Și adopția telefoanelor de tip smart este foarte ridicată, situându-se în jurul a 90%. 

Nu este de mirare atunci că principala modalitate de accesa internetul a devenit telefonul mobil, iar traficul magazinelor online este majoritar de pe dispozitive mobile. 

Sursă: GPeC.ro

Românii cumpără anumite tipuri de produse cu preponderență de pe telefonul mobil. De exemplu, conform raportului GPeC:

  • 77% din tranzacțiile magazinelor care comercializează articole pentru copii sunt realizate de pe telefonul mobil și doar 23% de pe desktop
  • produsele cosmetice sunt cumpărate în proporție de 71% de pe telefon
  • produsele din categoria Fashion sunt achiziționate în proporție de 72% de pe mobil vs. 28% de pe desktop

În general, pe telefon se fac mai mult cumpărături de impuls.  Acestea nu necesită o documentare amănunțită asupra produsului sau un timp îndelungat pentru luarea deciziei de achiziție.

Procentul tranzacțiilor mobile vs. desktop este echilibrat în cazurile în care:

  • e nevoie de o documentare detaliată asupra specificațiilor produselor
  • este necesară o comparație între produse 
  • prețul produselor este ridicat
Sursă: GPeC.ro

Plasarea unei comenzi de pe telefonul mobil

Având în vedere ce pondere mare au tranzacțiile și traficul de pe mobil, magazinele online care nu oferă o experiența rezonabilă pentru device-urile mobile au cu siguranță de pierdut. Oamenii, în general, nu se mută de pe un dispozitiv pe altul pentru că un site merge greu. Mai degrabă caută un site care oferă o experiență mai bună. 

Pentru a îmbunătăți experiența pe device-urile mobile e necesar să iei în calcul limitările și avantajele pe care le au acestea. 

Trimiterea unei comenzi de pe telefon este adesea mult mai dificilă de pe telefon decât de pe calculator sau laptop. În principal, asta se întâmplă din cauza ecranului mic al telefonului, unde:

  • încap mult mai puține elemente
  • informațiile sunt ieșite din context
  • utilizatorul nu are o imagine de ansamblu asupra paginii

Când tastatura este deschisă, aceasta ocupă aproape jumătate din ecran, chiar și mult mai mult dacă telefonul este în modul landscape.  Așadar informația vizibilă este și mai redusă.

Tastarea pe telefon este mai greoaie decât pe desktop. Adesea utilizatorii testează greșit și trebuie în permanență să verifice și să corecteze. 

Distragerile sunt mult mai frecvente pe telefon. Un client în proces de checkout poate fi întrerupt de un apel, de notificările diverselor aplicații sau emailuri. 

Având acest context în minte, este important să simplifici cât de mult procesul de checkout. Încearcă să ajuți potențialul client să-l parcurgă cât mai ușor, rapid și fără îndoieli.


Recomandări pentru optimizarea checkout-ului pe mobil

Următoarele acțiuni te vor ajuta să optimizezi checkout-ul pe mobil și să oferi o experiență mai plăcută. 

1. Alege un design de checkout care să ofere o imagine de ansamblu asupra procesului

Problema principala cu checkout-ul pe mobil este lipsa contextului. Din cauza ecranului mic și a tastaturii care ocupă mult spațiu, consumatorii vor avea vizibile pe ecran adesea 1-2 câmpuri de completat. Așadar, nu-și pot face o imagine de ansamblu a întregului proces. Nu pot găsi tipare sau trage concluzii cu privire la informația ce trebuie completată decât văzând ceea ce este afișat în ecran în acel moment.

✔️ Platforma Zento – Checkoutul de tip acordeon oferă o imagine de ansamblu asupra pașilor chiar din primul ecran

Un design de checkout care să arate de la început pașii și să evidențieze progresul ajută în cazul lipsei de context. Aceasta poate fi:

  • un checkout în mai mulți pași, dar cu bara de progres vizibilă în fiecare pas
  • un checkout de tip acordeon. Aici toți pașii sunt vizibili, dar din afara de primul, toți sunt restrânși (colapsați).

Citește și articolul Multi-Step sau One Step Checkout – ce tip de checkout să aleg pentru magazinul online?

Legat de implementare, ține cont că vizitatorii aflați în checkout vor încerca să navigheze de la un pas la altul dând click pe ei. E indicat să permiți acest lucru și pașii să se comporte și ca linkuri. 

2. Asigură-te că butonul acțiunii principale este proeminent și stilizat unic

Butonul aferent acțiunii principale în checkout (ex: Plasează Comanda sau Continuă cu Plata) trebuie să fie stilizat astfel încât să fie proeminent și diferit de orice alte butoane existente în checkout. Trebuie să fie suficient de mare încât

  • să sugereze importanța
  • textul să fie lizibil
  • clientul să nu se îndoiască că acesta este butonul pe care trebuie să-l apese pentru a finaliza comanda
  • userul să poată da click pe el fără probleme
✔️ Platforma Zento – Butonul acțiunii principale este proeminent și are un call to action clar

În general, oamenii se așteaptă să găsească acest buton în dreapta-jos a ecranului. Ce e super important e fii consecvent cu locul în care este plasat. Dacă apare în dreapta-jos în primul pas, atunci în fiecare pas, inclusiv pasul final, trebuie să fie situat în același loc și stilizat la fel. 

Afișează un text clar, care să sugereze care este efectul apăsării butonului. De exemplu:

  • Plasează Comanda în loc de Trimite
  • Continuă cu Livrarea în loc de Continuă

3. Ascunde posibilitățile de navigare (meniu, footer) sau alte elemente care distrag atenția

Aceasta este o bună practică, care poate îmbunătăți masiv experiența utilizatorului, atât pe desktop, cât și pe mobile.

În special pe telefoanele mobile, headerul poate ocupa mult din ecran. Prin urmare, potențialul client va fi confuz în legătură cu pagina unde se află și cu ce trebuie să facă în continuare. De asemenea, poate fi distras să navigheze în alte pagini și părăsește procesul de comandă. Nu îți dorești asta, așa că elimină opțiunile de navigare (header, footer) și orice element care nu ține de checkout și poate distrage atenția. 

Buddies.ro – chat-ul in checkout poate fi un element care distrage și încurcă utilizatorul. O variantă bună ar fi activarea acestuia doar pentru utilizatorii care întâmpină erori sau se blochează.

Alte elemente care distrag în checkout și e bine să le eviți sunt:

  • pop-uri și overlay-uri care sunt deschise fără acțiunea userului (ex. căsuță de chat)
  • sondaje
  • cereri de feedback
  • bannere promoționale

Opțiunea de chat este utilă în unele cazuri, așadar poți avea un link către chat. O altă variantă acceptabilă e să activezi chatul în momentul în care clientul întâmpină în mod repetat erori de validare. Nu deschide însă automat căsuța de chat dacă procesul de checkout merge normal. 

4. La pasul de review/sumar comandă, afișează butonul de plasează comanda și în partea de sus a ecranului

Dacă în pasul cu sumarul comenzii sunt afișate multe informații, e posibil ca utilizatorii să nu mai aibă vizibil în primul ecran butonul de comandă. Diverse studii au demonstrat că un segment important din potențialii clienți, cred că au plasat deja comanda când se află în acest pas. 

Ca să nu pierzi potențiali clienți care au parcurs aproape tot drumul, afișează butonul Plasează Comanda de 2 ori pe pagină. O dată în partea de sus ca să fie vizibil în primul ecran, indiferent de câtă informație este pe pagină, și o dată în locul unde îl afișezi în mod normal. 

O altă implementare care funcționează ok este păstrarea butonului principal sticky pe ecran, pentru a fi în permanență vizibil. 

5. Permite continuarea comenzii de pe alt device

Procesul de comandă nu este întotdeauna liniar. Cumpărătorii pot adăuga produse în coș pe un device și alege să finalizeze comanda de pe altul, mai târziu. De exemplu, un utilizator alege produsele navigând de pe telefon, dar intră pe laptop pentru a finaliza comanda. 

Salvează sesiunea utilizatorului dacă este logat în cont, pentru a putea să-și continue cumpărăturile de pe orice device, oricând. 

6. Optimizează formularul de comandă

Ecranul pe mobile este mic și elementele care pot distrage sunt multe. Userii tastează mai greu și fac mai multe erori. Toate acestea sunt motive suficiente să investești resurse pentru a optimiza cât de mult checkout-ul pe mobil. 

Asta înseamnă să: 

  • Scurtezi formularul pe cât posibil (atât pe mobil, cât și pe desktop) 
  • Să-l faci cât mai intuitiv de completat 
  • Să ai cerințe de completare clare

Pentru optimizarea formularului de comandă citește recomandările din următoarea secțiune și articolul Formularele din checkout – cum simplifici formularul de comandă pentru a crește vânzările


Cum să optimizezi formularul de comandă pentru dispozitivele mobile? 

Unele optimizări vor fi identice cu cele pentru desktop, altele sunt specifice pentru device-urile mobile. În principal, pentru mobil trebuie să iei în calcul limitările acestor dispozitive și comportamentul utilizatorilor.

1. Redu numărul de câmpuri de completat 

Introducerea datelor de pe telefonul mobil este greoaie. 

Cu cât mai multe date trebuie să completeze un utilizator, cu atât cresc șansele să abandoneze procesul de comandă.

Norman Nielsen Group

De aceea, reducerea informațiilor solicitate este importantă pentru orice tip de device, dar în special pe cele mobile. 

Majoritatea magazinelor online cer mult mai multe informații în checkout decât ar fi necesare. Acestea afișează un număr mare de câmpuri de completat, unele redundante sau care pot fi completate în mod automat. În cazul magazinelor mari din US, media numărului de câmpuri text este de 14.88. Dacă le luăm în calcul și pe cele de tip dropdown, radio sau selecții, media este 23.48. 

21% din persoanele care au abandonat procesul de comandă au menționat ca motiv că checkout-ul a fost prea complicat.

Motive pentru abandonul checkout-ului – Baymard Institute

Pentru a optimiza formularul:

  • Analizează dacă sunt câmpuri pe care le poți elimina cu totul din checkout. Chiar și câmpurile opționale atrag destulă atenție.
  • Identifică datele pe care le ceri de 2 ori și pre-completează acele câmpuri. 
  • Vezi ce date se pot completa în mod automat pentru reduce cantitatea de informații pe care potențialul client trebuie să le introducă de pe tastatura mică a telefonului.  De exemplu, poți precompleta țara folosind geo-localizarea sau localitatea și județul în funcție de codul poștal. 
  •  Permite utilizatorului să modifice datele precompletate în cazul în care dorește.

Află cum să reduci lungimea formularului din checkout din articolul Simplificarea formularului din checkout.

2. Afișează descrierea (eticheta) câmpului deasupra lui și nu folosi explicații în interiorul câmpului (placeholders)

Descrierea câmpurilor

descrieri deasupra campurillor formular magazin online
Sursa: Design Better Forms, Andrew Coyle

Se recomandă să afișezi descrierile deasupra câmpurilor. Astfel câmpurile din formular nu au restricții de spațiu, putând ocupa întreaga lățime a ecranului (dacă e cazul). Când sunt afișate lângă, atât spațiul pentru descriere, cât și spațiul pentru câmpul propriu-zis va fi mai mic. Prin urmare, pot să apară următoarele probleme:

  • Descrierea va fi scurtată pentru a încăpea și va fi mai vagă
  • Un câmp prea mic creează probleme de tastare și revizuire a datelor introduse

Explicațiile pentru completare

Dacă oferi informații suplimentare pentru introducerea unor date, afișează-le în apropierea câmpului de completat. Acestea pot fi instrucțiuni, reguli de formatare sau motivele pentru care soliciți acele date. 

Așadar, cerințele pentru introducerea datelor în formular trebuie:

  • Să fie clare
  • Să se poată înțelege și în afara contextului 
  • Să fie afișate în imediata apropiere a câmpului de completat

Pentru a scurta formularele, unele magazine online aleg sa afișeze explicațiile pentru completarea câmpurilor în interiorul acestora. Aceasta este o practică nerecomandată deoarece poate crea dificultăți, chiar dacă din punct de vedere estetic poate fi mai plăcută. 

evita text in interiorul campurilor formular online
Sursa: Design Better Forms, Andrew Coyle

Principala problemă cu explicațiile din interiorul câmpurilor apare când utilizatorul începe să testeze și explicațiile dispar. Multe persoane uită ce ar fi trebuit să completeze exact sau cum să formateze textul.

Nu trece explicațiile pentru completarea unui câmp în interiorul lui, deoarece aceasta dispare la tastare, iar utilizatorul rămâne confuz. 

Baymard Institute

În schimb, oferă explicații clare în apropierea câmpurilor, pe care userul le poate înțelege fără să vadă restul formularului. 

3. Ține cont că nu poți comunica informații la hover

Dacă pe desktop ai explicații oferite prin tooltips care se activează la hover, ține cont ca ele nu se vor afișa și pe dispozitivele mobile. Prin urmare, trebuie să gândești o soluție în care să poți comunica aceste informații altfel pentru userii de pe mobile.

În cazul în care folosești pop-uri/overlay-uri pentru comunicarea mesajelor:

  • asigură-te că opțiunea de închidere este clar vizibilă pentru utilizator
  • permite inchiderea lui și dacă utilizatorul face click în afara căsuței 

4. Nu afișa câmpurile deschise la secțiunea logare în cont/creare cont

În majoritatea checkout-urilor, în pasul 1, clientul trebuie să aleagă modul în care finalizează comanda. Fie se loghează în cont dacă are unul, fie creează unul nou, fie alege să plaseze comanda ca vizitator, adică fără cont. 

Sub primele 2 opțiuni există câmpuri de completat. În cazul logării în cont, clientul trebuie să completeze e-mailul și parola sau să se logheze cu un alt serviciu extern (Facebook, Google etc.). În cazul creării unui cont, utilizatorul trebuie să-și completeze adresa de email și parola dorită. Dacă aceste câmpuri sunt deschise și afișate din prima, pot crea confuzie și bloca utilizatorul în drumul său de a plasa comanda. Când aceste opțiuni au câmpurile deschise, ocupă mult spațiu din ecranul telefonului, dacă nu întreg ecranul. Astfel clientul poate avea impresia că este obligat să-și facă cont. 

Elefant.ro – câmpurile destinate logării sunt deschise și împing în afara ecranului vizibil opțiunea de a finaliza comanda fără cont. În astfel de cazuri, mulți oameni cred că opțiunea de a comanda fără cont nu este disponibilă.

Deși se recomandă să lași ca prima opțiune Comanda fără Cont/Ca vizitator, multe magazine online nu fac asta, iar primele opțiuni afișate sunt logarea în cont sau crearea unuia nou. Astfel, opțiunea de a plasa comanda fara cont este împinsă în jos și nu mai este vizibilă pe ecran. Asta îl poate face pe potențialul client să creadă că site-ul nu oferă varianta de a plasa comanda fără cont. 

60% din utilizatorii de pe mobil nu reușesc să identifice sau să selecteze opțiunea de Finalizare comanda ca vizitator, din cauză că nu este proeminentă sau este împinsă în jos de opțiunile de logare sau creare cont. 

Baymard Institute

Așadar, în pasul de selecție al modalității de checkout (cu cont sau ca vizitator), opțiunea de Finalizare comandă ca vizitator trebuie afișată prima pe dispozitivele mobile și afișată în partea stânga-sus pe desktop. 

Answear.ro – permite plasarea comenzii fără cont, dar aceasta nu este proeminentă și nu este afișată ca primă opțiune

Peste o treime din potențialii clienți (37%) abandonează comanda dacă sunt nevoiți să-și creeze un cont, iar o bună parte din cei care au cont au probleme la logarea în el. Prin urmare, este destul de grav dacă potentialul client nu realizează că are opțiunea de a trimite comanda fără cont. 

Soluția recomandată pentru pasul de logare/comandă fără cont

  • Afișează opțiunea Finalizează Comanda Fără Cont ca prima variantă, deasupra celor de a se loga sau a crea un cont nou. Majoritatea persoanelor își vor dori să plaseze comanda astfel și vor căuta activ aceasta opțiune. Chiar și persoanele care au un cont, uneori preferă această variantă, deoarece își uită parola sau consideră că este mai rapidă. 
  • Afișează doar variantele, fără a avea câmpurile deschise. La click pe opțiunea dorită utilizatorului i se vor deschide câmpurile de completat.
✔️ Cartipentruoamenidragi.ro – câmpurile secțiunilor de logare sau creare cont sunt închise, fiind afișate doar la click. Prima opțiune afișată este cea de finalizează comanda ca vizitator
  • Oferă opțiunea de a crea cont doar după confirmarea comenzii. Crearea unui cont întrerupe procesul de checkout sau îl prelungește. Adesea utilizatorul, după introducerea datelor, trebuie să confirme contul prin accesarea unui link pe adresa de email. Astfel pleacă de pe site și intră pe email. În multe cazuri așteaptă minute bune emailul cu pricina (acesta poate intra în spam sau întârzia dacă sunt probleme cu serverul). Pentru a nu întrerupe procesul de comandă, cel mai bine este să permiți crearea contului după plasarea comenzii. Astfel în primul pas vei avea doar 2 opțiuni: Finalizează Comanda fără Cont sau Intră în Cont și Finalizează Comanda

5. Afișează tastatura corectă în funcție de specificul câmpului – Touch Gestures

Activează tastatura în funcție de informația pe care clientul o are de introdus, pentru dispozitivele cu atingere (smartphones, tablete). De exemplu, pentru câmpurile numerice precum codul poștal, numărul de telefon sau datele cardului de credit, activează tastatura numerică. Astfel userul nu va mai trebui să schimbe manual tastatura. Asta înseamnă o acțiune în minus pentru el și o completare mai rapidă.

✔️ Platforma Zento – Câmpul pentru telefon activează tastatura numerică

Tastaturile numerice nu sunt singurele care pot fi activate. De exemplu identificarea tipului de input pentru adresa de email, va aduce simbolurile „@” și „.” în tastura afișată. Așadar clientul nu va  mai fi nevoit să le caute în lista de simboluri. 

Pe scurt, urmărește eficiența și rapiditatea.

6. Afișează formularul pe o singură coloană

Evită afișarea formularului de checkout pe mai multe coloane. Acest design poate crea probleme și încetinește completarea. Există cazuri în care consumatorii chiar nu-și dau seama cum trebuie să completeze câmpurile afișate astfel și abandonează plasarea comenzii cu totul.

Foomularl de comanda pe o coloana
Sursa: Design Better Forms, Andrew Coyle

Afișarea pe o singură coloană a formularelor este o bună practică, atât pe desktop cât și pe mobile. Utilizatorii parcurg și înțeleg mai ușor informația când aceasta este prezentată pe o singură coloană.

Ținând cont de spațiul redus de pe ecranul telefonului, aceasta recomandare este cu atât mai utilă pentru telefoanele mobile. 

7. Dezactivează autocorrectul pe mobile, dar permite opțiunea de autocomplete

Deoarece datele introduse în checkout nu sunt formate din cuvinte pe care le găsești în mod normal în dicționar, autocorrectul telefonului va încurca introducerea datelor. Nu vrei ca acesta să intervină să corecteze o adresă sau numele clientului. Evită astfel de situații prin dezactivarea autocorrectului în formularul de comandă.

În schimb, opțiunea de autocomplete din browser, care poate precompleta date precum nume, adresa sau parolă, este utilă, mai ales pe mobile unde userii urăsc sa tasteze. 

8. Evită selecțiile de tip drop-down 

Listele lungi de tip drop-down sunt dificile, mai ales pe mobil. Deseori este nevoie ca utilizatorii sa scroleze liste lungi pentru a ajunge la opțiunea dorită. Se întâmplă asta mai ales în cazul listelor în care variantele nu sunt ordonate în ordinea popularității, ci strict alfabetic. 

În listele lungi, e mai bine să lași userul să tasteze și să filtrezi opțiunile în funcție de caracterele introduse.

9. Evită testele captcha 

Din rațiuni de securitate și evitare a spamului în formulare, se folosesc adesea teste captcha. Acestea pot fi de mai multe tipuri, de la cele cu text distorsionat la cele cu bifă sau imagini. 

teste capcha magazin online
Test captcha cu bifă – A se evita

Din păcate, de foarte multe ori și mai ales pe dispozitive mobile, aceste captcha creează dificultăți. Unii oameni întâmpină erori repetate sau nu pot trece de ele. Captcha cu textul distorsionat creează cele mai multe probleme și cresc șansele ca utilizatorul să abandoneze comanda.

Introducerea testelor de tip captcha duc la o scădere cu 30% a numărului de formulare completate. 

Standford.edu

Așadar se recomandă evitarea lor. Dacă sunt absolut necesare și nu găsești alternative la testele captcha, atunci cel cu bifă este de preferat. 


Concluzie – optimizarea checkout-ului pe mobil e un must

În mare, optimizarea pe mobil înseamnă:

  • Scurtarea pe cât posibil a pașilor ce trebuie parcurși 
  • Reducerea informațiilor ce trebuie completate
  • Oferirea de explicații clare care să ajute clientul să avanseze 

În paralel, pentru oferirea unei experiențe mai fluide și plăcute, elementele care pot distrage clientul de la a finaliza comanda trebuie înlăturate. 

Cu siguranță, poți găsi în acest articol idei pe care să le testezi la tine în magazin pentru a-ți îmbunătăți checkoutul și experiența de device-urile mobile.

Deși recomandările sunt realizate în urma unor studii sau teste de uzabilitate, întotdeauna e mai sigur să testezi pe audiența ta ce funcționează și ce nu. Acest pas este foarte important pentru succesul magazinului tău, așa că merită să investești efort și resurse să-l optimizezi.

În continuare, dacă ești interesat de optimizarea checkoutului citește și: 

Avatar
Autor

Oana Chiriac este Marketing Manager la Blugento și activează în zona de eCommerce & marketing digital de peste 8 ani. În prezent, oferă și consultanță pentru magazinele online în vederea optimizării UX și a ratei de conversie.

Scrie un comentariu