Webshark Blog

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. (Frissítés, 2021.06.24. – Átalakítottuk, kibővítettük a bejegyzést több új fejezettel is, így belekerüld a “Hogyan alakítsd ki a lenyíló menüt?” és a “Mi aktiválja a lenyíló menüt?” rész is.)

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.

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.

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