Faci tot ce poți creați un site web care va conduce vizitatorii la conversie. Când studiezi analizele, ești încântat să vezi că călătoria utilizatorului pe care ai creat-o este susținută de vizitatori, din nou și din nou. Cu toate acestea, există ceva care îi împiedică să fie convertiți.

Le formular de contact este o parte esențială a călătoriei vizitatorilor dvs. Chiar dacă aveți de fapt aproape tot ce vă poate oferi un site web, a formular de contact ar putea strica experiența dacă nu este folosit corect. Butoane „rupte”, câmpuri confuze, prea mulți pași, o interfață dezorganizată... chiar și plasarea formular de contact ar putea perturba experiența utilizatorului.

Există multe lucruri care pot merge prost.

Norme 5 pentru construirea formularului de contact perfect

Un studiu Google de urmărire a ochilor publicat în 2014 a arătat că respectarea celor mai elementare linii directoare de utilizare pentru proiectare formulare va îmbunătăți semnificativ experiența utilizatorului. Mai exact, atunci când un formular de contact îndeplinește toate regulile, 78% dintre utilizatori le pot completa și trimite într-o singură încercare. Cu toate acestea, atunci când un formular de contact încalcă aceste reguli, doar 42% pot face acest lucru într-o singură încercare.

Curios care sunt aceste reguli? Deci, continuă să citești.

Regula # 1: Concentrați-vă asupra alinierii

După cum veți vedea în alte reguli de aici, oamenii sunt adesea îngrijorați de lungimea formulare de contact, ceea ce duce adesea la alegeri slabe de proiectare. Luați problema alinierii, de exemplu.

S-ar putea să vedeți un formular ca acesta pe site-ul web BrainTraffic și să vă gândiți: Hmmm ... dar nu este prea cam lung pentru a fi completat?

completați formularul.png

O modalitate de a vă gândi la rezolvarea acestei „probleme” este să mutați etichetele spre stânga și să plasați câmpurile de răspuns în dreapta. Cu toate acestea, experții UX vă vor spune că acesta este un nu-nu major, deoarece compromite capacitatea de a scana formularul. La fel și dacă te-ai gândit să plasezi câmpurile unul lângă celălalt orizontal.

Daca iti doresti formulare contactele îndeplinesc standardul de aliniere, iată ce trebuie să faceți:

  • Aliniați la stânga toate etichetele, câmpurile formularului și butonul principal de îndemn.
  • Nu aliniați niciodată câmpurile conexe orizontal. Puteți structura formularul în mod logic, dar fiecare întrebare sau câmp ar trebui să fie stivuite vertical.
  • Orice câmp cu întrebări cu opțiuni multiple (cu mai puțin de șase opțiuni) trebuie afișat într-o listă verticală de puncte sau casete de selectare, nu într-un meniu derulant.

Regula 2: includeți toate câmpurile relevante

Când vine vorba de proiectarea formularelor de contact, ați putea crede că cu cât este mai scurt, cu atât mai bine, nu? Nu este întotdeauna cazul. Ceea ce contează cel mai mult este să oferiți utilizatorilor toate câmpurile necesare și relevante.

Michael Aagaard, Optimizator pentru conversii pentru Unbounce, a făcut-o o prezentare în 2015 care a abordat această problemă. El și echipa sa au vrut să știe ce s-ar întâmpla dacă ar scurta acest formular de contact:

exemplu de formular de contact court.png

După cum puteți vedea, au eliminat ceea ce credeau că sunt câmpuri inutile pentru a eficientiza procesul de completare a formularului. Cu toate acestea, la încheierea testului, au constatat o scădere cu 14% a conversiilor cu forma mai scurtă.

Regula # 3: Simplificați câmpurile

Nu contează dacă utilizatorii dvs. interacționează cu formularul dvs. de contact folosind un desktop sau un dispozitiv mobil sau dacă au nevoie de tehnologie de asistență pentru a-i ajuta, formularul ar trebui să fie echipat. pentru a simplifica procesul de intrare.

Iată câteva tehnici pe care ar trebui să le știi:

intabulare
Pentru utilizatorii de desktop și cei cu probleme de accesibilitate, asigurați-vă că formularul dvs. de contact are activată comanda logică a filelor.

Măști de intrare
În loc să forțați utilizatorii să ghicească modul în care doriți să fie formatate anumite câmpuri, le puteți adăuga cu măști de intrare care le formată automat.

câmpuri de formatare html.png

Completarea automată Google
Mai degrabă decât codificarea fiecărui câmp astfel încât să fie formiat automat în conformitate cu standardele care trebuie respectate, activați completarea automată utilizând pluginul de completare automată a adreselor Google. Nu numai că acest lucru vă va scuti de a face față greșelilor de ortografie și adreselor completate incorect, dar vă va salva vizitatorii de a introduce majoritatea acestor informații.

Regula # 4: Ieșiți din toate

Deși îmi dau seama că această regulă va merge împotriva elementelor de bază ale minimalismului, este o regulă la care ar trebui să acordați o atenție deosebită pentru a evita frustrarea inutilă a vizitatorilor.

Permiteți-mi să vă explic: aveți un formular de contact care arată destul de simplu. Utilizatorii dvs. îl completează pe baza a ceea ce sugerează etichetele și fac clic pe butonul de trimitere. Apoi primesc acest oribil mesaj roșu: „Nu ai făcut-o bine! Întoarce-te, corectează formularul și trimite-l înapoi! " 

Probabil că l-ați întâlnit ca utilizator și știți cât de frustrant poate fi, mai ales dacă unele informații pe care le-ați introdus sunt șterse atunci când eroarea este aruncată. Deci, nu lăsați utilizatorii să ghicească ce trebuie remediat și cum, nu lăsați-l să ajungă la acest punct. Scrie totul pe drum:

  • Oferiți un accent în domeniu (în special pe mobil), astfel încât utilizatorii să știe exact unde completează un formular.
  • Notați toate cerințele de formatare dacă nu utilizați măști de intrare pentru formatarea automată a câmpurilor.
  • Indicați în mod explicit când un câmp este „Opțional” (folosiți cuvântul, nu asteriscul roșu).
  • Oferiți utilizatorilor opțiunea de a afișa sau a ascunde câmpul parolei pe măsură ce intră în acesta.
  • Afișați un mesaj de eroare de îndată ce utilizatorul s-a angajat într-un câmp. Nu așteptați până la sfârșit pentru a o face.

wordpress.png eroare de tip wordpress

Regula # 5: Nu ascundeți sfatul

Textul plăcii într-un formular de contact arată astfel:

câmp cu tips.png

Vedeți cum țintă plasează etichetele în câmp? În unele formulare de contact, aceste etichete / indicații dispar pur și simplu atunci când un utilizator face clic pe un câmp. Ținta tratează acest lucru puțin diferit și mută eticheta în partea de sus a casetei de câmp (consultați „adresa de e-mail”).

Indiferent de modul în care este gestionat acest lucru, experții de utilizare, cum ar fi grupul Nielsen Norman, vă va spune că aceasta este o practică proastă de proiectare deoarece:

  • Acest lucru este problematic pentru utilizatorii cu mai multe activități, distrase sau cu ritm prea rapid în câmpul următor. Când indiciul dispare, utilizatorii trebuie să părăsească câmpul pentru a redescoperi ceea ce au nevoie.
  • Sfaturile care dispar, de asemenea, împiedică utilizatorii să revină la un formular pentru a-și verifica activitatea sau pentru a corecta o eroare fără a șterge complet răspunsul pentru a vedea ce este mai jos.
  • Textul gri deschis pentru sfaturi de substituent nu este ideal pentru citirea ușoară.
  • Câmpurile cu text de sugestie pot fi confundate cu câmpurile care au completat deja date, lăsând utilizatorii să le ignore, să trimită formularul și să primească un mesaj de eroare.
  • Unele instrumente de citire a ecranului nu pot citi text cu indicii.

Potrivit NNG, utilizatorii găsesc câmpurile goale mai atractive decât cele care conțin text indicativ. Chiar dacă formularele dvs. par mai lungi pentru a plasa aceste etichete sau descriptori deasupra câmpului, va îmbunătăți gradul de utilizare.

Gata pentru aceste sfaturi Sper că vă vor ajuta să creați formulare de contact mai bune.