bybence
Kapcsolat
bybence

Felfedezés

Eszközök

Academy

Blog

Hírek

Kapcsolat

Academy

UI & UX tananyag

ByBence Academy

UI & UX

54 anyag

UI/UX alapok

UI és UX különbségeMi az a UX design?Mi az a UI design?UsabilityMentális modell

Információs architektúra és navigáció

Információs architektúraNavigáció tervezés
Menü design
Breadcrumb navigációKeresés UXUser flow
Academy

/

UI & UX

/

Információs architektúra és navigáció

Menü design

A menü design a navigáció egyik konkrét megjelenési formája: azt szervezi, hogyan jelennek meg a választható útvonalak, milyen hierarchiában és milyen interakcióval.

2 perc olvasás

Frissítve: 2026. augusztus 30.

Balogh Bence

Röviden

A menü design a navigáció egyik konkrét megjelenési formája: azt szervezi, hogyan jelennek meg a választható útvonalak, milyen hierarchiában és milyen interakcióval.

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

Homályos és átfedő menüpontok

Megoldások

Lehetőségek

Funkciók

A „Megoldások”, „Lehetőségek” és „Funkciók” jellegű címkékből nem derül ki, pontosan mit talál a felhasználó kattintás után.

HELYES IRÁNY

Konkrét, kölcsönösen elkülönülő címkék

Weboldal készítés

SEO audit

Karbantartás

A menüpont neve ugyanazt a fogalmat használja, amit a céloldal és a felhasználó is.

Mit jelent a menü design?

A menü design a navigáció egyik konkrét megjelenési formája: azt szervezi, hogyan jelennek meg a választható útvonalak, milyen hierarchiában és milyen interakcióval.

A menü akkor jó, ha a felhasználó gyorsan megérti az opciókat anélkül, hogy minden elemet végigolvasna vagy rejtett gesztusokat tanulna meg.

A legfontosabb alapelvek

  • Rövid és megkülönböztethető címkék.
  • Következetes sorrend.
  • Megfelelő target size.
  • Dropdown csak valódi hierarchia esetén.

Gyakorlati példa

Ha öt fő oldalad van, egy közvetlen nav gyakran jobb, mint egy hamburger desktopon. Ha több tucat kategóriád van, megastruktúra vagy keresés is szükséges lehet.

Egyszerű menü jól elkülönülő opciókkal

brand

Munkák

Szolgáltatások

Árak

Kapcsolat

Gyakori hibák

  • Hamburger minden viewporton megszokásból.
  • Hover-only almenü.
  • Apró kattintható menüpontok.
  • A menüben marketingmondatok a navigációs címkék helyett.

Hogyan alkalmazd a saját felületeden?

Ne izolált szabályként kezeld a témát. A menü 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á.

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 menü design?

A menü akkor jó, ha a felhasználó gyorsan megérti az opciókat anélkül, hogy minden elemet végigolvasna vagy rejtett gesztusokat tanulna meg.

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.

W3C – Understanding Target Size (Minimum)

Előző

Navigáció tervezés

Következő

Breadcrumb navigáció

Ezen az oldalon

Mit jelent a menü design?A legfontosabb alapelvekGyakorlati példaGyakori hibákHogyan alkalmazd a saját felületeden?Hogyan mérd a megtalálhatóságot?