Keresés
Header Háttér

Webshark Blog

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

2018-01-310 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.

Webshark weboldal készítésKezdjü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.

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

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

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

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

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

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

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

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

A mega menük jellemzői

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

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

john-lewis-mega-menu

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

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

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

Képek a Moleskine mega menüjében

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

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

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

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

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

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

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

(Forrás: NNG)

(Forrás: NNG)

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

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

Maradjon egyszerű az óriásmenü

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

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

Hozzáférhetőség

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

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

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

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

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

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

VI. Mikor érdemes vertikális navigációs menüt használnod a weboldaladon?

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

arbor-boston

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:

  • Több linket is magába foglalhat, mint egy vízszintes navigációs menü, és mégsem válik zsúfolttá.
  • A bal oldali menüsor a hőtérképeken megjelenő F-alakzat szárának felel meg, vagyis az emberek szinte biztos, hogy rá fognak pillantani a természetes olvasási mintának megfelelően.
  • 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.
  • 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.

mammoth-media

Hátrányai:

  • 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 szélesebb kijelzőn elképzelhető, hogy a hajtás alá kerülhetnek egyes navigációs elemek.
  • 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.

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

metrick-system

Ugyanakkor a vertikális megoldás inkább a kisebb weboldalak számára lehet hasznos, hiszen ők csak egészen korlátozott számú navigációs lehetőséget, valamint korlátozott mennyiségű tartalmat kínálnak. A jelentősebb terjedelmű tartalommal rendelkező weboldalak korlátozónak érezhetik az oldalsó navigáció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.

VII. Hogyan segíti a breadcrumbs, azaz 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.

Célját tekintve alapvetően arra használjuk, hogy általa a felhasználó könnyebben tudja pozicionálni és navigálni magát a többszintes weboldalakon. 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 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.

Morzsamenü az Árukereső oldalán

Morzsamenü az Árukereső oldalán. Világossá tesz, hol járunk.

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

Morzsamenü az iHerben.

Morzsamenü az iHerben. Világos jelölve az útvonal.

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.

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!

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

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

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

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