Keresés
Header Háttér

Webshark Blog

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

2021-07-080 komment

Miért lehet jó egy függőleges navigációs menü? (Frissítve, 2021.09.28.)

Tartalomjegyzék
Bővített tartalomjegyzék

Habár már jó ideje a horizontális navigációs menük időszakát éljük, nem volt ez mindig így. Meglepő módon most is van létjogosultsága egy bal oldalon elhelyezett, függőleges irányú navigációs menünek. (Frissítés, 2021.09.28. – Két új fejezettel bővítettünk, az egyik: Milyen hátrányai vannak egy függőleges navigációs menünek?)

Mostanában legfeljebb 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űiz, 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.

Milyen előnyei vannak egy függőleges menüsávnak?

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.

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

Sokan úgy vélik, hogy a szemmozgást leíró F-minta a vízszintes navigációt támogatja, azonban érdemes tudni, hogy az F-minta csak egy rendezetlen szöveg olvasása esetében érvényes, vagyis nem érthető bele a navigáció vagy a fejléc.

Arról nem is beszélve, hogy 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.

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.

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.

Milyen hátrányai vannak egy függőleges navigációs menünek?

Azt ugyanakkor érdemes figyelembe venni, hogy 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.

Emellett egy vertikális menü 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.

Végül pedig gond lehet az is, ha a függőleges menübe túl sok elem kerül, mert ilyenkor benyúlhat a hajtás alá. 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.

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.

Összességében tehát elmondható, hogy egy függőleges navigációs menü jó megoldás lehet monitoros megjelenésnél, különösen olyan oldalak esetében, melyeknél elég széleskörű a tartalom, gyorsan növekszenek és változnak. Ráadásul egy vertikális menüt elég könnyű mobilra is átvinni. Ahhoz azonban, hogy jól használható legyen, nem érdemes egy hamburger ikon mögé rejteni, ahogy a szöveg nélküli ikonokat sem szabad erőltetni. A legjobb, ha bal oldalra helyezett, szöveges címkék jelzik a kategóriákat.

Kategória: Design | Címke: ,

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

Comments are closed.