A megamenü nagy mennyiségű, több szintre tagolt tartalmat jelenít meg áttekinthetően: egyetlen hosszú lista helyett csoportokba, oszlopokba vagy tartalmi blokkokba rendezi a navigációs elemeket.
A megamenü önmagában nem teszi átláthatóvá a nem megfelelően felépített tartalmat, ezért a navigációs minta kiválasztása előtt érdemes rendezni a tartalmi struktúrát:
- azonosítani a fő kategóriákat,
- csoportosítani az összetartozó tartalmakat,
- megvizsgálni a navigáció mélységét, és
- megszüntetni a felesleges szinteket.
Ezután könnyebb eldönteni, hogy valóban megamenüre van-e szükség, vagy esetleg elegendő egy egyszerűbb navigációs minta is.
Mikor használjunk megamenüt? Ha a tartalom mennyisége és szerkezete indokolja, és a mögötte lévő információs architektúra már jól felépített. A megamenü használata indokolt lehet, ha:
- sok főkategória található a rendszerben,
- a főkategóriák alatt sok (jellemzően 6-nál több) link vagy tartalmi csoport van,
- a tartalmak logikus csoportokba rendezhetők,
- több útvonalon is el lehet jutni ugyanahhoz a tartalomhoz,
- áttekintésre lehet szükség a navigáció előtt.
Nem javasolt megamenüt használni:
- kevés kategória vagy sekély hierarchia esetén (ilyenkor a legördülő vagy a lapos navigáció jobb választás),
- ha a tartalmak nem rendezhetők egyértelmű csoportokba,
- ha a kategóriák elvontak vagy átfednek (ilyenkor a lépésenkénti, köztes oldalas navigáció áttekinthetőbb),
- ha a linkek száma annyira magas, hogy a felhasználók a keresőt választanák helyette.
A navigációs hierarchia azt mutatja meg, hogyan kapcsolódnak egymáshoz a navigáció különböző szintjei. A hierarchiának mindig az oldal információs architektúráját kell követnie. A megamenü ennek a vizuális megjelenítése, nem önálló struktúra, ezért szinkronban kell lennie minden olyan elemmel, ami ugyanezt a struktúrát tükrözi (pl. breadcrumb).
- 1. szint – főkategória: a fejlécben főmenüpontként megjelenő legfelső tartalmi szint (pl. Ügyintézés, Életesemények, Tudnivalók stb.)
- 2. szint – kategória: a főkategóriákon belüli első tartalmi bontás (pl. Okmányok, Egészségügy, Mobilitás stb.)
- 3. szint – céloldal: a kategóriákon belül elérhető konkrét navigációs elemek (pl. Személyi igazolvány, Útlevél, Vezetői engedély stb.)
- 4. szint – mély tartalom: a céloldalhoz kapcsolódó további aloldalak vagy részletes tartalmak
Desktopon legfeljebb 3 navigációs szint megjelenítése javasolt. A mélyebb struktúrák nem áttekinthetők, növelik a döntési terhet, és érintőképernyőn is nehezebben használhatók. Ha a tartalom 4 vagy több szintet igényel, a mélyebb szintek megjelenítéséhez használjunk inkább gyűjtőoldalt, „Összes megtekintése” linket, keresőt vagy mobilon többszintű drilldown navigációt.
1. Felső sáv
A tartalmi navigációtól független funkciókat tartalmazhat, pl. nyelvválasztás, bejelentkezés vagy fiókkezelés, hivatalos jelzések, akadálymentességi beállítások, kisebb jelentőségű globális hivatkozások.
2. Fejléc
A mindig látható fejléc jellemzően a logót, a főmenüpontokat, az elsődleges műveletet, a globális műveleteket (pl. keresés), valamit a kiemelt műveleteket vagy hivatkozásokat tartalmazza.
3. Navigációs panel
A lenyíló panel a kiválasztott főmenüponthoz tartozó tartalmat jeleníti meg, jellemzően:
- kategóriacímeket,
- oszlopokba rendezett linklistákat, valamint
- „Összes megtekintése” linket, ha az adott kategóriához gyűjtőoldal tartozik.
Szükség esetén kiemelt szolgáltatásokkal, cselekvésre ösztönző blokkokkal, útmutatókkal vagy segítő tartalmakkal egészíthető ki.
A panel felépítése főmenüpontonként eltérhet. Az oszlopok számát és az opcionális elemeket mindig az adott tartalomhoz igazítsuk, és csak olyan elemeket használjunk, amelyek segítik a tájékozódást, és nem vonják el a figyelmet az elsődleges navigációról.
A megamenü a következő komponensekből állítható össze:
- Logo: a fejlécben jelenik meg, és a főoldalra vezet
- Button: globális műveletekhez, pl. kereséshez vagy nyelvválasztáshoz
- Link: az elsődleges műveletek, illetve a menüpontok alapeleme
- Media card (opcionális): kiemelt tartalom képpel vagy ikonnal, a panel elkülönített sávjában
- Callout (opcionális): rövid tájékoztató vagy figyelemfelhívó blokk a panelen belül
Desktop nézetben a megamenü a fejléc alatt megjelenő teljes szélességű navigációs réteg, nem lebegő kártya és nem is hagyományos dropdown lista. Jellemzői:
- oszlopos elrendezés
- csoportcímek
- navigációs linkek
- opcionális kiemelt blokk vagy CTA
Mobilon a megamenü drilldown navigációvá alakul, ami kevésbé terheli a képernyőt és a felhasználó figyelmét. Jellemzői:
- egyszerre egy szintet jelenít meg
- minden szinten található egy Vissza gomb
- a mélyebb szintek külön nézetben jelennek meg
- a felhasználó lépésenként halad előre
A megamenü nyitása és zárása minden főmenüpont esetén ugyanúgy működik.
- A panel a főmenüpont aktiválásakor, kattintással vagy billentyűzettel nyílik meg.
- Rámutatás (hover) önmagában ne nyissa meg, hogy billentyűzettel és érintőképernyőn is használható legyen.
- Egyszerre csak egy panel lehet nyitva (másik főmenüpont megnyitásakor az előző panel bezárul).
- A panel az Esc billentyű megnyomásakor, a menün kívülre kattintva vagy akkor zárul be, amikor a fókusz a menün kívülre kerül.
- A nyitott panelhez tartozó főmenüpont vizuálisan egyértelműen különüljön el a többitől.
Ez a tartalom még nincs kész.
A felsorolt komponensekből pl. az alábbi navigációs megoldások állíthatók össze:
- Egyszerű navigáció: egyszintű vagy kevés tartalommal rendelkező rendszerek esetén elegendő lehet egy hagyományos menüt használni.
- Kategóriaalapú megamenü: a tartalom témák szerint oszlopokba rendezve jelenik meg.
- Életesemény-alapú megamenü: a tartalom felhasználói életesemények szerint szerveződik.
- Mobilon drilldown navigáció: a navigáció több egymásra épülő nézetből áll, egyszerre mindig csak az aktuális szint jelenik meg.
- A megamenü csak jól átgondolt információs architektúrára építve hatékony. Akkor használjuk, ha a tartalom mennyisége indokolja (jellemzően akkor, ha 6-nál több link vagy alcsoport található egy főkategória alatt).
- A navigációs hierarchiának az oldal információs architektúráját kell követnie. A megamenü ennek a vizuális megjelenítése, ezért szinkronban kell lennie minden olyan elemmel, ami ugyanezt a struktúrát tükrözi (pl. breadcrumb).
- Desktopon legfeljebb 3 navigációs szintet jelenítsünk meg, a mélyebb tartalomhoz gyűjtőoldalt, „Összes megtekintése” linket vagy keresőt használjunk.
- Mobilon a megamenü drilldown navigációvá alakul, ami nem kicsinyített desktop nézet, hanem eltérő interakciós modell.
- A panel felépítése tartalomfüggő, csak olyan opcionális elemeket adjunk hozzá, amelyek segítik a tájékozódást, és nem vonják el a figyelmet az elsődleges navigációról.
