Keresés
Header Háttér

Webshark Blog

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

2018-07-090 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. Hogyan alakítsd ki a lenyíló menüt a weboldaladon?

A lenyíló menü nem egy új műfaj, hosszú évek óta tele van vele a web. Ennek ellenére nem árt tudni, milyen szabályok mentén érdemes alkalmazni egy weboldalon. Sokan ugyanis rosszul alkalmazzák őket, így időről-időre felmerülnek velük kapcsolatban használhatósági problémák. Ezekre és a jó megoldásra hívta fel egy régi, de frissített cikkében a Nielsen Norman Group. A designerek a lenyíló menüket több célra is használhatják:

1. Parancs menük – melyek egy kiválasztott opció alapján elindítanak egy bizonyos cselekvést.

A Word-ben ilyen parancs-menük találhatók.

A Word-ben ilyen parancs-menük találhatók.

2. Navigációs menük – melyek a weboldalakon a felhasználókat egy másik oldalra viszik.

3. Űrlap-kitöltők – amikor a felhasználók egy legördülő menüben tudják kiválasztani a megfelelő opciót, mely aztán ki is tölti az űrlap megfelelő mezőjét.

4. Attribútum választása – amikor a felhasználó kiválaszthat egy értéket a menüben felsorolt lehetséges értékek közül.

attributum-valasztasa

Még egy dolgot érdemes elöljáróban tisztázni. Eredetileg a lenyíló doboz és a lenyíló menü ugyanazt jelentette, azonban az idők során elkezdtek különbözni egymástól. Ma a lenyíló menü alapvetően az előbb felsorolt első két lehetőséget jelenti, vagyis a navigációt és a parancs-listát. Ugyanakkor a lenyíló dobozok általában a választás módját jelentik egy űrlap kitöltésénél vagy egy attribútum választásánál.

A lenyíló dobozok alapvetően másként néznek ki, mint a lenyíló menük: megjelenik mellettük egy kis nyíl, és a használatukkal kiválasztható a bevinni kívánt adat a megadott listából, illetve az attribútum. Ezt a funkciót általában támogatja egy mezőcímke vagy egy olyan cím, mely az első helyen szerepel a lenyíló listában.

Lenyíló doboz űrlap-kitöltésnél

Lenyíló doboz űrlap-kitöltésnél

Hogyan tervezz lenyíló menüt?

A lenyíló menük használatának megvannak a maga előnyei. Az egyik, hogy helyet takarít meg. Mivel már egy megszokott eszköz, ezért a felhasználók tudják, hogy miként kezeljék őket. Űrlapoknál és attribútum-választásnál ráadásul megelőzik azt a hibát, hogy az emberek rossz adatokat vigyenek fel, hiszen csak az adott opciók közül választhatnak.

Ezen előnyök ellenére a web használhatósága csak javulna, ha a designerek kevesebb lenyíló menüt használnának. Ha mégis úgy döntesz, hogy Neked is kell, akkor itt van néhány szabály, melyet vegyél figyelembe:

1. Kerüld el az interakcióba lépő menüket! Vagyis az opciók ne változzanak az egyik menüben, ha a felhasználó az oldalon egy másik menüben kiválaszt valamit. Ez a megoldás csak megzavarja az embereket, illetve nehéz az opció láthatóvá tétele, ha megjelenésének az a feltétele, hogy egy másik opció ki legyen választva. Ha nem világos, itt a példa:

Az iTunes-ban attól függően változik a menü tartalma, hogy a Libraryben melyik opcióba lépünk.

Az iTunes-ban attól függően változik a menü tartalma, hogy a Libraryben melyik opcióba lépünk.

2. Szürkítsd be az elérhetetlen opciókat, ahelyett, hogy eltávolítanád őket a menüből! Vagyis azok az elemek, melyek nem választhatók, továbbra is maradjanak láthatók, csak ne legyenek használhatók. Még jobb megoldás, ha egy szövegbuborékban információt is mutatsz az egeret rájuk mozgató felhasználóknak arról, hogy miért inaktív az elem és miként tehető aktívvá. Ha viszont eltávolítasz elemeket, akkor a felület elveszti a következetességét, és sokkal nehezebbé válik megismerni.

3. Ha nagyon hosszú lenyílót használsz, akkor ezzel a felhasználók számára lehetetlenné teszed, hogy valamennyi lehetőséget egyszerre áttekintsék. Ráadásul nagyon óvatos egérhasználatra kényszeríted őket, hogy véletlenül ne csukódjon be a lenyíló menü. Ugyanis minél hosszabb és keskenyebb az a csatorna, amelyen mozgatni tudják az egérmutatót, annál lassabban tudnak egyik pontból a másikba eljutni.

Állj ellen a kísértésnek, hogy minél több elemet zsúfolj bele a lenyílódba, mondván: úgysem foglal helyet. Ha túl sok elemed van, akkor inkább gondolkodj el egy alternatív megjelenési megoldáson, mint amilyen egy mega menü, mely két irányba is bővíthető, ahelyett, hogy csak egy sávot foglalna el. Így pedig a felhasználók könnyebben tudják használni, gyorsabban érik el a benne lévő elemeket.

4. Ne használj lenyílót, ha gyorsabb begépelni a felhasználónak a szöveget, mint kiválasztani a listából! Tipikus esetében ilyen az országok listája, melyet végiggörgetni lehet, hogy tovább tart, mint begépelni az ország nevét. Ez persze Magyarország esetében nem feltétlenül igaz, de Amerikában valóban egyszerűbb az állam rövidítését (például NY) beütni, mint kikeresni egy listából. Természetesen, ha szabadon kitölthető lesz az űrlap adott mezője, akkor a végén ellenőrizni kell a bevitt adatot, azonban használhatósági szempontból mégis sok esetben jobb megoldás.

5. Ne használj lenyíló dobozokat olyan adatokhoz, melyek bevitele nem okoz nehézséget az embereknek. Ilyen például a születési évszámuk, a hónap, nap megadása. Csak lelassítja őket az űrlap kitöltésében, ha évszámok között kell válogatni, ahelyett, hogy beírnák a négy számot.

lenyilo-doboz-evszamokkal

6. Mindig látszódjon a menü címkéje vagy leírása! Tehát akkor is, ha a lenyíló menü ki lett bontva. Ez segíti a felhasználó tájékozódását, az eszében tartja, hogy mi az, ami közül éppen választania kell. Ha viszont a címke eltűnik, amikor kinyílik a menü, akkor az embereknek gondolkodniuk kell, mielőtt cselekszenek.

7. Desktop felületen ne kerüljön a globális navigáció lenyíló menübe. Ez azt jelenti, hogy a legfelsőbb szintű kategóriákat nem érdemes elrejteni egy lenyíló menübe, mert nehezíti a használatot.

8. Engedd a billentyűzet használatát a lenyílón belüli navigációnál! Vagyis nem elég, ha csak egérrel lehet használni, hanem fontos, hogy a számítógép billentyűzetét is be lehessen vetni. A gyorsbillentyűk segítségével az emberek sokkal gyorsabb tudnak választani a látható opciók közül az egér használata nélkül. Ilyenkor csak be kell ütniük a megfelelő betűt, mely által gyorsan eljutnak ahhoz az opcióhoz, mely az adott betűvel kezdődik.

Ami még lényeges, hogy érdemes tesztelni a lenyílók használatát. Ugyanis vannak olyan helyzetek, amikor lenyílók alkalmazásával csak megzavarod az embereket. Például “a közterület jellege” bevitelekor nem feltétlenül előnyös, ha lenyílóból kell kiválasztani, hogy tér, út, utca, stb., mert az emberek megszokták, hogy az utcanév megadásánál beírják annak jellegét is. Itt tehát nem kell “segíteni” őket, mert csak nehezíted a helyzetet. Egy teszt viszont megmutatja, hogy mikor okoznak zavart a lenyílók, és mikor nem.

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

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

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

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!

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

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

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

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

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

Navigációs menü

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

Kattintható logók

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

Morzsamenü

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

Lábléc

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

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

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

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

Ellene szóló érvek

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

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

Mellette szóló érvek

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

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

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

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

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

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

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

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

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

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

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

A menüben eltűnő logó

A menüben eltűnő logó

Az explicit linkek kialakítása

1. Legyen egy “kezdőlap” gombod!

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

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

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

Egy példa jó kialakítású morzsamenüre

Egy példa jó kialakítású morzsamenüre

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Szekvenciális menü

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

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

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

3. Szakasz-menük

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

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

4. Kategória oldalak

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

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

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

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

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

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

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

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.