Etichetele float sunt într-adevăr problematice până la urmă?

Acesta este un răspuns la piesa lui Adam Silver din 25 mai 2017, intitulată Floating Labels Are Problematic.

Pe măsură ce tipul care a realizat designul original pe care s-a bazat majoritatea nebuniei de la Float Label, mă simt oarecum obligat să împărtășesc perspectiva mea asupra acestei chestiuni.

Designul original al etichetei float l-am postat pe Dribbble în 2013

Trebuie să fac acest lucru spunând: nu l-am cunoscut niciodată pe Adam, ci am citit câteva dintre celelalte articole ale sale și îi apreciez și admir cu atenție detaliile minuscule din articolele sale.

Adam își exprimă multe puncte minunate în articolul său și în anumite contexte, aș fi de acord.

Cu toate acestea, cred că este important să facem câteva afirmații absolute subtile în articol și să subliniem relativitatea lor bazată pe design în general, mai degrabă decât pe modelul individual al unei etichete plutitoare.

Vreau, de asemenea, să acoperi toate acestea spunând că nu cred că etichetele float ar trebui utilizate pentru fiecare formă făcută vreodată. Dacă nu credeți că adaugă valoare formularului dvs., nu le folosiți. O.K?

Dacă ați testat un mod față de celălalt, utilizați metoda cu performanțe superioare. Cine nu dorește rate de conversie mai mari?

Doar amintiți-vă, un formular singur nu va stimula rata de conversie prin acoperiș. Trebuie să creezi suficientă valoare și să rezolvi o problemă suficient de mare cu conținutul tău, astfel încât un utilizator să fie motivat efectiv să folosească formularul tău în primul rând.

Eu însumi nu am făcut nicio testare oficială de divizare a etichetelor float și nu pot recomanda cu încredere modelul peste o etichetă standard, bazată doar pe cercetări pure.

Dar pot spune că am folosit recent etichete float pe formularul meu de curs Intro to Icon Design și am văzut o rată de conversie de peste 30%. Conform cercetării mele rapide, aceasta este de 10 ori mai mare decât opțiunea medie în formă care generează doar 3% conversii.

De la cursul video gratuit Intro la Icoane

Rata de conversie ar fi mai mare dacă nu aș fi folosit etichete float? Intestinul meu spune „nu”, dar nu am date care să le sprijine.

Cu toate acestea din drum, să sărăm în comentariul meu. Următoarele titluri numerotate și ghilimele de mai jos sunt preluate direct din articol.

1. Nu există spațiu pentru un indiciu

Articolul prevede:

Etichetele plutitoare încep în interiorul casetei de text fără a lăsa spațiu pentru un indiciu suplimentar.
Imagine preluată din articolul de referință

Ok, deci dacă intenționați să puneți un indiciu sau o notă deasupra câmpului de introducere și direct sub etichetă, atunci da, o etichetă float vă va împiedica capacitatea de a face asta.

Cu toate acestea, dacă dorești cu adevărat o notă sau un indiciu, o poți muta sub câmpul de introducere și pur și simplu împingeți un pic celălalt în jos.

Dezbaterea despre destinația de plasare este inutilă, cu excepția cazului în care aveți o imagine extrem de clară a problemei exacte care încearcă să fie rezolvată cu un formular în primul rând.

În unele cazuri, indicii sau etichete sunt incredibil de utile și, în alte cazuri, sunt o bandă pe o formă slab concepută. Pur și simplu nu poate fi un standard absolut în afara contextului.

2. Sunt greu de citit

Articolul prevede:

Etichetele plutitoare au de obicei un text mic, astfel încât pe măsură ce plutește, ocupă o cantitate mică de spațiu. Dar textul mic este greu de citit.
Imagine preluată din articolul de referință

Asta depinde într-adevăr de dimensiunea textului. Și „greu de citit” este o variabilă, nu o constantă, bazată pe vederea utilizatorului.

Mai mult, dimensiunea textului este relativă la un design în general - nu etichetele flotante în sine. Este foarte posibil ca etichetele float să aibă aceeași dimensiune ca și o etichetă standard.

Dacă textul este afișat la o dimensiune standard de 16-18 pp, este în general acceptabil ca citit. Poate mai mult decât să spui o dimensiune de 12-14 px.

Deci, să fim de acord pentru un moment că 18px este de fapt mai ușor de citit decât 12px ...

Este prea insondabil să presupunem că o utilizare ușor de citit 16-18 pp, scalată contextual la 12–14 pp după ce un utilizator începe să scrie, ar fi brusc prea mică pentru a fi citită?

Nu neg că 12px poate fi mai greu de citit decât 18px, dar văd o etichetă float ca un artefact al trecutului, mai degrabă decât un indiciu pentru viitor.

Este o indicație rămasă și nu o instrucțiune despre ce trebuie să faci.

3. Au nevoie de spațiu pentru a se muta

Articolul prevede:

Etichetele plutitoare au nevoie de spațiu pentru a se muta. Dacă textul etichetei este prietenos (a se vedea punctul precedent), oricum nu ar exista spațiu economisit - doar mai mult spațiu alb.
Imagine preluată din articolul de referință

Acest lucru este adevărat, absolut.

Etichetele float au nevoie de spațiu pentru a vă muta în interior și aceasta este una dintre cele mai dificile probleme de atins pentru model.

Chris Coyier și-a scris chiar gândurile despre această problemă și a concluzionat că etichetele plutitoare nu salvează deloc înălțimea verticală.

DAR…

Dacă sunteți de acord cu faptul că eticheta float este un artefact, mai degrabă decât o instrucțiune, puteți fi, de asemenea, de acord că este bine să mergeți puțin mai mic în dimensiunea textului decât o etichetă standard.

Și cu o dimensiune mai mică a textului, să spunem 12px în loc de 16px, ați economisi în mod eficient 4 sau mai mulți pixeli de spațiu. Poate chiar 8px, deoarece nu ar trebui să adăugați o marjă suplimentară sub etichetă în sensul tradițional.

Ne descurcăm cu adevărat în buruienile de aici, înțelegând pixeli, dar un proiectant de interfață excelent va conștientiza cu durere o discrepanță de 4px și efectele pe care le poate avea asupra întregului design dacă este folosit corect sau necorespunzător.

Deci, dacă economisiți 8px pe 5 câmpuri de introducere într-un formular, ați salvat un total de 40px. Aceasta este aproximativ aceeași înălțime a unui buton de pe ecranul mobil.

V-ar fi de folos acest proiect? Nu știu. Tu, în calitate de proiectant, va trebui să decizi că pentru fiecare caz de utilizare pe care îl întâlnești.

Permiteți-mi să vă ofer un exemplu real al unei forme complexe uriașe la care am lucrat câțiva ani în urmă.

Proiectul a implicat o cantitate nebună de date pentru logistica comercială de transport și transport. Încercam cu adevărat să facem complexul, simplu.

Formularele de mai jos sunt capturi de ecran de modele „work in progress” pe care le-am extras din arhivă.

Forma din stânga folosește o combinație de etichete aliniate în sus și etichete aliniate stânga. Experimentam - încercam să aterizăm pe soluția perfectă.

Apoi, am conceput formularul din partea dreaptă ca o alternativă la cantitatea de forfecare care se întâmplă în formă. Cu toții am fost de acord că se simte mai curat, mai puțin copleșitor și mai bun în general.

Imagine preluată din proiectul Shiplify la care am lucrat în 2014

Puteți vedea că, deși doar jumătate din câmpuri au fost aliniate de sus, a rezultat în continuare peste 420px înălțime verticală salvată.

Am avut chiar și câteva teste improvizate în care am întrebat oamenii, „care dintre aceste forme pare mai puțin copleșitoare?” Și au fost de acord că forma din dreapta părea mai bună.

Știu că aceasta nu este o testare 100% valabilă și statistic concludentă, dar totuși, este un început.

Mi-ar plăcea să obțin ceva de genul testat corect într-o zi, dar până atunci este o intuiție, nu un fapt.

Există atât de multe variabile, cum ar fi tipul de conținut, cunoștințele preexistente ale utilizatorului și multe altele, care fac ca orice test de formă unică să nu se aplice 100% pentru toate formele viitoare.

4. Animația este problematică

Articolul prevede:

Animația, chiar dacă s-a făcut bine, ar putea distrage și dezorienta, în special pentru încredere scăzută sau utilizatori cu deficiențe de vedere. Și, atunci când faceți zoom, eticheta poate dispărea de pe ecran.

Așteaptă o secundă. Dacă o animație este făcută bine, atunci prin definiție este „bine”, „bine”, „satisfăcător”, „de dorit” etc.

Prin urmare, sintagma „distragerea și dezorientarea” nu poate coexista cu „bine făcut”.

Formați animație din studiile de caz learnaiux.com gratuite

Știu că sunt incredibil de părtinitoare, dar atunci când completez un formular care într-adevăr se încadrează în animația Float Label, am o vârstă minunată de dopamină minunată când animația se rezolvă și trec la următorul câmp. Un mic simț al finalizării care nu mai era până acum.

Îmi amintește de un joc în care se întâmplă ceva vizual în urma traseului personajului tău. Ca o amprentă.

Totuși, am impresia că nu pot să fac acest lucru suficient. Dacă etichetele float nu au sens pentru proiectul dvs. și adaugă prea multă complexitate inutilă, atunci vă rugăm, prin toate mijloacele, să nu o utilizați.

Voi folosi în mod fericit formularul dvs. dacă celălalt capăt al formularului dvs. îmi rezolvă problema.

5. Au un contrast slab

Articolul prevede:

La fel ca și textul de rezervă, etichetele plutitoare au un contrast redus pentru a-l diferenția, dar textul cu contrast scăzut este greu de citit.
În funcție de design, atunci când eticheta plutește în afara câmpului, culoarea ei va trebui să se schimbe. În caz contrar, textul va fi pierdut în raport cu culoarea de fundal.
Imagine preluată din articolul de referință

Contrastul scăzut nu are nicio legătură cu eticheta float și are totul de-a face cu dimensiunea și culoarea.

WCAG 2.0 minim (Ghid de accesibilitate pentru conținut web) precizează că este necesar un raport de contrast de culoare de 4,5: 1 pentru a trece ghidurile AA pentru dimensiunea regulată a textului sub 18 ~ px.

Cel mai ușor cod hex color gri care produce un raport de contrast AA pasabil este # 767676 sau # 757777 pe fundalul #ffffff (alb). Aceasta se întâmplă dacă utilizați o greutate obișnuită a fontului sub 18px. Dacă utilizați o greutate cu caractere aldine la dimensiunea de 14px, puteți să vă amânați de raportul mare de contrast pe care WCAG îl oferă, care este de 3,5: 1 și ajunge să fie # 898989 pe #ffffff. Notă laterală: acesta este controlerul meu de contrast preferat.

Sidenote: Am proiectat proiecte pentru bănci care necesită un nivel minim de contrast AA pentru produsul lor digital. Nu am găsit personal un client care a necesitat mai mult decât AA, dar am stabilit ca obiectiv (și l-am atins) AAA când am proiectat Unity Design System de la Exxon.

Bine, am scos subiectul, dar ideea mea este că este o problemă de culoare și design, nu o problemă cu etichete float.

6. Pot fi confundate cu o valoare

Articolul prevede:

Oamenii pot sări câmpul gândind că este deja finalizat. Când trimit, vor vedea o eroare care trebuie rezolvată. Acest lucru este frustrant și consumă mult timp.

Acesta este un punct foarte valabil și, de asemenea, motivul pentru care culoarea și ierarhia sunt de cea mai mare importanță la proiectarea interfețelor.

Etichetele mai întunecate de deasupra câmpurilor de intrare goale sunt destul de greu de greșit pentru ceva deja în câmp.

Dacă setați un precedent pentru utilizator prin activarea etichetelor plutitoare la intrarea utilizatorului ȘI culoarea textului de introducere a utilizatorului este mult mai întunecată decât culoarea locului de substituție - spuneți # 767676 versus # 222222 - atunci posibilitatea confuziei ar putea fi mult mai mică.

Nu pot spune, de fapt, că nu va fi o problemă. Nu cred că ar fi în multe cazuri, dar această presupunere fără date grele ar fi ignorantă din partea mea.

Vă rugăm să proiectați înlocuitori și etichete cu înțelepciune. Dacă utilizați un contrast adecvat între culoarea de la locul de plasare și culoarea de introducere a utilizatorului, acest lucru ar trebui să rezolve orice probleme pe care le puteți întâmpina.

7. Sunt localizate în mod inconsistent

Articolul prevede:

Butoanele radio, casetele de selectare și casetele selectate au etichete și legende statice. Unde ca cutii de text au etichete plutitoare. Acest lucru creează o experiență inconsistentă.
Când se uită la o casetă de text, de exemplu, utilizatorul trebuie să se uite în interiorul controlului. Pentru o casetă selectă, trebuie să se uite în afara ei.
Imagine preluată din articolul de referință

Aceasta este o problemă de design, nu o problemă de etichetă float. Shopify face o muncă incredibilă cu eticheta float pe câmpurile de introducere și selectează casetele.

8. Eticheta poate fi decupată

Articolul prevede:

Dacă eticheta plutitoare este mai lungă decât dimensiunea câmpului, aceasta va fi tăiată de câmp. Ar trebui să proiectăm pentru conținut, nu ar trebui să facem conținutul să se potrivească designului.
Imagine preluată din articolul de referință

Aceasta nu este o problemă de etichetă float în sine, aceasta este o problemă proastă a designului formularului.

Nimeni nu ar trebui să aibă vreodată o etichetă de marcat.

Și dacă aveți cu adevărat nevoie de a pune o întrebare pe două linii ca etichetă de intrare, atunci recomand 100% NU folosiți o etichetă float.

Pur și simplu nu are sens pentru acest caz de utilizare.

9. Ei ignoră standardele

Articolul prevede:

Știm că deținătorii de locații sunt problematici oricum. Cu toate acestea, dacă vom pune textul într-o casetă de text, ar trebui să fie un indiciu, nu o etichetă.

Acesta este standardul la care se referă articolul. Scrie:

Atributul placeholder reprezintă un indiciu scurt (un cuvânt sau o frază scurtă) destinat să ajute utilizatorul cu introducerea datelor. Un indiciu ar putea fi o valoare a eșantionului sau o scurtă descriere a formatului așteptat.

Hmmm, „Un cuvânt sau o frază scurtă destinate să ajute utilizatorul” sună ca și cum ar putea descrie o etichetă!

Acum documentele standard spun și:

Atributul placeholder nu trebuie utilizat ca o alternativă la o etichetă.

Sunt pe deplin conștient de faptul că există circumstanțe care necesită o etichetă externă și date suplimentare ale locației pentru a ajuta cu adevărat anumite tipuri de introducere a câmpului. Uneori, trebuie să extrageți toate opririle atunci când proiectați formulare pentru a acoperi cu adevărat toate bazele.

Sunt de acord cu 100% că nicio etichetă și doar date despre deținător de loc nu reprezintă o idee proastă. De aceea există eticheta float!

Eticheta float a fost creată DUPĂ acest standard a fost scris. Nu merită să contestați presupunerile originale din documentele vechi după ce apar idei noi? Mai ales cele care se adoptă atât de repede.

Este rezonabil să te enervezi mai degrabă decât să fii respingător?

Nu trebuie să existe un motiv valabil pentru care Google a adoptat acest model ca standard în Ghidul de proiectare a materialelor.

Pe lângă Google, următoarele companii au adoptat modele de etichete float în aplicațiile lor.

  1. Shopify
  2. lenevi
  3. Oceanul digital
  4. deltă
  5. Invision
  6. Nu-mi amintesc mult mai multe ...

rezumat

Articolul prevede:

Formele nu sunt o sursă de divertisment. Eticheta plutitoare nu îi va face pe utilizatori să se bucure de utilizarea formularelor. Utilizatorilor nu le pasă. Vor doar rezultatul.

Sunt de acord că utilizatorii doresc rezultatul, dar nu sunt de acord că formularele nu ar trebui să fie distractive. Un utilizator care este distrat este mult mai probabil să-și amintească experiența lor cu produsul tău.

Voi adăuga o precizare, deși nu ar trebui să puneți divertismentul mai presus de funcționalitate și claritate.

Există tehnici mai bune și mai productive pentru îmbunătățirea designului formularului. În schimb, să cheltuim timp și energie.

Sunt cu siguranță de acord cu prima frază, iar uneori îmbunătățirea designului formularului este eliminarea câmpurilor sau regândirea dacă este chiar necesară o formă.

Dar nu ar trebui să petrecem timp pentru TOATE fațetele îmbunătățirii designului formularului?

Acest articol a fost publicat inițial pe mds.is, pentru că, aparent, acum trebuie să postați pe propriul blog ȘI Mediu, deoarece cine vrea să formateze o singură postare pe blog?

Pentru mai multe resurse privind originile modelului etichetei float, consultați acest post.