Keresés
Header Háttér

Webshark Blog

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

2017-12-130 komment

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, pusztán csak azért, 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:

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

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

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.

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.

(A bejegyzés ezen cikk alapján készült.)

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.