Din acest articol vei afla cum poți să-ți optimizezi formularul de comandă din pagina de checkout într-un mod smart. Vom trece, pe rând, prin mai multe subiecte:
- De ce să simplifici formularul din checkout
- Cum reduci numărul de câmpuri de completat
- Cum creezi un formular de checkout intuitiv și ușor de completat
- Cum validezi informațiile introduse în formularul de comandă
- Cum optimizezi formularul de comandă pentru dispozitivele mobile
- Concluzie
De ce să simplifici formularul din checkout?
21% din persoanele care au abandonat procesul de comandă au menționat ca motiv că checkout-ul a fost prea complicat.
Ultimul studiu UX Baymard al procesului de checkout relevă următoarele date despre magazinele online studiate:
- Numărul mediu de pași din checkout este 5.1 (cu tot cu coșul de cumpărături și sumarul comenzii)
- Numărul mediu de câmpuri text de completat este 14.88
- Pe lânga câmpurile text, checkout-ul mai are în medie încă 8.6 câmpuri de selectat (radio, dropdown, checkbox etc.). Asta înseamnă că în total are 23.48 câmpuri.
Numărul mare de elemente de selectat și completat în checkout poate duce la abandonul procesului de cumpărare. Chiar și câmpurile opționale adaugă fricțiune în proces, așadar trebuie incluse în cunoștință de cauză.
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.
Cu cât mai multe date trebuie să introducă un utilizator, cu atât cresc șansele să abandoneze procesul de comandă. De aceea, reducerea informațiilor solicitate este importantă pentru orice tip de device, dar în special pentru cele mobile unde tastarea este mult mai dificilă.
Interesat de optimizarea checkoutului? Află ce tip de checkout are cele mai bune performanțe din articolul Multi-Step sau One Step Checkout – Ce să aleg pentru magazinul online?
Cum reduci numărul de câmpuri de completat din checkout?
Un checkout optimizat poate avea doar 7-8 câmpuri text de completat, pe când media în magazinele online este de 14.88 câmpuri. Cum reduci numărul de câmpuri fără să pui în pericol experiența utilizatorului și în același timp să colectezi informațiile necesare?
Baymard ne oferă cateva soluții testate, care îmbunătățesc experiența:
1. Numele poate fi completat într-un singur câmp (nume și prenume)
Pe majoritatea site-urilor de eCommerce, pentru nume sunt două câmpuri distincte, unul pentru nume, altul pentru prenume, deși nu este necesar. Un singur câmp care solicită numele complet este suficient.
Acest mod de a completa se aliniază mai bine și cu modul în care oamenii se gândesc la numele lor. În studiile de uzabilitate, aproape jumătate dintre participanți (42%) au completat numele întreg în primul câmp destinat prenumelui, deși în al doilea câmp se cerea numele de familie. Este o greșeală mică, care se corectează ușor și nu întrerupe procesul de checkout, dar este un pas în plus pe care userii trebuie să îl facă. O sarcină atât de ușoară precum completarea numelui nu ar trebui să cauzeze atât de multe erori.
Astfel, având un singur câmp pentru întreg numele, reduce probabilitatea de a face o eroare, cât și lungimea formularului.
2. Ascunde rândul 2 pentru adresă sub un link
Cei mai mulți utilizatori își vor completa adresa pe un singur rând. Astfel, cel de-al doilea devine redundant și poate cauza confuzie. Din acest motiv, îl poți ascunde, lăsând doar un link pe care userul poate da click, la nevoie, pentru a i se deschide și al doilea rând de adresă.
Beneficiile sunt clare:
- numărul câmpurilor este redus
- utilizatorii nu se vor mai întreba cât din adresă să treacă într-un rând și cât în altul
- cei care vor simți nevoia de încă un rând pot da click pe linkul care-l va afișa
3. Consideră adresa de livrare ca adresa de facturare implicită
Completarea de două ori a acelorași informații cauzează frustrare, îngreunează procesul de checkout și crește timpul necesar finalizării. În plus, tot procesul va fi mult mai intimidant, deoarece numărul de câmpuri de completat este mare.
Pentru simplifica, adresa completată ca adresă de livrare, trebuie considerată și adresă de facturare, dacă userul nu specifică altfel.
Astfel, după câmpurile destinate adresei de livrare, va fi afișat un checkbox preselectat, în care se va menționa că adresă de facturare este aceeași cu cea de livrare. Doar dacă utilizatorul va deselecta aceasta opțiune, i se vor afișa câmpurile aferente adresei de facturare.
Singurele excepții de la această regulă sunt site-urile care vând produse cadou sau site-urile business-to-business. În aceste cazuri, recomand să studiați istoricul comenzilor, pentru a vedea ponderea celor care completează adrese diferite de livrare și facturare. Abia apoi luați o decizie în acest sens.
4. Ascunde numele companiei sub un link
Ca în cazul câmpului destinat rândului 2 de adresă, câmpul destinat numelui companiei poate fi ascuns sub un link, deoarece majoritatea persoanelor nu vor avea nevoie de el. Cei care doresc să completeze numele companiei pentru facturare, vor putea face asta dând click pe linkul care le va afișa câmpul respectiv.
Excepția în acest caz vor fi site-urile business-to-business.
5. Nu afișa câmpul de cupon deschis în checkout
Câmpul dedicat codurilor de discount/cupoane nu trebuie să fie proeminent în checkout. Acesta poate fi ascuns în spatele unui link.
Studiile arată că atunci când câmpul este deschis în checkout, atrage foarte multă atenție, disproporționat față de alte secțiuni ale site-ului. Unii utilizatori, chiar vor pleca de pe site în încercarea de a găsi pe Internet un cod de cupon valid. Alții nu se vor mai întoarce pe site să finalizeze comanda dacă nu găsesc un astfel de cod.
Varianta ideală e să lași posibilitatea de a aplica codul de cupon, dar să ascunzi opțiunea în spatele unui link intuitiv. De exemplu, un user care are un cupon va căuta opțiunea și vă gasi ușor linkul Introdu un cupon. La click i se va deschide câmpul în care trebuie să introducă codul. Astfel, majoritatea utilizatorilor care nu au cupon nu vor fi distrași de acest câmp și își vor continua comanda. În schimb, cei care au unul, vor găsi cu ușurință acest link.
Cum creezi un formular de checkout intuitiv și ușor de completat
1. Marchează câmpurile opționale, dar și cele obligatorii
Deși majoritatea site-urilor de ecommerce marchează fie câmpurile obligatorii, fie pe cele opționale, studiile de usability arată ca este de preferat să le marchezi pe ambele.
Lipsa marcajelor pe orice dintre câmpuri duce la erori de validare, la confuzie, o completare mai lentă a formularului din checkout și poate determina chiar abandonul coșului de cumpărături.
Nielsen Norman Group
Problemele sunt mai accentuate pe dispozitivele mobile. Acolo încap mai puține câmpuri pe ecran, iar userul se concentrează pe rând, la câte unul odată.
În primul rând, pentru optimizarea formularului ar trebui analizate câmpurile din checkout pentru a vedea dacă sunt toate necesare sau se poate renunța la cele opționale. Dacă totuși, rămân câmpuri opționale, atunci acestea trebuie marcate explicit cu eticheta opțional.
Chiar dacă cele obligatorii sunt marcate, în lipsa unui marcaj al câmpurilor opționale, mulți utilizatori ajung la concluzia că și câmpurile nemarcate sunt obligatorii. Astfel, dacă ajung la un câmp unde nu știu ce să completeze (ex. cod voucher), se pot bloca în proces. O altă problemă care apare atunci când nu sunt marcate câmpurile, iar utilizatorii nu-și dau seama că acestea sunt opționale, este cazul în care trebuie să divulge date sensibile (data nașterii, CNP, etc.).
De ce să marchezi și câmpuriile obligatorii?
Câmpurile obligatorii trebuie de asemenea marcate cu eticheta obligatoriu sau un asterisk *. În lipsa marcajelor, în studiile realizate, o treime din utilizatori au întâmpinat erori de validare deoarece nu au completat un câmp obligatoriu. În cazul în care toate câmpurile din formular sunt obligatorii, este necesară marcarea acestora cel puțin cu un asterix.
O simplă informare în partea superioară a paginii de genul „Toate câmpurile sunt obligatorii” nu este suficientă deorece multe persoane nu o vor observa.
Nielsen Norman Group
Magazinele online nu au un standard pentru informațiile pe care le cer în checkout. Așadar, consumatorii nu au cum să intuiască ce informații trebuie completate și care sunt opționale. S-a observat, în mod repetat, că lipsa marcajelor pentru câmpurile obligatorii sau opționale duce la încetinirea procesului de checkout și la un număr mai crescut de erori de validare.
În concluzie, o optimizare ușor de făcut și necostisitoare, care va îmbunătăți experiența în procesul de checkout, este marcarea câmpurilor obligatorii și opționale.
2. Afișează câmpurile de completat pe o singură coloană
Evită afișarea formularului de checkout pe mai multe coloane. Acest design poate crea probleme și încetinește completarea. Mulți oameni interpretează greșit modul în care trebuie să completeze și sar peste câmpuri obligatorii, fără să realizeze. Există și cazuri în care consumatorii chiar nu-și dau seama cum trebuie să completeze câmpurile afișate astfel și abandonează plasarea comenzii cu totul.
Utilizatorii pot interpreta greșit cum trebuie să completeze în diferite moduri exemplificate în graficul de mai jos.
Există câteva excepții unde se pot afișa mai multe câmpuri pe aceeași linie, mai exact atunci când e logic să fie împreună. De exemplu, câmpurile pentru oraș și județ sau cele pentru datele cardului de credit pot fi afișate pe aceeași linie și nu creează probleme.
Așadar, în general, pentru formulare folosește afișarea pe o singură coloană – va fi mult mai ușor de parcurs. Modul natural în care oamenii parcurg informația este de sus în jos.
3. Adaugă explicații la câmpurile mai dificile
S-a observat, în mai multe cazuri, că unele informații solicitate crează probleme, deoarece utilizatorii nu înțeleg exact ce li se cere. Asta poate duce chiar la blocarea procesului de checkout, dacă informațiile sunt obligatorii.
Întâlniți cu asemenea situații, unii oameni caută informații pe site sau contactează departamentul de suport. Acesta este scenariul optimist. Celălalt scenariu este cel în care pur și simplu abandonează dacă nu își dau seama ce trebuie să completeze.
De aceea, pentru câmpurile unde există posibilitatea ca utilizatorii să interpreteze informația sau să nu înțeleagă ce li se cere, adaugă o explicație în imediata apropiere. Cerințele pentru crearea de parole trebuie, de asemenea, explicate clar, în apropierea câmpului. În acest mod userul va ști de la început ce are de făcut și nu va afla prin încercări nereușite.
Aceste explicații sunt binevenite și în cazul în care se cer date sensibile, cum sunt numărul de telefon sau data nașterii. Prin afișarea unor explicații, comunici clientului motivele pentru care colectezi aceste informații și reduci din bariere.
O explicație bună trebuie să răspundă la întrebările:
- Pentru ce folosește site-ul această informație?
- De ce mi se solicită?
- Unde o pot găsi?
- Cum trebuie să o formatez?
Astfel de clarificări:
- reduc ambiguitatea
- oferă suport pentru client pentru ca acesta să parcurgă fără probleme și fără erori checkout-ul
- reduc apelurile la departamentul de suport
Cum se pot afișa explicațile?
Descrierile se pot afișa fie inline, fie printr-un tooltip care se activează la hover sau se pot implementa descrieri dinamice.
Cele inline sunt descrierile afișate în imediata apropiere a câmpului și sunt permanent vizibile. Singurul dezavantaj al acestui mod de afișare este aglomerarea interfeței.
Dacă descrierile sunt mai lungi, atunci poți folosi un tooltip. La hover se va afișa descrierea amănunțită. În acest caz, trebuie să te gândești și la cum le vei afișa pe dispozitivele mobile, unde nu există hover. O posibilitate este un link cu informația care se deschide la click într-un overlay.
Descrierile dinamice sunt un mod mai elegant de a afișa explicațiile și păstrează interfața mai curată. Asta înseamnă să afișezi explicația doar în momentul în care utilizatorul face click în câmpul respectiv.
Evită descrierile afișate chiar în interiorul câmpurilor. Problema cu acestea e că dispar în momentul în care userul face click în câmp și începe să scrie.
4. Lungimea câmpurilor trebuie să corespundă informației solicitate
Lungimea formularelor trebuie să corespundă cu lungimea informației solicitate. Dacă informația care trebuie completată este scurtă, atunci și câmpul aferent trebuie să fie unul mic. Utilizatorii se așteaptă ca lungimea câmpului sa corespundă cu lungimea informației pe care trebuie să o completeze.
De exemplu, în momentul în care trebuie să completeze codul CVV, dar văd un câmp în care încap 20 de caractere, utilizatorii se blochează. Acest tip de ezitare apare mai frecvent în cazul informațiilor mai tehnice, unde oamenii caută indicii în plus despre ceea ce trebuie să scrie.
Când știi lungimea exactă a datelor care vor fi introduse, numărul caracterelor care încap în acel câmp nu ar trebui să fie mai mare. Când știi o medie a caracterelor, lasă câmpul să fie ușor mai lung. Când lungimea caracterelor introduse diferă mult de la un caz la altul, atunci câmpul de text trebuie să se extindă în funcție de textul introdus.
5. Explică de ce este necesar numărul de telefon
O parte din vizitatorii magazinului tău online vor fi reticenți la a oferi numărul de telefon. Există și persoane care evită să-și divulge numărul de telefon de teama de a nu ajunge în liste de SMS marketing. Unii useri mai suspicioși sau care țin mult la confidențialitate pot chiar abandona site-ul în loc să-și completeze numărul de telefon.
Majoritatea magazinelor online solicită numărul de telefon pentru:
- curieri
- pentru confirmarea comenzii
- pentru a trimite informații legate de livrarea coletului.
Utilizatorii mai sensibili cu informațiile personale pot completa numere de telefon aleatorii, doar pentru a trece de acel câmp, dacă este obligatoriu. Acest lucru poate duce la anularea unei comenzi valide sau la probleme de livrare a coletului.
Pentru a preîntâmpina astfel de scenarii, afișează motivul pentru care este necesar numărul de telefon și la ce va fi utilizat. Dacă potențialul client va fi înștiințat că numărul de telefon va fi utilizat doar de curier pentru livrare, și nu pentru campanii de marketing, atunci crește probabilitatea să ofere un număr valid.
Alte informații sensibile care necesită explicații sunt CNP-ul, datele de buletin, data nașterii, sexul.
Cum validezi informațiile introduse în formularul de comandă
1. Validează completarea câmpurilor în timp real
Se întâmplă deseori ca utilizatorii să facă erori în completarea formularului de checkout. Pentru a facilita corectarea lor este necesară afișarea unor mesaje care să-i ajute pe utilizatori.
Locul și modul în care se afișează aceste mesaje de eroare, cât și stilizarea lor e importantă pentru ca acestea să fie remarcate și într-un final utile pentru a rezolva problema.
Validarea inline înseamnă că utilizatorul primește mesajul de eroare sau confirmare imediat după ce tastează, în proximitatea câmpului pe care îl completează. Aceasta validare este aproape instantă. Astfel, e mult mai eficientă decât validarea datelor introduse doar la trimiterea formularului prin apăsarea unui buton.
Beneficiile validării inline sunt multiple, iar adopția este ridicată mai ales în rândul site-urilor mari. Acest tip de validare ajută pentru că:
- Mesajele de eroare sunt mai ușor de reperat deoarece se află în imediata apropiere a câmpului și apar aproape instant
- Validarea pozitivă aduce o confirmare a acțiunii și oferă un simț al progresului
- Va fi mai puțin probabil ca potențialii clienții să omită neintenționat câmpuri
- Mesajul este mai ușor de înțeles deoarece confirmarea vine rapid, ca răspuns la ceea ce userii tastează
Pentru ca validarea inline să fie cu adevărat utilă și nu enervantă trebuie implementată corect.
2. Evită validarea prematură
Cu siguranță ai întâlnit site-uri unde nici nu ai început bine să tastezi adresa de email că deja ți se și afișează mesajul de eroare că adresa este incorectă. Aceasta problemă apare când validarea începe să se facă prea repede sau chiar în timp real, în timp ce userul tastează. Acest comportament este destul de enervant și distrage utilizatorul de la ce are de făcut.
Pentru a evita genul ăsta de situații, validarea se va realiza abia după ce utilizatorul părăsește câmpul sau ajunge la limita de caractere.
3. Implementează validarea pozitivă
Validarea pozitivă contribuie la simțul progresului, prin urmare utilizatorii vor fi mai răbdători cu tot procesul de checkout. Un alt beneficiu este că reduce timpul necesar plasării comenzii, deoarece dacă știu deja că au completat bine informația, clienții vor petrece mai puțin timp verificând-o.
Oamenilor le place să ducă la bun sfârșit o sarcină și le plac validările. O validare pozitivă le dă încredere că ceea ce au tastat este corect și pot trece mai departe la completarea celorlalte câmpuri.
4. Elimină mesajul de eroare odată ce userul rezolvă problema
Dacă un client rezolvă problema din cauza căreia i s-a afișat un mesaj de eroare, acesta trebuie să dispară de îndată ce userul a rezolvat-o. Dacă mesajul persistă utilizatorul poate:
- deveni confuz
- aștepta ca mesajul să dispară
- încerca să corecteze din nou deși nu e cazul
Verificarea în acest caz trebuie realizată după fiecare caracter introdus, și nu când userul părăsește câmpul. În multe cazuri, nici nu va mai părăsi câmpul, ci doar va aștepta ca mesajul să dispară.
Cum optimizezi formularul de comandă pentru dispozitivele mobile
1. Afișează descrierile câmpurilor din formular deasupra lor, pe dispozitivele mobile
Pe device-urile mobile, cel mai eficient mod de afișare a descrierii câmpului este deasupra lui. Natural, oamenii citesc de sus în jos, deci le va veni ușor să citească ceea ce li se cere și apoi să completeze.
Problema majoră cu afișarea descrierii în partea dreapta este spațiul mic. Textul va ocupa o parte mare din ecran, așadar formularul va fi mai scurt, iar în unele cazuri mai mic decât ar trebui. Pe mobil oricum e mult mai greu să tastezi și să dai click. Un formular și un font mai mic nu va fi de ajutor. Tot din rațiuni de spațiu, deseori se va încerca reducerea textului, iar asta poate duce la cerințe vagi și insuficiente pentru completarea formularului.
Majoritatea persoanelor își verifică informația în timp ce tasteză. Dacă formularul și implicit fontul sunt prea mici, acest proces va fi îngreunat, dacă nu imposibil. De asemenea, oamenii se așteaptă ca lungimea unui formular să corespundă cu lungimea informației solicitate.
Prin urmare, afișarea descrierii câmpului deasupra lui este singura opțiune care permite o experiență bună a utilizatorului.
2. Nu utiliza explicații în interiorul câmpurilor (placeholders)
Pentru a scurta formularele, unele magazine online aleg să afișeze explicațiile pentru completarea câmpurilor în interiorul acestora.
Aceasta este o practică nerecomandată deoarece poate crea probleme, chiar dacă din punct de vedere estetic poate fi mai plăcută.
De ce?
Principala problemă cu explicațiile din interiorul câmpurilor apare când utilizatorul începe să testeze și explicațiile dispar.
Baymard Institute
Mulți oameni uită ce ar fi trebuit să completeze sau cum să formateze textul. S-au observat mai multe situații în care utilizatorii au șters ceea ce au tastat, doar pentru a vedea din nou explicațiile. Problema este și mai gravă atunci când vizitatorii primesc mesaje de eroare. Atunci sunt confuzi, nu știu de ce le-au primit și le este mai dificil să-și dea seama cum să le corecteze.
Așadar, nu cădeți în capcana falsei simplități. Un formular cu explicațiile în interiorul câmpurilor poate părea mai curat și simplu, dar nu va fi mai ușor de completat pentru clienți.
O excepție de la această regulă sunt formularele foarte scurte (2-3 câmpuri), cu informații care se cer adesea (ex. email și parola).
3. Schimbă tastatura în funcție de inputul care trebuie introdus pe dispozitivele mobile cu display touch
O optimizare necostisitoare, dar care poate îmbunătăți experiența și viteza cu care un utilizator parcurge checkout-ul este modificarea tastaturii pe dispozitivele mobile. Aceasta se va schimba în funcție de textul care trebuie introdus în câmp.
Dacă textul așteptat este format din cifre, poți în mod automat schimba tastatura care i se afișează utilizatorului pe telefon sau tabletă. De exemplu, în cazul în care clientul apasă să introducă numărul de telefon, card sau codul poștal, atunci i se va afișa tastatura numerică.
Acest lucru se poate obține prin includerea unor atribute în codul html (ex: type sau inputmode).
Pentru ajutor în implementare și o listă completă cu ce se poate optimiza pentru dispozitivele touch consultă articolul: Touch Keyboard Types.
4. Evită testele captcha
Din rațiuni de securitate și evitare a spamului în formulare se folosesc adesea captcha. Acestea pot fi de mai multe tipuri, de la cele cu text distorsionat la cele cu bifă sau imagini.
Un studiu al Universitatii Standford a descoperit ca introducerea testelor de tip captcha duce la o scădere cu 30% a numărului de formulare completate. Așadar, evită-le pe cât posibil.
Această recomandare este valabilă și pentru desktop, dar pe device-urile mobile rezolvarea testelor captcha este și mai dificilă.
Concluzie
Ca regula generală, un potențial client aflat în checkout, trebuie să poată completa fiecare câmp ca pe o sarcină separată. Asta implică să aibă toată informația necesară în imediata vecinătate – începând de la cerința pentru completarea câmpului, la explicații și mesaje de validare.
Deoarece cu cât crește numărul datelor solicitate cu atât cresc șansele ca potențialul client să întâmpine erori și să abandoneze, e de preferat să le reduci cât de mult. Analizează-ți formularul de comandă, vezi ce informații nu sunt absolut necesare și elimină acele câmpuri. Identifică câmpurile ce pot fi precompletate și ascunde unele câmpuri opționale sub un link.
Un formular optimizat înseamnă un proces de checkout mai rapid, mai plăcut si cu șanse mai mari de a fi dus la capăt. Vestea și mai bună e că majoritatea optimizărilor pe formulare sunt ușor de realizat și necostisitoare.
Îți doresc spor la optimizat!
