Apăsabilitatea în interfețe: semne și principii de proiectare

Ce este apăsabilitatea

Apăsabilitatea — este gradul în care un element de interfață comunică vizual utilizatorului posibilitatea de interacțiune. În terminologia UX, aceasta face parte din conceptul de affordanță, introdus de psihologul James Gibson.

Designerul Don Norman a popularizat conceptul de affordanță în contextul interfețelor. În cartea „The Design of Everyday Things" (Designul lucrurilor de zi cu zi, 2013) el a descris cum forma și aspectul unui obiect ar trebui să sugereze modul de utilizare. Un buton ar trebui să arate ca un buton — aceasta este affordanța apăsabilității.

Potrivit UX Collective (2025), 34% dintre utilizatori nu apasă un element dacă nu pare apăsabil, chiar dacă tehnic clicul este procesat. Aceasta subliniază importanța feedback-ului vizual în interfață.

Anti-pattern: butoane neapăsabile

Text fără subliniere, pictograme plate fără luminare, elemente gri fără cursor pointer — anti-pattern-uri clasice când elementul este interactiv dar nu pare. Utilizatorul pierde timp căutând zonele apăsabile, ceea ce înrăutățește UX.

Affordanțe vizuale ale apăsabilității

Affordanțe vizuale — sunt semne externe care semnalizează interactivitatea. Ele se împart în mai multe categorii: formă, culoare, umbră, textură și animație.

Oamenii au evoluat să se obișnuiască că obiectele cu anumite proprietăți vizuale pot fi atinse sau mutate. Designerii folosesc aceste pattern-uri înnăscute de percepție pentru a crea interfețe intuitive.

Cea mai puternică affordanță — umbra (efectul de ridicare). Material Design de la Google este construit pe metafora straturilor fizice, unde fiecare element interactiv are înălțimea sa (elevation). Utilizatorii înțeleg intuitiv că un card cu umbră poate fi apăsat.

Stări ale elementelor interactive

Fiecare element apăsabil trebuie să aibă cel puțin patru stări: normal, hover, active, disabled. Diferențele vizuale între stări ajută utilizatorul să înțeleagă situația curentă.

/* Interactive element states */
.btn {
    background: #4A90D9;
    transition: all 0.2s ease;
}

.btn:hover {
    background: #357ABD;  /* Darker on hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn:active {
    transform: scale(0.97);  /* Press effect */
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

Starea normal — aspectul de bază al elementului în repaus. Starea hover — reacția la trecerea cursorului, confirmând că elementul este gata de interacțiune. Starea active — momentul apăsării, oferind feedback tactil. Starea disabled — elementul inactiv, vizual estompat.

Conform Google Material Design Guide (2024), zona minimă de apăsare pentru dispozitive tactile — 48x48 dp, iar optimă — 56x56 dp. Dimensiunea mai mică reduce apăsabilitatea pe dispozitive mobile.

Cursorul ca indicator al apăsabilității

Schimbarea cursorului — una dintre cele mai vechi și eficiente moduri de a indica apăsabilitatea. Proprietatea CSS cursor: pointer transformă săgeata într-o mână care indică, semnalând că elementul este interactiv.

/* Standard cursor values */
.clickable {
    cursor: pointer;   /* Pointer for buttons and links */
}

.moveable {
    cursor: grab;      /* Grab cursor for drag */
}

.resizable {
    cursor: ew-resize; /* Resize cursor for width */
}

Regula degetului arătător: cursor: pointer trebuie utilizat pe toate elementele apăsabile — butoane, link-uri, comutatoare, pictograme. Pe elementele neinteractive cursorul trebuie să rămână săgeata standard (cursor: default).

Erori de utilizare: cursor: pointer pe text obișnuit induce utilizatorii în eroare. Nu utilizați cursor pointer pe elemente care nu procesează clic — distruge încrederea în interfață.

Legea lui Fitts în proiectarea butoanelor

Legea lui Fitts — lege ergonomică care descrie timpul necesar pentru atingerea unei ținte. În contextul interfețelor: cu cât ținta (butonul) este mai mare și mai apropiată, cu atât utilizatorul ajunge mai repede la ea.

Formula legii lui Fitts: T = a + b * log2(D / W + 1), unde T — timpul de atingere, D — distanța până la țintă, W — dimensiunea țintei. Mărirea butonului de 2 ori reduce timpul de clic cu 15–20%.

Conform Apple Human Interface Guidelines (2024), dimensiunea minimă a țintei tactile — 44x44 puncte. Google Material Design recomandă 48x48 dp. În practică, butoanele CTA trebuie să aibă cel puțin 56x56 dp pentru o interacțiune confortabilă.

Colțurile ecranului — ținte infinite

Colțurile și marginile ecranului conform legii lui Fitts sunt ținte infinite — cursorul nu poate depăși marginea ecranului. De aceea butoanele importante (meniu, închidere) sunt adesea plasate în colțuri. În interfețele mobile, degetele mari ajung natural în partea de jos a ecranului.

Pattern-uri ale elementelor apăsabile

Pattern-uri stabile de apăsabilitate s-au format de-a lungul deceniilor de design web. Utilizarea lor face interfața intuitivă fără a necesita instruirea utilizatorului.

Pattern-ul butonului cu umbră — standardul Material Design. Butonul se ridică deasupra suprafeței, umbra crește la hover și dispare la apăsare. Acest pattern este folosit în milioane de aplicații și site-uri.

Pattern-ul butonului plat — după actualizarea iOS 7, designul plat fără umbre a devenit popular. În astfel de butoane, apăsabilitatea este transmisă prin culoare, ramă sau pictogramă. Butoanele plate necesită accente de culoare mai puternice.

Pattern-ul butonului fantomă — buton transparent cu ramă care se umple cu culoare la hover. Folosit pentru acțiuni secundare lângă CTA principal.

• Respectarea convențiilor platformei — iOS, Android și web au propriile standarde de apăsabilitate
• Consistența — aceleași elemente arată la fel peste tot
• Feedback — fiecare apăsare trebuie să aibă o reacție imediată
• Accesibilitatea — apăsabilitatea trebuie să fie inteligibilă și când se folosește un cititor de ecran