UX în formularele de contact: elemente esențiale pentru a transforma clienții potențiali în conversii

Îți place să completezi formulare? Am crezut că nu. Nu este ceea ce ne dorim de la un serviciu. Tot ce își dorește utilizatorul este să cumpere un bilet, să rezerve o cameră de hotel, să facă o achiziție și așa mai departe. Completarea unui formular este un rău necesar cu care trebuie să se confrunte. Te descrie asta? Deci, ce afectează de fapt atitudinea unei persoane față de trimiterea unui formular?

• Poate consuma mult timp.
• Formele complicate sunt adesea greu de înțeles (sau pur și simplu nu ai chef să le completezi).
• Formularul poate solicita informații personale pe care nu doriți să le partajați: detaliile cardului de credit, numărul de telefon mobil, adresa de domiciliu etc.

Câmpurile de formular sunt de fapt cel mai important instrument pentru interacțiunea utilizator-serviciu, indiferent pentru ce este formularul - indiferent dacă este un abonament la buletin informativ sau un formular pas cu pas pentru colectarea datelor.

În acest articol, vom arunca o privire la cele mai frecvente întrebări ale stagiarilor în design din compania noastră. Mai jos sunt întrebări frecvente și răspunsuri despre cum să faci formularele site-ului ușor de utilizat, precum și sfaturi pentru a preveni interacțiunea redusă a utilizatorului.

Este OK să plasați un formular în două coloane?

Studiile de urmărire a ochilor au arătat că formele cu o singură coloană sunt mai bune decât cele cu mai multe coloane. De ce asa? Modul în care derulăm în jos pe un site web este similar cu modul în care completăm un formular: mergând de sus în jos, rămânând concentrați pe conținut. Un formular cu coloane paralele poate conduce cu ușurință utilizatorii în rătăcire și le poate distrage atenția. Pentru a menține utilizatorii în flux și pentru a nu întrerupe orientarea verticală, plasați câmpurile unul sub celălalt într-o singură coloană. Sigur, fiecare regulă are excepțiile ei. În ceea ce privește cel de mai jos, câmpurile scurte sau logic contigue (număr de mobil, oraș, stat și prefix) pot fi plasate într-o linie.

Dacă formularul are o structură destul de complicată (cum ar fi etapa de checkout într-un magazin online sau etapa de înregistrare într-o platformă de împrumut de bani), acesta poate fi împărțit vizual în grupuri semantice, cu spațiu suplimentar sau rubrici între ele. Acest lucru va oferi utilizatorilor senzația de a face progrese prin formular fără a se simți copleșiți.

Unde ar trebui plasate etichetele?

Etichetele le spun utilizatorilor ce informații aparțin unui anumit câmp de formular și, de obicei, sunt poziționate în afara câmpului de formular. Destul de recent, au existat doar două variante de plasare a etichetelor: deasupra câmpurilor și stânga justificată. Cu ceva timp în urmă, a apărut o alternativă: designerii au început să anime forme și să ascundă etichetele în substituenți. Au existat multe dispute cu privire la care este cea mai bună modalitate de a afișa etichetele, dar încă nu există un răspuns definitiv. Un lucru este clar: plasarea etichetei depinde de situație. Să aruncăm o privire bine la fiecare opțiune.

Plasarea etichetelor deasupra câmpurilor

Aceasta este cea mai comună plasare a etichetei și, după cum a fost validată de cercetarea UX de la Google, din motive întemeiate. Se adaptează mai bine la dimensiunile smartphone-urilor, ceea ce este esențial pentru marcarea receptivă.

Justificarea etichetelor stânga

Aceasta ar putea fi cea mai bună alegere dacă trebuie să afișați câmpuri mai mari de introducere a datelor. Etichetele justificate la stânga primesc mai multă atenție și nu se vor integra cu alte câmpuri. Mai mult, formularul de contact va ocupa mai puțin spațiu pe verticală. Dar rețineți că o astfel de abordare funcționează bine doar pentru vizualizările desktop; pentru mobil, dimensiunea este o problemă (ecranul este prea îngust atât pentru o etichetă plasată în stânga, cât și pentru un câmp). Acest lucru ar putea cauza probleme utilizatorilor, care ar putea să nu poată vedea datele de intrare în întregime sau să identifice erorile de tastare înainte de a trimite formularul. Pentru a preveni trimiterea de formulare eronate, va trebui să creați prototipuri suplimentare pentru a face site-ul prietenos cu smartphone-ul.

Plasarea etichetelor în interiorul câmpurilor (etichete aliniate în partea de sus în câmp)

Etichetele interactive plasate în câmp devin din ce în ce mai populare în rândul designerilor UX pentru capacitatea lor de scanare înainte de completare. Animația poate fi diferită, dar procesul este același: după ce faceți clic pe câmpul cu substituentul etichetei, eticheta nu dispare. , dar se deplasează în partea de sus a câmpului, făcând loc utilizatorului să introducă datele.

Avantajele acestei abordări sunt evidente: economisește spațiu, iar animația este pe înțelesul utilizatorului. Dar animația în forme nu este întotdeauna cea mai bună soluție. Depinde de contextul formei. Dacă lucrați la un formular cu foarte puține câmpuri (o casetă de conectare sau newsletter), atunci etichetele aliniate în partea de sus nu sunt atât de necesare, deoarece nu există prea multe informații pe care utilizatorul trebuie să-și amintească. Funcționează mai bine pe forme complexe cu mai multe secțiuni. În ciuda avantajelor acestei metode, gândiți-vă și la cum vor arăta selecțiile drop-down și se vor potrivi cu animația.

Cu toate acestea, substituenții etichetelor interactive câștigă cu o milă față de cele statice. Când se face clic pe câmp, eticheta se mișcă în sus, rămânând vizibilă, în timp ce cea statică pur și simplu dispare.

Putem folosi text substituent în loc de etichetă?

Există multe moduri de a oferi indicii; una dintre ele este o implementare comună a instrucțiunilor în câmpurile de formular. Din păcate, testarea utilizatorilor arată în mod continuu că substituenții din câmpurile de formular afectează adesea utilizarea mai mult decât ajută. Ele pot complica procesul de completare a unui formular într-un mod serios, mai ales dacă formularul constă din mai mult de o duzină de câmpuri. Textul substituent care dispare încordează memoria pe termen scurt a utilizatorilor. Îi face dificil pentru oameni să-și amintească ce informații aparțin unui câmp și să verifice și să remedieze erorile. De asemenea, pune o povară suplimentară pentru utilizatorii cu deficiențe vizuale și cognitive.

După cum am văzut, dificultatea constă în a nu văzu textul substituent atunci când utilizatorul face clic pe câmp pentru a-l completa. Fără etichete, utilizatorul nu își poate verifica munca înainte de a trimite formularul. Ar putea uita cu ușurință ce date trebuie să completeze în câmpul curent și dacă cele anterioare nu conțin erori - există întotdeauna un risc mare de informații false. Utilizatorul ar trebui să dezvăluie textul substituent ștergând textul din fiecare câmp unul câte unul, pentru a verifica dacă introducerea lor satisface descrierea. De fapt, mulți nici măcar nu își vor da seama de potențialul de eroare și nu vor face efortul de a verifica.

De asemenea, o astfel de abordare nu ar fi confortabilă pentru utilizatorii care se deplasează între câmpuri apăsând tasta Tab, deoarece nu se vor obișnui să analizeze datele din câmpul următor înainte de a trece la acesta. Textul substituent care dispare când cursorul este plasat în câmpul formular irită utilizatorii care navighează cu tastatura.

În ciuda dezavantajelor, există cazuri în care utilizarea unei etichete ca substituent este destul de adecvată. De exemplu, pentru un abonament la buletin informativ, am putea completa doar un câmp, „E-mail”.

Cum se reduce sarcina cognitivă a unei forme?

Spațierea ceasurilor

O etichetă și câmpul ei trebuie grupate vizual, pentru a nu deruta utilizatorii și pentru ca aceștia să înțeleagă ce etichetă aparține cărei câmpuri. De asemenea, evitați căptușeala liberă, unde etichetele sunt plasate la distanță egală între două câmpuri.

Focalizare automată primul câmp de intrare

Focalizarea automată ghidează utilizatorii către punctul de pornire al formularului. Vă recomandăm să subliniați primul câmp cu o culoare accentuată a marginii, culoarea de fundal sau ambele. Apelând utilizatorul pentru a-l completa, veți accelera înregistrarea sau achiziția.

Nu folosiți niciodată capace

Etichete scrise cu majuscule, în special în formulare care includ trei până la patru câmpuri. Literele cu majuscule sunt greu de citit. De asemenea, dau aspectul de strigăt.

Butoanele sunt considerate parte din UX-ul unui formular?

Un buton este menit să direcționeze utilizatorii să întreprindă o acțiune. De aceea, designul butoanelor ar trebui să fie întotdeauna despre recunoaștere și claritate. Gândiți-vă la site-ul sau la aplicația dvs. ca parte a unei conversații începute de un utilizator ocupat. Butonul joacă un rol crucial în această conversație.

Butonul ar trebui să explice acțiunea care trebuie întreprinsă

O casetă de dialog bună nu înseamnă doar să întrebați utilizatorii ce acțiune doresc să efectueze. Este, de asemenea, despre a face fiecare opțiune cât mai clară posibil. De aceea este atât de important să existe o etichetă distinctă pentru fiecare opțiune, care servește drept ajutor „just la timp”, oferind utilizatorilor mai multă încredere în alegerea acțiunii corecte.

Denumiți butonul pentru a explica ce face, în loc să utilizați o etichetă generică (cum ar fi „OK”). BettingExpert a primit cu 31,54% mai multe înscrieri prin schimbarea unui verb simplu într-o expresie de îndemn. Folosiți un verb ori de câte ori este posibil, în loc de „Da” sau „OK”, deoarece butoanele dvs. vor avea sens în afara contextului cu textul explicativ sau titlul. Rețineți că CTA ar trebui să reflecte intenția utilizatorului. De exemplu, dacă este o înregistrare, atunci, evident, apelați butonul „Înregistrare”.

Separați acțiunile primare de cele secundare

Acțiunea principală asociată cu o formă trebuie să aibă o greutate vizuală mai puternică. Acțiunile secundare ar trebui să aibă cea mai slabă pondere vizuală, pentru a minimiza riscul de eroare și a direcționa oamenii către un rezultat de succes. Butoanele de acțiune de bază ar trebui să fie puternic marcate, în timp ce este suficient să apelați butoanele de acțiune secundară.

Utilizați corect butoanele primare și secundare. Dacă aveți două butoane, unul primar și unul secundar, diferențiați-le vizual pentru a reduce erorile. Având în vedere că este mai important, butonul principal ar trebui să arate mai vizibil.

Subliniază butoanele

Nu activați butonul până când nu sunt completate toate câmpurile formularului. Aceasta poate fi o soluție excelentă pentru a ajuta utilizatorul să își verifice vizual datele înainte de a trimite.

Este posibil să ușurați procesul de completare a unui formular?

Adăugați completare automată

Automatizarea introducerii utilizatorului previne greșelile prin reducerea câmpurilor pe care trebuie să le completeze. De asemenea, conform cercetărilor Google, completarea automată îi ajută pe oameni să completeze formularele cu 30% mai rapid. Dacă utilizatorul este deja înregistrat la serviciul dvs., completați automat datele din contul său în câmpurile relevante în etapa de finalizare. De asemenea, luați în considerare că puteți completa automat câmpurile de text pentru oraș și regiune pe baza codului de zonă sau a datelor de localizare geografică. Nu uitați să lăsați aceste câmpuri disponibile pentru editare pentru a le oferi utilizatorilor control.

Nu uitați de intrarea mascata

Acesta este un plugin care formatează automat un câmp. O astfel de soluție se potrivește bine cu datele, orele, numerele de telefon mobil și multe altele. Acest plugin ușurează mult completarea unui formular. Utilizatorii nu vor pune mai multe întrebări pentru că totul le este clar.

Fii inventiv

Utilizați lungimea câmpului ca indiciu pentru răspuns. Acest lucru are sens pentru câmpurile care au un număr limitat de caractere, cum ar fi câmpul pentru numărul de telefon mobil, adresa de domiciliu și prefixul.

Evitați selecțiile drop-down cu doar două sau trei opțiuni

În loc de meniuri derulante, utilizați butoanele radio pentru a transmite mesajul rapid și pentru a nu încetini utilizatorul. Totul trebuie să fie clar, fără clicuri suplimentare.

Validați formularele

Validarea formularului este crucială. Distingeți acele câmpuri în care sunt găsite erori și explicați de ce câmpul nu a fost validat.

De asemenea, explicați toate cerințele pentru date și formatul acestora. Dacă parola unui utilizator trebuie să includă șase simboluri, menționați acest lucru. Nu faceți utilizatorii să ghicească. Faceți procesul la îndemână și ușor de înțeles.

Adăugați facilități pentru a preveni greșelile obișnuite în câmpul parolelor

Aceasta ar putea fi o previzualizare a parolei sau o altă oportunitate pentru utilizatori de a-și verifica datele înainte de a trimite. De asemenea, dacă serviciul dumneavoastră are anumite cerințe speciale pentru parole, informați utilizatorii despre acestea înainte de a completa câmpul.

Apropo, atunci când completează câmpul pentru parolă, de multe ori, utilizatorul se va confrunta cu o problemă cunoscută - de exemplu, blocarea majusculelor este activată - și a uitat de ea. Vă recomandăm să informați utilizatorii despre un buton de blocare a majusculelor apăsat pentru a preveni formularele abandonate, precum și asocierea negativă cu site-ul web.

Permiteți utilizatorilor să autorizeze prin intermediul rețelelor sociale

Conectarea socială ar putea fi un instrument cu adevărat puternic; economisește mult timp utilizatorilor. Dacă oferiți înregistrare rapidă folosind rețelele sociale, nu uitați să asigurați oamenii de securitatea datelor lor din rețelele sociale și să explicați exact de ce informații aveți nevoie. De asemenea, informați utilizatorii că nu le veți folosi datele fără permisiune. Doar pentru a le consolida sentimentul de securitate, puteți adăuga o pictogramă de lacăt. Rămâneți de partea utilizatorului și aveți grijă de securitatea acestora.

Locația utilizatorului influențează UX-ul unui formular?

Da, amintiți-vă diferențele locale. Dacă un serviciu este conceput pentru două sau mai multe piețe locale (cum ar fi SUA, Europa și Asia), fiți atenți la varietatea de diferențe dintre acestea. Nu este surprinzător faptul că numele câmpurilor, indicii, intrări și altele vor varia în funcție de regiune.

Iată câteva lucruri la care să acordați atenție:

• Fiecare țară are propriul format de număr, motiv pentru care măștile de introducere ar trebui să varieze și ele.
• SUA spune cod poștal, în timp ce în Europa, este cod poștal.
• Câmpul „state” este necesar doar în SUA.

Concluzie

După cum putem vedea, proiectarea unui formular de înscriere bun este dificilă. Designul UX contează. Pentru a îmbunătăți UX, designerul trebuie să se pună în locul utilizatorului. Nu riscați ca utilizatorii să fie dezamăgiți sau să piardă timp prețios încercând să descopere cum funcționează formularul dvs. Asigurați-vă formularul clar de la început, cu etichete vizibile plasate în afara câmpurilor de formular goale. Formularele reprezintă o parte importantă a multor obiective de conversie, așa că asigurați-vă că utilizatorii le pot trece rapid și precis.