Webshark Blog

Akár weboldalakról, akár alkalmazásokról van szó, az embereknek a navigációs menü segít abban, hogy megtaláljanak tartalmakat vagy funkciókat. Ehhez viszont szükség van egy hatékonyan működő menüre. (Frissítés, 2023.05.16. – Egy új fejezettel bővítettünk: Hogyan alakíts ki többszintes menüt a weboldaladon?)

Kezdjük ott, hogy mi is az a navigációs menü? A navigációs menü a tartalmi kategóriáidnak vagy funkcióknak egy olyan listája, mely linkekként, esetleg ikonként jelenik meg egy csoportban és vizuálisan elkülönül a weboldal többi részétől.

Minden weboldal készítése során az egyik legfontosabb feladat a felhasználók megfelelő navigálása. Hiába van a weboldaladon remek tartalom, vagy rendkívül jól használható funkciók, ha az emberek azokat nem találják meg. És még ha van is keresési funkció a weboldaladon, nem támaszkodhatsz teljes mértékben a keresésre, mint navigációs eszközre.

A menük olyannyira fontosak, hogy néhány kivételtől eltekintve minden weboldalon megtalálhatod őket. Ugyanakkor persze nem minden menü egyformán jól használható. Habár egyszerűnek tűnik a dolog, sok esetben találkozhatunk olyan menükkel, melyek használatával csak szenvednek az emberek, mert összezavarja őket vagy egyszerűen csak nehéz megtalálni.

A navigációs menü alapos átgondolása – még a tervezési szakaszban – igen fontos része egy weboldal designjának. Ilyenkor nem csak azt kell megfontolni, hogy milyen linkeket helyezünk bele, hanem azt is, hogy azokat milyen formában tálaljuk, ki akarunk-e fejezni a sorrenden túl valamiféle hierarchiát a linkek csoportosításával, vagy minimalizmusra törekszünk, esetleg vannak-e olyan tartalmaink, melyekre külön fel akarjuk hívni a navigáció során az emberek figyelmét. És aztán ezeknek a szempontoknak megfelelően alakítjuk ki a menünket.

A hatékony navigációs menü tervezésének három szabálya

A navigáció megtervezése egy weboldalnál olyan, mint egy ház alapjának a megépítése. Ha hibázunk az alapoknál, akár össze is omolhat a ház. És teljesen mindegy, hogy egyébként milyen szép volt. Ugyanígy a weboldalunk sem lesz működőképes, ha rossz a navigáció. Időt kell tehát szakítani arra, hogy megtervezzük, hogyan fognak a felhasználók kapcsolatba kerülni a tartalmainkkal, és alaposan végig kell gondolni, hogy miként tudjuk a leghatékonyabban elrendezni és prezentálni azt számukra. Ha ezt elrontjuk, akkor a látogatók egy nagy részét elveszítjük.

A navigáció megtervezése olyan, mint minden más területe a webdesignnak: nincs egy általánosan elfogadott helyes út, amit mindenkinek követnie kell. Minden weboldalnak megvannak a maga kihívásai, melyek többféle módon is megoldhatók. Ugyanakkor vannak olyan módszerek a tartalom elrendezésére, melyek révén minimalizálhatjuk a hiba lehetőségét.

1. Kezdd az információs architektúrával!

Egy weboldal tartalmának a megtervezése mindig megelőzi a navigációét. Az információs architektúra, azaz a tartalom felépítésével alakítjuk a weboldalunk használhatóságát. Amikor a tartalom felépítésén dolgozunk, akkor sokat segít, ha képesek vagyunk áttekinteni az egészet, de még ennél is fontosabb, hogy a felhasználók szemszögéből lássuk a tartalmat. Utóbbi pedig nem feltétlenül egyezik meg a weboldaltulajdonos elképzeléseivel.

Néhány kérdés, amit fel kell tenni magunknak a tervezés során:

• Milyen aloldalakra van szükség a weboldalon?
• A teljes rendszeren belül minden aloldalnak megvan a szerepe, és a tartalmat értelmes részekre tudjuk bontani?
• Mi az, amit figyelembe kell venni a később hozzáadott tartalmak kapcsán?
• Milyen felhasználói csoportokkal dolgozol?
• Mi az elsődleges célja az egyes felhasználói csoportoknak?

Ezeknek a kérdéseknek a megválaszolása, valamint annak megértése, hogy miként viszonyul a tartalmunk a felhasználókhoz, az alapját jelenti a jó navigációs menünek.

2. Legyen egyszerű

Bárki, aki használt már valaha weboldalt, az valószínűleg egyetért azzal a kijelentéssel, hogy a navigációnak a lehető legegyszerűbbnek kellene lennie. Nem túl szerencsés túlterhelni a felhasználót a lehetőségek tömegével, és a navigációs menüt telezsúfolni szövegekkel. Ezen az egész oldal használhatósága múlik.

Az egyszerűség egyébként megtévesztő lehet. Sokszor, ha mélyebbre ásunk, kiderül, hogy egy egyszerűnek látszó szerkezet rendkívül összetett tud lenni. Ez az amikor az információs architektúra működik.

3. Válaszd meg a tájolást!

Ha a számítógépek monitorait tekintjük, akkor egy horizontális elrendezés logikus választásnak tűnik. Általában a kiegyensúlyozottság érzetét kelti, kevésbé tolakodó, és tervezési szempontból könnyebben elhelyezhető a weboldalon.

Ugyanakkor egy horizontális navigációs menü nem minden esetben használható, ezért találkozunk nagyon gyakran vertikális kialakításokkal webáruházaknál. Egy vízszintes menübe nem is feltétlenül lehet olykor belezsúfolni annyi tartalmat és szöveget, mint egy függőleges menübe. Persze, ha sok a termékünk, akkor egy vertikális menüvel sem lesz túl egyszerű a megoldás.

Mint minden dolog a weben, az új technikák, technológiák, eszközök és a trendek mindig új kihívásokat és új megoldásokat hoznak. Így aztán állandóan változik a navigáció kialakítása is. Ezért sem létezik egyetlen helyes út a tökéletes navigáció kialakítására. Viszont a tesztek, a statisztikák és a konverziós adatok vizsgálata mindig közelebb visz a legjobb megoldáshoz. Végül pedig elmondható, hogy tekintsünk úgy a navigációra, mint a weboldal motorjára, aminek kiszámíthatónak, egyszerűnek és következetesnek kell lennie.

Az alapvető kérdések, melyekre választ kell adnia a navigációnak

A felhasználók fejében a navigációval kapcsolatban általában négy kérdés merül fel.

Hogyan jutottam el ide?

Amikor az emberek új helyeket fedeznek fel, akkor jelezni kell számukra korábbi lépéseiket és döntéseiket. A felhasználóknak szükségük van arra, hogy lássák a megtett utat maguk mögött, hogy meg tudják fordítani a irányt, ha szükségesnek látják. A morzsamenü a legegyszerűbb példa erre.

Hol vagyok?

Ez az alapvető kérdés, amikor egy felhasználó valahonnan valahova tart. Annak szükségessége, hogy elhelyezzük magunkat valahol a térben és az időben alapvető fontosságú az ember számára. Egy aktív állapotú gomb egy menüben jó példa arra, hogy miként jelezhető vissza egy felhasználó aktuális pozíciója.

Hova mehetek?

Gondoskodni kell a felhasználók számára olyan jelekről, melyeket követhetnek az útjuk során. Ha elhelyeztük magunkat valahol a térben és az időben, akkor ez a kérdés teljesen természetesen merül fel. Egy almenü vagy egy navigációs panel a példa arra, hogy mivel, miként jelezhető az út.

Hogyan jutok el oda?

Néhány esetben plusz segítségre is szükség lehet a navigációhoz. A különböző jelzések a felhasználói felületen megmutatják hova mehetnek a felhasználók, és így kirajzolják azt az utat, melyet megtehetnek. Egy weboldalon, a tartalom részeként elhelyezett link is ilyen jelzés.

Mire figyelj a navigációs menü kialakításánál?

A Norman Nielsen Group – melynek szavaira mindenkinek érdemes figyelni, akinek köze van a webdesignhoz – az alábbi tanácsokat adja navigációs menü kialakítására:

Tedd láthatóvá!

Ne használj apró menüket vagy menüikonokat a nagy kijelzőkön! És ahogy a hamburger ikon kapcsán készített vizsgálatból már kiderült, nem kellene őket elrejteni sem, különösen akkor, ha rengeteg tér áll rendelkezésre egy desktop kijelzőn.

A megszokott helyre tedd a navigációs menüt!

A felhasználók ugyanis arra számítanak, hogy ott találják a a felhasználói felület egyes elemeit, ahol látták korábban más weboldalakon vagy appokban, vagyis a weboldal felső részén, illetve a bal oldalon. Használd ki tehát az elvárásaikat a saját előnyödre, azaz, hogy könnyebben tudják használni a weboldaladat!

Tedd interaktív megjelenésűvé a menüket!

A felhasználók ugyanis nem feltétlenül jönnek rá, hogy menüről van szó, ha nem látszik, hogy az elemei kattinthatók. A menük adott esetben csak dekoratív képnek tűnhetnek vagy a fejléc részének, ha túl sok grafikai elemet használsz a kialakításukkor, vagy esetleg túl szigorúan veszed a flat design elveit.

A menüdnek legyen kellő vizuális súlya!

Sok esetben a megszokott helyen megjelenő menük nem igényelnek nagyobb whitespace-t vagy eltérő színt, hogy észrevehetőek legyenek. Ha azonban a design kissé zsúfolt, és hiányzik a vizuális hangsúly, akkor elveszhetnek a sok grafika, hirdetés és cím között, melyek mind a felhasználó figyelméért harcolnak.

Kontrasztos színt használj a navigációs menü link-szövegénél!

Sok webdesigner nem veszi figyelembe a kontraszt kialakítására vonatkozó szabályokat. Pedig már anélkül is elég nehéz a digitális térben navigálni, hogy zavarná a szemünket egy rossz kontraszttal kialakított menü.

De még ha a designerek ismerik is az előbb felsorolt elveket, még mindig készíthetnek olyan menüt, melyet figyelmen kívül hagynak a felhasználók. Ennek oka, hogy mindenkinek nehéz megítélnie a saját munkáját, különösen olyan szubjektív dolgok esetén, amikor arról van szó, hogy valami jól látható-e vagy sem. Az nem elég, hogy Te tudod, hol van a menü, hiszen Te tetted oda. Ez az, amiért fontos lenne tesztelni a menüidet is a felhasználókkal.

Jelezd a felhasználóknak, hogy az, ahol éppen tartózkodnak, hol helyezkedik el a menüben!

Hol vagyok? – teszik fel a kérdést a felhasználók, és erre a kérdésre kell válaszolnod a hatékony navigációval. Az embereknek ebben olyan vizuális elemek segítenek, melyek a menüben vagy a morzsamenüben találhatók. A leggyakoribb hiba általában a menükkel az, hogy nem sikerül megmutatni a felhasználóknak, hogy éppen hol járnak. Pedig pont a menüknél lenne a legnagyobb szükség arra, hogy tájékoztassák az embereket, mivel sok esetben nem a főoldalról kezdenek navigálni.

Használj érthető linkcímkéket!

Derítsd ki, hogy mit keresnek a felhasználók és olyan kategóriacímkéket használj, melyek ismerősek és relevánsak számukra. Ne a menüdben legyél vicces vagy használj szakszavakat! Ragaszkodj azokhoz a kifejezésekhez, melyek pontosan leírják a tartalmad és a funkciót.

Legyenek könnyen áttekinthetők a címkék!

Ezzel csökkentheted azt az időt, amit a felhasználók a menük olvasásával töltenek.

Nagyobb weboldalaknál olyan menüket használj, melyek révén az alsóbb szintekre is betekinthetnek az emberek!

Ha a tipikus felhasználói út során az embereknek több szintet kell megtenniük, akkor a mega menük vagy a hagyományos lenyíló menük időt takarítanak meg nekik, hiszen ezzel egy vagy két szintet átugorhatnak.

Használj helyi menüt a kapcsolódó tartalmaknál!

Ha az emberek gyakran hasonlítanak össze termékeket vagy végeznek egyszerre több különböző tevékenységet, akkor ezeket az oldalakat érdemes láthatóvá tenni egy helyi navigációs menüben, ahelyett, hogy le-fel kellene rohangálniuk a hierarchiában.

Használd ki a vizuális kommunikáció lehetőségeit!

Képek, grafikák, színek segíthetik a felhasználókat a navigációs menü megértésében. Arról azonban győződj meg, hogy a képek segítik a felhasználókat a feladataik végrehajtásában, vagy legalábbis nem akadályozzák őket.

Legyenek elég nagyok a menü-linkek!

Ha a linkek túl kicsik vagy túl közel vannak egymáshoz, akkor az komoly kihívást jelenthet a mobilos felhasználóknak, de még a nagyméretű kijelzőn is feleslegesen nehézzé teszik a használatot.

A lenyílók ne legyen sem túl kicsik, sem túl nagyok

A hoverrel nyíló menük, melyek túl rövidek, frusztrálók lehetnek az emberek számára, ha könnyen eltűnnek, miközben éppen a kattintással próbálkoznak. De a túl hosszú lenyílók sem praktikusak, amikor még le is kell görgetnie a felhasználónak ahhoz, hogy elérje a lista alját. A túl széles lenyílókkal pedig az lehet a gond, hogy egy új oldalnak nézik a felhasználók, és nem értik, miért jelent meg, amikor nem is kattintottak még sehova.

Használj ragadós menüket a hosszú oldalakon!

Amikor a felhasználók elérnek egy hosszú oldal aljára, akkor sokat kell görgetniük azért, hogy visszatérjenek az oldal tetején található menühöz. Ha viszont a navigációs menü folyamatosan látható marad a kijelző felső részén, akkor ez nem gond a felhasználóknak, különösen kisebb kijelzőkön.

Könnyű hozzáférhetőség a gyakran használt elemekhez

Érdemes a menüben a leggyakrabban használt elemeket egymáshoz közel és a lenyíló menüt lenyító részhez közel elhelyezni, így a felhasználóknak nem kell túl nagy utat bejárniuk. Mostanában több mobilapp is elkezdett kör-menüket használni, melyek a menü-opciókat egymás közelében tartják.

Érdemes lenyűgöznöd a felhasználókat valamilyen eredeti és érdekes menü-megoldással?

Inkább nem. A cool effekteket ne a menüre tartogasd! Lehet, hogy lesznek olyan szakmabeliek, akiknek tetszenek a látványos megoldások, de a felhasználók inkább a jó tartalmat értékelik, melyet könnyen elérnek egy könnyen használható menüből.

Természetesen néha megjelennek olyan új típusú menük, melyek javítják a felhasználói élményt. Ilyen volt annak idején a mega-menü. Esetleg megjelennek olyan új technológiák, melyek még nem szerepelnek az itt felsorolt elvek között, gondoljunk csak a hangfelismerésre, melynél teljesen mindegy a menü vizuális megjelenése.

Frissítés, 2021.08.05.:

Mi az a háromkattintásos szabály? És van-e létjogosultsága?

Amikor navigációról van szó, gyakran merül fel az úgynevezett “háromkattintásos szabály”, azaz, hogy három kattintással célszerű lenne elérni egy weboldal bármely lapját. Az ennél mélyebb weboldalak már nem hatékonyak, azt nem látogatják meg a felhasználók – szól az elmélet.

A designerek gyakran alkalmazzák ezt a szabályt a weboldalak navigációjának kialakításakor, de még más típusú feladatoknál is érvényesnek tartják, így például egy űrlap kitöltése esetén.

A háromkattintásos szabály azt feltételezi, hogy a felhasználók inkább feladják céljuk elérését, ha azt három kattintás alatt nem tudják azt a célt elérni. A szabály tehát elsősorban az interakciós költségre mutat rá, ugyanakkor a hiba a túlzott leegyszerűsítésben rejlik. És ezt nem más, mint a Nielsen Norman Group állítja, mely egyébként szeret a hagyományokhoz és bevett webdesign-elvekhez ragaszkodni.

Mint mondják, a legnagyobb probléma a szabállyal az, hogy semmiféle eddig közzétett tanulmányban szereplő adat nem támasztja alá. Sőt, egy Joshua Porter által készített tanulmány még meg is cáfolja. A kutatás szerint ugyanis a felhasználók lemorzsolódása vagy elégedetlensége nem nő, amikor egy feladat elvégzéséhez háromnál több kattintásra van szükség.

Tehát, az interakciós költség csökkentése ugyan fontos dolog, azonban a valóság ennél bonyolultabb, és nem működnek az ilyen ökölszabályok. A kattintásszámlálás önmagában nem egy érvényes mérőszám, aminek több oka is van:

• Egy feladat elvégzéséhez szükséges kattintások száma nem csak a designtól, hanem a feladat bonyolultságától is függ. Így egyetlen szám nem lehet érvényes minden feladatra.
• Nem minden kattintás egyenlő: némelyiknek az eredményére sokat kell várni (például egy új oldal betöltése), míg mások szinte azonnaliak.
• A kattintások száma nem árul el mindent egy problémáról: nagyon sok olyan tényezője van még egy designnak, mely hatással van a használhatóságra. A való életben a felhasználók hibákat követnek el, félreértenek dolgokat, és összezavarodnak. Ha csak a kattintásokra figyelünk, akkor elveszíthetjük a lehetőséget arra, hogy egy kevésbé frusztráló élményt kínáljunk nekik.

A lényeg tehát, hogy a háromkattintásos szabályt nem lehet vakon alkalmazni egy weboldal információs architektúrájának és navigációjának megtervezésekor.

Honnan származik a háromkattintásos szabály?

A legkorábban közzétett hivatkozás Jeffrey Zeldman 2001-es könyvében, a Taking Your Talent to the Webben jelent meg, ahol már elterjedt szabályként hivatkozik rá a szerző. A könyv azonban nem erősíti meg semmilyen adattal a háromkattintásos szabály érvényességét, pusztán arra hivatkozik, hogy széleskörűen elfogadott elv. Vagyis pusztán feltételezés, amit a könyv állít, hogy ha a felhasználók nem érik el három kattintással, amit keresnek, akkor egy másik oldalon néznek inkább körül.

A háromkattintásos szabály alkalmazása

A leginkább a navigációs menük kialakításánál kezdték alkalmazni a designerek a háromkattintásos szabályt. Az elv az volt, hogy nem szabad a keresett információt többszintes mélységbe elhelyezni. Ez arra kényszerítette a tervezőket, hogy szélesebb információs architektúrát alakítsanak ki a mélyebb IA helyett.

Pedig nem csak a mély, hanem a széles információs architekúrának is megvannak a maga használhatósági problémái. Ha egy széles IA-t alkalmazunk, akkor sok felső szintű kategóriára van szükség, amit nehezebben látnak át a felhasználók, ráadásul sok helyet is foglal a felületből.

Ezzel szemben a nagyon mély weboldalak, ahol csak néhány legfelső szintű kategória található, ugyanakkor nagyon sok szint, vagy komoly kutatómunkát igényelnek a felhasználóktól, vagy pedig sok időt kell eltölteni a kategória céloldalak betöltésére.

A gyakorlatban ez azt jelenti, hogy a designereknek két UX-mítosz közül kell választani (melyek egyikét sem támasztják alá adatok): a kattintásszám semmilyen oldal esetén ne haladja meg a hármat, illetve ne legyen több hét darab fő kategóriánál. Pedig sok esetben mindkettő egyaránt rossz felhasználói élményt eredményezhet.

Mire figyelj kattintásszámlálás helyett?

A kattintásszámlálás egy túlzott leegyszerűsítés, amikor az interakciós költséget és a feladatvégzési hatékonyságot kell megbecsülni. Nem vesz figyelembe például olyan tényezőket, mint amikor a felhasználónak el kell olvasnia és meg kell értenie a lehetőségek egy hosszú listáját, vagy hogy ki kell találnia, adott pillanatban hol tartózkodik az oldalon, vagy amikor meg kell becsülnie, hogy mennyi munkára lesz még szüksége a feladata végrehajtásához. Pedig az ilyen tényezők vannak olyan fontosak, mint egy-egy kattintás.

Néhány fontos tényező a jó navigációnál:

• Menüelemek, melyek informatívak, könnyen érthetőek.
• Könnyű útkeresés, például morzsamenük vagy helyi alnavigáció segítségével, melyek megmutatják, hogy jelenleg hol állunk.
• A többszintes lenyíló menük elkerülése, és helyette inkább mega menük alkalmazása. Erről részletesebben a menükről szóló anyagunkban írunk.
• A legfontosabb információ-kereső feladatok azonosítása, és az ezeket kiszolgáló linkek elhelyezése a főoldalon vagy más fontos oldalakon.
• A sok lépésből álló utakon világos céloldalak vagy navigációs oldalak elhelyezése. (Ezek olyan céloldalak, melyek linkeket kínálnak, gyakran képekkel vagy más elemekkel kiegészítve, melyek megkönnyítik az azonos kategórián belüli testvéroldalak közti mozgást.)
• Végül az is fontos, hogy ha egy kattintás egy új oldalra visz, akkor annak betöltési ideje minimális legyen. Hiszen három kattintás lassan betöltődő oldalakkal rosszabb felhasználói élményt eredményez, mint öt kattintás gyors oldalakkal.

Tehát miközben az erőfeszítés mérséklése fontos az információk elérésénél és a feladatok végrehajtásánál, a háromkattintásos szabály nem létezik. Nincs olyan ökölszabály a webdesignban, mely azt mondaná meg, hogy az emberek mikor lesznek frusztráltak a weboldaladon. Tehát szimplán a kattintások számolgatása helyett arról kell meggyőződni, hogy a navigáció jól kialakított, járható utakkal, a tartalmak egyre speciálisabba, ahogy egyre mélyebbre jutunk, valamint hogy az oldal látogatói mindig tudják hol járnak az oldalon és hogyan jutnak el a céljukhoz.

7 navigációs hiba, amit mindenképpen kerülj el!

Habár talán már az eddigiekből is minden világos lehet, azért lássuk azt, hogy mi az néhány kifejezett hiba, amit mindenképpen kerülj el a navigációs menü kialakításánál.

1. Túl sok lehetőség

Ha az emberek előtt túl sok a választási lehetőség, akkor az összezavarja őket. El kell kezdeniük gondolkodni arról, hogy mit válasszanak. Ezért minél kevesebb a választási lehetőség, annál gyorsabban haladnak előre. A weboldalak tulajdonosai viszont gyakran abba a hibába esnek, hogy minden lehetőséget megpróbálnak belezsúfolni a navigációs menübe, mutatva az információk széles tárházát, illetve azért, hogy a látogatók minden lehetőséget egyből elérjenek.

És bár elsőre talán jó megoldásnak tűnik, hogy a felhasználóknak nem kell aloldalakra tévedve, újabb linkekre kattintva keresgélni a weboldalon, azonban az elsődleges navigációnál a túl sok linkkel ellentétes hatást érünk el. Az emberek képtelenek lesznek kiigazodni a sok választási lehetőség között, a döntésük túl sok időt vesz igénybe. Amint elkezdenek kérdéseket feltenni maguknak azzal kapcsolatban, hogy vajon most hova is kellene kattintaniuk, rendkívüli mértékben megnő az esélye annak, hogy egyszerűen a “vissza” gombra fognak klikkelni, és távoznak a weboldaladról.

Tehát amikor a weboldal elsődleges navigációjának megtervezéséről van szó, akkor a menüt a lehető legrövidebbre kell vágni, hogy csak a legfontosabb opciók szerepeljenek benne. Azzal, hogy kevesebbet adunk az indulásnál, tulajdonképpen bátorítjuk az embereket arra, hogy gyorsabb döntéseket hozzanak és egyre mélyebbre ássanak a weboldalunkon.

2. Rossz lehetőségek

A következő hiba, amikor rosszul határozzuk meg, hogy mi kerüljön az elsődleges navigációs linkek közé, és mit soroljunk hátrébb. Ennél a pontnál érdemes hangsúlyozni, hogy egy weboldal a felhasználói igények kielégítésére jön létre, vagyis nem olyan linkeket kell előre tolni, melyek nekünk fontosak, hanem amelyek a felhasználók számára azok. Ne essünk tehát abba a hibába, hogy a saját preferenciáink alapján állítjuk össze a fő helyre kerülő navigációs linkeket!

3. Ha nem használható minden eszközön

Manapság a weboldalakat már mindenféle eszközről felkeresik, így a kis kijelzős okostelefonokon is állandóan netezünk. Az a korszak véget ért, amikor csak a nagyméretű monitorokat kellett figyelembe venni, ez viszont azzal jár, hogy a webodalnak, és azon belül a navigációnak is igazodna kell a kisebb kijelzőkhöz.

A navigációs menüket túl gyakran asztali gépek monitoraihoz tervezik. Ilyenkor viszont a kisebb kijelzőkön használhatatlanná válnak. Ezért is olyan fontos a weboldalaknak reszponzívvá, mobilbaráttá válniuk. Egy reszponzív oldalon pedig a navigáció is minden kijelzőmérethez megfelelően igazodik, mindig jól látható és jól használható lesz.

4. Túl összetett menü

Amikor a navigáció egyszerűsítése során már sikerült kiválasztani azokat a menüpontokat, amiket érdemes eltvolítani az elsődleges szintről, akkor ezeket általában egy legördülő menübe száműzöd. A legördülő menük egy része úgy működik, hogy ha fölé visszük a kurzornyilat, akkor lenyílik. Ezt a funkciót azonban mobilokon nem lehet használni, tekintve, hogy ott nincs egérmutató, csak a kattintás létezik. Márpedig a linkeket valahogy mobilon is el kell érni. Ráadásul az óriási vagy többszintes legördülő menüknek nem túl praktikus a használata még asztali gépeken sem. Vagyis az egyszerűsítés ne eredményezze a navigáció bonyolítását!

5. Következetlenség

Amikor egy felhasználó a főoldaladon már találkozott a menüddel, átlátja, megérti azt és tudja használni, akkor nem túl szerencsés, ha az aloldalaidon eltérő felépítésű menükre bukkan. Egy weboldalnak minden oldalán ugyanazokból az elemekből kell állnia az elsődleges navigációnak, ráadásul minden eszközön ragaszkodni kell ehhez. Az almenük esetében elképzelhető esetleg változtatás oldalanként, de az elsődleges navigációnak kőbe vésettnek kell lennie.

6. Túl hosszú horgonyszövegek

Az egy dolog, hogy a minél kevesebb lehetőség felsorolására törekszünk az elsődleges menüben, ugyanakkor arra is törekedni kell, hogy a menüpontok elnevezései, vagyis a linkek horgonyszövegei minél rövidebbek legyenek. Lehetőleg egy vagy két szót használjunk egy menüpontnál. Tehát ne legyen olyan, hogy “Minden, amit a cégünkről tudni akartál”, elegendő annyi, hogy “Rólunk”. Ez mindenki számára érthető és megszokott, ami nagy előny egy weboldal használatánál. Ugyanakkor a következő pont figyelembevételével azért némileg árnyaljuk a képet.

7. A rossz hangnem

Minden weboldalnak van egy stílusa, egy hangneme. Ez lehet laza és barátságos vagy szakmai és egyenes, tulajdonképpen olyan, mellyel könnyebben megszólíthatjuk a látogatóinkat. De bármilyen is legyen a weboldal hangneme, ehhez igazodnia kell a navigációnak is.

Ha például egy weboldal barátságosra és segítőkészre veszi a hangnemét, akkor jobb, ha a menüpont úgy hangzik, hogy “Miben segíthetünk?”, mint ha egyszerűen annyit írunk, hogy “Szolgáltatásaink”. Persze, ezzel kétszavassá válik a remek, egyszavas menüpontunk, azonban a cél nem elsődlegesen az, hogy minél rövidebb legyen, hanem hogy összességében a legjobb, leghatékonyabb megoldást találjuk meg. Ebbe beletartozik a megfelelő szöveghosszúság, de a jól illeszkedő szövegek is.

Mint az kiderült, egy weboldal navigációján sok múlik. Azzal, hogy biztosítjuk a teljesen világos, könnyen használható navigációs struktúrát, arra bátorítjuk a felhasználóinkat, hogy minél több időt töltsenek a weboldalunkon, valamint segítünk nekik megtalálni azt a tartalmat vagy funkciót, amit keresnek. Ez pedig fontos a cégünknek is.

Mi az az elsődleges és másodlagos menü?

A nagy weboldalakon sok a tartalom, így elég sok információt kell egyszerre megjeleníteni. Ilyenkor lehet szükség elsődleges és másodlagos menüre, hiszen egyetlen menüsorban nem oldható meg a sok információ elhelyezése. A kérdés már csak az, hogy a tartalom mely része kerüljön az elsődleges, és mely része a másodlagos navigációs menübe.

Elsődleges navigáció

Az elsődleges navigáció a weboldal legfontosabb irányító eleme. Ennek megfelelő kialakításával tudunk a legnagyobb mértékben segíteni a felhasználóknak abban, hogy megtalálják azokat az információkat, melyeket a weboldalunkon keresnek.

Az elsődleges navigáció tehát általában olyan fontos információkat tartalmaz, mint mondjuk az ár, a letöltés, szolgáltatások, stb., amit persze weboldalanként változó. A lényeg, hogy könnyen érthetőnek és megtalálhatónak kell lennie. Segítenie kell a felhasználóknak megmutatni azt, hogy hol vannak, és mit találhatnak az oldalon.

Másodlagos navigáció

A másodlagos navigáció értelemszerűen a kevésbé lényeges elemeket tartalmazza. Ez a másodlagos navigációs menü gyakran olyan oldalra kerül, mely az elsődleges navigációs menü révén érhető csak el. A felhasználókat azonban ugyanolyan könnyen kell vezetnie a kevésbé fontos, de plusz információk felé, mint az elsődleges navigációnak.

A navigációs menük típusai

A webdesign mindig feszegeti a határait, új és új ötletek, megoldások bukkannak fel. Ezekre akkor érdemes némi figyelmet vesztegetni, amikor elérnek egy olyan elterjedtséget, hogy a gyakorlottabb felhasználók egyre inkább rutinból használják őket.

Mostanában a webdoldalak tetején lévő, horizontálisan húzódó menüsor számít természetesnek és a legtöbb ember számára egyértelműnek. Ez azonban egyrészt nem volt mindig így, másrészt nem is marad változatlan. Nyilván sokan emlékeznek még arra, hogy évekkel ezelőtt a menük jellemzően a bal oldalon kaptak helyet. Innen költöztek fel később felülre, vízszintesen elnyúlva. A mobilkorszak beköszöntével pedig a navigációs menü – igazodva a kisebb kijelzőkhöz – kénytelen volt összehúzódni hamburger menüvé. De milyen variációk vannak?

Vízszintes navigációs menü

Ez a ma uralkodó navigációs menü megoldás, így persze ennek a legkönnyebb a használata. A megoldás tehát a hagyományokra épít, épp ezért hatékony: gyorsabbá teszi a felhasználóknak, hogy a menü segítségével találjanak meg információkat a weboldalon.

Függőleges menü

A jó öreg, bal oldalra rendezett megoldás, melyet már sok-sok éve kiszorított a felső menüsor, most pedig visszatért. Ennek egyik alternatív megoldása, amikor ezt a függőleges menüsort egy hamburger ikonra való kattintás nyitja meg.

Valamivel nagyobb a tervezők mozgástere egy függőleges navigációs menü esetében, mint az előbb említett vízszintes navigációnál. Lehet statikus vagy dinamikus, kicsi vagy nagy, és könnyebben személyre szabható.

Tab-szerű navigáció

Amennyiben csak néhány elsődleges cél jelenik meg a weboldaladon vagy az appodban mobilon, akkor egy tab-szerű navigáció praktikus megoldás lehet. A menü megjelenhet az oldal felső vagy alsó részén is, felhívva a figyelmet arra, hogy van navigáció az oldalon, és az emberek bármikor képesek használni azt.

Ez a legegyszerűbb navigációs megoldás, ugyanakkor néhány dolog korlátozza a használatát:

• Legfeljebb 5 vagy annál kevesebb elem kerülhet rá.
• Az egyik opciónak mindig aktívnak kell lennie, és így vizuálisan kiemelkedőnek, például egy kontrasztos szín használata révén.
• Az első tabnak a főoldalnak kell lennie, és a tabok sorrendjét valamiféle hierarchia alapján kell kialakítani.
• Érdemes ikonokat és szöveget is használni az egyes opcióknál, mert az ikonokat csak a nagyon elterjedt funkcióknál tudják értelmezni az emberek. Ilyen például a keresés nagyító ikonja.

Annak érdekében, hogy a menü ne foglaljon túl sok helyet érdemes eltüntetni, illetve megjeleníteni le- és felfelé görgetésnél.

Hamburger menü

A hamburger menüt a hamburger ikon jelzi, vagyis három vízszintes vonal, és mára rendkívül elterjedté vált, különösen mobilos megjelenésnél.

Hamburger menü + menü

Ebben az esetben a hamburger ikon mellett még megjelennek a legfontosabbnak ítélt linkek is. Azaz utóbbi megoldásnál nem a teljes menüsort tesszük láthatóvá, hanem annak kevésbé lényegesnek ítélt részét az ikon alá rendezzük, viszont a legfontosabb linkek külön-külön megjelennek a menün kívül, kiemelkedve az oldalon. Ezzel tehát mutatunk már egy link-hierarchiát a látogatók számára.

Hamburger ikonra a menüpontok mellett akkor is szükség lehet, ha például mobilon az előbb említett tab barra nem fér rá minden céloldal linkje, mert ötnél több van belőle. Ilyenkor van négy menüpont, plusz egy hamburger ikon, ami a további elemek listáját tartalmazza. Ez lehet egy legördülő menü, vagy akár eljuttathatja a felhasználót egy külön oldalra is. A hamburger ikon mindig az utolsó helyen áll. Ez a kialakítás persze nem sokkal jobb UX szempontból, mint a hamburger menü, hiszen továbbra is takarja a tartalom egy részét.

Ennek a megoldásnak egy további variációja, amikor a menü a kijelzőmérettől függően húzódik össze, illetve bővül ki. Tehát minél nagyobb a kijelző, annál több elem látható a menüben a hamburger ikonon kívül.

Lenyíló menü

Szintén nagyon gyakori navigációs megoldás, sok szót így nem is vesztegetnénk rá. Így néz ki:

Teljes kijelzős navigációs menü

A teljes kijelzős menü egy olyan újabb jelenség a webdesignban, ami megint csak a mobilok térhódításával hozható összefüggésbe. Korábban az volt a jellemző, hogy a lenyíló menü csak egy kis szeletét foglalta el a kijelzőnek, éppen csak a szükséges legkisebb méretben. Most már azonban egyre többször nagyon bátran beborítja a teljes kijelzőt. A mobilkijelzőkön egyébként nem különösebben extrém megoldásnak tűnő menü-megoldást – azaz, hogy a teljes kijelzőn elterül – egyszerűen berántották a designerek a desktopok világába.

Teljes kijelzős menü megjelenhet fixként, illetve hamburger ikonra való kattintás után. Előbbi esetében gyakorlatilag a főoldal válik navigációs menüvé. Az egyes menüpontok aztán átvihetik a felhasználót egy aloldalra, vagy pedig tovább menüpontok nyithatók meg kattintásra, illetve érintésre. Miután azonban a felhasználó eldöntötte, hogy merre tart, eltűnik a kijelzőről a navigáció, és már csak a tartalom látható rajta. Akkor használható elsősorban ez a megoldás, amikor a fő tartalommá tulajdonképpen a navigáció lép elő. Ilyenkor nem kell sokat gondolkodniuk a felhasználóknak, hogy mit, hol találnak, hogyan használják a weboldalt. Jó példa erre az Aria Studio honlapja.

A másik esetben a hamburger ikonra való kattintás nyitja meg a teljes kijelzős menüt:

Amit szokni kell a használatuk során, hogy mivel teljesen ráfekszenek a weboldalra, betakarják azt, így egy az egyben el is tüntetik a felhasználók szemei elől. Ezáltal persze a menü bezárása sem úgy történik, mint egy lenyíló menünél, hogy vagy elhúzzuk róla az egeret, vagy csak a kijelző egy más részére kattintunk. Bizony, itt klikkelni kell egy X gombra, jó esetben azt legalább nem kell hosszan keresni, és persze mobilon ez a megoldás teljesen természetes.

Ennek egy továbbfejlesztett verziója, amikor már nem csak a menüben szereplő linkek jelennek meg a felbukkanó oldalon, hanem a navigációs menü mellett egyéb információk, melyeket esetleg fontosnak vél a weboldal tulajdonosa. Ilyen lehet egy kontaktfelület a különböző elérhetőségekkel, vagy a közösségi oldalak ikonjai. De a variációk végtelenek, és ezt mutatják azok a gigantikusra nőtt lenyíló menük is, ahová bármit képesek bepakolni, olyan dolgokat, melyeknek köze nincs a szigorúan vett menü-funkcióhoz.

Óriási, lenyíló menük (mega menük)

Ezzel elérkeztünk egy újabb megoldáshoz, melynél ugyan megint legördülő menükről van szó, azonban az egyszerű, egymás alá rendezett linkek helyett, illetve inkább mellett, valami egész más is megjelenik. Mégpedig a tartalom egy kis szelete is helyet kap. Gátlások nélkül helyeznek el ott képeket például a legújabb akciókról, termékekről, vagyis arról, ami aktuálisan a legfontosabb kontent a weboldal tulajdonosa számára. Kérdés persze, hogy ez mennyire hatékony, esetleg inkább csak zavaró az információt kereső látogató számára. Ez dönti el, hogy tartós lesz-e a trend vagy sem.

Alsó menü

Habár a navigációs menü hagyományos elrendezésben vagy felülre, vagy pedig bal oldalra kerül, a webdesignerek most a weblap aljára helyezett navigációs menüvel kezdtek el kísérletezni. Ennél a megoldásnál talán érdemes úgy megtervezni a menüt, hogy az minden aloldalon megjelenjen alul, ahogy azt a felső menüknél is megszokhattuk, valamint lefelé görgetésnél maradjon a böngészőablak aljához rögzítve. Ez olyan, mint mobilon a tab bar, csak desktopra alkalmazva.

Animált navigációs elemek

Az animáció egyre nagyobb trend a webdesignban, nem meglepő, hogy megjelent a navigációnál is. De persze itt is csak akkor érdemes alkalmazni, ha egyszerűbbé teszi a felhasználó életét, könnyebben tudja használni az oldalt. Egyébként pedig rendkívül látványos, izgalmas és szórakoztató tud lenni, de túlzásokba nem jó esni, ahogy itt sem tették.

Amikor nincs navigációs menü

Nagyon letisztult megoldás, azonban csak kisebb méretű weboldalaknak érdemes alkalmazniuk. Elsősorban olyan esetekben működőképes, ha egy előnézeti oldalad van, mely aztán később kap egy navigációs menüt. Olyan weboldalaknál nem igazán alkalmas, amelyeknek több aloldala is van, habár van, aki így is használja.

Ezek után lássunk az előbbiek közül néhányat részletesen!

Hamburger menü és a rejtett navigáció: mi a gond vele? Mikor használd és mikor ne?

A hamburger ikon egyre gyakrabban jelenik meg mobiltelefonokon, tableteken, sőt már desktop kijelzőkön is találkozhatunk vele. Egyszóval erős trend lett belőle. Sokan elhibázottnak tartják a használatát, mások viszont nem látják ennyire tragikusnak a helyzetet. Először azonban nézzük meg, hogy honnan is származik a hamburger ikon! Ez azért is érdekes, mert gyökerei sokkal távolabbra nyúlnak, mint azt a legtöbben gondolják.

Már a ’70-es években megjelent

Alex Tyagulsky app-designer mondta el egyszer a BBC-nek nyilatkozva, hogy az első nagyobb applikáció, ahol alkalmazták a hamburger ikont, a Path volt – legalábbis az ő legjobb tudása szerint. Népszerűsége viszont akkor nőtt meg óriási mértékben, amikor a Facebook is átvette. Ekkortól egyre több app kezdte el használni.

Nem ez volt azonban az első megjelenése a három egymás felett fekvő vonalnak. A ‘70-es évek végén, ‘80-as évek elején a designerek egy korai generációja már használt egy hasonló szimbólumot az első grafikus felületeken. A Xerox Star nevű irodai rendszerben a gombsor jobb oldalán kapott helyet a hamburger ikon. Erre kattintva további opciók nyíltak meg a felhasználók számára – mondta el a lapnak a ma 63 éves Norm Cox, amerikai tervező-grafikus. Akkoriban azzal viccelődtek az első ügyfelekkel, hogy ez egy szellőzőnyílás, ami hidegen tartja az ablakot. Tehát ekkor még nem volt szó hamburgerről.

Igazán népszerűvé viszont 30-40 évvel később vált. Népszerűségének növekedéséhez a facebookos használat mellett az is hozzájárult, hogy mindenféle információt nagyon könnyen bele tudunk zsúfolni. De mennyire hatékony a használata? Több kutatás is született a témában, melyek megkérdőjelezik a hatékonyságát.

Nem egyértelmű az emberek számára

James Foster, új-zélandi webfejlesztő több tesztet végzett a témában, és mindegyik azt mutatta, hogy a felhasználók számára nem annyira egyértelmű a használata, mint azt sok fejlesztő vagy designer gondolja.

Olyan fontos megállapításokat tett, miszerint

• amint a menü szót is az ikon alá teszik, 7,2 százalékkal nő a használatának aránya.
• Ha egy dobozba kerül a három vonal, vagyis úgy néz ki, mint egy gomb, akkor 22,4 százalékos a javulás.
• De ha kicserélik a három vonalat menü felirattal, akkor 20 százalékkal nő a kattintási arány.

Foster szerint a három vonalat nem túl könnyű észrevenni egy oldalon, ráadásul mindenkinek mást és mást jelenthet, nem feltétlenül azt, hogy “itt egy csomó információt találsz”. Ezért aztán az, ami a hamburger ikonnal jelzett menübe kerül, sokszor rejtve marad a látogatók elől.

Azt ugyanakkor hozzá kell tenni, hogy Foster 2014 elején végezte az első tesztjeit, viszont azóta eltelt egy kis idő. Továbbra is vizsgálja a hamburger ikon használatát, és az új vizsgálatok alapján úgy tűnik számára, hogy az emberek egyre jobban tudják értelmezni a funkcióját.

Nehezebbé és lassabbá válik a feladatok elvégzése a hamburger menü miatt

Nem így látja azonban 2016-os kutatásaiban a Norman Nielsen Group. Szerintük mintegy felére csökken egy weboldal felfedezhetősége abban az esetben, ha takarjuk a navigációs menüt egy hamburger ikonnal. Ráadásul a feladatok végrehajtása is hosszabb időt vesz igénybe. Emellett nehezebbnek is tűnik ezek elvégzése az emberek számára.

A Nielsen Norman Group vizsgálata szerint rejtett navigáció használata esetén romlik a weboldal felfedezhetősége egy olyan weboldalhoz képest, ahol látható vagy legalább részben látható a navigációs menü.

• Amikor ugyanis a navigáció takarásra kerül, akkor a felhasználók kisebb eséllyel használják.
• És ha használják is, akkor is később teszik ezt, mint amikor látható a menü.

A rejtett navigáció rosszabb felhasználói élményt jelent a láthatóhoz vagy a részben láthatóhoz képest, nem csak desktop felületen, hanem még mobilon is. Ez több UX mérőszám esetén is bebizonyosodott, így a feladat nehézségének a megítélésénél, a feladatra fordított időnél és a sikeres feladatvégzésnél is. A navigáció takarása legnagyobb mértékben arra a tartalomra volt hatással, mely nem volt elérhető közvetlen linken keresztül az adott oldalról.

A vizsgálat részleteit itt nem ismertetjük, az megtalálható a Nielsen anyagában, csak a fő következtetésekre térünk ki, mert ezek mindenki számára rendkívül tanulságosak lehetnek.

• Gyenge észrevehetőség: azaz adott egy kis ikon, melyet nehéz felfedezni egy nagyméretű kijelzőn, de még olykor egy kisebb mobil kijelzőjén is.
• Mérsékelt információs érték: a menü ikon semmit sem mond az embereknek arról, hogy mi található mögötte, vagyis nem tudják, mi bukkan fel, ha rákattintanak.
• Plusz munka: ahhoz, hogy az emberek megtudják, mi rejtőzik a hamburger ikon mögött, ki kell nyitniuk. De mivel ez nagyobb interakciós költséget jelent számukra, ezért kisebb a valószínűsége, hogy megteszik.
• Hiányzó szabványok: a rejtett navigáció többféleképpen jelenik meg a weboldalakon. Néhány oldal használja, mások nem. Mobilon már kezd kialakulni egy formája a megjelenésnek, de desktopon rendkívül nagy a variációk száma, illetve jellemző a következetlenség az elhelyezésre és a címkézésre vonatkozóan.
• Kevesen ismerik. A rejtett navigáció különösen asztali megjelenésnél még nem egy elfogadott megoldás, és az emberek nem számítanak egy átfogó navigációra a lenyitható menüben. Ehhez jön még hozzá a szabványok hiánya, mely csökkenti a hosszú távú tanulhatóságot.

A felsorolt pontok közül egyedül az utolsó az, amelyiknél javulás következhet be idővel az NNGroup szerint. Elméletileg ugyanis lehetséges a szabványosítás, melynek révén ismerősebbé válik az emberek számára a rejtett navigáció. De a Nielsen tapasztalatai azt mutatják, hogy ezek a sztenderdek nem alakulnak ki egyhamar. Ráadául az első három pont, vagyis a rossz észrevehetőség, a mérsékelt információs érték, és a vele járó plusz munka mindig is adott marad a rejtett navigáció esetében.

Mások azonban nem látják ennyire tragikusan a helyzetet. Illetve más tényezőkre hívják fel a figyelmet. Például arra, hogy hibát követ el az, aki mobilos tervezésnél a navigációs menüre koncentrál, mondván: fontos a funkciója, hiszen ez vezeti a felhasználót. Mert nem így van.

Miért nem gond ez?

Ezt magyarázta Steven Hoober a UX Mattersen megjelent írásában, ahol abból indul ki, hogy miért is van teljes mértékben létjogosultsága a hamburger ikonnak a webdesignban. Szerinte egyáltalán nem gond, hogy az emberek nem találnak rá az információkra.

A navigációs menükkel az a baj, hogy úgy működnek, mint egy parkoló vagy egy mélygarázs rendszere, ahol ahhoz, hogy megtaláljuk az autónkat, meg kell ismernünk annak belső nyelvét és struktúráját, meg kell tanulnunk azokat a kódokat, jelzéseket, melyek meghatározzák, hogy hol is parkoltunk le. Ez azonban nem könnyű senki számára sem, ezért jelentős mértékben arra hagyatkozunk, hogy milyen a környezet, milyen egyéb ismertetőjeleket, tárgyakat látunk, és egyszerűen arra megyünk, amerre a többiek is. Hibás tehát minden olyan megközelítés, mely valamilyen szigorú navigációra épít, hogy az majd megfelelően vezeti az embereket.

Az emberek nem úgy viselkednek mobilon, hogy a weboldalakat a tetejétől kezdve, balról jobbra végignézik, hanem mindig középre pozícionálnak. Mobilos tervezésnél tehát abból kell kiindulni, hogy a felhasználók először a kijelző közepén lévő tartalomra pillantanak, azt olvassák el, azzal kerülnek interakcióba, és csak akkor mozdulnak innen el a tekintetükkel, ha nem találták meg, amit kerestek. Egyébként viszont teljes mértékben hanyagolják a kijelző felső és alsó részén elhelyezkedő dolgokat.

Az információt hangsúlyozd, ne a navigációt

Ez vezette Hoobert ahhoz a design-elvhez, melyet alkalmaz: ha arra építjük a folyamatot, hogy a felhasználó majd olvas, aztán pedig választ, akkor rossz úton járunk. Mit tehetünk? Először is azt, hogy megadjuk számára a legfontosabb információkat a kijelző közepére rendezve, a másodlagos funkciókat pedig kitoljuk a szélére. Ilyen az, amikor a levelezőkliensben középen a levelekkel találkozunk, és valahol alul vagy felül helyet kap az “új levél létrehozása” ikon. Az ikonok és a linkek elhelyezése a felső vagy az alsó sorban a leggyakoribb módja a másodlagos funkciók elhelyezésének, legyen szó mobilra optimalizált weboldalakról vagy mobil-alkalmazásokról.

Azokat a funkciókat pedig, melyeket az emberek a másodlagosoknál is ritkábban használnak, a menüben kell elhelyezni. Nyilván az ezekben szereplő dolgokhoz már nehezebb eljutni. De annak az esélye is kisebb, hogy a felhasználók pont az itt elhelyezett funkciókat keresnék.

Példaként hozza fel a YouTube applikációját, melyben középen kapnak helyet az ajánlott videók, valamint találkozhatunk még egy Zene linkkel, a kereséssel és egy hamburger menüvel. Miközben maga a YouTube egy meglehetősen bonyolult és összetett rendszer mindenféle kategóriákkal, csatornákkal. Látható, hogy mi a fontos a YouTube számára. Elsősorban az ajánlott videók, másrészt pedig a keresés, hiszen ezzel lehet megtalálni a videókat.

Belülről kifelé tervezve

Az utolsó design-elv tehát az lenne, hogy mindig a középpontból tervezzünk kifelé. Ehhez először meg kell határozni a funkciók hierarchiáját, majd a felhasználói felületnek ehhez kell igazodnia.

• A legfontosabb feladatok és funkciók tehát a kijelző középső részére kerüljenek.
• A további két-három másodlagos feladat valahol a peremén legyen elhelyezve.
• A kevésbé fontos dolgok pedig bármilyen menübe kerülhetnek.

Azt kell tehát megérteni, hogy mindig a jelenlegi eszközökre és felhasználókra tervezzünk. Ne pedig a régi feltételezésekre, bevett gyakorlatokra építsünk, melyek még a régi eszközkörnyezetben alakultak ki. De azt se felejtsük, hogy egy weboldal attól még nem lesz mobilbarát, hogy a navigációs menüsort lecseréljük egy hamburger ikonra. Ehelyett az egész oldalt újra kell tervezni olyan megoldások létrehozásával, melyek a mobilok és tabletek egyedi felületét használók számára is hatékonyan használhatók.

Mikor érdemes használnod a hamburger menüt?

Az előbbiek alapján tehát már nagyjából körvonalazódhat az is, hogy mikor érdemes a hamburger menüt bevetni az applikációdban vagy akár weboldaladon. Igen, akkor, ha olyan a tartalmad, mely egy vagy néhány fő funkció köré rendezhető, és ezek mondjuk CTA gombként  jelennek meg.

Ilyenkor az elsődleges navigációs lehetőségek a weboldal vagy az applikáció közepére kerülnek, és minden másnak másodlagos szerep jut, azaz eltüntethető egy hamburger ikon mögött, mint másodlagos navigáció. Ez azért is jó megoldás, mert ilyenkor a további menüpontok nem zavarják meg a felhasználót, nem tántorítják el a fő funkció használatától. Ha nem világos miről van szó, akkor vess egy pillantást az Uber megoldására:

Itt minden az autórendelés köré szerveződik, az kerül a középpontba. Az olyan lehetőségeket, mint például a beállítások, már a hamburger menü rejti. Az ugyanis nagyon valószínűtlen, hogy az, aki többször is megnyitja az appot, mindig a beállításokat keresse, ne pedig az autórendeléssel foglalkozzon

A hamburger ikon itt a legkisebb mértékben sem zavarja meg a felhasználót, nem téríti el az útjától, mégis bármikor hozzáférhetők számára. Hiszen minél kevesebb a navigációs elem, annál kissebb az esély arra, hogy a felhasználót eltéríti valami. A navigáció minimalizálásával a felhasználó sokkal jobban tud a feladat végrehajtására összpontosítani.

Vagyis, ha nem tudod eldönteni, hogy használd vagy sem a hamburger menüt, akkor tedd fel magadnak a kérdést: azokat a navigációs elemeket, melyeket a hamburger ikon mögé rejtesz ritkán használják csak az emberek? Ha igen, akkor próbáld ki a hamburger ikont.

Végül álljanak itt a NN Group tanácsai azzal kapcsolatban, hogy hogyan használd a hamburger menüt. Asztali kijelzőnél ők nem látják értelmét, mert rendkívül nagy tér áll a rendelkezésünkre a navigáció megjelenítésére, úgyhogy jelenjenek meg a legfelső szintű navigációs lehetőséget az oldal tetején vagy a bal oldalon.

Mobilos kijelzőkön nincsenek egyértelmű szabályok, de általánosságban a következőket lehet mondani:

• Ha a weboldaladon 4-nél kevesebb legfelső szintű navigációs link van, akkor tedd őket mindig láthatóvá!
• Ha több van, mint 4, akkor néhányat ezek közül kénytelen leszel elrejteni. A rejtett navigáció használhatóságra gyakorolt negatív hatása mobilon is jelen van, de kisebb, mint desktopon. Ráadásul a lenyitható navigációs menü használhatósága még mindig sokkal jobb, mint más design-megoldásoké.
• A fontos információknak szánj egy külön linket a weboldalon. Vagy segítsd az embereket, hogy menü nélkül is navigálni tudjanak. Például egy jó keresővel vagy egy jól használható lábléccel.

Ugyanakkor ne felejtsd el, hogy nincsenek rossz vagy jó designmegoldások, mert minden a kontextustól függ. Arra figyelj elsősorban, hogy a weboldalad vagy alkalmazásod célját segíti-e a hamburger menü vagy sem.

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.

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ó.

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.

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.

Hogyan alakíts ki többszintes menüt a weboldaladon? (FRISSÍTÉS, 2023.05.16.)

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.

Miért lehet jó választás egy függőleges navigációs menü?

Míg korábban egyeduralkodó volt, az elmúlt években kiszorult a weboldalakról az oldalsó, illetve vertikális navigációs menü. Ugyanakkor mostanában ismét megjelentek olyan, jól megtervezett, friss weboldalak, melyek a felső menüsor vagy a hamburger ikon helyett a bal oldalon elhelyezett menüt használnak.

Persze leginkább csak akkor merül fel a függőleges navigáció lehetősége, amikor annyi menüpont kerül egy navigációs menübe, hogy nem igazán fér el a megszokott vízszintes elrendezésben. Első körben a weboldaltulajdonosok azzal próbálkoznak, hogy kisebbre vegyék a menüben szereplő linkek betűit, rövidebb címkéket próbálnak alkalmazni, vagy összezsúfolják az egyes menüpontokat.

Sőt, egyesek ahhoz a végső eszközhöz nyúlnak, hogy elkezdenek kivenni kevésbé fontosnak tűnő elemeket a menüből, csak hogy elférjen a rendelkezésre álló területen. Ez viszont azt jelenti, hogy a látogatóknak sokkal több időbe telik az általuk keresett kategóriát megtalálni.

Pedig, ha nem fér el egy menü vízszintesen a weboldal fejlécében, akkor a Nielsen Norman Group tanácsa szerint ott a lehetőség egy vertikális menü kialakítására. De vajon érdemes Neked is elgondolkodnod az alkalmazásán?

Hogyan nézzen ki, és mire érdemes figyelni?

A vertikális menü újbóli megjelenése tulajdonképpen a hamburger ikonok elterjedésének következménye. Ezek ugyanis kattintásra kinyílnak. Igaz, hogy különböző formákban – tehát elfoglalhatják a teljes kijelzőt is akár -, mégis jellemzően lefelé nyílnak, és teszik láthatóvá a navigációs menüt. Ha innen továbblépünk, akkor akár állandóvá is tehetjük a weboldalunk bal szélén a menü megjelenését.

Az ilyen menü általában a bal oldalon jelenik meg – ugyanúgy, ahogy évekkel ezelőtt az oldalsó menük -, meglehetősen minimalisták, gyakran ovarlayként láthatók, ugyanakkor kifejezetten sok whitespace-t használnak, így csak néhány jól használható opció kerül rájuk. Magukban foglalhatják a navigációs linkeken túl a logót, a közösségi média ikonokat és a keresés mezőt is.

Vannak persze olyan tényezők, melyeknek meg kell felelniük, hogy működjenek. Fontos a megjelenésüknél, hogy kellően kontrasztosak legyenek a weboldal többi részével, ezáltal válva észrevehetővé a felhasználók számára. Használhatónak kell lenniük mobilon is, ami nem egyszerű, valamint elég szélesnek ahhoz, hogy olvasható betűtípussal íródjanak.

Szintén lényeges, hogy az oldalsó menü ne legyen zsúfolt, ne próbáljuk kihasználni a rendelkezésünkre álló teljes teret. A megfelelő whitespace használata itt is javasolt, sőt kötelező. Az üres tér ráirányítja a menüre a felhasználók tekintetét, és javítja a weboldal használhatóságát.

Milyen előnyei és hátrányai vannak?

Kezdjük talán az előnyökkel:

• Elsősorban az, hogy több felső szintű kategóriacímkét lehet rajta elhelyezni, mint egy vízszintes sávban. A jól meghatározott kategóriák pedig megkönnyítik az információk megtalálását az emberek számára, és csökkentik az interakciós költséget.
• A vertikális navigáció esetében nem vagyunk korlátok közé szorítva a kategóriák számát illetően, olyan információs architektúra készíthető, mely a legjobban passzol az oldalon szereplő információkhoz, illetve maguknak a kategóriacímkéknek a megfogalmazására is nagyobb tér áll rendelkezésre, így azok jól érthetők lesznek a felhasználók számára.
• Ráadásul egy függőleges navigációs menü lehetővé teszi, hogy a későbbiekben ne legyen probléma a növekedéssel: újabb és újabb fő kategóriák vehetők fel a menübe, ha újabb témákkal bővül az oldal. Ez különösen az olyan, nagy szervezetek számára lehet hasznos, melyeknek folyamatosan változnak az ajánlataik vagy bővülnek a tartalmaik.
• Egy-egy újabb menüpont hozzáillesztése a vertikális menühöz nem borítja fel az egész designt, nem kell újra tervezni az oldalt a tartalmi változás vagy bővülés miatt. Az egyetlen megfontolandó kérdés az, hogy az új menüpont hová kerüljön a meglévő kategóriastruktúrában.
• A függőleges navigáció hatékonyabb áttekintést tesz lehetővé a látogatók számára, mint a vízszintes menü. Miért? Mivel a szemmozgást vizsgáló kutatások alapján már tudjuk, hogy az emberek egy-egy weboldalnak a bal oldalán töltik az idő 80 százalékát. Ezért, ha ide helyezzük a navigációt, akkor azt nagy eséllyel fel fogják fedezni.
• A navigációs menü elemei nincsenek elrejtve, mint például egy hamburger menü esetében (mely éppen ezért sok támadást kap).
• A hasábot felülről lefelé könnyen átfutják és olvassák az emberek, ha elegendő helyet hagysz az egyes menüelemek között. A vizsgálatok szerint az emberek hatékonyabban keresnek egy függőleges, mint egy egy vízszintes listában. Ennek pedig az az oka, hogy egy függőleges lista esetében kevesebb szemmozgatásra van szükségük, kevesebb megállással képesek áttekinteni ugyanannyi címet egy függőleges listában, mint egy vízszintesben.
• Egy függőleges navigációs menüt egyébként egyszerűbb is átültetni mobilra, hiszen a vízszintes menü egyébként sem működik ott. Így mindenképpen egymás alá rendezett menüpontokra van szükség, általában egy hamburger menübe rejtve. Ezáltal pedig egy vertikális menü szinte teljesen azonos módon jelenhet meg asztali gépen és mobilon is.
• Nem terheli a design többi részét, így az a maradék területen szabadon kibontakozhat.
• A design többi része a megszokottól eltérő formához illeszkedhet, ezáltal izgalmasabbá válik, valamint megkönnyíti a videók és a képek használatát is.
• Végül pedig érdemes azt is megemlíteni, hogy az emberek számára nem teljesen idegen a bal oldali, függőleges navigáció, hiszen elég sok asztali gépes alkalmazásban találkoznak ezzel az elrendezéssel. Elég, ha csak a Gmailre vagy a Slackre gondolsz.

Hátrányai:

• Mivel az utóbbi években az emberek nagyon hozzászoktak a felső, vízszintes menükhöz, ezért amikor meglátnak egy bal oldali menüsávot, akkor nem tudnak vele mit kezdeni, összezavarodnak, át kell gondolniuk, hogy mit is látnak.
• De az sem elhanyagolható tényező, hogy mivel a látogatók balról jobbra olvasnak, ezért zavarhatja őket, hogy a megszokott kezdési ponton egy menüsávot találnak. Ehhez pedig igazodniuk kell, ami zavart, kognitív terhelést okozhat a weboldal befogadásában.
• Reszponzív weboldalon nehéz a függőleges navigációt megfelelően megoldani.
• A menüben szereplő szavaknak elég rövidnek kell lenniük ahhoz, hogy jól illeszkedjenek a hasáb szélességéhez, és mégse kelljen olvashatatlanul keskeny betűket használni.
• Az a tér, amit a vertikális navigáció elfoglal, lehet hogy hasznos lenne a tartalom más elemei számára. Egy vertikális menü ugyanis nagyobb helyet vesz el az oldalból. Ez a legnagyobb hátránya a megoldásnak: kevesebb teret hagy a tartalomnak. Ez kisebb méretű kijelzők esetében akár komoly problémákat is okozhat.
• Egy szélesebb kijelzőn elképzelhető, hogy a hajtás alá kerülhetnek egyes navigációs elemek. A felhasználók pedig lehet, hogy egyáltalán nem görgetnek, így ami a hajtás alá kerül, az nem létezővé válik számukra a feladat végrehajtása közben.
• A rendelkezésre álló tér sok designert arra csábíthat, hogy “kihasználja” azt.
• Az egeret használó jobbkezes felhasználóknak az egész kijelzőt keresztül kell szelniük annak érdekében, hogy kattintani tudjanak valamely navigációs elemre.
• A vertikális navigációs menünek ragadósnak kell lennie, azaz görgetésnél is végigkísérnie a felhasználót, hogy az ne veszítse el.

Hogyan alakíts ki egy jól használható függőleges menüt?

A függőleges navigációs sávot mindig a bal oldalra érdemes elhelyezni. Ennek oka, hogy a felhasználók a weboldalak bal oldalára figyelnek elsősorban, miközben a jobb oldalon elhelyezkedő elemeket észre sem veszik (mivel általában itt helyezkednek el a hirdetések).

Emellett fontos, hogy a menü vizuálisan elkülönüljön a weboldal többi részétől. Egy eltérő szöveg- vagy háttérszín mindenképpen indokolható lehet, de a szegélyek is hatékonyak tudnak lenni az elválasztás jelzésében.

Szintén fontos, hogy a függőleges menüt ne ismételd meg horizontálisan is. Mostanában egyre többször lehet találkozni azzal, hogy egy weboldalon jelen van egy vízszintes menüsáv, benne egy hamburger ikonnal, mely egy függőleges menüt nyit le. Ez a kettőzés szükségtelen és akár zavaró is lehet a felhasználó számára.

Szintén sokszor lehet találkozni azzal, hogy a szöveges kategóriacímkék helyett ikonokat használnak egy-egy weboldalon, és a szöveg csak akkor jelenik meg a látogató számára, amikor rákattint, megérinti, vagy a címke fölé viszi az egérmutatót.

Sokan azért döntenek asztali gépes megjelenés esetében az ikon mögé elrejtés mellett, hogy ne vegyenek el területet a tartalomtól. Ez azonban új problémákat eredményez.

Egyrészt azért, mert a felhasználók nem feltétlenül értik meg az ikonok jelentését elsőre. Ilyenkor pedig egyszerűen nem vesznek tudomást a navigációs menüről. De akik kapcsolatba lépnek vele, azoknál is nagyobb az interakciós költség és az ikonok értelmezése miatti kognitív terhelés.

Ezért inkább ne rejtsd el a kategóriacímkéket ikonok mögé, akkor sem, ha a függőleges menü túl sok helyet foglalna el. Ha ikont használsz, akkor melléjük érdemes egy folyamatosan látható szövegcímkét helyezni, nem csak azért, mert egyértelműbbé teszik azt, hanem azért is, mert növeli az érinthető rész méretét.

Végül pedig, ha túl hosszú függőleges menüd van, érdemes a kevésbé fontos menüpontokat a lista végére helyezni. Egy hosszú menü esetében ugyanis jelentkezhet az a probléma, hogy a menü alja már túllóg a hajtáson. És mivel a felhasználóknak különböző kijelzőik vannak, nem igazán tudod, hogy egy látogató esetében hová kerül majd a hajtás a weboldaladon. A megoldás tehát annyi, hogy fontossági sorrend alapján rendezed el a menüpontokat, a legfontosabbal kezdve.

További tippek függőleges navigációs menü kialakításához

1. Használd a logót! A logódat a bal oldali menü tetejénél helyezd el, hiszen ez általában linkként is működik, mely a főoldalra viszi a látogatót.
2. A szöveges menüpont mellé tegyél ikont is! Önmagában egy ikon értelmezése nehéz lehet, ugyanakkor, ha ikonnal egészíted ki a szöveges menüpontokat, akkor könnyebben befogadhatóvá válik a felhasználók számára.
3. Jelezd az aktív linket! Ha valamelyik menüponthoz tartozó oldalon van a látogató, akkor jelezd azt az adott menüpont kiemelésével, mivel így könnyebben megértik, hogy hol is tartózkodnak adott pillanatban a weboldalon.
4. Rendezd csoportokba a menü elemeit! Ha a menüsávban olyan menüpontok kerülnek, melyek csoportosíthatók bizonyos kategóriákba, akkor ezt tedd meg úgy, hogy megjelenítesz kategóriacímkét is az egyes csoportok felett.

És vajon neked jó lehet?

Mivel a manapság alkalmazott oldalsó navigáció sokkal igényesebben van megformázva, mint amikkel a ‘90-es és 2000-es években találkozhattunk, így egyértelműen magára vonja az emberek figyelmét. Vagyis, ha a navigáció rendkívül fontos elem a weboldaladon, akkor mindenképpen érdemes megfontolnod a használatát.

Használatánál – ahogy minden, a megszokottól eltérő navigációs megoldásnál – érdemes tesztelni, figyelni az analitikát. És ha úgy látszik, hogy valami szokatlan történik a kattintásoknál, az emberek nem használják a navigációt, akkor lehet, hogy át kell gondolni a vertikális menü alkalmazását a weboldaladnál.

Frissítés, 2021.09.20.:

Hogyan tervezz alsó navigációs menüt?

Habár desktop megjelenésnél is lehet találkozni alsó navigációs menüvel, nagyobb jelentősége inkább mobilfelületeken van, ugyanis a felhasználó által a nagy mobilkijelzők korában könnyebben elérhető hüvelykujjal egy alsó navigációs sáv, mint egy felső. A mobilos felülteknél az egyik legnépszerűbb megoldássá vált az alsó navigációs sáv. És bár egyszerűnek tűnhet a kialakítása, mégis elég trükkös a dolog.

A mobilos megjelenés miatt az alsó navigációs menük jellemzője ugyanis, hogy korlátozott a menüben elérhető elemek száma, így csak a legfontosabbak kerülhetnek ide. Ez azt jelenti, hogy 3-5 menüpontot tudsz elhelyezni itt. Emellett általában ikonok jelzik az egyes menüpontokat, melyek kiegészülhetnek persze szöveges címkével is.

Ötnél több ikon számára alsó navigációs menü esetén nincs elegendő hely, illetve túl kicsik lennének az ikonok, a felhasználók hibáznának érintésnél, ha megpróbálnál többet bezsúfolni. Ráadásul a túl sok menüpont csak bonyolultabbá tenné.

Ha mindenképpen hatnál több menüpontot akarsz megjeleníteni, akkor fontold meg egy hamburger ikon használatát, vagy egy más elhelyezést.

Ezt a problémát néha úgy próbálják meg áthidalni a designerek, hogy vízszintesen görgethető alsó navigációs menüt terveznek. Ez azonban nem igazán működőképes megoldás: egyrészt a felhasználók gyakran nem veszik észre, hogy görgethető a menü, másrészt rendkívül szokatlan számukra, így nem biztos, hogy egyáltalán hajlandóak használni.

Ezen túl olyan alapvető design-elvekre is figyelned kell, mint például a következetesség: tehát ne eltérő ikonszettekből válogass, illetve a színek se térjenek el az egyes ikonok esetében. A színek természetesen legyenek összhangban az alkalmazás vagy weboldal designjával, illetve az aktív és inaktív ikonok kontrasztja legyen eltérő a háttérhez képest.

Az ikonok egyértelműbbé tehetők, ha címkét is kapnak. A címkék azonban nem lehetnek túl hosszúak. Az nem működőképes megoldás, hogy levágod a címkék szövegének végét.

Frissítés, 2022.11.09.:

Néhány hiba, amit semmiképpen ne kövess el az alsó navigációs sávnál

Ne helyezz el olyan elemeket, melyek műveleteket indítanak!

Az alsó navigációs sáv a nevéből is következően a navigációról szól, nem pedig a cselekvésről. Ezért ne kerüljenek bele olyan elemek, melyek valamilyen műveletet indítanak el! Az egyetlen kivétel egy olyan CTA lehet, mely vizuálisan elkülönül az alsó navigációs sávtól.

Ne szerepeljen benne 5 menüpontnál több!

Az alsó navigációs sáv akkor működik a legjobban, ha 3-5 navigációs cél látható rajta. Ha ötnél többet zsúfolsz a területre, akkor az egyes célpontok túl közel kerülnek egymáshoz, ami nehezíti a használatukat: az emberek véletlenül rossz elemet érinthetnek meg. Ezért mindenképpen csökkentsd ötre vagy az alá a célpontok számát. Ha ez nem lehetséges, akkor használj hamburger menüt.

Ne használj görgethető alsó navigációs sávot!

A görgethető alsó navigációs sáv használatával romlik a felfedezhetőség, hiszen nem minden lehetőség látható egyszerre. Ezzel a felhasználók elszalaszthatnak számukra esetleg fontos opciókat, ráadásul a jelenlegi pozíciót jelző vizuális jelzés is kikerülhet a kijelzőről.

Ne használj ismeretlen ikonokat!

Az alsó navigációs sávon használt ikonok jelentésének kristálytisztának kell lennie a felhasználók számára. Még akkor is, ha az ikonokat szövegcímkével egészíted ki.

Figyelj a kontrasztra!

Gyakori hiba az alsó navigációs sávoknál a gyenge színkontraszt és a túl kicsi betűméret. A kontrasztaránynak minimum 3:1-hez kell lennie az aktív elemeknél és az olyan grafikai elemeknél, mint az ikonok. A címkék esetében jól olvashatónak kell lennie a szövegnek.

Ne rövidítsd le a címke szövegét!

Habár az alsó navigációs sávon nem áll túl nagy hely a rendelkezésedre, az ikonok címkéinél mégsem tanácsos a szöveget lerövidíteni. A felhasználók számára nehezebb lesz megérteni az adott elem jelentését.

Ne használj animációt!

Elsőre talán jól néz ki, ha az alsó navigációs sávban is animált ikonokat használsz, azonban a gyakorlatban ezek gyorsan idegesítővé válnak azok számára, akik gyakran használják az alkalmazást. Ha nincs semmi gyakorlati értéke az animált elemeknek, akkor csak növelik a vizuális zajt, ami zavarja a felhasználókat.

Frissítés, 2022.04.28.:

Mi az a helyi navigáció? És mire lehet használni a weboldalon?

Úgynevezett globális navigációt minden weboldal használ, ugyanakkor akadnak olyan nagyobb weboldalak is, melyeknél megjelenik az úgynevezett lokális, vagy helyi navigáció is, mely segít a felhasználóknak, hogy azonosítsák a helyzetüket és felfedezzék a tartalmakat egy bizonyos kategórián belül vagy annak környékén.

Mi is az a lokális navigáció?

A navigációnak az a típusa, mely a felhasználó weboldalon belüli helyzetétől függően jelenik meg, s megmutatja számára az adott kategóriába tartozó oldalakat, aloldalakat.

A legtöbb weboldal információs architektúrája hierarchikus, tehát úgy vázolható fel, mint egy fa. Egy weboldal globális navigációja a fa legvastagabb ágait mutatja, bárhol legyen is a felhasználó a weboldalon. A globális navigáció változatlan, a felhasználók számíthatnak arra, hogy mindig ugyanaz és ugyanott marad, bárhol is járjanak a weboldalon. Segítségével a nagyobb kategóriák között válthatnak.

Ugyanakkor a helyi navigációs menü információkkal szolgál arról a kategóriáról, ahol éppen a felhasználó jár, illetve megjeleníthet más, kapcsolódó kategóriákat is, melyek a fa azonos ágán helyezkednek el.

Ez azt is jelenti, hogy a lokális navigáció minden kategóriában eltérő lesz és olyan tartalmakat kínál a felhasználónak, melyek kapcsolódnak az adott kategóriához, vagy legalábbis közel helyezkednek el hozzá a weboldal információs architektúrájában.

A helyi navigáció célja

A helyi navigáció megléte több célt is szolgálhat egyszerre:

• Jelzi, hogy az adott oldal mely kategóriában szerepel, vagyis segít a felhasználónak beazonosítani az aktuális helyzetét.
• Egyazon kategóriában szereplő, de más oldalakra mutató linkeket jelenít meg, vagyis abban is segít a látogatónak, hogy merre léphet tovább az adott oldalról.
• Megkönnyíti azt, hogy a felhasználó eljusson az információs architektúra mélyebb részeihez, melyek egyébként csak komolyabb interakciós költség révén lennének elérhetők számára.

Korábban említettük, hogy főleg nagyobb méretű weboldalaknál találkozhatsz vele. Ennek az az oka, hogy nem feltétlenül jó választás minden weboldal vagy alkalmazás számára, mivel van egy helyigénye. Az olyan termékek esetében, ahol szűkös a hely, kevés oldalból áll a weboldal, ott nem biztos, hogy érdemes alkalmazni.

De ugyanígy a mélyebb információs architektúrával rendelkező oldalaknál sem feltétlenül jó megoldás, mert túl bonyolulttá válhat a helyi navigációs menü, azaz túl sok helyet foglal el. Ilyenkor jobb megoldás más navigációs elemek alkalmazása, például kapcsolódó linkek vagy tartalmak jelzése.

Szükséged lehet helyi navigációra a weboldaladon?

A látható lokális navigáció rendszerint abban az esetben hasznos, ha a felhasználók keresgélnek egy weboldalon. Ilyenkor az emberek meglátogatnak több oldalt is egy kategórián belül, mert nem tudják pontosan, hogy mire is van szükségük vagy mert össze akarják hasonlítani az egyes kategóriákban szereplő információkat, esetleg többletinformációt akarnak gyűjteni a témában. Ilyen lehet például, ha valamilyen terméket akarsz vásárolni, és az egyes kategóriák között váltogatsz, mert nem döntötted el, hogy melyikre van szükséged.

Ahhoz, hogy megállapíthasd, hogy szükséged lehet-e a weboldaladon vagy annak egy részén lokális navigációs menüre, a felhasználói adatokból érdemes kiindulni, melyek megmutatják, hogy

• a látogatók több aloldalt is meglátogatnak a weboldalad valamely kategóriájában egy munkamenet során
• összehasonlítanak olyan információkat, melyek különböző oldalakon szerepelnek (például termékinformációk)
• általában a látogatást valamely belső oldaladon kezdik, nem pedig a főoldalon, és szükség van arra, hogy könnyen beazonosítsák a pozíciójuk a látogatás során.

Hogyan alakítsd ki a helyi navigációt a weboldaladon?

Ha lokális navigációt alakítasz ki a weboldaladon, akkor

• egyrészt könnyen azonosíthatónak és felfedezhetőnek kell lennie (vagyis a látogatónak meg kell tudnia találnia, és el kell tudnia különíteni a a globális navigációtól).
• Másrészt a tartalmak közötti tipikus váltásokat kell megjelenítenie. Tehát olyan tartalmakat, melyeket jellemzően egy munkameneten belül meglátogatnak az emberek.
• Emellett pedig minimális interakciós költséggel kell elérniük a menüt a felhasználóknak.

Ami a helyi navigáció elhelyezését illeti, monitoros megjelenítésnél általában két helyen jelenhet meg: vagy vízszintesen, egyből a globális navigációs menü alatt, vagy pedig a bal oldalon egy fordított L-betűt formázva a globális navigációval (mely vízszintesen, felül kap helyet). Hogy ezek közül melyiket választod, leginkább attól függ, hogy melyik passzol jobban a designhoz, illetve, hogy hány elem szerepel a helyi navigációban. Sok elem esetén egy vízszintes megoldás gondot okozhat.

A vízszintes elrendezésnek nagy előnye, hogy viszonylag kis helyet foglal: általában nem zavarja meg a fő tartalmi területet annyira, amennyire egy bal oldali menü tenné.

Emellett pedig az is igaz, hogy egy mély információs architektúra még függőleges kialakítás esetében is problémát jelenthet.

Habár nem túl gyakran látható, előfordul weboldalakon, hogy a vízszintes navigáció akár három szintet is elfoglalhat. Ennél azonban nem nőhet nagyobbra, hiszen akkor már túl nagy rész hasít ki a fő tartalmi területből.

Ilyenkor már érdemesebb morzsamenüt alkalmazni ahelyett, hogy minden szintet jelölnél egy lokális navigációs menüvel. Természetesen a morzsamenü nem ad lehetőséget arra, hogy a kategória más oldalait is lássa a felhasználó, ugyanakkor kevesebb helyet foglal. Ezért minden weboldalon egyedileg kell eldönteni, hogy melyik megoldás alkalmazható.

Amire még érdemes figyelni, hogy mindig könnyen beazonosítható legyen a helyi navigációs menü. Hiszen pont az a cél vele, hogy interakciós költség nélkül tegye felfedezhetőbbé a kapcsolódó oldalakat. Ha nem veszik észre a látogatók, vagy nem tudják, mi az, akkor nem is fogják használni.

Ugyanakkor nem mindegy, hogyan teszed láthatóvá a lokális navigációt. Például nem szabad feltűnőbbnek lennie, mint a globális navigációs menü, mert ebben az esetben összekeverhetik a felhasználók a kettőt. A vizuális hierarchiának tehát összhangban kell lennie az információs architektúrával.

Az alábbi példában az látható, hogy túlságosan kiemelkedik a lokális navigáció, és az NNG tesztjei szerint a felhasználók észre sem vették a globális navigációs menüt.

A vizuális hierarchia akkor van összhangban az információs hierarchiával, ha a lokális navigáció kisebb kontrasztot kap, mint a globális navigáció, akár a bal oldalra, akár felülre kerül.

Összességében tehát elmondható, hogy a helyi navigáció egy annak függvényében változó navigációs menü, hogy a felhasználó éppen hol tartózkodik a weboldalon, és megjeleníti a kapcsolódó oldalakat. A tervezésénél figyelni kell arra, hogy a felhasználók miként használják a weboldalt (összhangban van-e a felhasználói úttal), jól látható-e, de nem annyira feltűnő, hogy elnyomja a fő navigációs menüt.

Hogyan segíti a morzsamenü a navigációt? Hogyan alakítsd ki?

A breadcrumbs, azaz a morzsamenü használata nem egy forradalmian új dolog, ugyanakkor még mindig rendkívül fontos a szerepe a webdesignban, mivel nagymértékben javíthatja egy-egy weboldal használhatóságát.

A morzsamenük fontos navigációs elemek sok weboldalon, melyek segítségével könnyebben tájékozódnak a felhasználók. Láthatják, hogy adott pillanatban éppen hol járnak az oldal hierarchiájában, és könnyen elérhetik a felsőbb szinteken található oldalakat, egészen a főoldalig. Habár azt gondolhatod, hogy szükségtelen lehet egy morzsamenü, vagy akár zavaró is a weboldaladon, de nem így van: szinte csak előnyei vannak a használatának.

Ha egy weboldal vagy webáruház esetében jelentősebb visszapattanási aránnyal, vagy sok félbehagyott vásárlással találkozunk, akkor felmerülhet, hogy vagy valami gond van a fő navigációval, vagy akár csak annyi a gond, hogy a morzsamenü hiányzik a weboldalról.

A breadcrumbs javítja a használhatóságot

A morzsamenük nem okoznak nagyobb problémát az embereknek a használat során, hiszen ismerik a működését, nem hozza zavarba őket. Az szokott csak időnként előfordulni, hogy észre sem veszik a morzsamenüt. Ennek persze az is oka lehet, hogy alig foglalnak helyet a weboldalon, szinte észrevétlenül húzódnak meg többnyire annak bal felső részén.

Nem problémát okoznak tehát, hanem jelentős mértékben javítanak a weboldalak használhatóságán, többek között azért, mert világosan megmutatják a weboldal felépítését a felhasználóknak, és csökkentik a szükségtelen kattintások számát. Sok szakértő egyébként úgy véli, hogy a Google is figyelembe veszi a breadcrumbokat egy weboldal minőségének a meghatározásakor. Ez azt is jelenti, hogy a morzsamenük révén akár a látogatások számát is növelhetjük.

A breadcrumbs alapvető funkciója

Ahogy a vonatkozó Wikipédia bejegyzéséből is kiderül, ez a navigációs eszköz Jancsi és Juliska meséje alapján kapta a nevét, hiszen a két mesehős kenyérmorzsákat szórt el, hogy ezáltal könnyen visszataláljanak otthonukba az erdőből. Éppúgy, mint a mesében, a webdesignban is alapvetően arra használjuk a morzsamenüt, hogy a látogatók képesek legyenek visszatérni kiindulási pontjukra, vagy egy központi helyre egy weboldalon.

A breadcrumbs csak kiegészíti a fő navigációs menüt, annak szerepét teljes egészében nem veheti át. Ezért attól még, hogy használunk morzsamenüt a weboldalunkon, kellő alapossággal kell kivitelezni a navigációs menüt is. A cél elsősorban az, hogy ha egy felhasználó elveszett egy összetett weboldalon, akkor a morzsamenüre rátekintve átlássa annak szerkezetét, illetve rákattintva a lehető leggyorsabban vissza tudjon térni valamelyik magasabb szintű weboldalra.

Frissítés, 2022.08.30.:

A morzsamenü SEO szempontból is hasznos

A morzsamenü az előbbieken túl SEO-szempontból is hasznos lehet, sőt tekinthetjük akár szükséges elemnek is. Kivételt inkább csak a kisebb oldalak jelentenek, melyeknek annyira egyszerű a felépítése, hogy nem igényel morzsamenüt.

A Google irányelvei szerint a morzsamenü segít a keresőmotoroknak kategorizálni és kontextusba helyezni egy adott oldal tartalmát. Ráadásul a Google 2018-tól a találati oldalakon is megjeleníti a morzsamenüt. Ezáltal a felhasználók még a weboldalra érkezés előtt tájékozódhatnak arról, hogy az adott oldal hol jelenik meg a weboldalon, vagyis releváns lehet-e számukra a tartalom.

A Google ráadásul akár az URL helyett is megjelenítheti a morzsamenü elemeit. Célszerű azonban strukturált adatot használni a morzsamenühöz, ha nem akarod, hogy a keresőmotorok félreértelmezzék azt, és nem releváns morzsamenü-elemeket mutogassanak a felhasználóknak.

Schema jelölés segítségével megjeleníthető a találati oldalakon egy egyedi morzsamenü-lista is, ami javítja az átkattintási arányt a weboldalra. A felhasználók ugyanis ennek révén kattintásra késztető linkekkel találkoznak a keresési eredmények között. Javult tehát a weboldal találati oldali megjelenése.

És persze arról se feledkezzünk meg, hogy a morzsamenü a weboldalon is javítja a felhasználói élményt a javuló navigáció által, ami közvetve fontos a Google számára is. Olyan adatok utalnak erre, mint például a csökkenő visszafordulási arány, hiszen a látogatók jobban tudnak tájékozódni az oldalon, valamint tovább is maradnak ott.

Hogyan néz ki a morzsamenü?

A morzsamenü tulajdonképpen linkek lánca. Az oldal felső részén helyezkedik el, jellemzően a navigáció menü alatt. Az első link a sorban mindig a főoldal, és az egyes linkeket valamilyen jel (általában egy > vagy egy / jel) választja el). A Nielsen Norman Group a > jelet javasolja, de funkcionális különbséget nem látnak a kettő között, és mindkettő használatát elfogadhatónak tartják.

A morzsamenü felépítése

Technikailag a leggyakrabban használt helyalapú morzsamenü úgy néz ki, hogy egy linkkel indít, mely a főoldalra mutat, és mindig annak az oldalnak a címével fejeződik be, ahol a felhasználó éppen tartózkodik. Ez az utolsó elem a morzsamenüben szereplő többi elemtől eltérően nem kattintható.

A leggyakrabban vízszintes sorként megjelenő breadcrumbs azt a folyamatot ábrázolja, ahogy a weboldal legfelső szintjéről a jelenlegi legalsó szintig el lehet jutni. Általában egyszerű szöveges linkekből áll, melyeket valamilyen egykarakteres elválasztó jel különít el egymástól. Az ilyen felépítés révén a felhasználók számára az is világossá válik, hogy egy-egy oldal milyen kapcsolatban van azzal az oldallal, ahol adott pillanatban állnak. A linkek által a felhasználók egyetlen kattintással elérhetik a weboldal felsőbb szintjeit, ami komoly segítséget jelent azok számára, akik teljesen véletlenül egy bonyolult hierarchia legalján találták magukat.

A morzsamenü típusai

A morzsamenünek alapvetően három típusát különböztetjük meg. Az első és leggyakrabban használt típusa a helyalapú breadcrumbs, mely által könnyen meghatározható, hogy egy-egy aloldal pontosan hol helyezkedik el a weboldal hierarchiájában, valamint linkeket mutat a felhasználóknak, melyek révén megtalálják a weboldalak felsőbb szintjeit.

Létezik emellett az útvonal alapú morzsamenü, amely segít megmutatni a felhasználóknak, hogy milyen utat tettek meg a weboldalra érkezésük óta. A felhasználó ebben az esetben látja azon oldalak linkjeit, melyeket korábban meglátogatott. Ez a megoldás azonban nem nyújt sokkal többet, mint a böngésző “vissza” és “előre” gombja, így nem is különösebben elterjedt a használata.

A harmadik megoldás az ún. tulajdonság alapú morzsamenü, mely nem mindig egy egyenes útvonalat ábrázol, hanem azt mutatja meg, hogy az a weboldal, ahol adott pillanatban a felhasználó tartózkodik, milyen tulajdonsággal rendelkezik, milyen kategóriába sorolható. Ez a típusú morzsamenü a webáruházaknál terjedt el, ahol egy-egy termékhez akár több útvonalon is eljuthatunk, ugyanakkor az számít igazán, hogy az adott termék milyen termékcsoportnak a része.

Mire figyelj a morzsamenü kialakításánál?

1. A morzsamenü nem helyettesítheti a navigációs menüt – a morzsamenü csak egy kiegészítő a többi navigációs elem mellett.

2. A morzsamenünek nem a bejárt utat kell mutatnia, hanem a jelenlegi pozíciót a hierarchiában – a felhasználó által bejárt út megjelenítése bonyolult lehet és túl sok ismétlődést tartalmazhat, ráadásul nincs is igazán hasznára a látogatónak, ha egyből egy aloldalra érkezik egy külső linkről.

3. A polihierarchikus oldalakon egyetlen utat kell mutatnia – ha egy aloldalnak több felsőbb szintű oldala is van, akkor az NNG szerint nem tanácsos mindegyiket megmutatni, mert ez összezavarja a felhasználókat, ráadásul sok helyet is elfoglal az oldal tetején. Meg kell határoznod egyetlen utat, és minden felhasználónak ezt kell mutatnia, függetlenül attól, hogy honnan érkezett.

4. Mindig a jelenlegi oldal legyen az utolsó elem a láncban, viszont ez ne linkként jelenjen meg, hiszen a felhasználó éppen azon tartózkodik. Ez vizuálisan is legyen nyilvánvaló, eltérő szín vagy aláhúzás használata révén.

5. Ez azt jelenti, hogy az utolsó elem ne legyen kattintható! Mivel az utolsó elem az a jelenlegi oldal, ahol a felhasználó éppen tartózkodik, így nincs értelme annak, hogy kattintható legyen, azaz újratöltse magát az oldal. Ez egyben megerősítést is ad arról a felhasználónak, hogy hol tartózkodik. Azt, hogy nem kattintható az elem, jelezni is kell a designnak megfelelő vizuális kialakítással.

6. A morzsamenü mindig csak oldalakat tartalmazzon, nem pedig logikai kategóriákat – vagyis minden egyes elem a láncban működjön linkként (kivéve az utolsót, ahogy az előbb említettük). Ha egy alkategóriának – mely a menüben esetleg megjelenik – nincs saját oldala, akkor az ne jelenjen meg a morzsamenüben.

7. A morzsamenü lánc mindig a főoldal linkjével kezdődjön – ugyanakkor nem javasolt az NNG szerint, hogy a navigációs menüben és a morzsamenüben is megjelenjen a főoldal link. Elég, ha csak az egyikben van.

8. A morzsamenü ne legyen szélesebb, mint az oldal fele. Ez az olvashatóság miatt fontos. Ha ugyanis túl hosszú a sor, akkor nehezen tudja befogni a látogató az egészet, nem látja át, hogy pontosan hol kezdődik és hol ér véget, elveszik benne. Ha az oldal felénél hosszabb lenne, akkor célszerű lehet megtörni, és új sorban folytatni. De ennél is jobb, ha lerövidítjük.

9. Csukd össze, ha túl sok elem található benne! Valójában azzal kapcsolatban egzakt szám, hogy hány elemnek kellene láthatónak lennie, de ha túl sok elemből áll egy morzsamenü, akkor átláthatatlanná válik. amennyiben három ponttal helyettesítjük az út egy részét, akkor azt úgy kell megoldani, hogy a felhasználó rákattintva ki tudja nyitni a teljes morzsamenüt.

Emellett fontos, hogy a három pont valahol az elején legyen a sornak, mivel azok az elemek, melyek a felhasználó jelenlegi pozíciójához közelebb állnak, fontosabbak a számára. Ugyanakkor a három pont soha nem helyettesítse az első elemet, mert az is fontos a felhasználó számára, hogy hol kezdődik az oldal.

10. A túl hosszú elemeket rövidítsd le! Ha egy nagyon hosszú oldalnév kerül a morzsamenübe, akkor lehet, hogy még nem az elemek számával van gond, hanem mindössze egyetlen elemmel. Ezért a túl hosszú neveket le kellene rövidíteni.

Jó megoldás ugyanakkor, ha hover effektként megjelenik a felhasználó számára a teljes szöveg.

11. Az elválasztó ikon fejezze ki a mozgás irányát! Hiszen mi az utat mutatjuk a felhasználónak. Mint már említettük, a legjobb megoldás a nyíl.

Mire figyelj a morzsamenünél mobilon?

Mobilon a morzsamenü előnyeit gyakran lenullázzák a hátrányai.

1. Nem foglalhat el több sort a morzsamenü mobilon – mivel mobilkijelzőn kevesebb hely áll rendelkezésre a függőleges tájolás és a kisebb kijelzőméret miatt, ezért könnyen túlnyúlhat rajta a morzsamenü. A több sorba tördelt morzsamenü viszont már nem segíti, hanem inkább összezavarja a felhasználót, mivel nem tudja érthetően bemutatni a hierarchiát. Mint például itt:

2. Ne használj túl kicsi vagy nagyon összezsúfolt morzsamenüt! – Sokan az előbbi problémát úgy próbálják kiküszöbölni, hogy a linkeket kisebbre veszik, és minimális távolságot hagynak közöttük. Ez azonban azért nem járható út, mert túlságosan kis méretnél már nehéz vagy lehetetlen az érintés. Legalább 1 x 1 cm-esnek kell lennie egy kattintható felületnek mobilon.

3. Ha szükséges, inkább rövidítsd le a linkek láncát! – Vagyis csak a jelenlegi oldal és annak anyaoldala legyen látható. Már ez is segít a felhasználónak a navigációban. Ezt a megoldást azonban csak mobilon használd, mert kompromisszumos megoldás, és ellentétben áll a 7. ponttal!

Mikor érdemes használni breadcrumbst, és mikor nem?

Alapvetően akkor érdemes morzsamenükkel kiegészíteni a weboldalunkat, ha az oldal valamilyen szigorú hierarchia alapján épül fel, és különösen akkor javasolt a használata, amikor elég bonyolult ez a hierarchia, esetleg egy adott mélységű szinten nincs már más navigációs segítség a felhasználó számára.

Ugyanakkor egyszintes weboldalaknál felesleges morzsamenüt elhelyezni az oldalon, ahogy akkor is, ha nem tudunk valamiféle értelmes csoportosítással vagy hierarchiával előállni. Ilyenkor egy oldaltérkép jobb megoldás lehet. Arra azonban mindig figyeljünk, ha morzsamenüt alkalmazunk, hogy az ne helyettesítse, ne akarja pótolni az elsődleges navigációt, pusztán csak egészítse ki, vagyis alternatív megoldásként segítsen a felhasználóknak a tájékozódásban a weboldalon!

Még mindig szükség van a „kezdőlap” gombra a weboldalakon? Hogyan alakítsd ki?

10-15 évvel ezelőtt még a „home”, illetve „főoldal” vagy „kezdőlap” horgonyszöveggel ellátott linkek, gombok jelentették minden navigáció origóját egy-egy weboldal esetében. Amikor valaki mélyen eltévedt egy-egy összetett weboldal aloldalainak erdejében, akkor egyszerűen rábökött a navigációs menüben található “home” gombra, és az visszarepítette a nyugalmas és biztonságos kikötőbe, a főoldalra, ahonnan ismét nekiindulhatott a weboldal feltárásának.

Akik már 10-15 éve neteztek, azok emlékeznek arra, hogy a gyakorlatban nagyon sokszor zajlott így a böngészés. Az idők azonban változnak, az emberek számára egyre természetesebb lett a web, egyre rutinosabban navigálnak a weboldalakon, fiatalok pedig egyszerűen már beleszületnek. Így azt gondolhatnánk, hogy a korábban még rendkívül hasznosnak talált “kezdőlap” link mára feleslegessé vált a weboldalakon, hiszen a logót is használhatták erre a célra. A szakma meghatározó neve, a Nielsen Norman Group szerint azonban még mindig sokan keresik az explicit módon megjelenő „home” gombot a weboldalakon. Érdemes tehát használni, és azt is elmondják, hogyan.

Hol jelenhet meg a „vissza a főoldalra” funkció?

Kezdjük ott, hogy hol jelenhet meg a „főoldal” link, mert később fontos lesz, hiszen nem minden elhelyezésnek azonos a súlya.

Navigációs menü

Ez a legalapvetőbb megjelenése a „home” gombnak. A vita tulajdonképpen arról szól, hogy a navigációs menüben 20 év webes használat után meg kell-e jelennie, vagy más elemek képesek átvenni a funkciót?

Kattintható logók

Mára teljesen sztenderd megoldássá vált a weben a kattintható logók használata, mely egyben a leginkább elfogadott és megszokott alternatívája a “kezdőlap” linknek. Hiszen a legtöbb oldal fejlécében – többnyire a bal oldalán – megtalálható a logó, így adja magát az ilyen irányú alkalmazása. Annál is inkább, mivel a logó minden egyes aloldalon is jelen van.

Morzsamenü

Különösen a nagyobb mélységű, többrétegű weboldalaknál célszerű a breadcrumbs használata, melyek minden egyes oldalon mutatják a felhasználó számára, hogy éppen merre, melyik szinten jár. Ezek egyben linkként is funkcionálnak, vagyis az egyes elemekre kattintva feljebb tudunk lépni az oldal hierarchiájában, akár a főoldalra is. Hagyományos megjelenítésnél a lapok tetején, közvetlenül a fejléc alatt tűnnek fel. Ezekben legfelső szintként helyet kaphat a „kezdőoldal” link, mégpedig egész jól használhatóan.

Lábléc

Szintén kiindulópont lehet a lábléc lehet a felhasználók számára. Ez az a hely, ahová általában legörgetnek, amikor az oldal szerkezetével kapcsolatos információkra kíváncsiak. Itt ugyanis sokszor megjelenik a teljes vagy részleges weboldal-térkép. Ezért a lábléc arra is szolgálhat, hogy ha a felhasználók valamit nem találnak a főmenüben, akkor legörgessenek az oldal aljára, hogy körülnézzenek ott is. Így pedig egy “kezdőlap” gombnak is van itt helye, akár logó formájában.

Pro és kontra érvek: mi szól a dedikált „kezdőlap” link ellen, és mi mellette?

Amiben mindkét vélemény azonos állásponton van az az, hogy egy közvetlen, egyetlen kattintással a főoldalra vezető linkre szükség van minden weboldalon. Ennek alapvetően két oka van:

1. A visszatérés a főoldalra nagyon gyakori művelet a weboldalakon. Az emberek gyakran ugranak vissza a főoldalra, amikor eltévednek, vagy készek egy új feladat elindítására.
2. A keresőkből sokan egy aloldalra érkeznek, így első körben kikerülve a főoldalt. Számukra praktikus lehet egy főoldalra mutató link, ha a weboldal más részeit is felfedeznék.

Ellene szóló érvek

Először is az egyszerűsítés szándéka. Amikor felhasználói élményt tervezünk, arra kell törekednünk, hogy hatékonyabbá tegyük a felhasználói utat a weboldalunkon, annak érdekében, hogy látogatóinkból visszatérő és elégedett látogatók legyenek. Habár nagyon sok eszköz van, amit segít a konverziós arányunk javításában, a felesleges navigációs elemek eltávolítása is ezek közé tartozik. A “kezdőlap” link leselejtezése révén egy kicsit áramvonalasabbá válik az oldalunk, könnyebbé válhat vele a felhasználók vezetése.

A nagyobb weboldalak esetében azt látjuk, hogy közülük nagyon sok eltávolította már a “home” gombot. Többek között azért is, mert nem a főoldal a helye az elsődleges interakcióknak – tehát nem kiemelt fontosságú a weboldalon -, ide inkább csak a kiemelt ajánlatok, a reklámok, és valamiféle tartalomjegyzék kerül. És végül utolsó érvként: talán már nincs is szükség rá, mert a felhasználók megszokták, hogy a logóra kattintanak ebből a célból.

Mellette szóló érvek

A Nielsen Norman Group szerint ugyanakkor a „home” gomb funkcióját átvevő, nagyon elterjedté vált, főoldalra mutató, kattintható logó nem elég a weboldalon, szükség van kifejezetten „kezdőlap” elnevezésű linkre is. Akár a navigációs menüben, akár a morzsamenüben, de kell.

Ennek oka, hogy nem minden esetben jelent biztos megoldást egy főoldalra linkelt logó. Habár mára bevett gyakorlattá vált, még mindig nem minden felhasználó ismeri, különösen a webet ritkábban használók. Az NNG használhatósági kutatásai során még mindig találkozik olyan felhasználókkal, akiknek gondot jelent az, hogy megtalálják a főoldalra mutató linket. Különösen akkor, amikor a logók nem a megszokott helyükön, a bal felső sarokban jelennek meg, vagy esetleg nem logónak hanem sima szövegnek néznek ki.

Hoa Loranger szerint a logón keresztüli elérés csak egy implicit megoldás, ami mellett kell egy explicit megjelenés is, ami a „home” gomb lenne. Tanácsa szerint mindkettőt használni kell a weboldalakon, hiszen tapasztalataik azt mutatják, hogy még mindig nagyon sok ember keresi a „kezdőlap” gombot a navigációs menüben. A „home” gomb azonban nem csak a navigációs menüben, hanem a morzsamenüben is ugyanolyan jól funkcionálhat.

Ezek után lássuk, hogy miként kellene kialakítani őket egy jó felhasználói élmény érdekében!

A főoldalra mutató implicit linkek kialakítása

1. A logó mindenképpen mutasson a főoldalra!

Az idők során sok ember megtanulta, hogy a weboldalakon a logóra kattintással visszajuthat a főoldalra. Ez egy olyan hagyománnyá vált, melyet érdemes követni, hiszen a felhasználói várakozásoknak való megfelelés csökkenti a zavart.

2. A logó a bal felső sarokban legyen!

Ez az a pozíció, ami a leginkább elterjedt, és az emberek éppen ezért itt keresik a logót. Logókról szóló blogbejegyzésünk egyik fejezetében már áttekintettük, hogy mennyire fontos a megszokott helyre tenni a logót a weboldalon. Hatszor valószínűbb, hogy az emberek egy kattintással vissza tudnak térni a főoldalra, ha bal felső sarokban elhelyezett logónk van, mint ha középen lenne. Ha jobb oldalon van, akkor pedig egyszerűen nem találják meg.

3. Különbözzön a logó a szövegtől!

Az még nem elég, hogy a megfelelő helyre kerül. Sokszor a logó úgy néz ki, mint ha a navigáció része, vagy egy címsor lenne. Ahhoz, hogy az emberek megtalálják a logót, meg kell különböztetni a többi elemtől.

Az explicit linkek kialakítása

1. Legyen egy „kezdőlap” gombod!

A problémák elkerülése végett a legjobb megoldás, ha mind a kattintható logót, mind pedig „home” gombot is használsz – szögezi le az NNG. Ennek a „home” gombnak azonban nem feltétlenül a navigációs menüben kell helyet kapnia, megjelenhet a morzsamenüben is. Fontos azonban, hogy akár navigációs menüben, akár morzsamenüben szerepel, a weboldal bal felső részén, a tartalom felett jelenjen meg, mert így találják meg legkönnyebben az emberek.

2. A morzsamenü mindig a „kezdőlap” linkkel kezdődjön!

A morzsamenü mutatja meg az embereknek az aktuális pozíciójukat, valamint azonnal lehetőséget kínálnak nekik, hogy a weboldal egy felsőbb szintjére ugorjanak. A legjobb megoldás, ha mindig látható benne a „home” gomb, mint a weboldal legfelső szintje. Egy kivétellel.

3. A főoldalra ne tegyél „home” gombot!

Az mindig zavaró, ha egy oldalra magára mutató link kerül. Nincs ez másként a kezdőlap esetében sem. A „kezdőlap” gomb tehát mindig csak az aloldalakon jelenjen meg. Tehát a főoldalon vagy úgy jelenjen meg a „kezdőlap” gomb, mint ami épp aktív állapotban van, vagy pedig egyáltalán ne legyen látható.

4. Ha morzsamenüt használsz, akkor ne jelenjen meg a „kezdőlap” a navigációs menüben!

Végül: arra nincs szükség, hogy mind a navigációs menüben, mind a morzsamenüben szerepeljen egy „kezdőlap” gomb. Ez már túl sok, szükségtelenül növeli a weboldal komplexitását. A duplikált link a négy legveszélyesebb navigációs technika közé tartozik, melyek kognitív terhelést okoznak az embereknek, így lehetőleg kerülni kell az alkalmazását.

Hogyan használd az ugrólinkeket a weboldaladon?

Míg régebben a weblapon belüli hivatkozásokat nem tartották előnyösnek a felhasználói élmény szempontjából, mára mégis egyre inkább kidomborodnak az előnyei. Az egyre hosszabbá váló weboldalakon ugyanis hatékonyan szállítják a felhasználót közvetlenül a kívánt tartalmi részhez, bármilyen kijelzőméret mellett.

A weblapon belüli hivatkozások (más néven horgonylinkek vagy ugrólinkek) azt a célt szolgálják, hogy egy adott oldalon belül a tartalom egy meghatározott pontjára szállítsák a felhasználót. Régebben nem igazán ajánlották ezt a megoldást, ennek ellenére az elmúlt években elterjedt a használta. Az NNG egy cikkében átttekintette, hogy milyen előnyei és hátrányai vannak.

Milyen problémát okozhatnak a lapon belüli linkek? És miért hasznosak mégis?

A legjelentősebb használhatósággal kapcsolatos gond az, hogy működésük nem egyezik a felhasználóknak linkekről alkotott mentális modelljével. Normál esetben ugyanis egy link egy másik weboldalra viszi a felhasználót, míg egy horgonylinkkel ugyanazon lapon belül navigál. És amikor a várakozásoktól eltérően működik valami, akkor az emberek összezavarodnak.

A használhatósággal kapcsolatos aggodalmakat ugyanakkor kompenzálják az előnyei. Hiszen az oldalon belüli hivatkozások segítenek az embereknek a weboldal tartalmában navigálni. Azok a linkek, melyek az oldalon mélyebben megjelenő további információkhoz vezetnek:

• Tartalomjegyzékként viselkednek, azaz vázolnak egy elképzelést a felhasználók fejében az oldalról.
• Közvetlen hozzáférést biztosítanak az embereket érdeklő tartalmakhoz.
• Javítják a felfedezhetőségét annak tartalomnak, mely egyébként csak hosszú görgetés után lenne elérhető.

Mikor használhatod őket?

Három eltérő használati megoldással találkozhatunk a horgonylinkeknél:

• Tartalomjegyzék: amikor a belső hivatkozások egyszerűen tartalomjegyzékként funkcionálnak hosszabb tartalom esetében, így adva közvetlen hozzáférést az embereknek az őket érdeklő információkhoz.
• Vissza az oldal tetejére: amikor a linkek a weboldal tetejére repítik a felhasználót az oldal egy más pontjáról. Habár ezeknek a linkeknek tulajdonképpen az a funkciójuk, mint a görgetésnek, hosszú weboldalaknál mégis hasznosak, mivel sok időt megtakarítanak a felhasználónak. Az ilyen linkek nem zavarják azokat, akik nem használják őket, míg nagy segítségére vannak azoknak, akik viszont igen.
• Indexek és GYIK-ok: az ábécésorrendbe szedett vagy számozott indexek vagy listák jól használhatók ugrólinkek alkalmazásával. A weboldal tetején megjelenő linklista ugyanis megkíméli az embereket a hosszas görgetéstől. Az ilyen linkek különösen hasznosak akkor, amikor egy speciális tartalmi részhez akarnak eljutni az emberek.

A weblapon belüli hivatkozások annál hasznosabbak, minél kisebb kijelzőméretnél használják őket. Hiszen míg néhány bekezdésnyi szöveg mindössze egyetlen oldalt foglal el egy monitoron, addig egy mobiltelefonon több kijelzőnyi szöveget kell legörgetni, hogy a végére jussunk. Ugyanaz a tartalom – ha mégoly rövid is – lényegesen hosszabbnak tűnik, amikor kisméretű kijelzőn jelenik meg.

Hogyan használd a weblapon belüli hivatkozásokat?

Azt tehát már tudjuk, hogy az ugrólinkek zavaróak lehetnek a felhasználók számára, ugyanakkor az is világos, hogy segíthetnek számukra megtalálni az információkat, különösen hosszú weboldalakon, mobilos használatnál. Miként tudjuk tehát csökkenteni az előnyöket és mérsékelni a hátrányokat? Milyen részletekre kell figyelnünk, amikor belső linkeket alkalmazunk?

Vedd figyelembe a tartalom hosszát!

A belső hivatkozások csak akkor segítenek, ha a weblap tartalma hosszú. Habár bármilyen hosszúságú tartalom esetében hasznos lehet az alkalmazása, azonban minél hosszabb a weboldal, annál nagyobb segítséget jelent.

Ugyanakkor azt is tudjuk, hogy az emberek nem olvasnak el mindent, amikor a weben járnak, csak átfutják a tartalmat. Vagyis mielőtt nekiállnál ugrólinkeket használni, először próbáld meg csökkenteni a tartalom hosszát! Ezáltal lehet, hogy szükségtelenné is válnak a belső linkek.

Azt ugyancsak vedd figyelembe, hogy egyszerre mennyi információ jelenik meg egy oldalon. Nagy mennyiségű információ megjelenítése egy oldalon csökkenti a felhasználói erőfeszítést, illetve az interakciós költséget, de csak akkor, ha a felhasználó alaposan elolvassa a teljes tartalmat az általad kialakított sorrendben. Ha viszont a weblap 4-5 kapcsolódó, de mégis eltérő témát tartalmaz, akkor talán jobb megoldás különböző oldalakra rendezni őket, különösen, ha akadnak olyan emberek, akik csak az egyiket vagy csak a másikat olvassák el.

Végül az egyes fejezetek hosszát is érdemes figyelembe venni. Egy olyan oldal, ahol sok, rövid fejezet található, nem igényel olyan sok görgetést. Ebben az esetben szükségtelenek, sőt adott esetben hátrányosak is lehetnek a belső linkek, mivel ezek viszonylag nagy helyet elfoglalva csak növelik az oldal hosszát és lefelé tolják a lényegi tartalmat.

Használj világos linkeket és címsorokat!

Hosszú tartalmak esetében előnyös, ha azok részekre vannak bontva, és ezek a részek kapnak egy címet. A címekre úgy kell gondolni, mint az oldal csontvázára: a felhasználó áttekintést kaphat a tartalomról, ha végiggörgetve az oldalon elolvassa az alcímeket. Ehhez az kell, hogy az alcímek világosak és érthetőek legyenek.

A felhasználók lehet, hogy görgetnek, lehet, hogy nem. Általában csak akkor kezdenek görgetni, ha erre van valami indokuk: mondjuk feltételezik, hogy a szöveg olyan információkat tartalmaz, amire szükségük van. Az alcímek tehát csak akkor hasznosak az emberek számára, ha a görgetés során látják őket.

Az ugrólinkek segítenek a probléma megoldásában, hiszen használatuk révén megjelenhetnek az alcímek az oldal tetején, így a felhasználónak nem kell görgetni az áttekintésükhöz. Ezáltal sokkal hatékonyabban mutatják be a tartalom gerincét, mint önmagukban az alcímek.

A belső linkek jelzése

A horgonylinkeket meg kell különböztetni a többi linktől, hogy a felhasználók megértsék, hova viszi majd őket. Ez lehet egy vizuális jelzés, vagy egy olyan szöveg felettük, mint például a “tartalomjegyzék”. Az érthetőség miatt tehát fontos a címkék használata, ahelyett, hogy kizárólag az elhelyezésre vagy a vizuális kialakításra hagyatkoznánk. Az ilyen címke kontextusba helyezi a belső linkeket, ami hasznos akkor, ha a felhasználó a weboldal egy részletére nagyít, vagy egyszerűen csak mobilkijelzőn nézi a weboldalt.

Erősítsd meg az ugrást!

Az ugrólinkek szövegének passzolnia kell az alcímhez, ahová a link viszi a felhasználót. Biztosítani kell a látogatókat arról, hogy a weboldal megfelelő pontjára érkeztek. Az alcím itt úgy működik, mint egy útjelző tábla, mely beazonosítja a felhasználó helyzetét.

Amikor a felhasználó egy belső linkre kattint, a kapcsolódó tartalomnak a kijelző tetejénél kell megjelennie, hogy minél többet el tudjon olvasni az adott fejezetből. Ugyanakkor abban is segíteni kell az embereket, hogy meghatározhassák a pozíciójukat az oldalon, és tisztában legyenek azzal is, hogy még mindig ugyanazon az oldalon járnak. Ezért érdemes az adott fejezetet megelőző szövegből megmutatni egy részt nekik, vagy legalább egy kis whitespace-t a címsor felett. Ha ugyanis a kiválasztott címsor túl közel kerül a weboldal tetejéhez, akkor a felhasználók lehet, hogy észre sem veszik.

Ha a weboldaladon vannak olyan ragadós elemek, mint egy navigációs sáv, közösségi megosztás vagy hirdetés, melyek az oldal tetején kapnak helyet, akkor győződj meg arról, hogy azok nem takarják a címsort. Mert akkor a felhasználóknak görgetniük kell az őket érdeklő rész beazonosítása érdekében, vagy egyszerűen csak összezavarodnak.

Figyelj a tartalom utolsó részére is! Ha ez egy rövid szöveg, viszont van még alatta számos link és egyéb elem, akkor a címsornak inkább az oldal közepe felé kellene megjelennie, nem pedig a tetején. A legjobb, ha az utolsó részt elegendő hosszúra írod.

Lehetnek ragadósak is a belső hivatkozások

Mobilkijelzőkön a lapon belüli linkeknek mindig a tartalom felett kell megjelenniük. Ugyanakkor nagyobb kijelzőknél több lehetőség is a designerek rendelkezésére áll. Például megjelenhetnek a fő tartalmi terület bal vagy a jobb oldalán is. Ez talán elsőre kevésbé szembetűnő az emberek számára, hiszen elsősorban a kijelző közepére figyelnek, ugyanakkor ha ezek ragadós linkek, akkor mindig a felhasználó szeme előtt maradnak, bárhová görget is a lapon.

A másik lehetőség, ha ezek a weblapon belüli hivatkozások ott jelennek meg, ahol egyébként normál esetben a navigáció kapna helyet. Például egy ragadós felső navigációs menü helyett a weboldal tetején. Ez persze nem igazán jó megoldás, mivel itt megint szembekerülünk azzal a felhasználói mentális modellel, amit a linkekkel kapcsolatban alakítottak ki. Hiszen, ha olyan helyre teszünk linkeket, melyek egyébként a navigáció céljára szolgálnak, akkor csak tovább rontjuk a helyzetet. A felhasználók ugyanis arra számítanak, hogy a navigációs linkek majd egy új oldalra viszik őket.

Ha a belső linkeket ragadóssá tesszük, akkor arra is figyelni kell, hogy mindig jelezzék a felhasználó aktuális pozícióját az oldalon. Tehát annak a linknek mindig változzon meg a színe, amelyik a weboldal azon részére mutat, ahol éppen jár a felhasználó.

Összecsukható tartalmak vagy oldalon belüli hivatkozások?

Összecsukható tartalmak (mint a Wikipédián) is használhatók tartalomjegyzékként GYIK-ok vagy indexek esetében. Ezek ugyanúgy áttekintést kínálnak a felhasználók számára, mint a különálló, oldalon belüli hivatkozások, valamint az irányítást is átadják számára, azaz eldöntheti, hogy milyen tartalmak akar megtekinteni és mit nem. Ennél a megoldásnál ugyanis a felhasználó dönti el, hogy a tartalom mely részét nyitja ki, vagy csukja össze. Amikor összecsukja a tartalmi részeket, akkor az egész oldal egyetlen tartalomjegyzékként jelenik meg az emberek számára.

Amikor a összecsukható tartalmak és oldalon belüli hivatkozások között kell választani egy weblap megtervezése során, akkor azt kell figyelembe venni, hogy miként fogják az emberek használni a weblapot. Ha az emberek nagy valószínűséggel folyamatosan végig fogják olvasni a tartalmat, akkor az állandó nyitogatás jelentős interakciós költséget jelent számukra. Ezzel szemben az oldalon belüli linkek csak egy plusz szolgáltatást jelentenek, vagyis, ha akarják, használják, ha nem akarják, akkor nem. Ráadásul az összecsukható megoldásnál a tartalmat sokkal könnyebben figyelmen kívül tudják hagyni a felhasználók, hiszen ha valamit nem látnak, akkor az számukra nincs is.

Ugyanakkor az összecsukható tartalomjegyzéknek megvan az az előnye, hogy láthatóbb az emberek számára, mint az ugrólinkes tartalomjegyzék. Hiszen utóbbi az oldal tetején található, így az embereknek vissza kell görgetniük oda, ha rá akarnak pillantani, illetve onnan akarnak tovább navigálni a lap egy más részére. Nyilván a ragadós megoldásnál ez nem jelent problémát, hiszen mindig látható.

Összességében tehát elmondható, hogy ha a horgonylinkek megfelelően vannak kialakítva, valamint szükségesek és hasznosak is a hosszú tartalom miatt, akkor segítenek a felhasználóknak közvetlenül arra a pontjára navigálni a weboldalnak, mely érdekli őket. Ezáltal javítják a felhasználói élmény. A kialakítás részletei ugyanakkor lényegesek. Ha valakiben kételyek merülnek fel a weblapon belüli hivatkozások használata kapcsán, akkor érdemes használhatósági teszteket végezni.

Hol kellene lennie mobilon a menünek?

A kutatások  – illetve gyakorlati tapasztalatok is – azt mutatják, hogy a legtöbb felhasználó elsősorban a hüvelykujját használja mobiltelefonja kezelésénél. Az emberek hüvelykujja úgy viselkedik, mint asztali gépeknél az egér, ugyanakkor vannak korlátai. Ezeket kompenzálhatjuk a menü megfelelő elhelyezésével.

Korlátozott hatókör

Amikor valaki egy okostelefont tart a kezében, akkor ugyanazon kezének hüvelykujja korlátozott pályán tud csak haladni, és egy szűk tartományt képes elérni a kijelzőn. Vannak olyan területei a kijelzőnek, melyet így nem lehet elérni. Ezek a területek attól függően változnak, hogy melyik kezében tartja a felhasználó a telefont, mekkora a mobil kijelzője – hívta fel a figyelmet a UX Movement alapítója és szerzője egy cikkében, melynek főbb megállapításait mi is idézzük alább.

Megállapítása szerint a gondok ott kezdődnek, amikor a menü olyan helyre kerül, melyet éppen nem ér el a hüvelykujj. Ilyenkor vagy fogást kell váltani a telefonon, vagy a másik kezet is be kell vetni. Ez azonban extra terhelés a felhasználó számára, mely nehezebbé teszi a navigációt és lelassítja őt.

A telefonok felső részét annál nehezebb elérni, minél nagyobb a kijelző. Ugyanez a helyzet azokkal a sarkokkal is, melyek a felhasználó hüvelykujjával átellenesen helyezkednek el. Hogy ezek a bal vagy a jobb sarkok, attól függ, hogy melyik kezét használja az illető. Kisméretű (5 hüvelyknél kisebb) kijelzőknél legalább az alsó sarkok elérésével nem szokott gond lenni, mert a készülék általában elég keskeny ahhoz, hogy elérje a hüvelykujj.

A menünek kell igazodnia a használathoz

A designerek nem tudják megváltoztatni azt, hogy a felhasználók miként kezeljék a telefonjukat. Csak arra van hatásuk, hogy hová helyezik a navigációs menüt. Általában a menü a kijelző tetejére kerül, mert ez a megszokott az asztali gépeknél, ugyanakkor ez az elrendezés rosszul használható mobilokon. Márpedig a felhasználók gyakran veszik igénybe a menü – mely általában hamburger ikon formájában jelenik meg – segítségét, így célszerű lenne a hüvelykujj által elérhető területre helyezni.

A kutatások szerint minél közelebb helyezkedik el a cél a hüvelykujjhoz, annál gyorsabban megy a megérintése. A legkönnyebben a kijelző alján elhelyezett menüt érik el a felhasználók. Vagyis ide kellene helyezni a navigációs menüt a mobilkijelzőkön. Ilyenkor alulról nyílik ki a hamburger ikon, így a benne szereplő opciók alsó része is elérhető a hüvelykujj által. A felső viszont talán már nehezebben, miközben általában a felső részre szoktak kerülni a fontosabb menüpontok a gyors elérés érdekében. Mobilon ezért meg kellene fordítani a sorrendet, így a legfontosabb legalulra kerülne.

Ezek után kérdés még, hogy melyik oldalra kerüljön a menü? A kutatások azt mutatják, hogy az ideális az lenne, ha a hüvelykujjat nem kellene sem túlságos kinyújtani, sem nagyon behajlítani az eléréshez. Így a legjobb hely a középső rész lenne alul. Ez az a pont, melyet mind jobb, mind bal kéz használata mellett, mind kicsi, mind pedig nagyobb méretű kijelzőnél könnyű elérnie a felhasználónak.

Milyen problémák adódhatnak?

Mint minden új dolgot, ezt az elképzelést is érik támadások. Annál is inkább, mert a menünek a kijelző alján történő elhelyezése szembe megy a webdesign-konvenciókkal. Vagyis az első probléma az, hogy a felhasználók nem fogják megtalálni a menüt a kijelző alján, hiszen felül keresik, ahol általában szokott lenni.

Ugyanakkor korábban is voltak már arra példák, hogy a menüt alul helyezték el különféle alkalmazásokban és eszközökön, így nem teljesen ismeretlen az emberek számára. Elég itt az Instagramra gondolni, ahol lényeges menüpontok sorakoznak az alsó sávban. Ráadásul az ikon megtalálása sem okozhat igazán nagy problémát, hiszen a kisméretű kijelzőt gyorsabban átlátják az emberek. Igaz, asztali gépeknél nehezebb megtalálni egy alul megjelenő menüt, hiszen sokkal nagyobb a kijelző mérete, így a felhasználó tekintetének nagyobb felületet kell bejárnia.

A másik felmerülő probléma az lehet, hogy az alsó menüt használó mobilos weboldalaknál a felhasználók véletlenül a böngésző funkciógombjaira kattintanak, hiszen ezek egymás felett sorakoznak. Persze ennek a félreütésnek nem nagyobb az esélye, mint bármilyen másik, közelben lévő gomb megérintésének. Ilyenkor a megoldás az lehet, ha növeljük a paddinget, tehát nő a távolság a böngésző gombjai és az alsó menü között.

További gondot jelenthet, hogy az alsó menü akadályozhatja a görgetést, mivel az emberek alulról felfelé görgetnek. Ráadásul elvonhatja az emberek figyelmét a fő tartalomról. Ezzel kapcsolatban azonban elég arra gondolni, hogy ha felül helyezzük el a menüt, akkor lefelé görgetésnél akadhat össze vele a felhasználó hüvelykujja, és egy felső menü is ugyanolyan eséllyel vonhatja el az emberek figyelmét.

Egy megoldás lehet erre a problémára az, hogy a navigáció arra az időre eltűnik a kijelzőről, amíg a felhasználók görgetnek. És csak akkor jelenik meg ismét, ha visszatérnek felülre. Ez egy gyakran alkalmazott technika most is a mobilalkalmazásoknál és a böngészőkben.

Végül pedig az is felvethető, hogy az alsó menü akadályozhatja a cselekvésre ösztönző gomb (CTA) használatát a landing oldalakon. Márpedig a call to action fontosabb az alsó menünél. Ugyanakkor nem kell feltétlenül választani az alsó menü és a CTA között, hiszen mindkettő elhelyezhető az alsó részen, ha görgetősávot használsz. Ha nem használsz görgetősávot, akkor súlyozni kell a célokat. Ha a cél az elkötelezettség növekedése, akkor a menü kerüljön a hüvelykujj hatósugarába. Ha viszont a konverzió növelése az elsődleges cél, akkor a CTA-nak kellene ide kerülnie.

Összességében tehát elmondható, hogy egy alsó menü ugyan szokatlan lehet, ugyanakkor a konvencionális felső menü nem veszi figyelembe a hüvelykujj használatát a mobiltelefonokon. Pedig a hüvelykujj az elsődleges eszköz a mobilokkal való interakcióra. Vagyis elsősorban a hüvelykujj méretének és mozgásának kellene meghatároznia a menü elhelyezését. Minél nehezebben használható a menü, annál rosszabb lesz a felhasználói élmény. Márpedig a UX designer célja az, hogy olyan gyorssá és gördülékennyé tegye a navigációt, amennyire csak lehetséges.

Milyen megoldásokkal jeleníthetsz meg mobilon többszintes menüket?

Nem minden weboldal egyszerű. Egy összetett információs architektúránál a kategóriáknak sok szintje lehet. Desktop felületen nincs is különösebb gond ezek megjelenítésével, hiszen használhatók mega menük vagy lenyíló menük, mobilon ez nem ilyen egyszerű.

Miként lehet praktikusan megjeleníteni egy többszintes menüt mobilon? Hiszen a kis kijelző nem igazán teszi lehetővé, hogy számos alkategóriát elhelyezz a menüben. Míg egy nagyobb monitoron sok-sok lehetőség megjeleníthető a menüben anélkül, hogy a felhasználóknak görgetniük kellene, ugyanez a mennyiségű link nem fér el a mobil kijelzőjén. Ráadásul, míg egy desktop kijelzőnél a mega menü segítségével jól láthatóvá tehető a menü struktúrája vizuális eszközökkel, ez nem annyira működik mobilon, mert nem minden alkategória mutatható meg egyidőben.

Egy navigáció alsóbb szintjeinek tervezésekor a következő célokat kell elérni:

• Az interakciós költség minimalizálása: vagyis a felhasználóknak olyan egyszerűen hozzá kell férniük a navgáció egyes elemeihez, amennyire csak lehetséges. Ezt azt jelenti a gyakorlatban, hogy minél kevesebb érintéssel, minél kevesebb görgetéssel, és minél kevesebb oldalbetöltéssel.
• Támogassa a tipikus viselkedést: azaz, ha a felhasználó egy munkameneten belül a weboldal egyik oldaláról rendszeresen átnavigálnak a weboldal egy másik oldalára, akkor a szubnavigációnak ezt a viselkedést meg kel könnyíteniük. Ha viszont a látogatók egy részét használják az oldalnak, akkor a navigációnak ezt a viselkedést kell támogatnia.
• Felfedezhetőség: a felhasználók legyen képesek gyorsan megtalálni az alnavigációt, úgy hogy nem keverik össze a rendes navigációval.

Négy gyakran használt megoldás létezik az alnavigációra mobilon:

1. Almenük a fő menün belül

Amikor az elsődleges navigáció el van rejtve egy lenyíló menüben, akkor a legegyszerűbb megoldás az alnavigációra, ha almenüket kapnak a fő kategóriák. Ez azt jelenti, hogy minden menüpont kinyílik, és láthatóvá válnak a benne szereplő alkategóriák. Ennek olyan érzete van, mint egy almenünek egy nagyobb menüben. Itt egy példa rá:

Ez a megoldás akkor működik jól, amikor egy-egy menüpont csak néhány alkategóriát tartalmaz, alapvetően 6-nál kevesebbet. Így a navigációs menü nem válik túlságosan hosszúvá.

2. Szekvenciális menü

Az ilyen típusú menüben a legutoljára kiválasztott kategóriának csak az alkategóriái láthatók. Tehát a szekvenciális menü mindig az elsődleges kategóriákkal indít. Ha ezek közül egyet kiválasztott a felhasználó, akkor az elsődleges kategóriák helyét elfoglalják a kiválasztott kategória alkategóriái. Az elmúlt években ennek a megoldásnak fokozatosan nőtt a népszerűsége, mivel egy egyszerű megoldást kínál több kategória és alkategória megjelenítésére kisméretű kijelzőn. Itt látható egy példa rá:

Ugyanakkor a vizsgálatok nem találták egyértelműen jó megoldásnak a szekvenciális menüket. Akkor tudták ezeket könnyebben használni az emberek, ha nem voltak túl összetettek az előttük álló feladatok, és nem volt szükségük több különböző területről származó navigációs elemre. Főleg azoknak akadtak gondjaik velük, akiknek rossz volt a térbeli tájékozódási képessége. Ráadásul mobilon nagyobb a valószínűsége annak, hogy valami megzavarja a használat közben a látogatót, ami csak ront a helyzeten.

A szekvenciális menü alkalmazása gyakran olyan hibához vezet andoridos készülékeken, hogy a menü-hierarchiában az emberek a “back” gombbal akarnak visszalépni. Ez viszont bezárja a menüt és az előző oldalt tölti be nekik, nem pedig egy felsőbb szintre mozdítja őket. Ennek megoldására morzsmenüként megjeleníthető a felsőbb szintek is a navigációban. Ahogy itt is látható:

3. Szakasz-menük

A szakasz-menük olyan különválasztott menük, melyek csak egy-egy részén jelennek meg a weboldalnak. Példaként itt a BBC oldala, ahol a fő részek mindegyikének van egy külön oldala egy saját menüvel. Ennek a megoldásnak az az előnye, hogy viszonylag nagy számú alkategória elhelyezhető benne, melyek a megfelelő kategória oldalára lépve általában elérhetők. Egy szakaszon belül tehát egyszerű a navigáció, ugyanakkor nem támogatja azt, hogy egyik szakasz valamely alkategóriáról egy másik szakasz valamely alkategóriára ugorjunk.

Akkor működik jól, ha a látogatók jellemzően csak egy-egy részét használják az oldalnak. Ha más részét is használni akarják, akkor az már jelentős interakciós költséggel jár számukra. Ráadásul olykor össze is keverhetők a főmenüvel, ezért a főmenünek és a szakasz-menünek eltérő megjelenésűnek kell lennie, hogy az emberek ne keverjék össze, valamint nem használható azonos elem a kettőben.

4. Kategória oldalak

Hogyha az előbb felsorolt utak nem járhatók a számodra, mert mondjuk túl sok alkategóriád van, akkor a megoldás az lehet, hogy létrehozol landing oldalakat, melyek navigációs központokként működnek. Ez az érkező oldal általában felsorolja az összes ide tartozó alkategóriát, és amennyiben vannak, akkor ezek alkategóriáit. Ahogy ezen az oldalon is:

Ezek a kategória oldalak természetesen kevésbé rugalmasak, mint a szakasz-menük. Hiszen míg a szakaszmenük lehetővé teszik, hogy a felhasználók azonos szakaszon belül mozogjanak az oldalakon, addig a kategória oldalak arra kényszerítik őket, hogy mindig visszaérjenek az oldalra, ha egy más aloldalt szeretnének meglátogatni.

Alapvetően tehát akkor megfelelő a használata, ha az emberek egy munkamenet során jellemzően egy oldalt szoktak meglátogatni az információs hierarchián belül. Ettől eltérő viselkedés esetén az interakciós költség rendkívül magas.

Összességében tehát elmondható, hogy

• ha kevesebb mint 6 alkategóriád van mindegyik fő kategóriádban, akkor egy almenü, illetve kinyíló menü megfelelő választás lehet.
• Ha az alkategóriák száma 6-15 között mozog néhány elsődleges kategóriádban, akkor fontolj meg egy szakasz-menüt!
• Ha viszont az alkategóriák számra több mint 15, akkor érdemes kategória érkező oldalt kialakítani nekik.