Keresés
Header Háttér

Webshark Blog

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

2017-11-210 komment

Hogyan alakítsd ki a navigációs menüd? Mikor használj hamburger ikont?

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.

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 vagy alkalmazás kialakításánál 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.

A navigációs menü kialakításának elvei

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.

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.

Hamburger menü és a rejtett navigáció: mi a gond vele? Mikor használjuk é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.

A YouTube applikációja is a lényeget hangsúlyozza, a többi rejtve marad, mégpedig egy hamburger ikon által

A YouTube applikációja is a lényeget hangsúlyozza, a többi rejtve marad, mégpedig egy hamburger ikon által

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álni 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.

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.

A hüvelykujj által elért terület (Forrás: UX Movement)

A hüvelykujj által elért terület (Forrás: UX Movement)

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.

A legjobb hely a menü ikonja számára (Forrás: UX Movement)

A legjobb hely a menü ikonja számára (Forrás: UX Movement)

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.

A padding növelése (Forrás: UX Movement)

A padding növelése (Forrás: UX Movement)

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.

Variációk navigációs menüre

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 még?

Tab bar

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ü + 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 ikon a jobb felső sarokban, és a fontos linkek külön

Hamburger ikon a jobb felső sarokban, és a fontos linkek külön

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.

A 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:

Teljes képernyős menüsor

Teljes kijelzős menüsor

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.

Nemcsak a linkek jelennek meg a lenyíló, egész oldalas menüben

Nemcsak a linkek jelennek meg a lenyíló, egész oldalas menüben

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

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.

Egy kis reklám a lenyíló menüben

Egy kis reklám a lenyíló menüben

Alulra került 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.

Itt alulra került a navigációs menü

Itt alulra került a navigációs menü

Vertikális navigációs 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. De így is működik:

Bal oldalon a navigációs menü, de kattintásra nyílik le

Bal oldalon a navigációs menü, de kattintásra nyílik le

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.

Mi aktiválja a legördülő menüt? Hover vagy kattintás?

Legördülő menü révén egyszerűbb, letisztultabb lehet a design, felmerül viszont a kérdés, hogy már akkor találkozzon-e a lenyíló menüsorral a felhasználó, ha éppen fölé mozdítja az egeret, vagy rá is kelljen kattintania? Melyek az előnyei és hátrányai az egyiknek, és melyek a másiknak? Az előbbire egyébként itt egy példa, míg a kattintós lenyíló navigációs menü ismerős lehet a Google keresés oldaláról.

Legördülő menü a Google oldalán

Legördülő menü a Google oldalán

Természetesen mindez csak desktopon állja meg a helyét. Nyilván azért, mert a probléma igazából nem létezik mobilon, hiszen ott csakis érintéssel lehet működésbe hozni egy lenyíló menüt. Na, de lássuk, melyek

a hover előnyei:

  • kisebb erőfeszítést követel a felhasználótól a navigációs menü használata,
  • gyorsabbá válik a navigáció, és
  • a legtöbb oldal ezt használja, így a felhasználók már számítanak rá.

Hátrányai:

  • könnyű véletlenül és feleslegesen lenyitni a menüt,
  • a túl nagy menüket nehéz bezárni,
  • viszont becsukódik, ha elmozdulunk a menüről az egérrel,
  • ha egy elem túl közel van a navigációs menü széléhez, akkor nehezen kattintható, mert könnyen lecsúszunk a menüről.

És akkor lássuk a kattintás előnyeit:

  • nincsen véletlenszerű aktiválás,
  • csak akkor nyílik meg, ha a felhasználó úgy dönt, hogy meg akarja nyitni,
  • és kisebb az esélye, hogy bezáródjon egy rossz mozdulat miatt.

Az ellenérvek:

  • az emberek arra számítanak, hogy egy kategóriaoldalra jutnak, nem pedig egy menüt nyitnak,
  • a megnyitás és a bezárás plusz idő, ami megakaszthatja a felhasználót a folyamatban.
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.