Webshark Blog

A lenyíló menü, illetve lenyíló tartalmi rész 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 használni egy weboldalon, mert időről-időre felmerülnek velük kapcsolatban használhatósági problémák. (Frissítés, 2023.08.08. – Több új fejezettel is bővítettünk: Mi az a lenyíló tartalom? Milyen előnyei és hátrányai vannak? Mikor használd és mikor ne? És hogyan alakítsd ki?)

A lenyíló tartalmak és menük rendkívül népszerűek a weboldalakon, különösen mobilon, hiszen általuk eltüntethető vagy megjeleníthető egy tartalom, ami kezelhetőbbé teszi a weboldal hosszát. Ugyanakkor monitoros megjelenésnél is hasznosak, hiszen csökkentik egy adott weboldal vizuális összetettségét, és lehetővé teszik a felhasználók számára, hogy a tartalomra összpontosítsanak.

Mi az a lenyíló tartalom?

A definíció szerint a lenyíló egy olyan egy olyan fejléc, amely kattintásra felfedi, illetve elrejti a hozzá kapcsolódó tartalmat. Tipikusan három elemből áll:

• Címsor – mely a lenyílóban lévő tartalom lényegét fejezi ki
• Ikon – ez a grafikus szimbólum, mely jelzi a lenyílót, valamint, hogy nyitott vagy csukott állapotban van
• Panel – mely akkor válik láthatóvá, ha kattintásra kinyílik a tartalom

A lenyíló tartalom lényege tehát az, hogy az információ fokozatosan válik elérhetővé a felhasználó számára. Első körben a panel még rejtve van, és a címsort látják, mely alapján eldönthetik, hogy elolvassák vagy sem.

Milyen előnyei vannak a lenyitható tartalomnak?

A lenyíló tartalmak nagyon rugalmasan használhatók, funkciójukban hasonlóak a horgonylinkekhez: segítenek a felhasználónak navigálni a weboldal tartalmában. Abban is segítenek, hogy logikusan elrendezd az információkat a weboldaladon.

Emellett megjelenésük révén csökkentik a zsúfoltságot, mivel a nem használt tartalmat elrejtik egészen addig, míg a felhasználónak nincs szüksége rá. Ezzel egyszerűbbé teszik az oldal megjelenését, csökkentik a felhasználó kognitív terhelését, és lehetővé teszi, hogy csak arra az információra koncentráljon egy adott pillanatban, ami valóban érdekli.

Lenyíló tartalmak használatával kevesebbet kell görgetnie a felhasználónak, mivel jelentősen lerövidíti az oldalt, miközben a releváns tartalom látható. Hosszabb weboldalakon nagyon hasznos a navigációban, a felhasználók könnyebben átlátják az oldalon fellelhető témákat. Így egyből látják, hogy jó helyen járnak (vagy sem), amint megérkeznek a weboldalra.

A hatékony weboldal ugyanis a megérkezéskor már jelzi a látogatóknak, hogy mire számíthatnak az oldalon, és nem kell görgetve keresgélniük, hogy az őket érdeklő téma valóban felbukkan-e rajta. Gyakorlatilag úgy működik, mint egy tartalomjegyzék.

Javítja az átfuthatóságot, ami azért fontos, mivel a felhasználók nem szóról szóra olvassák el a weboldalakat, hanem átfutnak rajtuk, feltérképezik. A lenyíló nagyon egyszerűvé teszi a weboldal tartalmán való átfutást, nem csak a tartalomjegyzék miatt, hanem, mert emészthető méretű egységekbe van rendezve az információ, így egy-egy egységet is könnyebben áttekintenek.

Melyek a hátrányai a lenyíló tartalmaknak?

Az előbb felsorolt előnyök mellett ugyanakkor ennek a megoldásnak hátrányai is vannak. Az egyik a széttöredezett információ, ami akkor gond, ha a felhasználó a weboldal teljes tartalmát fel akarja dolgozni. Ilyenkor minden egyes részt külön le kell nyitnia, ami fárasztó lehet számára.

Ráadásul, ha a számára fontos információk eltérő paneleken jelennek meg, akkor elveszhet közöttük, hiszen nincs azonnali rálátása az éppen elrejtett információkra. Ezeket az eltérő paneleken szereplő információkat nehezebben is tudja összekapcsolni. Ez különösen akkor okoz problémát, ha a lenyíló automatikusan becsukódik, amikor a felhasználó egy másikat megnyit. Tehát, ha a Te weboldaladon a felhasználók várhatóan egyszerre több részben szereplő információt is össze akarnak vetni, akkor azt érdemes egyszerre megmutatni nekik, nem lenyílóval.

A lenyílók használatával az úgynevezett interakciós költség is növekszik, hiszen a felhasználónak el kell döntenie a címsorok elolvasásával, hogy melyik részt akarják megnyitni, erre kattintaniuk is kell, majd megvárni, hogy a tartalom megjelenjen. Ez lehet, hogy nem tűnik túl számottevőnek, azonban néhány felhasználó számára problémát okozhat.

Az is problémát jelenthet, hogy a lényeges tartalom is rejtve maradhat a felhasználók elől, és lehet, hogy soha nem is fedezik fel. Ennek különösen akkor nagy a valószínűsége, ha a címsor nem elég informatív vagy nem kelti fel az érdeklődést.

Emellett hozzáférhetőségi problémák is jelentkezhetnek azok számára, akik csak billentyűzetet használnak vagy képernyő-felolvasót. A megoldás könnyebben hozzáférhető a billentyűzetet használók számára, ha a címsor egésze gombként funkcionál. Ha pedig egy lenyíló összecsukódik, akkor annak nem csak vizuálisan kell eltűnnie, hanem teljesen elérhetetlenné kell válnia minden felhasználó számára.

Végül pedig érdemes megemlíteni, hogy a weboldal nyomtatása kapcsán is felmerülhetnek problémák.

Mikor használj és mikor ne használj lenyíló tartalmat?

Hogy a kérdést meg tudd válaszolni, tisztában kell lenned a közönséged igényeivel, és hogy mit kíván az a tartalom, amit közzéteszel. Tehát:

• mire és hogyan használják az emberek majd a weboldalt?
• hozzájárulhat-e egy lenyíló ahhoz, hogy gyorsabban megtalálják a számukra fontos részeket, vagy nehezíti a helyzetüket?
• a tartalmad struktúrája megfelel a lenyílókra jellemző információs egységekre bontásnak?

Tehát érdemes használni, ha a felhasználóid csak a tartalmad egy darabkájára kíváncsiak, és a többit csak átugorják, illetve, ha a feladatuk végrehajtása egy logikus, lépésről-lépésre folyamatban kivitelezhető. Hiszen a lenyíló vezeti a felhasználót, miközben elrejti azokat a részeket, melyek csak hátráltatnák a feladat végrehajtásában.

Akkor is jó megoldás, ha a weboldalon lévő tartalmi egységek függetlenek egymástól, és a felhasználóknak valószínűleg nincs szükségük arra a feladatuk végrehajtásához, hogy egyszerre két lenyílót is nyitva tartsanak. Ilyen lehet egy GYIK vagy egy termékrészletek.

Végül pedig akkor is jó megoldás, ha hosszú a tartalom a weboldalon, illetve hangsúlyos mobilhasználat miatt a legtöbb felhasználó kis kijelzőn látja az oldalt.

Akkor viszont ne használd, ha

• a felhasználóknak az egész weboldal teljes tartalmára szükségük van az általuk feltett kérdés megválaszolására, ezért egyszerre kell látniuk a teljes tartalmát
• ha rövid a tartalmad, mert így üresnek fog kinézni a weboldalad
• ha többszintes a tartalmad, azaz mély a hierarchia: egy-egy címhez több alcím is tartozna, akár két-három szintes mélységben
• ha a felhasználók folyamatosan, az elejétől a végéig el akarják olvasni a tartalmad.

Hogyan alakítsd ki a lenyíló tartalmat a weboldaladon?

Amire figyelni kell, hogy a címsor pontosan tükrözze az adott panel tartalmát. Vagyis egyértelmű, leíró címsor kell. Ennek hiányában átsiklanak felette a felhasználók, mert nem értik, találgatni meg idő hiányában nem fognak.

A vizuális designnak utalnia kell arra, hogy lenyitható elemmel van dolguk. A legnagyobb probléma az szokott lenni, amikor hiányzik az a világos, ráutaló elem, mely mutatja számukra a lenyitás lehetőségét. A kattinthatóságot jeleznie kell, az ikon kérdésére pedig hamarosan visszatérünk.

Lehetővé kell tenni a felhasználó számára, hogy egyszerre több panelt is lenyisson. Elképzelhető, hogy egy „mindent kinyit” és „mindent becsuk” gomb is hasznos lehet az oldalon.

Végül, ha vannak rendkívül fontos információk az adott oldalon, akkor azokat ne rejtsd el lenyíló panelen. Ezek jelenjenek meg a lenyíló részek előtt, hogy egyből el tudják olvasni, akik az oldalra lépnek.

Hogyan alakítsd ki a lenyíló menüt a weboldaladon?

Az alcímben feltett kérdésre a választ egy régi, de frissített cikkében a Nielsen Norman Group adta meg.

De kezdjük ott, hogy 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.

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.

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.

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:

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.

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.

Milyen ikonnal jelezheted a leghatékonyabban a lenyíló menüt vagy tartalmat a weboldaladon?

Felmerül azonban a kérdés, hogy melyik az az ikon, amely a leghatékonyabban jelzi, hogy egy menü vagy egy tartalmi rész lenyitható, azaz kibontható. Milyen lehetőségek közül választhatunk?

• Hiányjel (ˇ) vagy lefelé mutató nyíl
• Plusz jel
• Jobbra mutató nyíl
• Ikon hiánya

Van ezeknek az ikonoknak már egy bevett használata, így a lefelé mutató nyilat vagy a plusz jelet arra használják a designerek, hogy jelezzék a kinyílást, míg a jobbra mutató nyíl két dolgot is jelenthet: kibomló tartalmat vagy pedig ugrást egy másik oldalra. Jellemzően egyébként a tartalom kibomlása után a nyíl megfordul, vagy a plusz jel mínusz jellé válik, jelezve, hogy egy újabb kattintás esetén mi várható (becsukódó tartalom). Az NNG mindenesetre megvizsgált 5 lehetőséget kvantitatív teszttel, hogy kiderüljön, melyik közülük a leghatékonyabb.

Ennek érdekében elkészítettek 11 mobil weboldal prototípust, illetve ezek mindegyikének 5 változatát. Ezek a prototípusok nem voltak interaktívak, csak mockupok menüvel, melyek már nyitva voltak, valamint látható volt a kategóriák listája. Ezzel azt akarták elérni, hogy csak a lenyíló menüvel való interakciót mérjék, és ne zavarjanak be a felhasználók azon törekvései, melyek a menük megtalálására vagy a weboldal vizsgálatára irányulnak.

A tesztben 136 fő vett részt, és mindenkinek megmutatták a 11 prototípus valamelyikét. Miután a résztvevők jelezték, hogy hova kattintanának a megadott feladat elvégzése érdekében, válaszolniuk kellett néhány kérdésre, melyekre arra vonatkoztak, hogy várakozásaik szerint vajon mi történhet: új weboldalra érkeznek, újabb menü-opciók nyílnak ugyanazon az oldalon, vagy valami más.

Adatokat gyűjtöttek tehát arról, hogy hova kattintottak a felhasználók: közvetlenül a címkére, az ikonra, a címke és az ikon közötti üres részre, vagy valahová máshová az oldalon. Emellett rögzítették a résztvevők várakozásait.

Mint kiderült, a legtöbb kattintás az ikonra vagy a szövegre érkezett (nem pedig a kettő közé), ugyanakkor az is látható, hogy a lefelé mutató nyíl esetében kattintottak legtöbben az ikonra, a címke helyett. Ez azt jelenti, hogy amikor megjelent a menüben a lefelé mutató nyíl, akkor nagyobb valószínűséggel az ikonra kattintottak, mint a címkére. Egyébként a többi három ikon esetében is az ikonra esett a felhasználók választása, de ez nem volt statisztikailag szignifikáns, illetve, amikor nem volt jelen ikon, csak a helye, akkor természetesen a címkére érkeztek a kattintások.

A másik lényeges dolog viszont az, hogy mire számítottak a résztvevők. A válaszok elemzése révén kiderült, hogy a legkisebb eséllyel a lefelé mutató nyíl esetében valószínűsítették a felhasználók, hogy új oldalra viszi őket a kattintás. Márpedig egy lenyíló menünél az aránynak 50 százalék alatt kell maradnia – hangsúlyozta az NNG, ez pedig csak a lefelé mutató nyíl és a plusz jel esetében adott. Azt is megjegyezték azonban a következtetések levonásakor, hogy nem szabad úgy kialakítani az összetartozó címkét és ikont, hogy a címkére történő kattintás egy új oldalra vigye a felhasználót, míg az ikonra kattintás lenyissa a menüt, mivel ugyanazt várják el mindkettőtől.

Ugyancsak megállapították, hogy a jobbra mutató nyíl nem jelezte egyértelműen a felhasználók számára, hogy az arra történő kattintás új oldalra visz, annak ellenére, hogy sok designer gondolja ezt.

Mindebből tehát azt a következtetést lehet levonni a weboldaladra nézve, hogy ha lenyíló menüt használsz, akkor a legjobb megoldás a lefelé mutató nyíl a funkció jelzésére. Ugyanakkor a címkének nem szabad új oldalra vinnie a felhasználót, miközben a nyíl lenyitja a menüt. A felhasználók ugyanis nagyjából egyenlő arányban kattintottak a nyílra és a címkére, miközben nem számítottak arra, hogy ezek eltérő dolgot eredményeznek. Végül pedig, ha új oldalra vinnéd a felhasználót a menüből, akkor ne használj jobbra mutató nyilat, mert ez nem egyértelmű a számára.

Mi aktiválja a lenyíló menüt? Hover vagy kattintás?

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

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.