A „kövér ujj” zóna: miért nehéz telefonon a gombokra koppintani

Folyamatosan olyan üzeneteket kapsz, hogy „rossz gombot nyomtam meg” vagy „nem koppint rendesen a telefonomon”. A vásárlóid nem ügyetlenek, és a telefonod sem hibás. A gomb egyszerűen túl kicsi, vagy túl közel van egy másik elemhez, az ujj pedig — ami egyáltalán nem olyan, mint egy egérkurzor — sokkal nagyobb területet takar, mint gondolnád.

A tervezők ezt „kövér ujj problémának” nevezik: az ujjbegyed több milliméteren keresztül érinti a képernyőt, és ha a gomb kisebb annál a foltnál, a koppintás átcsúszik a szomszédos elemre. A jó hír: ez nem ízlés kérdése. Néhány mérhető szabályra vezethető vissza, amelyeket percek alatt magad is ellenőrizhetsz.

Miért nem egér az ujj

Az asztali gépen egy egypixeles kurzorod van: pontosan egy ikon sarkára célzol, és kattintasz. A telefonon az ujjad egy széles területre érkezik, és abban a pillanatban, amikor hozzáérsz, azt sem látod, mi van alatta — az ujjad eltakarja a gombot.

Innen ered az a három panasz, amelyet a vásárlók jeleznek:

• a gomb mellé koppintanak, és nem történik semmi;
• rossz gombot nyomnak meg (mondjuk „Mégse” helyett „Küldés”);
• többször is koppintanak, mert az első érintés „nem regisztrálódott”.

Mindháromnak ugyanaz az oka: a célpont túl kicsi, vagy túl közel van más célpontokhoz. Ez nem a felhasználó hibája — ez egy méretezési probléma, amelyet CSS-ben javítasz.

A megfelelő gombméret: a valódi számok

Vannak világos szabványok, amelyeket azok tettek közzé, akik az operációs rendszereket építik:

• Az Apple legalább 44 × 44 pontos koppintási célterületet ajánl.
• A Google (Material Design) legalább 48 × 48 dp-t ajánl.
• A WCAG, az akadálymentesítési szabvány, AAA szinten legalább 44 × 44 px-t kér, alapszintként (AA) pedig 24 × 24 px-t.

Egy dolog számít a legjobban: ez a koppintható területről szól, nem feltétlenül arról, mekkorának látszik a gomb. Egy kis szöveges hivatkozásnak is lehet nagy koppintási célterülete, ha kitöltést (padding) adsz köré. A gyakorlatban még egy 24 px-es ikon is hordozhat 44–48 px-es koppintási területet a körülötte lévő láthatatlan térrel. Az egyszerű szabály, amit az ügyfeleimnek szoktam mondani: ha egy felnőtt nem tudja kényelmesen megkoppintani a hüvelykujjával, akkor túl kicsi.

A térköz ugyanolyan fontos, mint a méret

Lehetnek elég nagy gombjaid, és mégis kaphatsz rossz koppintásokat, ha közvetlenül egymás mellett vannak. Amikor két célpont összeér, egy kissé megcsúszó ujj a szomszédosra érkezik.

Néhány gyakorlati szabály:

• Hagyj legalább 8 px-t két koppintható elem között, a fontos műveletek között pedig még többet (egy „Törlés” a „Mentés” mellett).
• Ne tegyél egymás mellé ellentétes műveleteket. A „Rendelés leadása” és a „Kosár ürítése” gomboknak semmi keresnivalójuk egymás mellett.
• A menükben és listákban tedd minden sort elég magassá ahhoz, hogy megkoppintható legyen anélkül, hogy a felette vagy alatta lévő sort is elkapnád.

Az üres hely nem elpazarolt hely. A telefonon a térköz az, ami elválasztja a tiszta koppintást egy bosszantó pillanattól.

A hüvelykujj-zóna: ahol a kéz nehezen ér el

A legtöbb ember egy kézzel tartja a telefont, és a hüvelykujjával navigál. Ez azt jelenti, hogy a képernyő egyes területei könnyen elérhetők, míg mások — különösen a kézzel átellenes felső sarok — kényelmetlenül át kell fogni a telefont.

Mit jelent ez az oldalad számára:

• A fő műveleteket (hívás, üzenet, foglalás, kosárba tétel) tedd alulra és elérhető helyre, ne rejtsd el fent egy sarokban.
• Egy rögzített alsó sáv egyetlen egyértelmű műveleti gombbal sokkal jobban működik, mint egy gomb, amely elveszik a fejlécben.
• Ne temesd el a telefonszámot vagy a WhatsApp gombot egy menübe, amelyet a felhasználónak előbb ki kell nyitnia.

A legjobb teszt a valódi: vedd fel a telefonod egy kézzel, tartsd normálisan, és próbáld megtenni, amit egy vásárló tenne. Ha szükséged van a második kezedre, valami rosszul van elhelyezve.

Hogyan ellenőrizd magad öt perc alatt

Nincs szükséged drága eszközökre a probléma felderítéséhez:

• Nyisd meg az oldalt a valódi telefonodon, ne csak a számítógépeden. A böngésző emulátora hazudik arról, milyen érzés egy koppintás.
• Próbálj ki minden fontos műveletet a hüvelykujjaddal, egy kézzel tartva a telefont.
• Add oda az oldalt egy idősebb embernek vagy valakinek, akinek nagyobb az ujja, és figyeld, hol téveszt. Ez a létező legőszintébb teszt.
• Vedd észre, ha valaha elsőre rosszul koppintasz vagy kétszer koppintasz — az az a gomb, amit javítani kell.

Az MPO Web Studio-nál, amikor egy oldalt építünk, valódi telefonon teszteljük, mielőtt átadnánk, éppen azért, hogy soha ne kapj ilyen visszajelzést. Akár egy ingyenes demót is elkészíthetünk a te vállalkozásodra szabva, hogy megérezd, hogyan működik telefonon, mielőtt bármit is fizetnél. Ha egy második véleményt szeretnél a jelenlegi oldaladról, írj nekünk WhatsApp-on, és őszintén megmondjuk, mely gombok túl kicsik — anélkül, hogy olyasmit adnánk el, amire nincs szükséged.