Hogyan ronthatod el a főmenüdet? 10 hatékony módszer

weboldal

navigálás egy nagy parkolóban felülről nézve

A főmenüvel csak a gond van. Ha valakinek szüksége van rá, akkor mindent meg kell, hogy találjon. Ha viszont éppen nem kell, akkor foglalja az értékes helyet. Szóval elrontani a főmenüt egészen könnyű, mert sokféleképpen lehet. Jó menüt tervezni viszont nehéz. Milyen design és tartalmi megoldásokkal ronthatod el, és hogyan kerüld el ezeket?

Miről olvashatsz?

Ki használja egyáltalán a főmenüdet?

Akár a keresőből érkezik egy látogatód, akár egy hirdetésed alapján landol az egyik oldaladon, először valószínűleg nem a főoldalra kerül, hanem egy aloldaladdal fog találkozni. Ez lehet egy blogbejegyzésed, egy kategóriaoldalad, szolgáltatásodat vagy termékedet bemutató oldal. Ha tetszik neki, akkor bizonyára az egész honlapod érdekelni fogja.

Olyan kérdésekre keresi majd választ, mint például

ki vagy te;
mivel foglalkozik a vállalkozásod;
milyen, számára érdekes témával foglalkozol még;
miben tudsz neki segíteni;
milyen szolgáltatásaid vannak stb.

Hogy ezekre megkeresse a választ, elsősorban a főmenüdet fogja használni. Vajon praktikus a navigáció az oldaladon? Könnyen megtalálja majd az információkat?

Mindannyian több ezer weboldallal találkoztunk már. Ugye neked is volt olyan élményed, amikor az oldal tulajdonosa mintha direkt azt akarta volna, ne találj meg fontos dolgokat vagy ne is tudj egyes menüpontokra rákattintani? Te vajon bosszantod ilyesmivel a látogatóid? Ha az oldaladra ismersz egy-egy probléma kapcsán, nem késő változtatni!

Összeszedtem 10 olyan problémakört, amik felmérések szerint nehézséget tudnak okozni sok látogatónak.

1. Nehezen megtalálható a főmenü

A legjobban kitalált, felépített és megvalósított menüt is elronthatod azzal, ha elrejted. Vagy legalábbis nehezen megtalálhatóvá teszed. Rengeteg tippet mutatok, hogyan tudod ezt megtenni!

Ma már szerencsére nagyon kevés olyan weboldal van, ahol egyáltalán nincs kiemelt navigáció. De azért akad ilyen, magyar oldalak között nem kellett 20 perc ahhoz, hogy találjak rá példát!

weboldal főmenü nélkül — Ezen a képen az a lényeg, hogy mit nem látsz. Ez egy weboldal legteteje, de lejjebb sincs semmilyen menü. A honlap 3 aloldalból áll, ezek közül a fő tartalom egyetlen nagyon hosszú oldal. Még egyoldalas honlap esetében is segíti a felhasználókat egy olyan menü elhelyezése, ami az oldal egyes szakaszaihoz ugrik. A másik két aloldal elérhetősége a hosszú főoldal alján található szöveges linkként.

Sokkal több olyan oldallal lehet viszont találkozni, ahol a főoldalon még megvan a főmenü, az aloldalakon viszont már nincs ott az oldal tetején. Tapasztalataim szerint ezek jellemzően a tárhelyszolgáltatók saját weboldal építő szoftverével készített oldalak, ahol ismétlődően fel kell építeni a főmenüt is minden egyes aloldalon. Ha valahol kimarad, akkor az adott oldal zsákutcává válik látogatói szempontból.

aloldalon hiányzó főmenü — Ez a weboldal legteteje, a főmenü helye. Itt, ha valaki elnavigál a főoldalról, a megnyitott aloldalak tetején csak a főoldalra való visszatérés lehetőségét találja a többi oldalra mutató link nélkül. Más tartalomhoz így nincs lehetőség áttérni, csak a főoldalon keresztül.

Ezeken a nyilvánvaló eseteken túl is könnyen válhat nehezen észrevehetővé a menü! Mitől lehet a látogatók számára láthatatlan a navigáció?

Nem a szokott helyen van. Ez leginkább asztali gépes nézeten kritikus, ahol a nagy felületen könnyebben eltűnik a tartalomban a menü. A főmenüt két helyen keresik a látogatók, az oldal tetején (vízszintes elhelyezkedés) vagy a bal szélén (függőleges elrendezés). Ha a honlap annyira egyedi, hogy valahová máshová kerül, vagy akár a fejléc nagysága miatt eltolódik ezekről a területekről pl. lejjebb, az oldal közepe felé, akkor a látogatók egy része már csak nagyon nehezen, vagy egyáltalán nem fogja megtalálni, esetleg egyszerűen nem azonosítja menüként.

szokatlan helyen megtalálható főmenü — A honlapon a menüpontok a bal oldalon látható nagy, villanyórát ábrázoló fotó jobb alsó sarka mellé és alá kerültek. Nagy monitoron nézve az oldalt még látszanak ezek a linkek, mobilon már görgetni kell hozzájuk.

oldal alsó felébe nyomott menüsor — Ezen az oldalon olyan magas a fejléc feletti kép és a rajta olvasható nagybetűs szöveg, hogy nagyméretű monitoron is csak a kép alsó harmadában jelenik meg a főmenü.

A menüelemek nem tűnnek klikkelhetőnek. Ha azt szeretnéd, hogy az olvasóid rákattintsanak valamire, akkor egyértelműen jelezni kell, hogy az elhelyezett szöveg linkeket tartalmaz. A kattinthatóságot mutathatja keret, szín, méret, elhelyezés, stb. A főmenü esetében az lehet a gond, ha a kinézete nem menü-szerű. Ha például a menüpontokat grafikák vagy képek helyettesítik, esetleg extrém flat design lett alkalmazva, nem biztos, hogy a látogatók azonosítják az elemeket menüként. Előfordulhat az is, hogy a menüelemek éppen olyan szöveges sornak tűnnek, mint az őket követő tartalom, és nem válnak el attól.

flat design miatt nem feltűnő menüelemek — A fejléc magasabb a megszokottnál, így egyrészt a fő menüsor lejjebb van, mint ahol sokan keresnék. Másrészt a menüelemek a közöttük lévő nagy hely miatt szinte elvesztik egymással a kapcsolatot. Olyan flat design-nal lett megalkotva az oldal, hogy a menü elemei szövegnek tűnnek.

képekkel helyettesített menüpontok — Ezen az oldalon a kép minden egyes eleme egy menüpont, amit több esetben nehéz összefüggésbe hozni a menüpont tartalmával. Több dolog is nehezíti még emellett a navigációt: az elemek mozogni kezdenek, ha egérrel fölé állunk, illetve még ekkor sem jelenik meg felirat, hogy az adott grafika milyen oldalra mutat. A látogatók csak vaktában tudnak kattintgatni.

ikonokkal helyettesített menüpontok — Ugyanennél az oldalnál, ha már nem a főoldalon járunk, szintén rajzok helyettesítik a menüpontokat, de nem mindegyik esetében ugyanazok, mint a főoldalon. Gyakorlatilag csak úgy talál meg a látogató bármit, ha végigkattintgatja a képeket.

Nincs elég kontraszt. Ha nem elég kontrasztos a megjelenés, akkor sokan nem veszik észre a menüpontokat. Ilyen eset lehet, amikor a feliratok nagyon nehezen észrevehetők a háttérszín miatt, vagy a háttérben részletgazdag kép van elhelyezve.

nem kontrasztos menüelemek — A főmenü hátterét a főoldalon egy nagy kép adja, amely bizonyos szélességű nézetekben nem ad elég kontrasztot a fehér betűkhöz.

Nincs kiemelve. Ha a menüelemek körül nincs elegendő szabad tér, akkor a feliratokat nem lehet elválasztani a menüt követő tartalomtól. Túl közel lehet az oldal címe, fő képe vagy maga a tartalom.

apró betűkkel megjelenített menü — A főmenü elemei kisebb betűméretet kaptak, mint az oldal szövege, és ha lejjebb görgetünk az oldalon, csökken a tér mérete körülöttük. Ilyenkor már szinte bele is olvadnak az aktuális szöveges tartalomba.

Túl apró. A mobilos nézeten nagyon jól működhet a kinyitható hamburger menü, mert a kijelző méretéhez képest hangsúlyos a három vonalból álló ikon, és a látogatók többsége már viszonylag jól tudja kezelni. Ha viszont az asztali nézeten is ugyanezt a hamburger (vagy egyéb, esetleg nem is megszokott) ikont használod, a monitor méretéhez képest eltűnhet a tartalmak mellett és sokak számára nehéz lehet megtalálni.

asztali nézeten is hamburgermenüt használó oldal — Ez a honlap minden szélességben hamburgermenüt használ, habár az oldalon sok hely lenne a menüpontok elhelyezésére. (A menüben összesen 3 elem van.) A kutatások szerint még mindig nem minden felhasználó tudja azonnal, egyértelműen kezelni a hamburger menüt, ezért ameddig csak lehet, érdemes a menüpontokat kiírni.

Hirdetéshez hasonlít. A neten böngészők nagyon gyorsan kifejlesztik magukban a banner-vakságot. Ez azt jelenti, ha olyan tartalmat látnak, ami hirdetésre hasonlít, akkor azt egyszerűen figyelmen kívül hagyják. De vajon a tartalom elolvasása és vizsgálata nélkül hogyan döntenek erről? A perifériás látásukat használják: ha egy elem pozíciója, formája, mérete, esetleg animáltsága miatt bannernek tűnik, akkor nem is olvassák el, nem fordítanak rá figyelmet. De nem is kell idáig eljutni! Ahhoz, hogy a menüt figyelmen kívül hagyja valaki, elég az is, ha nagyon közel van egy hirdetéshez, és hozzá tartozónak látszik.

hirdetéshez hasonlító menüelemek — Ennek az oldalnak a tetején két területen is vannak kattintható elemek, amiket akár menüként is kezelhetünk: az egymás mellett elhelyezett nagyobb szövegdobozok és a jobb oldali függőleges szövegdobozok. A főoldalon ezek után is további kattintható szövegek lettek elhelyezve, ott szöveges tartalom nincs is. Mivel ezek a dobozok hirdetéseknek tűnnek, így valószínűleg a legtöbb látogató szinte üresnek érzi a főoldalt.

Görgetéssel eltűnik a menü. Ha hosszúak az oldalaid, és a menü nincs az oldal tetejéhez „ragasztva”, akkor nagyon gyorsan eltűnik a képernyőről. A látogatóknak sok bosszúságot okoz, ha vissza kell görgetniük az oldal tetejére, hogy navigálni tudjanak.

Legjobb gyakorlat

A menüt mindig a megszokott helyre tervezd: legyen az oldal tetején vagy a bal oldalán. Mobilos nézet esetében is ezekre a területekre nyíljon meg a menü, ha egyébként el van rejtve.
A menüelemeket ne helyettesítsd ikonokkal, képekkel vagy grafikákkal, mert ezeket sokan nem menüként azonosítják. A pontok legyenek szöveggel kiírva. Úgy helyezd el őket, hogy egyértelműen elkülönüljenek az oldal aktuális tartalmától.
Az oldal minden területén érdemes odafigyelni a megfelelő kontrasztra, de a főmenü esetében ez különösen fontos. Legyenek mindenki számára jól olvashatók a menüpontok. Ellenőrizd a betűszín és a háttérszín kontrasztját. Ha képet helyezel a háttérbe, gondoskodj a jó olvashatóságról minden szélességben.
Hagyj bőven szabad területet a menü körül, ne helyezz el túl közel semmilyen tartalmi elemet.
Minden aloldalon legyen elérhető a főmenü. A landing és sales oldalaknál megoszlanak a vélemények, jobb-e „eltüntetni” ezeket is az összes linkkel együtt, az ilyen oldalaidnál érdemes teszteket végezni. Itt az eredmény főként az eladni kívánt termék, szolgáltatás ismertségétől, illetve az egyéb bizalmi elemek meglététől függ majd.
Asztali gépes nézetre használj fixen megjelenő, nem kinyitandó menüt. Viszonylag sok helyet foglalhat a rendelkezésre álló felületből, de ha folyamatosan elérhető, várhatóan sokkal többen fognak a pontjaira kattintani. A köztes, tablet nézet esetén érdemes teszteket végezni, hogy mennyien böngésznek a kinyitható vagy a fix menü esetén, és a jobbat megtartani.
A menüt különítsd el a hirdetésektől és figyelj oda, hogy ne legyen olyan jellegzetessége, ami miatt bannernak tűnhet.

jól látható menüsor — Ezen az oldalon a menü nagyon jól látható: az oldal tetején van, egy kiemelt sávban, ami asztali nézeten oldalra is kissé kinyúlik.

2. Nincs szöveges „Főoldal” menüelem

Összezavarhatsz néhány látogatót (főleg a böngészésben tapasztalatlanabbakat), ha nem jelzed egyértelműen, hogyan tudnak visszatérni a főoldalra.

A weboldalakat két típusra lehet osztani aszerint, van-e a főmenüben „Kezdőlap” / „Főoldal” elem vagy nincs. Persze egyre több weboldal alkalmazza és egyre több látogató tudja, hogy a fejlécben lévő logóra kattintva is a főoldalra lehet jutni, de nem mindenki! Aki sokat netezik, annak ez egyértelmű, de ha olyan látogatók is megfordulnak a honlapodon, akik nem annyira tapasztaltak, akkor nekik nehézséget fog okozni a szöveges menüelem hiánya.

A főoldal kialakításába valószínűleg sok időt és energiát fektettél, és a látogatók számára is ez a legbiztosabb pont a honlapodon. Kiindulópontként használják, hogy áttekintsék a tartalmakat, lehetőségeket. Nagyon fontos, hogy könnyen elérhető legyen, ne kelljen senkinek sem gondolkozni, hogyan juthat oda.

A látogatók felkeresik a főoldalt, ha

egy aloldalt áttekintve az tetszik nekik, és el szeretnének mélyedni a honlap további tartalmában;
elveszettnek érzik magukat böngészés közben, és nem tudják pontosan, hol járnak;
valamilyen új tevékenységbe szeretnének fogni az oldaladon (pl. információkeresésbe, olvasásba, letöltésbe, feliratkozásba, vásárlásba stb.).

Legjobb gyakorlat

A főoldalt szövegesen is szerepeltesd a menüpontok között, erre két lehetőség is kínálkozik. Válaszd az egyiket, nem kell mindkettőt megvalósítani! (A duplikált navigáció is összezavarhatja a látogatókat.) Bármelyik szöveges elemet is választod, használd mellette mindenképpen a kattintható logót is!

Ha a főmenüben helyezed el, legyen a bal szélső, mert ez kezd a sztenderd, megszokott helye lenni, a többség itt keresi.

főoldal szerepeltetése a menüpontok között — A menü a Főoldal elemmel kezdődik és a bal oldalon elhelyezett logó is kattintható.

Elhelyezheted a morzsamenüben is, ha az minden aloldalon látható. A morzsamenü nagyon sokat segít a látogatóknak az eligazodásban. Kezdődjön a Főoldal linkjével, legalábbis asztali gépes nézeten. (A morzsamenü azt mutatja meg, a webhelyen belül belül hol helyezkedik el az éppen megnyitott oldal, és milyen szintű kategóriák vannak az adott oldal felett. A képen a „Sport és egészség” kategórián belül van megnyitva a „Jóga vagy pilates? Melyiket válaszd?” bejegyzés oldala.)

morzsamenü alkalmazása a főmenü alatt — A fejlécben a főmenü alatt azonnal morzsamenü található. Nem biztos, hogy szerencsés, hogy mindkettőben szerepel a Főoldal linkje, a főmenü pontjai közül el lehetne távolítani. A morzsamenüben való megmutatása viszont biztos, hogy segíti az eligazodást, és a főoldalra való visszatérést.

3. Nem megfelelő a logó pozíciója

Ha nem helyezed el a logódat a fejlécben, azzal nemcsak a navigációt nehezíted (hiszen általában rákattintva a főoldalra lehet kerülni), hanem a márkaismertséged és a bizalmat is csökkented. De nem elég elhelyezni, oda kell tenni, ahol a látogatók azt elvárják, vagy legalábbis könnyen észreveszik!

A szövegeket, könyveket balról jobbra olvassuk. Nagyon hasznos, ha a márkát jelző logó a bal felső sarokban van, így ez az első, amit a látogatók meglátnak az oldaladon.

Ha innen elmozdítod, például mert nagyon egyedi az oldal design-ja, akkor annak a kutatások szerint erős hatása van a felhasználói élményre. Kis kijelzőn, mobilon még nem gond, ha középre van rendezve, mert könnyen megtalálható. Ha viszont nagyobb monitoron nem a logót látják meg elsőként a látogatók (mert teljesen máshová került), az csökkenti a márkanév későbbi felidézését.

Sok olyan webhelyet találni, ahol a logót felül középen helyezik el, így az két részre vágja a menüt. Általában ezeken az oldalakon kicsit nehezebben navigálnak a látogatók, és hosszabb időbe kerül megtalálniuk a főoldal elérését.

A középre helyezett logó első ránézésre nagyon hasonlít a menüpontokra, vizuálisan nem különül el tőlük elég határozottan. Nehéz észrevenni és logóként azonosítani. Kattintásra ez is a főoldalra visz, de valószínűleg több látogatónak lenne ez egyértelmű, ha bal oldalra kerülne, és jobban ki lenne emelve.

Legjobb gyakorlat

A logót helyezd el a bal felső sarokban, egy sorban a menüpontokkal vagy hamburger ikonnal.
Annak ellenére, hogy szövegesen is szerepelteted a főoldalt a menüben, a logón is helyezz el a főoldalra mutató linket.
A logó képileg erősen különüljön el az oldal többi, szöveges elemétől. Ha nagyon hasonlít egy szöveges menüpontra, mindenkinek sokkal nagyobb erőfeszítésbe kerül megtalálni és azonosítani.

hangsúlyosan elhelyezett logó a fejlécben — A logó a leginkább megszokott bal oldalon van, a látogatók ezt látják meg először. A menüpontok vele egy sorban vannak, de hangsúlyosan elkülönülve. Erős a kontraszt, a menüpontok jól olvashatók. (Egy dolgot javasolnék csak: legyen Főoldal elem.)

4. Nem érthetők a menüpontok

Megnehezítheted a látogatók életét, ha sokat kell gondolkozniuk rajta, melyik menüpontban keressenek egy bizonyos információt. A legjobb, amit tehetsz az összezavarásuk érdekében, ha a szokásos menüpontokat átnevezed. Így nemcsak böngésznek majd, hanem azt is látják, te mennyire kreatív vagy! (Sajnos a valóságban nem ezt gondolják.)

A honlapok látogatói nagyon bizalmatlanok, kényelmesek és válogatósak (amilyen te magad is vagy mások weblapján). Azt a menüpontot akarják a legkisebb erőfeszítéssel megtalálni, ahol választ kapnak kérdésükre vagy segítséghez jutnak. Fel kell mérniük, értékelniük kell az elérhető lehetőségeket, és ezekből választani. Nem kattintanak viszont olyan linkre, amiről nem tudják, mit találnak majd „mögötte”, például azért, mert nem egyértelmű, nem érthető számukra.

nem tiszta menüpontok — A honlapot használó szervezet utazásokat, kirándulásokat szervez. Az olvasók többsége valószínűleg nem tudja, mit takar az Ajándék menüpont. Vagy az Infó menüpont, ha mellette már van Eseményeink, Szolgáltatásaink, Blog és Kapcsolat pont is.

A főmenüd sose legyen olyan, mint egy zsákbamacska! Minél szokványosabb és unalmasabb a menüsorod, annál jobban működik, mert annál többen megértik, mit hol találnak. Az a cél, hogy a navigáció betöltse a célját: a lehető legtöbben megtalálják, mi hol található.

nem világos menüpontok — Egy büntetőjogász weboldalán első ránézésre nem lenne világos, hogy ha a „Miben segíthetek önnek?” menüpont a szolgáltatásokat takarja, akkor a „Szakterületek” pont mögött mire számíthatnék. (Ez az oldal egyébként több szempontból sem követi a sztenderdeket: a „Miben segíthetek Önnek?” a főoldal linkjét tartalmazza, a névlogóra kattintva pedig ugyanúgy telefonos hívás indítás történik, mint a mellette lévő telefonszámra klikkelve.)

nem egyértelmű menüpontok alkalmazása — A tréningekkel foglalkozó szervezet menüpontjai nem egyértelműek. Vajon milyen tartalomra lehet számítani a „Toborzás” és a „Facilitáció” pontokra kattintva?

Ennek némileg ellentmondó tanács az, hogy ne legyen a menüd túl általános sem, ne lehessen bármelyik vállalkozásé. Ha érted az eddigi érvelést, akkor viszont ezt könnyen meg tudod valósítani: a lehető legkonkrétabban add meg, mit takar egy menüpont, viszont ne használj rá ködös, értelmetlen leírást.

Az első:

A második:

A harmadik:

Legjobb gyakorlat

Ne a menü legyen az a terep, ahol kreatívan kibontakozol, és trendi (de a többség számára lehet, hogy érthetetlen) utalásokkal helyettesíted a „Kapcsolat”, „Rólam”, „Szolgáltatásaim” elemeket. Ez a többség számára inkább akadályt jelent és nem keresik fel az oldalaidat. Ezek helyett például általában nem érdemes használni a „Beszéljünk”, „Ismerkedj meg velem” és az „Ebben segítek” szövegeket.
Ne legyen viszont túl általános sem a menüd. Az elemek elnevezése pontosan adja meg, milyen tartalmat talál a látogató, ha rákattint. Ha például konzultációkat adsz, akkor a menüpont ne „Szolgáltatásaim” legyen, hanem „Konzultáció”.
A menüelemek elnevezése ne legyen túl hosszú, a legjobb, ha maximum 3 szavasak.

5. Következetlen a menüpontok felépítése

Az előző ponthoz szorosan kapcsolódva, van még módszer, ahogy könnyen összezavarhatod az olvasókat. Ezt megteheted mondjuk úgy is, hogy elbizonytalaníthatod őket, melyik linkre kattintsanak, mert több is éppen ugyanolyan relevánsnak tűnik.

Az előző pontokban volt róla szó, mennyire fontos, hogy a menüelemek ne jelentsenek rejtélyt a látogatók számára és könnyen megtalálják a választ a kérdésükre.

Ha eljutottál idáig, és elkezdtél gondolkozni a saját menürendszereden, akkor lehet, hogy több megoldás is eszedbe jutott, milyen szempontok szerint tudod rendezni a tartalmaidat.

a tartalom funkciója szerint, pl. blog, szolgáltatások, kapcsolat, rólam stb.
a látogató valamilyen szempontú besorolása szerint, pl. lakossági ügyfelek / vállalati ügyfelek vagy pl. házat szeretnél venni / eladni stb.

Egyik megoldás sem rosszabb, mint a másik, és mindegyik változat működhet. Ez mindig attól függ… az iparágadtól, a látogatóidtól: mennyire problémacentrikusak, mennyire közismert a szolgáltatásod, mennyire mélyen ismerik a megoldandó problémát és a lehetséges megoldásokat stb.

És hogy még bonyolultabb legyen a dolog, a legtöbb oldalon persze ezek a típusok keverednek! Pl. a látogató besorolása szerinti elemek mellett szerepel a Blog és a Kapcsolat is, hiszen ezek mindenkire vonatkoznak (kivéve persze, ha mégsem, és pl. több különböző csoportnak is írsz blogot…).

Hogyan dönts a legjobb felosztásról?

Mivel a menü helye nem túl nagy, szelektálni kell a menüelemek között. A cél az, hogy a feltüntetett pontok olyan tartalmakat mutassanak meg, amik a látogatóknak fontosak és relevánsak lehetnek, és elrejtsék azokat, amik számukra úgysem lényegesek.

A tartalom funkciója szerinti felosztás a legáltalánosabban elterjedt menüfelépítési módszer. Ez a leginkább megszokott, tehát várhatóan senki nem fog rajta meglepődni, és tudni fogják, hol keressék a blogodat, a kapcsolatfelvételi lehetőséget vagy hol tájékozódhatnak a termékeidről, szolgáltatásaidról. A nehézséget itt az okozhatja, amikor valaki egy speciálisabb problémával talál meg, és szeretné megtudni, te tudsz-e neki segíteni benne. Elképzelhető, hogy a választ hosszabb idő alatt tudja csak kideríteni.

A látogatók valamilyen egyedi szempontú besorolása már sokkal több problémát vethet fel. Gondolj bele: ez a gyakorlatban azt jelenti, a weboldal felépítőjeként előre szegmentálod, csoportokra osztod a látogatókat. Bizonyos tartalmakat aszerint teszel elérhetővé számukra, hogy ők első lépésként milyen csoportba osztják magukat. A felosztás tehát alapvetően feltételezi, hogy a látogatók helyesen ismerik fel, ők maguk melyik szegmensbe tartoznak és az oldalon lehetőleg nincs olyan tartalom, ami átfedésben van az egyes csoportok között.

látogatói csoport alapján alkotott menü — Jellemző példa a közműszolgáltatók oldala. Szinte biztosan mindenki bosszankodott már azon, hogy nem talál meg valamit, vagy nem tudja, egyáltalán jó helyen keresi-e! Itt az első lépésben kellene eldöntenem, az Egyetemes szolgáltatás vagy a Versenypiaci szolgáltatás menüpont alatt kell keresnem az intéznivalóimat.

Legjobb gyakorlat

Ismerd meg a lehető legjobban a látogatóidat, és próbáld meg kideríteni, milyen mély a tudásuk, mennyire problématudatosak azon a területen, ahol te dolgozol. Alakítsd az ő kereséseik alapján a menüpontokat.
Győződj meg róla, hogy a menüpontok nemcsak neked, hanem másnak is egyértelműek, és a látogatóid megtalálják amit keresnek, a lehető legkényelmesebb módon.
Ha úgy döntesz, a látogatókat csoportokba osztod, akkor győződj meg róla, hogy a csoportok között nincs átfedés, egyértelműen vannak megnevezve. Adj meg minél hamarabb alpontokat (pl. mega menüt használva), hogy még érthetőbb legyen a felosztás és gyorsabban megtalálható a kívánt tartalom. Tedd lehetővé a későbbi váltást is a csoportok között, és hangsúlyos helyen mutasd meg a látogató pontos helyét, hol jár a tartalomban (pl. morzsamenüvel).

egyértelmű, nem átfedő menüpontok — Egyértelmű, a látogatók számára könnyedén megkülönböztethető menüpontok, amik között kevés az átfedés.

6. Formátum szerint vannak csoportosítva a tartalmak

Megnehezítheted a látogatók dolgát, ha nem tartalmilag, hanem formátumok szerint mutatod meg a nálad elérhető információkat. Hiszen gondolj bele, te mennyire kényelmesen vásárolnál egy szupermarket webshopjában, ha a cikkek aszerint lennének csoportosítva, mibe vannak csomagolva? Könnyen kosárba raknád a bevásárlást, ha a kategóriák ilyenek lennének, mint például dobozosok, zacskózottak, darabáru, csomagoltak, fóliázottak stb.?

Ha egy látogató rátalál az oldaladra, a főmenü áttekintése után remélhetőleg van elképzelése arról, hogyan talál őt igazán érdeklő aloldalakat. Ebben a fázisban vélhetően nem igazán érdekes, hogy az adott információ milyen formátumban van feltöltve az oldaladra: cikket írtál róla, videót készítettél vagy podcastot hallgathat a témában. Csak az érdekli, hogy választ kapjon a kérdésére.

Nem érdemes tehát a főmenüben olyan pontokat szerepeltetned, mint Videók vagy Galéria. Ebben az esetben valószínűleg nem működnek a formátumok alapján szortírozott tartalmat jelentő menüpontok, hiszen a keresés ennél általánosabb és a válasz megtalálására fókuszál.

formátum szerint kialakított menüpontok — Ebben a menüben bizonyára sokszor kellene próbálkoznunk, hogy megtaláljuk a választ egy kérdésre, ha a válasz maga fontos, és mindegy, hogy egy kiadványban, a galériában, a hanganyagok között vagy egy videóban szerepel. A helyzetet javíthatná, ha a menüpontokra kattintva almenü lenne elérhető, de ilyen itt nincs. Még azt is nehéz meghatározni, milyen szervezet menüjét látjuk.

Mikor érdemes formátumok szerint csoportosítani az oldalaid?

Ugyan nem szorosan a főmenühöz kapcsolódik, de van olyan helyzet, amikor igenis érdemes formátum szerint is csoportosítani a tartalmakat. Ha valaki felfedezi egy aloldaladat, ami érdekli, akkor a böngészés idejét meg tudod hosszabbítani. Ajánlj az oldalon a témához kapcsolódó, különböző formátumú tartalmakat, pl. fotógalériát, videókat, podcast-eket, webkamerát stb.

A videók, fotók nagyon sok tartalom esetében remek kiegészítést jelentenek a szöveges tartalom mellé. De érdemes ezeket inkább kontextusban, beágyazva bemutatni, ahelyett, hogy egyedül állnának.

Legjobb gyakorlat

Gondolkozz a látogatók szemével, és úgy csoportosítsd és tedd elérhetővé a tartalmakat a főmenüben, hogy az megkönnyítse az információk megtalálását, a formátumtól függetlenül.

7. Fontos menüpontok hiányoznak, látogatói szempontból értéktelen menüelemek vannak használatban

Hatékonyan bosszanthatod a látogatóidat azzal, hogy telerakod a menüdet olyan elemekkel, amiket csak szökőévente egyszer keres valaki, kihagysz viszont fontos oldalakat.

Biztos, hogy dolgoztál már a menüelemek szortírozásán, mert sosincs annyi hely, amennyit szeretnél. A legjobb, ha ezek elférnek egy sorban, legalább asztali gépes nézetben. Ehhez viszont nagyon szigorúan ki kell válogatni, mit mutass meg a fejléc hangsúlyos menüsorában. Nagyon fontos, hogy minden menüelem a honlapod szempontjából értékes oldalra mutasson: bizalmat építsen, szakértői státuszodat erősítse vagy információkat tegyen elérhetővé.

Szakértői egyéni vállalkozóként vagy kisvállalkozásként vannak olyan oldalak, amiket mindenképpen az olvasók szeme előtt kell tartanod, ilyen például a téged bemutató oldal vagy a kapcsolatfelvételi lehetőségek, mert ezek a bizalomépítéshez fontosak. Elkerülhetetlen a blogod könnyen elérhetővé tétele, ami szakértelmedet mutatja. A szolgáltatásaid, termékeid bemutatása pedig a honlapod célja. Ha ezek hiányoznak, akkor nem épül a bizalom és nem lesznek ügyfeleid.

(Webáruházaknál ennél sokkal jobban lehet a termékekre koncentrálni a főmenüben, hiszen ott az eladás a fő cél, a bizalomépítő elemek kevésbé hangsúlyosan jelennek meg, mint egy szakértői oldal esetében.)

Vannak viszont olyan oldalak, amiket ugyan fontos könnyen elérhetővé tenni, de nem szükséges a főmenüben feltüntetni. Ilyen például az ÁSZF, az Adatkezelési tájékoztató vagy az Impresszum. Ezek is bizalmi elemek az oldalon, de kevesen fogják ténylegesen elolvasni őket. A legjobb megoldás, ha a láblécben elérhetők, a többség most már úgyis arrafelé keresi.

kevesek által keresett menüpontok — A webáruház főmenüjében szereplő Információk/GDPR pontot elegendő lenne a láblécben szerepeltetni, itt pedig jobb áttekintést nyújtani a termékkínálatról.

Legjobb gyakorlat

Használj több menüt az oldalon belül, és a fontos, de kevesek által keresett oldalak, tartalmak elérhetőségét helyezd el ezekben. Ilyen lehet egy plusz, kevésbé hangsúlyos menü a fejlécben vagy a lábléc alján.

két menü a fejlécben — A fejléc legtetején főleg technikai információkat tartalmazó menüpontok, ezeket a visszatérő látogatók keresik és gyorsan elérhetők számukra. Az új érdeklődőknek szól a hangsúlyos, termékkategóriákat tartalmazó menü. Ezen az oldalon könnyű kiigazodni: sok információ elérhető egyszerre, de áttekinthetően vannak elrendezve.

8. Nehézkes és idegesítő lenyíló menük használata

Valószínűleg csak akkor nem kell alkalmaznod lenyíló menüt, ha nagyon aloldalt tartalmaz a honlapod. Egy bizonyos mennyiségnél már biztosan kell ilyet használnod. Itt kezdheted igazán bosszantani az olvasóidat! Elérhetetlenné tehetsz alpontokat, vagy vizsgáztathatod a látogatók kézügyességét, türelmét és kitartását.

Lenyíló menüt használsz, ha egy menüponthoz megadsz alpontokat is, de ezek csak akkor látszanak, amikor egérrel a menüpont fölé áll vagy arra rákattint valaki. Nem minden menüponthoz szoktak alpontok tartozni. Hogy van-e ilyen használatban, ennek nincs sztenderd jelzése. Általában egy kis, lefelé vagy oldalra mutató nyíl szokta jelezni, hogy alpontok között is lehet válogatni, de sok oldalon nincs ilyen használatban.

lefelé mutató apró nyilak mutatják az almenüt — Lefelé mutató apró nyilak mutatják, hogy bizonyos menüpontok alatt almenü található.

Felhasználói kutatások alapján a lenyíló (drop-down) menük sokkal kevésbé, vagy csak hosszabb böngészés után felfedezhetők asztali gépes nézeten. A „rejtett” menüpontokat pedig sokkal kevesebben használják, és az oldalon töltött időn belül jóval később fedezik fel.

Milyen problémák szoktak fellépni a lenyíló menükkel kapcsolatban?

Az almenüt rejtő ikont nehéz észre venni a nagyobb felületű kijelzőn. Asztali gépes verziónál ennek nincsen még sztenderdje, nagyon sokféleképpen van megvalósítva. Mobilon már jobban kezd kiforrni az almenük használata.

szokatlan módon jelzett almenük — Nem megszokott módszer az almenük jelzésére a menüpontok alatt elhelyezett apró ferde vonal.

szokatlan helyen található almenü — A menüpontokon nincs jelzés, tartalmaznak-e almenüt. Itt a „Főoldal” elemhez kapcsolódik ilyen, ami a többség számára valószínűleg szokatlan.

A főmenüben szereplő ikon vagy a menüpont címkéje túl általános, nem árulja el egyértelműen, hogy mi található benne/rákattintva. A főmenüt le kell nyitni ahhoz, hogy a látogatók rájöjjenek, milyen alpontok vannak benne, ezért kevésbé valószínű, hogy megteszik.

kitalálhatatlan almenük — A legtöbb tartalom ezen az oldalon a „Továbbiak” menüpont alatt található meg. Mivel itt sok alpont szerepel, valószínűleg sok kijelzőn az alsókat már csak görgetéssel lehet elérni, ezek kevés látogatót kaphatnak.

Kis méretű gombok. Szinte mindenkinek meggyűlik a baja a használhatósággal, amikor a kis méret miatt nehéz a menüpontra/alpontra kattintani. Ez a probléma asztali gépen és mobilon is előfordulhat.

kis területű menüpontok — Az almenü pontjai között nincs túl nagy hely, így nagyon pontosan kell a választott fölé állni az egérrel és kattintani.

Nem mindig egyértelmű, van-e olyan oldal létrehozva, ami a főmenüre kattintva látható? Vagy csak az alpontok kattinthatók? A főmenün keresztül elérhető tartalmat sokan kihagyhatják amiatt, hogy ez nem egyértelmű, és az oldal látogatottsága alacsony lesz.

A hover problémája: a kézügyesség vizsgálata

Lenyíló menüt kétféle módon lehet megvalósítani (legalábbis asztali gépes nézeten): az alpontok kattintásra vagy hover-re nyílnak-e meg. A hover azt jelenti, hogy ha valaki egérrel a főmenü felirata fölé áll, akkor lesznek láthatók az almenü pontjai.

A hover használatánál az az elgondolás, hogy könnyebb és gyorsabb lesz a menü használata, mert megtakarít egy kattintást. Ez a kattintás viszont éppen annak az igazolása lenne, hogy a látogató valóban meg akarja nyitni a menüt, nem csak véletlenül elhúzta az egeret a terület felett. Ha véletlenül válik láthatóvá, az zavarja az olvasót, hiszen megszakítja a tevékenységét, esetleg el is takar fontos tartalmat.

A hover módszerét használó menükkel kapcsolatban még egy probléma felmerül: nagyon pontos egérmozgást igényel a használata. Mivel a menü eltűnik, ahogy az egér nincs a menü felett, így a látogatóknak könnyű elveszteni azt a menüpontot, amire kattintani szeretne. Egy kis kézremegés, vagy pontatlanabb mozdulat esetén lehet elölről kezdeni a navigációt.

hoverrel működő három szintű legördülő menü — Ezen a weboldalon hover menü működik, és az egyik menüpont alpontjai kilógnak a képernyőről. Biztosan kevesebb látogató érkezik az alsóbb, egyes eszközökön kilógó menüpontokra, mert a többség ezekre nem is tud kattintani, hiszen egérrel felette kell maradni, és közben görgetni lefelé. Ráadásul itt harmadik szint is van a menüben, amihez az egeret vízszintesen is nagyon pontosan kell mozgatni. Ha az egér „lefut” a menü területéről, lehet újrakezdeni a navigációt és keresést. Ez a folyamat a látogatók egy részének nagy mentális és fizikai kihívást jelent.

Legjobb gyakorlat

Csak akkor használj lenyíló menüt, ha nagyon muszáj és nem tudod a tartalmak elérését másképpen megoldani. Két szintnél semmiképpen ne legyen mélyebb a menürendszer.
Olyan menüpontok esetében használj alpontokat, ahol az „várható”: a „Szolgáltatások” például ilyen, de a „Főoldal” vagy a „Kapcsolat” esetében a többséget meglepi, ha almenüt talál.
Az almenüpontok létezését jelezd egyértelműen, mindenféle szélességű megjelenés esetén (mobil, tablet, asztali).
Az almenüpontokat mindenféle szélességű megjelenés esetén (asztali is) kattintásra tedd láthatóvá, ne a hover módszert alkalmazd.
Az alpontok megnyílását teszteld minden felületen: olvashatók-e és kattinthatók-e (elég nagy-e minden gomb vagy felirat).
Ha nagyon sok alpontot kell megjelenítened, használj inkább mega-menüt! A mega menü egy viszonylag nagy területre lenyíló menü, ahol akár két menüszintet is meg lehet jeleníteni, az elemeket csoportosítva, több oszlopban elrendezve. A menüpontokat nem csak szöveggel, hanem akár képekkel vagy ikonokkal is meg tudod mutatni. Nagy előnye, hogy könnyen áttekinthető, görgetés nélkül sok alpont látható.

mega menü — A weboldalon a főmenü egyik pontja alatt megjelenő alpontok, két hierarchia szintben. Az olvasónak így lehetősége van konkrét termékcsoportot választani egy általánosabb helyett, egy kattintással. (Pl. nem kell a „Kandalló füstcsövek” pontra kattintania, és a megjelenő oldalon választani csővastagság szerint.) Az egyes csoportok és a szintek egyértelműen el vannak választva a különböző betűméretek és betűvastagságok segítségével.

képeket tartalmazó mega menü — Az egyes alpontokat itt szöveg mellett képek is megjelenítik, még könnyebbé téve a választást.

9. Közösségi média linkek szerepelnek a menüben

Ha közösségi média linkeket helyezel el a fejlécben, akár a főmenü részeként, igazából nem a látogatókkal szúrsz ki, hanem magaddal.

Keresőoptimalizálási szempont, hogy a látogatók mennyi időt töltenek a weboldaladon és hány oldalt néznek meg. A fő feladatod a honlapodon tehát az, hogy ott tartsd a látogatóidat, olvasóidat. A közösségi médiában való megjelenésnek éppen az a célja, hogy a weboldaladra tereljék az érdeklődőket (ahol aztán ügyféllé varázsolhatod őket).

Viszont, ha már a főmenüben vagy az oldal tetején szerepelteted a közösségi média profiljaid ikonjait, linkjeit, akkor arra jó eséllyel sokan kattintanak, és elhagyják az oldalad. Megkérdezhetik magukban, vajon a Facebook oldalad információi sokkal aktuálisabbak, mint a weboldaladon lévők, ezért irányítod át őket rögtön oda?

közösségi média linkek a fejlécben — A honlap fejlécében sorakoznak a kattintásra ingerlő közösségi média linkek, ráadásul egy kiemelt sávban. A cikk írásának idején olyan is van köztük, ami évek óta nem működik, így a látogatókban felmerülhet, mennyire aktuális a honlap teljes tartalma.

Legjobb gyakorlat

Igen, tudom, erre azt mondod, a látogatók keresik és igénylik ezeket a linkeket. A fejléc helyett inkább helyezd el őket a láblécben, ma már ez teljesen megszokott hely nekik. Ha valaki nagyon szeretné, biztos, hogy ott is megtalálja ezeket. Addig is böngészi az oldalaid!

A példaként szereplő oldalak kizárólag a főmenüjük miatt kerültek be a cikkbe. A szereplésüknek nem oka, hogy rossz minőségű oldalak lennének, sőt, vannak közöttük igen kiválóak. Az oldalak a képernyőképek készítése óta változhattak, a cikkben a felvétel időpontjában talált állapotuk van szövegesen bemutatva. Ha felfedezed itt saját oldalad (vagy egy korábbi verzióját), de nem szeretnéd, hogy szerepeljen, vedd fel velünk a kapcsolatot, és szívesen kicseréljük másik példára.

+1 Hány elemből álljon a menü és ezek milyen sorrendben szerepeljenek?

Iratkozz fel hírlevelünkre, hogy rendszeresen vagy rendszertelenül, de tippekkel lássunk el a honlapod még jobbá tételéhez! Cserébe letöltheted a cikk teljes szövegét, hogy mindig kéznél legyen, kiegészítve még egy fejezettel: hogyan tudod meghatározni, hány elemből álljon a főmenüd és ezeket milyen sorrendbe érdemes rakni?

* * * * * * * *

Legyen még szuperebb a weboldalad! Hasonló bejegyzéseket a Blogban találsz!