Keresés
Header Háttér

Webshark Blog

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

2019-01-090 komment

Hogyan használj morzsamenüt desktopon és mobilon?

A morzsamenü, vagy breadcrumbs, hasznos elem egy weboldalon a látogatók irányítására. Nem mindegy azonban, hogyan használjuk. Mobilon ráadásul további szempontokat is figyelembe kell venni, mint asztali gépes megjelenítésnél.

A morzsamenük fontos navigációs elemek sok weboldalon, melyek segítségével könnyebben tájékozódnak a felhasználók. Láthatják, hogy adott pillanatban éppen hol járnak az oldal hierarchiájában, és könnyen elérhetik a felsőbb szinteken található oldalakat, egészen a főoldalig. Habár azt gondolhatod, hogy szükségtelen lehet egy morzsamenü, vagy akár zavaró is a weboldaladon, de nem így van: szinte csak előnyei vannak a használatának.

Hogyan néz ki a morzsamenü?

A morzsamenü tulajdonképpen linkek lánca. Az oldal felső részén helyezkedik el, jellemzően a navigáció menü alatt. Az első link a sorban mindig a főoldal, és az egyes linkeket valamilyen jel (általában egy > vagy egy / jel) választja el). A Nielsen Norman Group a > jelet javasolja, de funkcionális különbséget nem látnak a kettő között, és mindkettő használtatát elfogadhatónak tartják.

Miért fontos a morzsamenü?

Elsősorban azért, mert ha a felhasználók mélyen elkeverednek a weboldal aloldalai között, akkor – mivel nem ismerik az oldal felépítését – gyorsan elérnek arra a pontra, hogy fogalmuk sincs, pontosan hol tartózkodnak a hierarchiában. Ugyanez a helyzet akkor is, ha egy külső linkről érkeznek egyből egy aloldalra. Ilyen esetekben egy morzsamenü rendkívül hasznos szolgálatot tehet, mert segítségével megtalálhatják a számukra esetleg relevánsabb oldalakat.

Mire figyelj a morzsamenünél desktopon?

1. A morzsamenü nem helyettesítheti a navigációs menüt – a morzsamenü csak egy kiegészítő a többi navigációs elem mellett.

2. A morzsamenünek nem a bejárt utat kell mutatnia, hanem a jelenlegi pozíciót a hierarchiában – a felhasználó által bejárt út megjelenítése bonyolult lehet és túl sok ismétlődést tartalmazhat, ráadásul nincs is igazán hasznára a látogatónak, ha egyből egy aloldalra érkezik egy külső linkről.

3. A polihierarchikus oldalakon egyetlen utat kell mutatnia – ha egy aloldalnak több felsőbb szintű oldala is van, akkor az NNG szerint nem tanácsos mindegyiket megmutatni, mert ez összezavarja a felhasználókat, ráadásul sok helyet is elfoglal az oldal tetején. Meg kell határoznod egyetlen utat, és minden felhasználónak ezt kell mutatnia, függetlenül attól, hogy honnan érkezett.

4. Mindig a jelenlegi oldal legyen az utolsó elem a láncban, viszont ez ne linkként jelenjen meg, hiszen a felhasználó éppen azon tartózkodik. Ez vizuálisan is legyen nyilvánvaló, eltérő szín vagy aláhúzás használata révén.

5. A morzsamenü mindig csak oldalakat tartalmazzon, nem pedig logikai kategóriákat – vagyis minden egyes elem a láncban működjön linkként (kivéve az utolsót, ahogy az előbb említettük). Ha egy alkategóriának – mely a menüben esetleg megjelenik – nincs saját oldala, akkor az ne jelenjen meg a morzsamenüben.

6. Nincs szükség morzsamenüre az olyan, lapos hierarchiájú weboldalaknál, ahol csak egy-két szint található.

7. A morzsamenü lánc mindig a főoldal linkjével kezdődjön – ugyanakkor nem javasolt az NNG szerint, hogy a navigációs menüben és a morzsamenüben is megjelenjen a főoldal link. Elég, ha csak az egyikben van.

Mire figyelj a morzsamenünél mobilon?

Mobilon a morzsamenü előnyeit gyakran lenullázzák a hátrányai.

1. Nem foglalhat el több sort a morzsamenü mobilon – mivel mobilkijelzőn kevesebb hely áll rendelkezésre a függőleges tájolás és a kisebb kijelzőméret miatt, ezért könnyen túlnyúlhat rajta a morzsamenü. A több sorba tördelt morzsamenü viszont már nem segíti, hanem inkább összezavarja a felhasználót, mivel nem tudja érthetően bemutatni a hierarchiát. Mint például itt:

Több sort elfoglaló morzsamenü mobilon

2. Ne használj túl kicsi vagy nagyon összezsúfolt morzsamenüt! – Sokan az előbbi problémát úgy próbálják kiküszöbölni, hogy a linkeket kisebbre veszik, és minimális távolságot hagynak közöttük. Ez azonban azért nem járható út, mert túlságosan kis méretnél már nehéz vagy lehetetlen az érintés. Legalább 1 x 1 cm-esnek kell lennie egy kattintható felületnek mobilon.

3. Ha szükséges, inkább rövidítsd le a linkek láncát! – Vagyis csak a jelenlegi oldal és annak anyaoldala legyen látható. Már ez is segít a felhasználónak a navigációban. Ezt a megoldást azonban csak mobilon használd, mert kompromisszumos megoldás, és ellentétben áll a 7. ponttal!

Rövidített morzsamenü mobilon

Összességében tehát elmondható, hogy a morzsamenü a navigáció egy kiegészítő formája, amit segít a felhasználók tájékozódásában és mozgásában a weboldal hierarchiáján belül. Különösen hasznos abban az esetben, ha a látogató egy külső linkről érkezik egy aloldalra és nem a főoldalon kezdi a böngészést. Figyelni kell arra, hogy a morzsamenü minden eleme – kivéve az utolsót – link legyen. Mobilon viszont nehéz az alkalmazása, mert túl sok helyet foglal, és nehéz lehet a használata érintéssel, ezért érdemes lerövidíteni, ha lehetséges.

Kategória: Design | Címke: ,

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

Comments are closed.