Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2017-03-300 komment

Mi az a mega menü? És mikor működik hatékonyan?

A mega menük vagy óriásmenük olyan kibontható menük, melyek számtalan lehetőséget kínálnak egy kétdimenziós, lenyíló elrendezésben. Alkalmasak arra, hogy ha viszonylag sok opciót kínálunk az embereknek, akkor mindegyik megjeleníthető legyen, és egy pillantással áttekinthetővé váljanak a weboldal alsóbb szintjei is.

Ráadásul mikor nagyméretű, úgynevezett mega menüt használsz navigációra, akkor az ott szereplő linkek megfelelő csoportosításával szükségtelenné tehető a felhasználók számára a görgetés – hívta fel a figyelmet elemzésében az Nielsen Norman Group.

A mega menük jellemzői

  • Nagyméretű, kétdimenziós panelek, melyeken csoportba rendezhetők a navigációs lehetőségek.
  • A navigációs lehetőségek elrendezését segíthetjük a tipográfiával és néha ikonokkal is.
  • Minden egyszerre átlátható rajtuk, nincs szükség görgetésre.
  • Felvehetnek függőleges vagy vízszintes formát a felső navigációs sávban történő aktiválás hatására.
  • Az egyes menüopciók akár hoverrel, akár kattintásra, illetve érintésre megjelenhetnek.

Egy óriásmenüben a képeknek is elegendő hely juthat, ami azért előnyös, mert segíthetnek a felhasználóknak a megfelelő lehetőség kiválasztásában. A mega menü révén megmutathatjuk, a weboldal információs architektúrájának több szintjét is.

john-lewis-mega-menu

Miért jobb a mega menü, mint a megszokott lenyíló menük?

A felhasználói tesztek azt mutatják, hogy a mega menük jól működnek. Ennek oka többek között:

  • A nagyobb weboldalaknál, ahol sok funkció közül választhatnak az emberek a sima lenyílók általában ezek nagy részét nem mutatják meg. Persze, lehet ilyenkor scrollozni, de az egyrészt cselekvést igényel a felhasználótól, másrészt ilyenkor eltűnnek a fent elérhető lehetőségek. Ez egyben azt is jelenti, hogy a felhasználóknak a rövid távú memóriájukra kell hagyatkozniuk. Aminek pedig az az eredménye, hogy romlik az esélye a kitűzött feladat végrehajtásának a weboldalon.
  • A hagyományos lenyíló menüknél nem lehetséges a csoportosítás, hacsak nem valamilyen trükk segítségével, például úgy, hogy a másodlagos lehetőségek elé egy space kerül, vagyis behúzással jelennek meg. A mega menüknél ezzel szemben sokkal egyszerűbben kihangsúlyozható a kapcsolat bizonyos elemek között, ami segíti az embereket a választási lehetőségek megértésében.
  • Ráadásul a sima menüknél nincsenek képek, míg a mega menüknél ezek is bevethetők, ha segítik az üzenet átadását. De ha maradunk is a szöveges megoldásnál, akkor is használható egy gazdagabb tipográfia, melynek segítségével az egyes linkek fontossága is megmutatható.
Képek a Moleskine mega menüjében

Képek a Moleskine mega menüjében

Időzítés a mega menüknél hover használata esetén

Amennyiben a mega menü hover használatával jelenik meg, akkor a kihívás az, hogy megkülönböztessünk kétféle felhasználó szándékot:

  • Az egyiknél a felhasználó egy cél felé tartva csak átvezeti azon a linken az egérmutatót, mely aktiválja a mega menüt.
  • A másiknál a felhasználó a navigációs kategóriákat keresi, és információt akar beszerezni róluk.

Világos, hogy a második lehetőség esetében kell csak megjelennie a menünek a kijelzőn. Ennek érdekében érdemes beállítani egy időintervallumot, amíg az egérmutatónak az óriásmenü linkjén kell elhelyezkednie, hogy az aktiválódjon. Az NNG javaslata szerint fél másodpercig kellene mozdulatlannak lennie az egérmutatónak a mega menü linkjén. Amennyiben ennél rövidebb az időtartam, akkor zavaró villódzásnak tűnhet a kijelzőn a menü megjelenése. Csak fél másodperc eltelte után feltételezhetjük nagy valószínűséggel azt, hogy a felhasználó a menüt szeretné látni.

Vagyis az időzítés így néz ki:

  • Várj fél másodpercet!
  • Ha a mutató még mindig a linken van, akkor jelenítsd meg a menüt 0,1 másodpercen belül!
  • És egészen addig legyen látható, amíg fél másodperce el nem hagyja a linket és magát a menüt az egérmutató. Akkor 0,1 másodpercen belül el kell tűnnie.

Egyetlen kivétel lehet csak a hármas pontnál. Adott esetben míg a navigációs sávról halad a menü egy eleme felé az egérmutató, több mint fél másodpercre elhagyhatja a meghatározott területet, holott a felhasználó szándéka egyértelmű. Ilyenkor a menünek nem szabad eltűnnie.

(Forrás: NNG)

(Forrás: NNG)

Az elemek csoportosítása a mega menüben

  • Az egy csoportba tartozó elemeknek kapcsolódniuk kell egymáshoz a felhasználók szemszögéből nézve.
  • Ne alakíts ki túlságosan nagy csoportokat, rendkívül nagy számú opcióval, mert annak áttekintése sok időt vesz igénybe. Ugyanakkor a túl kisméretű csoportok sem megfelelők, mert így túl sok lehet belőlük a menüben, és a felhasználónak a nagy mennyiséget nehezebb feldolgozni.
  • Használj tömör, a lényeget leíró címkéket a csoportok megnevezésénél. Felejtsd el az egyedi szövegeket, használd a legegyszerűbb, konvencionális megoldásokat.
  • Tedd valamilyen sorrendbe a kialakított csoportokat. Ez történhet egyfajta belső rend vagy a fontosság alapján. Ezáltal a legfontosabb vagy a leggyakrabban használt elemeket tartalmazó csoport kerülhet az első helyre, a bal felső sarokba.
  • Minden lehetőséget csak egyszer jeleníts meg! Egy duplikált megjelenítést látva gondolkodóba esnek az emberek, hogy mi lehet ennek az oka, netán van valami különbség a kettő között? Ráadásul az ismétlések miatt csak még nagyobbá válik a felület.

Maradjon egyszerű az óriásmenü

A webdesignban sokat hangoztatott egyszerűségre törekvés természetesen a mega menük esetében is fontos. Csak azért mert egy nagyméretű menübe szinte bármit el lehet helyezni, még nem jelenti azt, hogy muszáj telezsúfolni. A kevesebb lehetőség esetében a felhasználóknak kevesebb opciót kell átfutniuk, kevesebbet kell megérteniük, és kisebb az esély a hibázásra.

Maradjunk a kattintások használatánál, ennél bonyolultabb interakciós megoldásoknak itt nincs helye. Ugyanígy a keresőmezőnek sem itt kellene megjelennie, hanem folyamatosan láthatónak kell lennie a weboldalon.

Hozzáférhetőség

A dinamikus elemek alkalmazásánál mindig felmerülhetnek hozzáférhetőségi problémák. Ezért fontos, hogy a képernyőfelolvasók használatát is szem előtt tartsuk a kialakításuknál. Egy mega menü még akkor is problémát fog okozni azok számára, akik rosszul látnak és kijelzőnagyítót használnak, ha megfelelően van megírva a kódja. Ugyanez a probléma okostelefonok és tabletek esetében is felmerül.

Ennek oka, hogy a mega menünek egyszerre csak egy részlete látszik ilyenkor. A felhasználók pedig azt hiszik, hogy csak azt tartalmazza a menü, amennyit látnak belőle. Ennek akár jelentős hatása is lehet a megrendelésekre, ha több ilyen ügyfele is van a weboldalnak, például, ha idősebb felhasználókat céloz. A megoldás az lehet, hogy világosan kell jelölni a menü határait.

További problémát jelentenek a kisméretű opciók, melyek kiválasztásánál hibák jelentkezhetnek érintőkijelzők használatánál. A hozzáférhetőség alapvetően két módon javítható a mega menüknél:

  • Egyszerű megoldás: nem a lenyílót kell önmagában hozzáférhetővé tenni, hanem minden felső szintű menüpont legyen kattintható, és vezessen egy sima weboldalra, ahol megjelenhetnek a menüben lévő további opciók egy egyszerű, teljes mértékben hozzáférhető HTML-ben.
  • Bonyolultabb megoldás: jQuery plugin használatával, mely hozzáférhetővé teszi a menüt a képernyőolvasók számára. Ilyenkor strukturális változtatásokra van szükség a HTML és a CSS kódban is.

Ha megengedheted magadnak, vagy ügyfeleid jelentős része miatt fontos a hozzáférhetőség biztosítása, akkor a legjobb, ha mind az egyszerű, mind a nehezebb megoldást használod. A legtöbb weboldal esetében azonban az első megoldás is elegendő.

Összességében tehát elmondható, hogy a mega menük javítják a weboldalad navigálhatóságát. Persze a legjobb megoldás, ha teszteled is, hogy valóban így van-e. Ha segítesz az embereknek abban, hogy több dolgot megtaláljanak a weboldaladon, akkor ők segítenek neked abban, hogy több dolgot tudjál eladni rajta.

Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.