4 sfaturi de design UX Sfaturi ar trebui să știți (cu exemple)

Tindem să gândim formulele ca fiind pur și simplu un mijloc de colectare a datelor utilizatorilor, dar uneori sunt și un fel singura cale, pentru utilizatorii noștri conecteaza-te cu noi. Probabil e deloc să crezi că putem face utilizatori dragoste completarea formularelor, cu toate acestea este cu siguranță posibil pentru a găsi soluții care să nu-i deranjeze prea mult, și să le ajute de-a lungul procesului.

În timp ce navigăm pe net, putem găsi soluții uneori surprinzătoare care sunt corecte din punct de vedere programatic, dar sunt proiectate într-un mod care este cel mai probabil face ca mulți utilizatori să abandoneze site-ul din cauza experienței slabe a utilizatorului.

Dacă formularele noastre sunt bine concepute, vom putea nu numai să vă rugăm pe utilizatorii noștri, dar și pe echipa de backend care se poate ocupa mult mai puține erori de intrare ale utilizatorului. Astfel, în acest articol, vom avea o privire la modul în care putem să minimalizați erorile de intrare ale utilizatorilor și totuși ține utilizatorii noștri fericiți.

Anticipați nevoile utilizatorilor

Site-urile și aplicațiile au diferite baze de utilizatori și obiective, și chiar aceeași locație poate găzdui multe forme care colectează diferite tipuri de date, doar pentru a numi cele mai frecvente:

• Formulare de conectare
• Formulare de înregistrare
• Formulare de profil pentru utilizatori
• Formularele de înscriere pentru buletine de informare
• Formulare de checkout
• Studii privind utilizatorii
• Formulare de contact
• Formularele de comentarii
• Căutați formulare

Toate aceste tipuri de forme necesită lucruri diferite. Când proiectați un formular de checkout, este esențial să vă asigurați în mod credibil siguranța utilizatorilor, în timp ce în cazul formularelor de comentarii este o idee bună să adăugați emojis sau alte metode care permit utilizatorilor să-și exprime starea lor de spirit.

Cu toate acestea, ar trebui să fie proiectate diferite tipuri de forme similare, așa cum au toate site-urile baza unică de utilizatori. Înainte de a începe procesul de proiectare, este întotdeauna o idee bună anticipați ce au nevoie utilizatorii noștri, și proiectarea în consecință.

Exemplu: Conectări sociale direcționate către nevoile utilizatorilor

Formularul de conectare al lui Codepen conține trei intrări sociale cu Github în partea de sus. Această alegere ar fi nerezonabilă pentru majoritatea site-urilor.

Dar este perfect pentru Codepen, deoarece baza de utilizatori este formată din dezvoltatori, mulți dintre aceștia vor dori să se conecteze cu conturile Github sau să conecteze simultan conturile de dezvoltare între ele.

Gândiți-vă mai întâi la mobil

Utilizatorii de dispozitive mobile și desktop au nevoi diferite, dar ca completarea formularelor este o provocare mult mai mare pe un ecran mobil, folosind gesturi de mână decât pe o tastatură fizică, a mobil-prima abordare ne poate continua atunci când vrem să proiectăm forme utile.

Mai mult, multe modele UI care funcționează bine pe mobil vor funcționa bine și pe desktop.

Exemplu: Comenzi rapide

Formele mobile de înaltă calitate nu pot fi imaginate fără controale vizibile pe care utilizatorii de telefonie mobilă pot atinge ușor cu degetele.

Formularul de înregistrare a buletinelor de știri a conferinței de design web Un Eveniment Apart se adaptează la modul în care utilizatorii de telefonie mobilă accesează ecranul - conține două câmpuri de introducere ușor de apăsat și a degetul mare.

Câmpurile de introducere a textului sunt mai mari ca de obicei, astfel încât utilizatorii mobili pot atinge cu ușurință pe ei, iar butonul mare, portocaliu cu pictograma de bifare încurajează utilizatorii să trimită formularul.

Versiunea desktop a site-ului utilizează același design de formă, deoarece arată bine și funcționează bine pe ecrane mai mari.

Exemplu: intrare consumabilă

La proiectarea formularelor pentru mobil, este întotdeauna important să ne gândim cum putem minimizați spațiul pe care îl folosim. consumabile consumabile Modelul de design UI a devenit destul de popular în ultima vreme și funcționează foarte bine pe mobil.

Booking.com folosește acest model în formularul de căutare pe site-ul său mobil. Când utilizatorul intră în câmpul de căutare, acesta se extinde pentru a lăsați mai mult spațiu pentru gesturi, și o listă selectată cu recomandări apare și sub ea.

Când utilizatorul scapă de câmp, se micșorează și informațiile suplimentare dispăr.

Exemplu: butonul Morphing

Butoane de morfing luați modelul de intrare consumabil cu un pas mai departe, deoarece utilizatorii văd mai întâi un buton, care apoi se transformă într-o formă când o ating.

Imaginea de mai jos este prezentată în articolul strălucitor al lui Startup privind designul inovator al formelor, care prezintă multe alte soluții creative.

Facilitați preluarea de intrare

Formele lungi tind să descurajeze utilizatorii. Ceea ce putem face cel mai bine este cereți doar intrarea de care avem nevoie. Acest lucru nu este important numai din perspectiva experienței utilizatorilor, dar utilizatorii pot, de asemenea, ezita să dea prea multe informații personale din cauza protecția vieții private.

Uneori însă, noi încă trebuie să meargă împreună cu forme mai lungi. În acest caz este o idee bună să aruncați-le în bucăți mai mici, și servi bucățile ca ecrane succesive.

Multe site-uri de comerț electronic (de exemplu, Amazon) utilizează această soluție pentru a reduce ratele de abandon de cărucior.

Dacă vrem să ușuram completarea câmpurilor de formule, regula este de a face reduce atât distragerile, cât și acțiunile utilizatorilor cat mai mult posibil.

Exemplu: Picker personalizat de intrare

Selectorii de diferite tipuri de conținut, cum ar fi colectorii de date sau colectorii de culori, nu numai că fac mai ușoară preluarea intrărilor potrivite, dar fac și ele formularul mai atrăgător, și semnificativ reducerea erorilor utilizatorului.

Aplicația de preluare a listelor Todoist oferă sugestii personalizate în interiorul selectorului de date atunci când utilizatorul se deplasează de-a lungul zilelor.

De exemplu, în imaginea de mai jos, utilizatorul poate vedea că pentru 31 august are deja două sarcini și poate lua în considerare aceste informații atunci când decide data potrivită pentru sarcini. Este o idee excelentă pentru o aplicație în care productivitatea este principala preocupare a utilizatorului.

Exemplu: Intrare drag-and-drop

Drag-and-drop desene sau modele lucrează de obicei bine cu câmpurile de încărcare a fișierelor, în special acolo unde utilizatorii ar trebui să încarce imagini.

Probabil că nu reduc acțiunile utilizatorilor în comparație cu butonul Încărcați un fișier obișnuit, dar fac mult mai ușor alegeți ce fișier doriți să fie încărcat de utilizator, reducând astfel șansa de a depune un dosar greșit.

WordPress.com oferă o interfață de intrare de utilizator drag-and-drop elegantă și intuitivă în formularul de editor post. mici miniaturi si reprezentarea vizuală a fișierelor deja încărcate să ajute utilizatorii să execute rapid încărcarea.

Exemplu: Suprapunere pentru eliminarea distragerilor

Dacă utilizatorii sunt distrași în completarea formularului nostru, aceștia sunt mai predispuși la erori și, de asemenea, se deranjează mai ușor

Suprapuneri de conținut sunt o mare alternativă la designul minimalist al formelor. Sunt folosite de site-uri mai complexe care doresc să afișeze diferite tipuri de informații pe același ecran.

În imaginea de mai jos, puteți vedea versiunea desktop a aplicației Booking.com. Atunci când utilizatorii se deplasează pe formularul de căutare, restul conținutului devine acoperite de o acoperire gri pentru a le ajuta să vă concentrați asupra procesului de umplere a formularului.

Trimiteți feedback utilizatorilor

Oferirea feedback-ul corect la momentul potrivit poate îmbunătăți semnificativ experiența utilizatorului.

În forma de design, există două tipuri de reacții ale utilizatorilor:

1. Feedback dat inainte de depunerea formularului - pentru a reducerea erorilor și formează rate de abandon, cum ar fi urmărirea progreselor, validarea instantanee a intrărilor care recompensează imediat utilizatorii pentru intrarea corectă sau sfaturi de ajutor
2. Feedback dat după depunerea formularului - pentru a permite utilizatorilor să știe ei au comis o eroare, cum ar fi mesajele de eroare

Felul de feedback pe care utilizatorii noștri îl au în mare măsură depinde de caracteristicile publicului țintă și de scopul site-ului nostru.

Exemplu: urmărirea progresului

Formulare mai lungi decât o singură pagină, cum ar fi anchetele și cele mai multe formulare de check-out pentru comerțul electronic, pot avea efectul de levier al progresist model de design. Programele de urmărire a progresului dau un feedback instant vizual către utilizatori cu privire la statutul lor și încurajându-i să continue procesul.

Aplicația web creator de sondaje SnapSurveys arată un mic tracker de progres chiar deasupra butoanelor de trimitere, astfel încât utilizatorii să poată în mod natural, prindeți-o.

tracker-ul de progres nu folosește etichete, ci modul în care este proiectat își clarifică scopul - numărul de cercuri indică numărul de pași, pașii deja executați devin albastru și utilizatorii pot vedea cu ușurință câți pași sunt încă înaintea lor.

Exemplu: Validarea în timp real

Magazinul de produse cosmetice Body Shop utilizează validarea în timp real pe formularul Profile de Utilizator pentru a elimina erorile și a îmbunătăți UX-ul procesului de completare a formularului.

Intrările sunt verificate în timp ce utilizatorii completează formularul, iar răspunsurile corecte și greșite sunt indicate imediat prin ușor de distins icoane un pic mai departe în dreapta, dar încă în zona vizibilă.

Exemplu: Instrumente expresive

Microcopie înțeleasă este, de asemenea, o parte esențială a feedback-ului de succes al utilizatorului în designul de formă. Prin definiție, microcopia unui site web este formată din mici bucăți de text utilizate în diferite elemente - etichete, butoane, mesaje de eroare, vârfuri de instrumente etc.

În forma de autentificare, grupul bancar Barclay răspunde la întrebările pe care le pot adresa utilizatorii cu ajutorul lui instrumentele de proiectare bine concepute care includ ușor de înțeles microcopia.

Instrumentele sunt ascunse în spatele puținului? icoane nu pentru a distrage utilizatorii care știu să completeze formularul de autentificare, dar să fie întotdeauna prezent pentru utilizatorii care nu sunt siguri.

Unele dintre sfaturi conțin chiar și un pic vizual al unei cărți de debit adnotate astfel încât utilizatorii să poată găsi cu ușurință datele pe care trebuie să le introducă în formularul de autentificare.