Lucruri de așteptat de la un atelier extraordinar: Masterclass de design de formulare

Mi-a luat aproximativ șase luni să scriu conținutul atelierului. După multă deliberare, am decis să-l structurez așa cum fac în cartea mea, Form Design Patterns.

A fost un atelier de 4 zile împărțit în două segmente de 45 de minute, cu pauze de 15 minute urmate de un întrebări și răspunsuri de 30 de minute cu teme opționale între zile. În fiecare zi ne-am propus să rezolvăm o mare problemă. Aceasta a oferit o modalitate de a aborda problema așa cum o facem în viața reală: analizând și discutând opțiunile înainte de a ajunge la o soluție bună.

Per total, a fost o experiență distractivă. Am învățat multe și m-am distrat de minune predând și discutând cu toată lumea. Aștept deja cu nerăbdare următorul, care este planificat provizoriu pentru sfârșitul anului 2021.

Câteva dintre cele mai importante momente ale fiecărei zile

Iată o scurtă prezentare a fiecărei zile, inclusiv câteva dintre cele mai importante momente.

Ziua 1: Încheierea elementelor de bază ale designului formelor

În prima zi, am conceput un formular simplu de înregistrare de la zero. Acest lucru a oferit o modalitate perfectă de a atinge elementele de bază ale designului formelor. Acoperă lucruri precum poziționarea etichetelor , stilul formularelor și tipurile de introducere. La sfârșitul zilei 1, am avut noi înșine un formular de înregistrare care acoperea elementele de bază și a făcut formularul cât mai simplu posibil pentru utilizatori.

Punctul culminant al acestei sesiuni a fost exercițiul de protocol al întrebărilor . În loc să ne concentrăm asupra modului de economisire artificială a spațiului pe formulare (prin folosirea unor lucruri precum etichete flotante, sfaturi instrumente, etichete aliniate la stânga și text substituent), am folosit o foaie de calcul pentru a ne ajuta să știm de ce este adresată fiecare întrebare și cea mai bună modalitate de a obține Răspuns.

Pentru formularul nostru de înregistrare, aceasta a însemnat o analiză amănunțită a solicitării numelui, a adresei de e-mail și a parolei cuiva. Și până la sfârșitul exercițiului am redus la jumătate numărul de câmpuri de formular și aveam o justificare clară pentru cele care au rămas.

Ziua 2: Validarea formularului și scrierea mesajelor de eroare bune

În a doua zi, am luat formularul nostru de înregistrare bine conceput și am analizat cum să ajutăm utilizatorii să se recupereze de erori în două moduri:

1. Am decis când să validăm formularele și cum să afișăm mesajele de eroare;
2. Am învățat cum să scriem mesaje de eroare clare, concise, consecvente și specifice, care îi ajută pe utilizatori să revină rapid pe drumul cel bun.

Punctul culminant al acestei sesiuni a fost exercițiul de reproiectare a mesajelor de eroare din propriul formular de înscriere a revistei Smashing Magazine.

Sophy Colbert, un designer de conținut care a participat la workshop, s-a oferit voluntar să împărtășească noile ei mesaje de eroare explicând rațiunea ei pentru fiecare.

Atât mesajele, cât și rațiunea au fost superbe și cred că grupul a scos foarte mult din asta, deoarece au putut obține o perspectivă asupra mentalității designerului de conținut al lui Sophy.

Ziua 3: Reproiectarea unui formular de plată din lumea reală

În ziua a 3-a, am reproiectat fluxul de casă ASOS de la zero. Aceasta a inclus check-out pentru oaspeți (experiență pentru prima dată) și check-out ca cineva cu un cont (experiență de utilizare repetată). Am acoperit o mulțime de teren, cum ar fi dacă să folosim file, acordeoane sau butoane radio. Și am analizat, de asemenea, plățile pe o singură pagină față de plățile pe mai multe pagini.

Punctul culminant al acestei sesiuni a fost că procesul de reproiectare a mai multor interacțiuni a expus noi provocări de design de conținut și design de servicii. De exemplu, am convertit filele care solicită utilizatorului să specifice dacă are sau nu cont:

Și le-am reproiectat într-o formă cu butoane radio:

Și acest lucru a expus problema că, în viața reală, alegerile sunt rareori binare. Așa că am întrebat grupul care este opțiunea lipsă și au spus pe bună dreptate: „Ce se întâmplă dacă utilizatorul nu își amintește?”

Deci, chiar dacă inițial am privit asta în primul rând ca pe o problemă de design de interacțiune, a devenit o problemă de design de conținut și servicii.

Toate aceste probleme au încapsulat frumos una dintre regulile UX din formă: „Fă-ți prieteni cu alte departamente”. În calitate de designeri, trebuie să lucrăm eficient cu părțile interesate din întreaga organizație pentru a ne asigura că evităm cât mai multă complexitate posibil. Și aici este din nou locul în care protocolul întrebărilor strălucește cu adevărat.

Ziua 4: Utilizarea sintaxei scurte și proiectarea formelor lungi și complexe

Ziua 4 a fost împărțită în două părți pe care le voi discuta în ordine inversă.

În a doua parte, am analizat diferite modele care îi ajută pe utilizatori să completeze formulare lungi și complexe - genul de formulare care durează zile, săptămâni sau chiar luni. Eram cu nerăbdare să rulez acest lucru, deoarece provocările de proiectare din jurul acestuia sunt interesante și nu sunt bine călcate.

În prima parte, am reproiectat formularul de înregistrare al Smashing Magazine folosind sintaxa scurtă.

Punctul culminant al acestei sesiuni a fost faptul că Vitaly, însuși Mr. Smashing Magazine, a venit să fie partea interesată de afaceri. Grupul i-a pus întrebări pentru a afla de ce formularul a fost conceput așa cum a fost și pentru a întreba de ce au fost puse anumite întrebări.

Iată câteva exemple:

• Sophy O a întrebat de ce se cere domeniul de țară . Vitaly a spus că depinde de ceea ce face utilizatorul. Dacă utilizatorul cumpără o carte, trebuie să știm unde se duce. Iar taxele de pe carte se bazează pe țara de destinație. Acest lucru a avut ca rezultat fie eliminarea câmpului și solicitarea acestor informații atunci când cineva cumpără cartea, fie pur și simplu să fie mai clar în textul indicii despre motivul pentru care solicităm aceste informații.
• Milos Lazarevic a pus la îndoială necesitatea „Îți plac pisicile?” Caseta de bifat. Și Dana Cottreau și Jaclyn Ziegler s-au bucurat de jocul casetei de selectare . Dar aș cântări bucuria pe care o aduce unor oameni față de riscul de a înstrăina oamenii care, de exemplu, sunt mai puțin cunoscuți în digital sau pur și simplu se grăbesc să acceseze conținutul.
• Emma Stotz a pus la îndoială utilizarea validării live , având în vedere toate problemele de utilizare care apar în jurul acesteia. Și Vitaly a fost dornic să exploreze validând instantaneu câmpurile trimise.

Impresia mea generală

Pentru mine, atelierul a decurs foarte bine în general și am fost încântat de felul în care au decurs lucrurile și de feedback-ul primit de la participanți. Toți au fost atât de prietenoși și toleranți la câteva dificultăți tehnice pe care le-am avut în prima zi ( mulțumesc din nou tuturor! ). Conducerea atelierului de la distanță prin Zoom are problemele sale (nu vom vorbi despre cum am părăsit accidental întâlnirea în panică din întâmplare în ziua 1), dar de fapt mi ​​s-a părut util aspectul de la distanță în general.

De exemplu, toate fiind conectate la Zoom, a însemnat ca participanții să pună întrebări în timp ce își partajau ecranul pentru a aduce problemele la viață.

De asemenea, mi-a plăcut foarte mult să cunosc oameni din întreaga lume, ceva care ar fi fost dificil cu atelierele în persoană, cred. De asemenea, în timpul pauzei, am ajuns să merg repede să-mi culc copiii, așa că îmi imaginez că a funcționat bine și pentru participanți.

Dar este un lucru pe care aș fi vrut să-l știu mai devreme. Eram îngrijorat că, cu un grup atât de mare de oameni (81 mai exact), lăsarea oamenilor să vorbească liber ar ajunge într-un haos. Drept urmare, în ziua 1, am citit și am răspuns la întrebările grupului din documentul Google partajat în timpul întrebărilor și răspunsurilor. Acest lucru a însemnat că vocile altora nu se auzeau și a existat mai mult o barieră între mine și grup.

Este ceva ce l-am rectificat pentru ziua 2 și chiar a făcut diferența. A fost plăcut să aud vocile și gândurile oamenilor în propriile lor cuvinte și a creat mai mult un dialog deschis în care alți oameni au început să răspundă la întrebările altora pe care le-am iubit.

Îmi amintesc că Alex Price a sărit o dată pentru a vorbi despre experiența lui în a face față unui formular complicat care trebuia completat de diferiți oameni.

Ce voi schimba data viitoare

Deși impresia mea generală despre atelier a fost foarte pozitivă, au existat câteva lucruri pe care aș căuta să le îmbunătățesc data viitoare.

1. Arată elementele de bază, nu învață elementele de bază

Ziua 1 a acoperit multe elemente de bază înainte de a intra în mai multe detalii în zilele următoare, dar m-a deranjat puțin să predau unele dintre aceste lucruri, deoarece credeam că mulți participanți știau deja multe despre aceste lucruri. Așa că data viitoare aș dori să recunosc că unii oameni au venit cu multe cunoștințe și au creat scena ca „așa predau noțiunile de bază” spre deosebire de „așa este cum să învăț elementele de bază” – datorită Carolinei Jarrett pentru acest sfat.

De asemenea, probabil că voi întreba grupul dacă există vreo abordare de proiectare a formelor despre care s-au chinuit să-i convingă pe colegii de echipă, deoarece cu siguranță m-am mai luptat cu asta.

2. Împărțiți oamenii în grupuri mai mari

Unul dintre exerciții a implicat oameni care s-au împărțit în grupuri de câte 2 folosind sălile de lucru Zoom, dar pentru că oameni au venit la acest atelier din întreaga lume, unii dintre cei care ascultau nu au putut participa la exerciții.

De exemplu, unii oameni chiar aveau nevoie să ia o pauză de prânz, deoarece fusul lor orar era înaintea mea. Aceasta însemna că una sau două persoane care au dorit să participe s-au găsit singuri într-un grup. Data viitoare, aș pune oamenii în grupuri de 4 și aș asigura că exercițiile încă funcționează.

3. Adăugați mai multe exerciții de grup

În ciuda problemei pe care tocmai am menționat-o, exercițiile de grup au funcționat bine. Oamenii s-au bucurat de ele și le-au stârnit câteva idei cu adevărat interesante din partea participanților. Unii oameni mi-au trimis un mesaj după ce mi-au spus că și-ar dori să existe mai multe exerciții de grup, așa că voi încerca să fac exact asta.

Un poster cu toate regulile

Pe măsură ce treceam prin atelier, am bifat peste 40 de reguli și principii ale designului formelor care au adus o structură suplimentară plăcută sesiunilor.

Câțiva dintre participanți m-au întrebat dacă am un poster cu toate regulile și nu - așa că acum am făcut unul.

Poster pentru cursuri de masterat pentru design de formulare (versiunea cu text simplu)

Pentru confortul dvs., iată o versiune text simplă a posterului - nu ezitați să-l ajustați și să-l personalizați în funcție de nevoile dvs.

Ziua 1: Încheierea elementelor de bază ale designului formelor

1. Faceți ca formularele să funcționeze bine pentru toată lumea
2. Fiecare control de formular are nevoie de o etichetă
3. Adăugați text indiciu numai dacă adaugă valoare
4. Nu utilizați text substituent
5. Pune textul indicii între etichetă și intrare
6. Puneți etichete deasupra intrării
7. Nu utilizați sfaturi cu instrumente pentru textul indicii
8. Află de ce pui fiecare întrebare ^*
9. Dați casetelor de text o chenar distinct
10. Etichetele de poziție care urmează să fie asociate cu intrarea
11. Oferă intrărilor o stare clară de focalizare
12. Utilizați tipul de intrare potrivit pentru lucrare
13. Aliniați butonul la marginea stângă a intrărilor
14. Etichetați butonul exact cu ceea ce face
15. Asigurați-vă că formularul dvs. este cu adevărat necesar
16. Evitați să puneți două formulare pe o singură pagină
17. Utilizați intrări multiple ca ultimă soluție
18. Nu utilizați măști de intrare

Ziua 2: validarea formularelor și scrierea mesajelor de eroare bune

1. Nu dezactivați butonul de trimitere
2. Nu declanșați erori atunci când utilizatorul răspunde
3. Validați numai când utilizatorul trimite
4. Puneți erorile deasupra intrării
5. Iertați greșelile banale
6. Urmăriți-vă erorile
7. Oferiți utilizatorilor erori clare, concise și specifice

Ziua 3: Reproiectarea unui flux de checkout real

1. Amânați întrebările pe care le puteți pune mai târziu ^**
2. Utilizați controalele de formular în interiorul formularelor
3. Începe fără bară de progres ^*
4. Începeți să creați prototipuri cu un singur lucru pe pagină ^**
5. Pune întrebări într-o ordine sensibilă
6. Utilizați casetele de selectare ca ultimă soluție
7. Utilizați valori implicite sensibile
8. Oferiți ajutor în contextul întrebării
9. Evitați câmpurile opționale ori de câte ori este posibil
10. Nu ascunde butonul de trimitere
11. Faceți ca lățimea câmpului să se potrivească cu valoarea așteptată
12. Permite utilizatorilor să-și verifice răspunsurile
13. Pune link-ul din spate în partea stângă sus a formularului
14. Fă-ți prieteni cu alte departamente

Ziua 4: Utilizarea stenografiei și proiectarea formelor lungi și complexe

1. Descompune formele uriașe în sarcini mici
2. Spuneți utilizatorilor de ce au nevoie înainte de a începe
3. Ajutați utilizatorii să își verifice eligibilitatea

^* Acest principiu este din manualul de service GOV.UK
^** Acest principiu este din manualul de service NHS.

Mulțumesc încă o dată tuturor celor care au venit pentru toate contribuțiile lor. Aștept cu nerăbdare următorul.

Îi mulțumesc Carolinei Jarrett nu numai că a revizuit fiecare detaliu al atelierului meu, ci și pentru că a editat acest articol.

Nota editorului : De asemenea, puteți verifica o prezentare detaliată a Atelierelor online Smashing Online, iar dacă sunteți interesat să participați la unul, avem o mulțime de ateliere online despre front-end și UX care urmează în curând. Ne-ar plăcea să te vedem acolo!