Breadcrumb navigáció
A breadcrumb vagy morzsanavigáció a jelenlegi oldal helyét mutatja egy hierarchikus struktúrában, és gyors visszautat ad a magasabb szintekre.
Röviden
A breadcrumb vagy morzsanavigáció a jelenlegi oldal helyét mutatja egy hierarchikus struktúrában, és gyors visszautat ad a magasabb szintekre.
Vizuálisan
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
Csak egy vissza nyíl jelenik meg
←
Vissza
A felhasználó vissza tud lépni, de nem látja, hol helyezkedik el az aktuális oldal a teljes struktúrában.
✓
HELYES IRÁNY
A teljes releváns útvonal látható
Academy
/
UI & UX
/
Breadcrumb
A breadcrumb egyszerre mutatja a helyzetet és ad gyors utat a magasabb szintekhez.
Mit jelent a breadcrumb navigáció?
A breadcrumb vagy morzsanavigáció a jelenlegi oldal helyét mutatja egy hierarchikus struktúrában, és gyors visszautat ad a magasabb szintekre.
Különösen mély tartalmi vagy e-kereskedelmi struktúrában segít megérteni a kontextust. Nem helyettesíti a fő navigációt, hanem kiegészíti.
A legfontosabb alapelvek
- A hierarchiát tükrözze, ne a böngészési előzményt.
- A szintek legyenek kattinthatók, ahol értelmes.
- A jelenlegi oldal lehet nem kattintható utolsó elem.
- Ne legyen túl vizuálisan hangsúlyos.
Gyakorlati példa
Academy / UI & UX / Navigáció / Breadcrumbs jól mutatja, mely témakörben jár a felhasználó, és egy kattintással visszaléphet a nagyobb gyűjtőoldalakra.
Hierarchikus útvonal jelzése
Academy
/
UI & UX
/
Breadcrumbs
Gyakori hibák
- Minden oldalra breadcrumbot erőltetni.
- Véletlen URL-szegmenseket címkének használni.
- A breadcrumbot primary nav helyett használni.
Hogyan alkalmazd a saját felületeden?
Ne izolált szabályként kezeld a témát. A breadcrumb navigáció 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á.
Hogyan mérd a megtalálhatóságot?
Adj olyan feladatot, amelynek megoldásához a felhasználónak meg kell találnia egy oldalt vagy funkciót. Ne mondd meg a menüpont nevét. Figyeld meg, melyik kategóriát választja elsőre, visszalép-e, használ-e keresést, és mely címkék okoznak bizonytalanságot.
A navigációs probléma sokszor nem vizuális. Ha az emberek következetesen rossz kategóriába mennek, lehet, hogy az információs architektúra vagy a megnevezés hibás. Ilyenkor egy nagyobb ikon vagy látványosabb dropdown nem oldja meg a valódi okot.
- első próbálkozásra jó irányba indulnak-e
- érthető-e az aktuális hely és visszaút
- a címkékből előre megjósolható-e a céloldal tartalma
Gyakori kérdések
Miért fontos a breadcrumb navigáció?
Különösen mély tartalmi vagy e-kereskedelmi struktúrában segít megérteni a kontextust. Nem helyettesíti a fő navigációt, hanem kiegészíti.
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.