Principii de proiectare a formularelor: 13 bune practici susținute empiric

Dacă nu urmați cele mai bune practici de proiectare a formularelor, lăsați mulți bani pe masă.

Deși formularele nu reprezintă cea mai sexy parte a optimizării conversiilor, ele tind să fie cea mai apropiată de bani - macro-conversiile. Petrecerea puțin timp pentru optimizarea formularelor poate fi una dintre cele mai importante lucrări de optimizare pe care le puteți face.

Desigur, cele mai bune practici nu funcționează la fel pe toate site-urile. Este contextual. Dar, în general, implementarea tacticilor de proiectare a formularelor care funcționează mai des decât nu este o modalitate bună de a începe.

Din fericire, nu lipsesc date, studii de caz, cercetări și exemple despre cele mai bune practici de proiectare a formularelor. Vine din toate colțurile: studii de caz de afaceri, postări pe blog, exemple de teste A/B, cercetare privind utilizarea, studii de urmărire a ochilor și multe altele.

Această postare prezintă unele dintre cele mai comune bune practici de proiectare a formularelor. Dacă abia începi cu optimizarea, folosește-le ca bază.

Dacă lucrați la formularele dvs., aceste reguli ar trebui să vă ajute să obțineți câteva câștiguri rapide.

13 Principii de proiectare a formularelor și cele mai bune practici

1. Mai puțin este mai mult (adică eliminați câmpurile de formular).

Fiecare câmp pe care le cereți utilizatorilor să îl completeze crește frecarea. Cel mai bun lucru pe care îl puteți face pentru a îmbunătăți completările formularelor este să scăpați de cât mai multe câmpuri.

Într-un studiu de caz, un formular de contact cu 11 câmpuri a fost înlocuit cu o versiune cu 4 câmpuri, iar completările formularelor au crescut cu 160%. (Calitatea trimiterilor a rămas aceeași.)

Într-un alt test, o formă cu 5 câmpuri a depășit o formă cu 9 câmpuri cu 34%. Nici în aceasta nu a existat nicio scădere a datelor sau a calității clienților potențiali.

Majoritatea formularelor sunt prea lungi. Este „sindromul comerciantului lacom” – credem că avem nevoie de toate datele.

Institutul Baymard a constatat că valoarea medie a plății conține 14,88 câmpuri de formular. Dar testarea lor de utilizare a plății a arătat, de asemenea, că majoritatea site-urilor pot obține o reducere cu 20-60% a numărului de câmpuri de formular afișate implicit.

În esență, plata medie afișează de două ori mai multe câmpuri de formular decât este necesar.

Prin urmare, reducerea câmpului de formular este punctul zero pentru optimizarea conversiilor la partea de jos a pâlniei. Aici poți obține unele dintre cele mai rapide câștiguri ale tale. Efortul și resursele necesare sunt foarte scăzute, iar câștigurile potențiale sunt extraordinare, mai ales la scară:

• Câte forme ai?
• Câți oameni le experimentează?
• Ce ar însemna pentru tine o creștere de 10% la fiecare formular?

Acum, cu siguranță există preocupări legate de date, mai ales dacă sunteți o companie B2B care generează clienți potențiali și transmite clienții potențiali unei echipe de vânzări. Vrei să te asiguri că sunt clienți potențiali calificați; în caz contrar, mai multe clienți potențiali devin o externalitate, implicând un cost în productivitatea irosită.

Puteți analiza clienții potențiali cu, de exemplu, un sistem pe niveluri de bugete alocate. Practic, cât este dispus să plătească lead-ul? Setați bara cea mai de jos la cel mai mic nivel pe care credeți că ar merita un avans valoros și veți elimina o mulțime de kickers de anvelope.

Un exemplu de pe pagina agenției noastre:

Când optimizați câmpurile de formular, întrebați despre date: chiar aveți nevoie de ele? Chiar aveți nevoie de telefonul, faxul sau adresa oamenilor? Aveți nevoie de un nume de companie dacă vindeți lumânări? Întrebați doar ceea ce este relevant. Expedia a eliminat câmpul „Companie” din formularul de rezervare și a înregistrat o creștere de 12 milioane USD pe an a profitului.

De asemenea, știți că, în special pentru B2B, există companii de îmbogățire a datelor precum Clearbit. Dacă colectați un e-mail și poate un prenume, acestea pot îmbogăți în general restul datelor (numele companiei, dimensiunea, identificatorul Twitter etc.).

Gândiți-vă la asta astfel: fiecare câmp suplimentar vă face să pierdeți o serie de perspective. Merită să pierzi acei oameni informațiile suplimentare pe care le câștigi din domeniu? Pierzi ceva dacă nu primești toate datele imediat?

Cel mai bun formular de înscriere este scurt:

Ca întotdeauna, există excepții. Reducerea câmpurilor de formular nu crește întotdeauna conversiile. În plus, cu cât colectați mai multe informații despre un utilizator, cu atât puteți utiliza marketing și direcționare mai eficiente (de obicei).

În general, totuși, este sigur să urmați această euristică: Eliminați câmpurile de formular inutile sau superflue.

2. O singură coloană bate formele cu mai multe coloane.

Acest lucru a fost bine cercetat în studii de urmărire a ochilor (inclusiv al nostru), studii de caz și teste A/B. Când decideți între un design de formular cu o singură coloană sau cu mai multe coloane, implicit la o singură coloană.

În studiul CXL, participanții la sondaj au completat formularul liniar cu o singură coloană (n = 356) în medie cu 15,4 secunde mai rapid decât formularul cu mai multe coloane (n = 346). Acest lucru a fost semnificativ mai rapid la un nivel de încredere de 95%.

Acest ghid nu este nou. De fapt, există de ani de zile, dar până la studiul nostru nu existau prea multe dovezi cantitative pentru asta. Cu toate acestea, cei aflați în optimizarea conversiilor vor fi văzut, fără îndoială, zeci de teste de utilizator convingătoare, precum și teste A/B, care arată că coloanele individuale sunt mai utilizabile.

Sunt sigur că există excepții de la această regulă (ca și oricare), dar nu am găsit niciun suport empiric.

3. Comunicați clar erorile.

Utilizatorii vor face greșeli. Este inevitabil. Chiar dacă utilizați toate cele mai bune practici de proiectare a formularelor, utilizatorii vor suna în continuare mesaje de eroare. Modul în care gestionați mesajele de eroare contează.

Proiectarea mesajelor de eroare se referă la limitarea frustrării resimțite de utilizatori cu formularul dvs. Când utilizatorii se simt frustrați, devin stresați. Cortizolul începe să se acumuleze. Dacă atinge un anumit prag, utilizatorii renunță și merg pe site-ul concurentului tău.

Așadar, da, faceți singuri cercetări de utilizare, dar începeți cu aceste bune practici pentru mesaje de eroare:

• Nu da vina pe utilizator.
• Scrie ca un om, nu ca un robot.
• Asigurați-vă că erorile sunt clare și că mesajele sunt poziționate într-o locație intuitivă.
• Asigurați-vă că utilizatorii știu cum să remedieze erorile menționate.
• Nu enumerați toate erorile în partea de sus a paginii. Validarea inline este o soluție bună.

4. Utilizați validarea formularului în câmp.

De asemenea, legat de mesajele de eroare este modul în care comunicați unui utilizator dacă trimiterea acestuia este în regulă. Validarea formularelor este un întreg subiect în sine, dar putem acoperi câteva aspecte aici.

Validarea inline este o modalitate frumoasă de a găsi, alerta și corecta erorile în timp real. În loc să aștepte până când utilizatorii apasă „Trimite”, ei învață imediat ce a mers prost.

Iată un exemplu grozav de validare inline:

Există o mulțime de suport empiric pentru validarea inline. În 2009, Luke Wroblewski a testat validarea inline față de un control (validare după trimitere) și, chiar dacă eșantionul era mic, a găsit următoarele rezultate cu versiunea inline:

• Creștere cu 22% a ratelor de succes;
• Scăderea cu 22% a erorilor comise;
• Creștere cu 31% a gradului de satisfacție;
• Scăderea cu 42% a timpilor de finalizare;
• Scăderea cu 47% a numărului de fixări ale ochilor.

Voi lua acele rezultate. (Am văzut rezultate similare din testele A/B rulate pe multe site-uri de comerț electronic.)

Totul este despre așteptări clare și comunicare. Un utilizator nu ar trebui să ghicească ce va funcționa și ce nu. Cu cât puteți înțelege mai ușor așteptările, cu atât oamenii vor face mai puține erori și cu atât veți obține mai multe completări de formulare.

5. Comandă câmpurile de la cel mai ușor la cel mai greu de completat.

Principiul lui Robert Cialdini de „angajament și consecvență” afirmă că atunci când cineva face o mică acțiune sau un pas spre ceva, se simte obligat să termine. Din acest motiv, este cea mai bună practică de proiectare a formularelor să puneți pe primul loc cele mai simple lucruri.

Așteptați până mai târziu pentru a introduce fricțiuni (de exemplu, informații de facturare sau ceva prea personal). Permiteți utilizatorilor să completeze informațiile de expediere înainte de facturare. (Adesea sunt aceleași, așa că nu va fi nevoie să le tasteze din nou.)

Nu face asta:

6. Ușurează tastarea.

Principiul general pentru cele mai bune practici de proiectare a formularelor continuă să apară: Ușurați lucrurile pentru utilizator (în special pentru formularele mobile).

Limitați cantitatea de tastare pe care utilizatorii trebuie să le facă pentru a completa un formular. O modalitate este de a automatiza cât mai mult posibil cu funcții precum completarea automată.

Atunci când decideți asupra completărilor automate, iată câteva întrebări bune la care să reflectați:

• Aveți valori implicite bune pentru acest câmp?
• Care este istoricul disponibil?
• Aveți vreo valoare folosită în mod obișnuit?
• Puteți utiliza browserul de funcții sau setări mobile pentru a completa câmpul?
• Poți calcula câmpul? (de exemplu, completați automat starea pe baza codului poștal)

Formatarea automată este, de asemenea, incredibil de importantă (și frustrant de subutilizată). Permiteți utilizatorilor să introducă date (în special câmpuri precum codul poștal, numărul de telefon și cardul de credit) în orice mod doresc. Este nevoie de câteva linii de cod pentru a remedia formatarea după ce o introduc. Nu lăsa lenea să strice experiența utilizatorului.

Deci nu face asta:

7. Indicați dacă fiecare câmp este obligatoriu sau opțional (cu excepția cazului în care sunt toate obligatorii).

În primul rând, întrebați dacă trebuie să includeți acele câmpuri opționale. De cele mai multe ori, sunt inutile. De exemplu, cine are nevoie de titlul meu sau al doilea nume? De ce să transformi un câmp în patru?

Concentrați-vă pe informațiile de care aveți nevoie de la utilizatori, astfel încât aceștia să poată începe. Nu doriți ca un utilizator să stea acasă și să se gândească: „De ce au nevoie de asta?!”

Indicați dacă fiecare câmp este obligatoriu sau opțional, cu excepția cazului în care este obligatoriu.

8. Câmpurile pentru nume și număr de telefon ar trebui să fie un singur câmp.

În loc de un câmp de nume și de familie, trebuie doar să aveți un câmp care spune „nume complet”. În loc de trei câmpuri pentru un număr de telefon, utilizați unul.

Problema cu mai multe câmpuri este problemele de interacțiune. În general, cea mai bună practică de proiectare a formularelor este „cu cât sunt mai puține câmpuri, cu atât mai bine”.

Imaginați-vă că folosiți dispozitivul mobil și trebuie să atingeți cinci câmpuri pentru nume și număr (două pentru nume, trei pentru număr) în loc de doar două? Frecare inutilă.

9. Oferiți butoane radio în loc de casete drop-down.

UX Movement a susținut că formularele cu meniuri selectate sunt adesea abandonate pentru că „necesează mai mult timp și efort pentru a fi completate”.

Mai precis, ei au susținut că au încetinit utilizatorii prin întreruperea fluxului de utilizatori, fiind greu de citit și necesitând manevrarea îndelungată a mouse-ului. Nu au furnizat date justificative.

Ei bine, este ușor de testat. Așa am făcut. Tocmai lansam un sondaj amplu despre percepția încrederii online, așa că am avut ocazia să manipulăm un formular de sondaj și să punem diferite persoane aceleași întrebări în formate diferite (multi-select vs. butoane radio).

Rezultatele? Formularul cu butonul radio a fost mai rapid de completat. Participanții la sondaj au completat formularul cu butoane radio (n = 354) în medie cu 2,5 secunde mai repede decât formularul cu butoane cu selecție multiplă (n = 354). Acest lucru a fost semnificativ mai rapid la un nivel de 95%.

10. Nu puneți în evidență câmpurile de cod de cupon.

Când oamenii văd un câmp „Introduceți codul de cupon aici”, se simt mai puțin speciali. Ei se gândesc: „De ce nu am unul?” Ei primesc FOMO.

Mulți merg pe Google pentru a căuta un cupon. Unii găsesc cupoane pe site-uri terțe, ceea ce reduce profitul tău. Mulți nu se întorc niciodată.

Părăsirea site-ului pentru a căuta cupoane este un motiv comun pentru abandonarea coșului de cumpărături.

Deci aceasta nu este o idee bună:

În loc de un banner mare, aveți un link text care spune „Aveți un cupon?” (sau ceva asemanator). Dacă utilizatorul face clic pe link, acesta ar trebui să deschidă un câmp de introducere. Legăturile text nu sunt vizibile vizibile, așa că mai puțini oameni vor acorda atenție.

Clienții care au deja un cod de cupon vor căuta o modalitate de a-l introduce, așa că, dacă nu l-ai ascuns (prea) bine, vor putea în continuare să-și aplice cuponul. Iar dacă un client a primit un cupon (prin e-mail), aplică-l automat și afișează reducerea.

11. Evitați butonul „Ștergeți câmpurile”.

Nimeni care vă completează formularul nu dorește să șterge câmpurile. Dacă nu vor să o completeze, pot să plece.

Dacă completează formularul și șterg accidental câmpurile, există șanse mari să nu o ia de la capăt.

Cele mai bune practici de proiectare a formularelor specifice pentru dispozitive mobile

Deși cele mai multe dintre cele de mai sus pot fi aplicate și pe dispozitive mobile, există câteva probleme specifice de reținut cu ecranele mai mici. Utilizatorii de dispozitive mobile au mai puțină răbdare, iar utilizarea unui smartphone este mai dificilă decât a unui desktop.

Avem o postare întreagă pe acest subiect, așa că aruncați-vă adânc acolo. Dar dacă doriți câteva puncte de plecare, urmați aceste instrucțiuni.

12. Oferiți focalizare pe teren.

Dacă aveți un formular cu mai multe câmpuri, nu doriți ca utilizatorii să se piardă în formular. Acest lucru este deosebit de important pe dispozitivele mobile: ecranul mai mic permite un control vizual mai mic asupra formularului.

Faceți câmpul de intrare editat vizibil și focalizat.

13. Nu masca parolele.

Deși poate părea o problemă de securitate să afișați parola pe măsură ce utilizatorul o tastează, este mult mai bine pentru experiența utilizatorului.

După cum a rezumat NN/g:

Utilizabilitatea are de suferit atunci când utilizatorii introduc parole și singurul feedback pe care îl primesc este un rând de gloanțe. De obicei, mascarea parolelor nici măcar nu crește securitatea, dar vă costă afaceri din cauza erorilor de conectare.

Avertisment: desfășurați propriile experimente.

Doar pentru că ceva este o „cea mai bună practică” nu înseamnă că este întotdeauna soluția optimă. Uneori, cele mai bune practici eșuează.

Site-urile web sunt contextuale. Ceea ce funcționează pe un site poate să nu funcționeze pe altul.

În plus, contextul dvs. de afaceri poate fi diferit. Cine știe, poate chiar ai nevoie de acel al doilea nume ca o bucată de date. Cine sunt eu să judec?

Așa că ia totul cu un grăunte de sare. Să știți că totul a fost testat și studiat, dar, la sfârșitul zilei, tot ce contează este modul în care funcționează pe site-ul dvs. și în contextul dvs. de afaceri.

Acestea sunt linii directoare, nu mandate.

Concluzie

Principiile bune de proiectare a formei pot funcționa mai des decât nu, dar nu sunt universale. Nu există soluții de tip glonț de argint: trebuie să testați aceste lucruri pentru dvs.

Dar dacă porniți de la zero, aceste bune practici de proiectare a formularelor reprezintă o bază bună - un loc de început, dar nu unde veți ajunge.

Lucrezi la ceva legat de asta? Postează un comentariu în comunitatea CXL !