Label-uri (etichetele) sunt acele mici texte descriptive de lângă un control de formular care descrie ce să completezi sau să bifezi.
Poate părea ceva banal dar sunt foarte importante pentru lizibilitatea, completarea și conversia unui formular.
Este cunoscut faptul că utilizatorii se cam feresc să completeze formulare, din grabă, lene sau alte motive, de aceea este foarte importat cum să organizezi un formular, ce feature-uri oferă și cât de ușor se completează.
Deși formularele pot avea diferite nuanțări în funcție de tipul de afacere, tipologia utilizatorilor sau ce fel de date se dorește de la utilizator, de-a lungul timpului s-au conturat câteva reguli pentru label-uri.
1 Label-urile aliniate spre dreapta (lângă input/select) sunt mai ușor de citit și implicit câmpurile pe care le deservesc sunt mai ușor de completat.
Se aplică pentru cazul în care label-ul și input-ul sunt pe același rând. Din cauza principiului Gestalt al proximității tindem să credem că obiectele apropiate sunt înrudite cumva, mai ales dacă există în o regulă a distanței dintre ele (o margine de 5px, de exemplu)
Știu că unii vor spune că arată aiurea pentru că sunt aliniate, dar depinde ce contează rata de completare/erori sau să arate drăguț din depărtare.
2 Label-ul deasupra input-ului cauzează cea mai bună rată de completare. Și în acest caz se aplică principiul proximității, înrudirea find și mai evidentă mai ales că spațiul dintre input-uri este mai mare decât dintre input și label.
Mai intervine modul în care oamenii citesc (sau scanează) de jos în sus și că suntem destul de obișnuiți să derulăm (scroll) pe verticală.
În cazul dispozitivelor mobile unde spațiul pe orizontală este limitat, acest mod de dispunere a label-urilor fata în input a devenit de facto (cu mici variații).
Dispare problema alinierii pentru că atât input-ul cât și label-ul sunt aliniate.
Un dezavantaj minor ar fi ca astfel crește formularul în înălțime dar după cum am spus, conform testelor oamenii s-au obișnuit să deruleze pe verticală.
3 Click pe label=> focus pe input. Intrăm mai mult în partea tehnică dar e ok.
Unui label i se poate pune atributul „for” care spune cărui câmp îi este asociat. Astfel label-ul devine click-abil și la apăsare cursorul se va mutat în input și se va putea scrie.
Se folosește după cum urmează:
<label for="email">Email</label> <input type="email" id="email" name="email" value=""/>
Conținutul atributului for trebuie să fie id-ul câmpului.
În cazul dispozitivelor mobile este foarte important să fie setat acest atribut pentru că se mărește spațiul disponibil pentru touch când utilizatorul apasă pentru a introduce ceva de la tastatură.
4 Atributul for trebuie setat neapărat în cazul controalelor radio și checkbox.
În acest fel textul de lângă radio sau checkbox devine click-abil și poate fi folosit pentru bifare/selectare.
Crește spațiul pe care se poate apăsa și nu se mai chinuie utilizatorul să nimerească checkbox-ul care de obicei nu are mai mult de 16x16px. Cu mouse-ul poate nimerește dar cu crenvruștiul mare (aka degetul) e mai greu.
Despre label-uri ar mai fi multe de scris (mărime font, culoare, spațiere) dar cam acestea sunt regulile generale pe care le-am observat de-a lungul anilor si cu care designerii sunt în mare de acord. Dacă ai ceva de completat sau întrebat aștept un comentariu mai jos.