Kattinthatóság a felületeken: jelek és tervezési elvek

Mi a kattinthatóság

Kattinthatóság — az a mérték, ahogy egy felületi elem vizuálisan jelzi a felhasználónak az interakció lehetőségét. UX terminológiában ez az affordancia (affordance) fogalmának része, amelyet James Gibson pszichológus vezetett be.

Don Norman tervező népszerűsítette az affordancia koncepcióját a felületek kontextusában. „The Design of Everyday Things“ (A hétköznapi dolgok tervezése, 2013) című könyvében leírta, hogyan kell egy tárgy formájának és megjelenésének sugallnia a használat módját. A gombnak gombnak kell kinéznie — ez a kattinthatóság affordanciája.

A UX Collective (2025) adatai szerint a felhasználók 34%-a nem kattint egy elemre, ha az nem tűnik kattinthatónak, még akkor sem, ha technikailag a kattintás feldolgozásra kerül. Ez hangsúlyozza a vizuális visszajelzés fontosságát a felületen.

Antiminta: nem kattintható gombok

Aláhúzás nélküli szöveg, kiemelés nélküli lapos ikonok, pointer kurzor nélküli szürke elemek — klasszikus antiminták, amikor az elem interaktív, de nem annak látszik. A felhasználó időt veszít a kattintható zónák keresésével, ami rontja az UX-et.

A kattinthatóság vizuális affordanciái

Vizuális affordanciák — külső jelek, amelyek interaktivitást jeleznek. Több kategóriába sorolhatók: forma, szín, árnyék, textúra és animáció.

Az emberek evolúciósan hozzászoktak, hogy bizonyos vizuális tulajdonságokkal rendelkező tárgyakat meg lehet érinteni vagy mozgatni. A tervezők ezeket a veleszületett észlelési mintákat használják intuitív felületek létrehozásához.

Legerősebb affordancia — árnyék (kiemelkedés hatása). A Google Material Designja fizikai rétegek metaforájára épül, ahol minden interaktív elemnek saját magassága (elevation) van. A felhasználók intuitívan megértik, hogy az árnyékos kártyára kattinthatnak.

Az interaktív elemek állapotai

Minden kattintható elemnek legalább négy állapottal kell rendelkeznie: normal, hover, active, disabled. Az állapotok közötti vizuális különbségek segítik a felhasználót a jelenlegi helyzet megértésében.

/* 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;
}

Normal állapot — az elem alap megjelenése nyugalmi állapotban. Hover állapot — reakció a kurzor fölévitelére, megerősíti, hogy az elem kész az interakcióra. Active állapot — a kattintás pillanata, tapintási visszajelzést ad. Disabled állapot — az elem inaktív, vizuálisan elhalványított.

A Google Material Design Guide (2024) szerint az érintőképernyős eszközök minimális kattintási területe — 48x48 dp, optimális — 56x56 dp. A kisebb méret csökkenti a kattinthatóságot mobileszközökön.

Kurzor mint a kattinthatóság jelzője

Kurzorváltoztatás — az egyik legrégebbi és leghatékonyabb módja a kattinthatóság jelzésének. A CSS cursor: pointer tulajdonság a nyilat mutató kézzé alakítja, jelezve, hogy az elem interaktív.

/* 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 */
}

Mutatóujj szabály: a cursor: pointer-t minden kattintható elemen használni kell — gombokon, linkeken, kapcsolókon, ikonokon. A nem interaktív elemeken a kurzornak standard nyílnak kell maradnia (cursor: default).

Használati hibák: a cursor: pointer szokásos szövegen félrevezeti a felhasználókat. Ne használjon pointer kurzort olyan elemeken, amelyek nem dolgoznak fel kattintást — ez tönkreteszi a felületbe vetett bizalmat.

Fitts törvénye a gombtervezésben

Fitts törvénye — ergonómiai törvény, amely leírja a cél eléréséhez szükséges időt. A felületek kontextusában: minél nagyobb és közelebb van a cél (gomb), annál gyorsabban éri el a felhasználó.

Fitts törvényének képlete: T = a + b * log2(D / W + 1), ahol T — elérési idő, D — távolság a célig, W — cél mérete. A gomb méretének kétszeresére növelése 15–20%-kal csökkenti a kattintási időt.

Az Apple Human Interface Guidelines (2024) szerint az érintési cél minimális mérete — 44x44 pont. A Google Material Design 48x48 dp-t ajánl. A gyakorlatban a CTA-gomboknak legalább 56x56 dp-nek kell lenniük a kényelmes interakcióhoz.

Képernyősarkok — végtelen célok

A képernyő sarkai és szélei Fitts törvénye szerint végtelen célok — a kurzor nem tévesztheti el a képernyő határát. Ezért a fontos gombok (menü, bezárás) gyakran a sarkokban helyezkednek el. Mobilos felületeken a hüvelykujjak természetesen a képernyő alsó része felé nyúlnak.

Kattintható elemek mintái

Stabil minták a kattinthatóság évtizedek alatt alakult ki a webdesignban. Használatuk intuitívvá teszi a felületet anélkül, hogy a felhasználót ki kellene képezni.

Árnyékos gomb minta — a Material Design szabványa. A gomb felemelkedik a felület fölé, az árnyék nő hover hatására, és eltűnik kattintáskor. Ezt a mintát milliónyi alkalmazás és webhely használja.

Lapos gomb minta — az iOS 7 frissítése után a lapos, árnyék nélküli dizájn vált népszerűvé. Az ilyen gombokban a kattinthatóság színen, kereten vagy ikonon keresztül közvetítődik. A lapos gombok világosabb színkiemeléseket igényelnek.

Ghost-gomb minta — átlátszó gomb kerettel, amely hover hatására megtelik színnel. Másodlagos műveletekhez használják a fő CTA mellett.

• Platformkonvenciók követése — az iOS, Android és a web saját kattinthatósági szabványokkal rendelkezik
• Konzisztencia — ugyanazok az elemek mindenhol ugyanúgy néznek ki
• Visszajelzés — minden kattintásnak azonnali reakciót kell kiváltania
• Akadálymentesítés — a kattinthatóságnak a képernyőolvasó használatakor is érthetőnek kell lennie