Zona "degete groase": de ce se apasă greșit butoanele pe telefon

Primești mesaje de la clienți care spun că „am dat pe butonul greșit" sau că „nu se apasă bine pe telefon". Nu sunt ei neîndemânatici și nici tu nu ai un telefon defect. Problema e că butonul e prea mic sau prea lipit de alt element, iar degetul — care nu e un cursor de mouse — acoperă o zonă mult mai mare decât crezi.

În design se cheamă „fat finger problem": vârful degetului atinge ecranul pe o suprafață de câțiva milimetri, iar dacă butonul e mai mic decât acea suprafață, atingerea „scapă" pe elementul vecin. Vestea bună: nu e o chestie de gust, ci de câteva reguli măsurabile pe care le poți verifica singur în câteva minute.

De ce degetul nu e un mouse

Pe desktop ai un cursor de un pixel: ochești exact colțul unei iconițe și dai click. Pe telefon, degetul atinge ecranul pe o zonă lată, iar tu nici măcar nu vezi ce e sub el în momentul atingerii — degetul acoperă butonul.

De aici vin trei tipuri de greșeli pe care le raportează clienții:

• apasă lângă buton și nu se întâmplă nimic;
• apasă butonul vecin (de exemplu „Anulează" în loc de „Trimite");
• apasă de mai multe ori pentru că prima atingere „n-a prins".

Toate au aceeași cauză: ținta e prea mică sau prea aproape de alte ținte. Nu e vina utilizatorului — e o problemă de dimensionare pe care o rezolvi din CSS.

Mărimea corectă a unui buton: cifrele reale

Există standarde clare, publicate de cei care fac sistemele de operare:

• Apple recomandă o zonă de atins de minim 44 × 44 puncte.
• Google (Material Design) recomandă minim 48 × 48 dp.
• WCAG, standardul de accesibilitate, cere minim 44 × 44 px pentru nivelul AAA și minim 24 × 24 px ca prag de bază (AA).

Reține un lucru important: e vorba de zona care se apasă, nu neapărat de cât de mare arată butonul. Un link text mic poate avea o zonă de atins mare dacă îi pui padding în jur. Practic, chiar dacă vizual ai o iconiță de 24 px, îi poți da o suprafață apăsabilă de 44–48 px prin spațiu invizibil în jur. Regula simplă pe care o dau clienților: dacă un adult nu poate apăsa comod cu degetul mare, e prea mic.

Spațierea contează la fel de mult ca mărimea

Poți avea butoane suficient de mari și tot să se apese greșit, dacă sunt lipite unul de altul. Când două ținte sunt lipite, degetul care „scapă" puțin nimerește vecinul.

Câteva reguli practice:

• Lasă cel puțin 8 px spațiu între două elemente apăsabile, iar între acțiuni importante (de tip „Șterge" lângă „Salvează") lasă și mai mult.
• Nu pune acțiuni cu efecte opuse una lângă alta. „Trimite comanda" și „Golește coșul" nu au ce căuta lipite.
• La meniuri și liste, fă fiecare rând suficient de înalt cât să se apese fără să nimerești rândul de deasupra sau de dedesubt.

Spațiul gol nu e loc irosit. Pe telefon, spațiul e cel care face diferența dintre un click corect și o frustrare.

Zona degetului mare: unde ajunge greu mâna

Majoritatea oamenilor țin telefonul într-o mână și navighează cu degetul mare. Asta înseamnă că unele zone ale ecranului sunt ușor de atins, iar altele — mai ales colțul de sus, opus mâinii — cer o repoziționare incomodă a telefonului.

Concluzia pentru site-ul tău:

• Pune acțiunile principale (sună, trimite mesaj, rezervă, adaugă în coș) jos și la îndemână, nu ascunse sus în colț.
• O bară fixă jos cu un singur buton clar de acțiune funcționează mult mai bine decât un buton pierdut în header.
• Nu îngropa numărul de telefon sau butonul de WhatsApp într-un meniu pe care trebuie să-l deschidă întâi.

Cel mai bun test e cel real: ia-ți telefonul într-o mână, ține-l normal și încearcă să faci ce ar face un client. Dacă trebuie să te ajuți cu a doua mână, ceva e prost plasat.

Cum verifici singur, în cinci minute

Nu ai nevoie de instrumente scumpe ca să depistezi problema:

• Deschide site-ul pe telefonul tău real, nu doar pe calculator. Emulatorul din browser minte la senzația de atingere.
• Încearcă fiecare acțiune importantă cu degetul mare, ținând telefonul într-o mână.
• Dă site-ul unei persoane mai în vârstă sau cu degete mai mari și privește unde greșește. E cel mai sincer test cu putință.
• Uită-te dacă apeși vreodată din prima greșit sau de două ori — acolo e butonul de reparat.

La MPO Web Studio, când construim un site, îl testăm pe telefon real înainte să-l predăm, tocmai ca să nu ajungi tu să primești astfel de feedback. Îți putem chiar pregăti gratuit o demonstrație pornind de la afacerea ta, ca să vezi înainte să plătești cum se simte pe telefon. Dacă vrei o părere pe site-ul tău actual, scrie-ne pe WhatsApp și îți spunem sincer ce butoane sunt prea mici — fără să-ți vindem ceva ce nu-ți trebuie.