Link design
A link navigációs célra szolgál: másik oldalra, nézetre vagy dokumentumrészre viszi a felhasználót. A gombbal szemben nem elsősorban műveletet hajt végre.
Röviden
A link navigációs célra szolgál: másik oldalra, nézetre vagy dokumentumrészre viszi a felhasználót. A gombbal szemben nem elsősorban műveletet hajt végre.
Vizuálisan
A linkből látszania kell, hogy hová vezet
Ugyanazt a helyzetet kétféleképp nézd meg: először a tipikus hibát, utána azt a megoldást, amelyik jobban támogatja a felhasználó feladatát.
×
GYAKORI HIBA
„Kattints ide” kontextus nélkül
További információért kattints ide.
A link szövege önmagában nem mond semmit a célról, és szkenneléskor vagy segítő technológiával különösen gyenge.
✓
HELYES IRÁNY
Beszédes anchor text
Olvasd el a canonical URL útmutatót.
A link neve önmagában is értelmezhető, és pontosan előre jelzi a céloldal témáját vagy a műveletet.
Mit jelent a link design?
A link navigációs célra szolgál: másik oldalra, nézetre vagy dokumentumrészre viszi a felhasználót. A gombbal szemben nem elsősorban műveletet hajt végre.
A link és gomb szerepének vizuális és szemantikai következetessége segít megjósolni, mi történik aktiváláskor, és támogatja a billentyűzetes valamint segítő technológiás használatot.
A legfontosabb alapelvek
- A link szövege írja le a célt.
- Legyen felismerhető linkként.
- Navigációhoz valódi anchor elemet használj.
- Focus állapot legyen látható.
Gyakorlati példa
A „SEO Analyzer megnyitása” beszédesebb anchor, mint a „kattints ide”. A felhasználó a környező mondat nélkül is érti a célját.
Beszédes link a szövegkörnyezetben
Beszédes anchor
→
Egyértelmű céloldal
Gyakori hibák
- div onClick navigációhoz.
- „Itt”, „tovább”, „kattints” anchorok.
- Csak hover alatt látható linkjelzés.
- Ugyanaz a stílus kattintható és nem kattintható szövegre.
Hogyan alkalmazd a saját felületeden?
Ne izolált szabályként kezeld a témát. A link design akkor működik jól, ha a felhasználó céljával, a tartalom fontossági sorrendjével és a teljes felület többi döntésével együtt vizsgálod.
Teszteld valós feladattal: adj a felhasználónak konkrét célt, figyeld meg, hol bizonytalanodik el, mit ért félre, és mely pontokon kell indokolatlanul gondolkodnia. A jó UI/UX döntés nem attól jó, hogy látványos, hanem attól, hogy kiszámíthatóbbá és könnyebbé teszi a feladat elvégzését.
A vizuális minőség és a használhatóság nem egymás ellenfelei. A jó felület mindkettőt ugyanannak a felhasználói célnak rendeli alá.
Mit figyelj használat közben?
Interaktív komponenseknél ne csak a nyugalmi állapotot ellenőrizd. Menj végig keyboarddal, kattints gyorsan kétszer, válts lassú hálózatra, idézz elő hibát, próbálj hiányos adatot beküldeni, és nézd meg, mit lát a felhasználó minden köztes állapotban.
Sok UX hiba nem a default képernyőn, hanem állapotváltáskor jelenik meg: eltűnik a bevitt adat, nincs loading visszajelzés, két submit indul, a hiba nem a megfelelő mezőnél látszik vagy a modal bezárása után elveszik a fókusz.
- minden akció kap-e azonnali visszajelzést
- hiba után megmarad-e a felhasználó munkája
- keyboard és touch használatnál is ugyanaz a funkció érhető-e el
Gyakori kérdések
Miért fontos a link design?
A link és gomb szerepének vizuális és szemantikai következetessége segít megjósolni, mi történik aktiváláskor, és támogatja a billentyűzetes valamint segítő technológiás használatot.
Mikor érdemes tesztelni?
Már korai wireframe vagy prototípus szinten is. Minél később derül ki egy alapvető használhatósági probléma, annál drágább lehet a javítása.
Források és további olvasnivaló
Az accessibility és usability állításoknál elsődleges szabványokra és bevett szakmai forrásokra támaszkodj; a konkrét interface-döntéseket pedig mindig a saját felhasználói kontextusodban teszteld.