Webshark Blog

Az összetett információs architektúrájú weboldalakon a többszintes menük javíthatják a navigációt, ami jobb felhasználói élményt, így pedig több konverziót eredményez.

A felhasználói élmény fontos eleme a navigáció a weboldalakon. Ha az emberek nem tudják hogyan mozoghatnak a weboldalon és hol találják meg, amit keresnek, akkor az csalódást okoz számukra, így elhagyják a weboldalad.

Egy többszintes menü rosszul kivitelezve különösen nyomasztó lehet számukra, hiszen hirtelen nem is tudják, hogy hová kattintsanak a sok lehetőség közül. Egy többszintes menü kivitelezése ezért komoly figyelmet igényel, annál is inkább, mivel az eltérő kijelzőméretek még jobban megbonyolítják a dolgot.

Ugyanakkor vannak olyan ökölszabályok, melyekre lehet támaszkodni a többszintes menük kialakításánál, hogy javuló navigációt és megtalálhatóságot biztosítsanak a látogatók számára.

Elvek, melyek bármely kijelzőnél alkalmazhatók

Egy jó többszintes menü képes a felhasználókat gyorsan oda vezetni a weboldalon, ahová el akarnak jutni. Ezt az információk világos és intuitív megjelenítésével éri el.

Amennyiben többszintes menüben gondolkodsz, fontos, hogy soha ne használj két almenü-szintnél többet! Az ennél több szint már annyira bonyolult a felhasználók számára, hogy nem képesek értelmezni. A navigáció maradjon mindig a lehető leglaposabb, hogy javítsa a megtalálhatóságot és csökkentse a felhasználók kognitív terhelését.

Ha egy weboldal struktúrája túl mély, akkor helyi navigációs menüt érdemes alkalmazni a kapcsolódó weboldalaknál. A Zoho, mely meglehetősen összetett termékpalettát kínál a cégeknek, termékspecifikus helyi menüt alkalmaz minden termékoldalán, a főmenü alatt. Miközben a főmenü felsorolja a Zoho fő ajánlatait, addig a helyi menük a részletesebb információkhoz vezetik a látogatókat.

Egy másik fontos dolog, hogy az almenüket ikonnal jelezd! Tehát lássák a felhasználók azt, amikor almenüre számíthatnak valamely menüpontnál. A megszokott jelzés a lefelé fordított háromszög vagy lefelé mutató nyíl, mely az almenü megnyitásakor elfordulhat.

Oda kell figyelni az információk elrendezésére is: az információk hierarchiája összhangban legyen a felhasználók elvárásával. Tehát például, ha egy webáruházban a felhasználók a cipők menüpontra kattintanak, akkor nem árt tudni, hogy hasznosabb-e számukra, ha itt típus szerinti (félcipők, edzőcipők, bakancsok, stb.) vagy márka szerinti elrendezést találnak. Ehhez kellhet a piackutatás vagy a konkurencia megoldásainak vizsgálata.

Fontos, hogy a felhasználók mindig tudják, hogy éppen hol járnak a weboldalon. Mindig emeld ki a főmenüben azt a linket, ahol éppen tartózkodik a felhasználó. Ha az adott oldal valahol egy almenüben található, akkor nem csak az almenüben lévő linket kell kiemelni, hanem a kapcsolódó főmenü elemet is.

Emellett persze a lehető legvilágosabban kell megfogalmazni a menüpontok szövegét. Sokszor mondtuk már, de a menü nem az a része a weboldalnak, ahol eredetieskedni kell. A felhasználóknak azonnal érteniük kell, mit takar egy menüpont, még azelőtt, hogy rákattintanának.

Speciális szabályok desktop oldalnál

Miközben a monitorokon megjelenő weboldalad menüjének összhangban kell lennie a mobilos weboldalad menüjével, vannak olyan szabályok, melyek előbbiek esetében érvényesek.

Ilyen az, hogy a menünek kattintásra kellene kinyílnia, nem pedig hoverrel. Habár utóbbi is népszerű, az almenü kattintással való megnyitása egy sokkal megbízhatóbb és intuitívabb megoldás. Már csak azért is, mivel következetesebb használatot tesz lehetővé a számítógépek és az érintőképernyők esetében.

Ráadásul elkerülhető vele a hover miatti felhasználói frusztráció, ami megjelenhet a véletlenszerű megnyitás, illetve a hover-alagút miatt, amely ha túl szűkre sikerül, akkor a menü azelőtt becsukódhat a felhasználó számára, hogy elérné a megcélzott linket.

De felmerülhet olyan probléma is hover esetén, hogy nem egyértelmű a felhasználó számára, hogy mi kattintható. Ilyenkor ugyanis nem tudják, hogy a szülő link kattintható-e, amíg rá nem kattintanak.

Ugyanakkor a kattintásra nyíló menük esetében érdemes használni a hover állapotokat minden kattintható elemnél, mivel ez megerősíti a felhasználót abban, hogy a link aktív és kattintható. A kattintható terület színe megváltozhat, így jelezve a hover állapotot. A kattintható területnek és a hover-területnek persze azonosnak kell lennie.

Egyébként az almenü becsukásának is kattintásra kellene történnie: tehát, ha a felhasználó máshová kattint a weboldalon vagy megnyit egy másik almenüt, akkor az addig nyitva lévő almenü bezáródik. A felhasználók többsége számára ez a megoldás a legkézenfekvőbb.

Lényeges kérdés, hogy lenyíló vagy pedig mega menüt alkalmazzunk. Ha például a monitoron megjelenő weboldal hagyományos menü elrendezésű (tehát van egy vízszintes menüsáv a weboldal tetején), akkor két almenütípus közül választhatsz: az egyik az egyhasábos lenyíló, a másik a többhasábos lenyíló. Egészen nyolc linkig használható az egyhasábos megoldás, de ha már függőleges görgetésre lenne szükség a menü hossza miatt, akkor vagy át kell rendezni a dolgokat vagy mega menüt kell használni. A mega menüről a navigációs menü kialakításáról szóló bejegyzésünkben már írtunk részletesen, így itt erre nem térünk ki.

Végül monitoros megjelenésnél lehetővé kellene tenni a billentyűk segítségével történő navigációt is, hiszen nem mindenki szeret egeret használni. Ez azt jelenti, hogy minden link esetében kell lennie egy fókusz-állapotnak, így a felhasználó látja, hogy hol jár. Általában egy sötétebb keret jó jelzése a fókusz-állapotnak.

Speciális szabályok mobilkijelzőkhöz

A hagyományos menüelrendezés ritkán működik jól mobilkijelzőkön. Ha egyszerűen csak lekicsinyíted a menüt a kisebb kijelzőhöz igazítva, akkor nem fogják tudni elolvasni a menüpontokat a felhasználók. Ezért a főmenüt sokszor egyszerűsíteni kell. Ezt elrejtéssel érheted el, így a főmenü egyszerűbb lesz, és csak a legfontosabb linkeket tartalmazza.

Elrejtheted a teljes menüt is, ilyenkor hamburger ikont használhatsz, vagy egy könnyen elérhető lebegő gombot. Ha idősebb felhasználóknak szól a weboldalad, akkor hamburger ikon helyett egy “menü” feliratú doboz praktikusabb lehet. De ha bizonyos funkciókat kiemelnél, akkor azokat fülekként is megjelenítheted az oldal alsó vagy felső részén.

A menüt sokféleképpen megjelenítheted, használhatsz teljes szélességű elrendezést vagy akár egy oldalsávot sötétebb háttérrel. A menü legyen görgethető, hogy minden menüelemhez hozzáférjenek a felhasználók akár kisebb mobilokon is.

Fontos, hogy könnyen bezárható legyen a menü, így ha a felhasználók mellé kattintanak, akkor csukódjon be. De egy X gombot is érdemes lehet emellett használni. A hamburger ikonból X válhat, vagy egyszerűen csak a jobb felső sarokban elhelyezel egy X-et.

Érdemes kibontható szakaszokat használni az egyes almenükhöz, ami azt jelenti, hogy egyes menüpontok kinyithatók olyan formán, hogy a szülő-elem alatt nyílnak ki és egy eltérő színnel jelzik, hogy egy alárendelt szakaszról van szó. Tedd lehetővé, hogy a felhasználók egyszerre több almenüt is kibontva tartsanak. Az almenük meglétét lefelé mutató nyíllal vagy háromszögekkel jelezheted.

Ha egy megamenü vagy egy többszintes almenü bonyolítja a helyzetet, akkor érdemesebb az almenüt ráhelyezni a szülő menüre. Ilyenkor szükség van egy “Vissza” gombra is, mellyel visszaléphet a felhasználó a felsőbb szintre.

Ami még hasznos lehet, hogy míg asztali gépes megjelenésnél praktikus megoldás, ha a menüben jelezzük, hogy mely linken jár a felhasználó és melyik ennek a szülő linkje, addig mobilos megjelenésnél érdemes ennél tovább menni, és a menüre való kattintásnál automatikus kinyíló almenüt alkalmazni, és jelezni a linket, hogy a felhasználó egyből lássa, hol jár az oldalon.