Keresés
Header Háttér

Webshark Blog

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

2017-06-210 komment

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

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.

A lenyíló menüknek kétségtelenül helyük van a webdesignban. Annak ellenére, hogy sokan rosszul alkalmazzák őket, így időről-időre felmerülnek velük kapcsolatban használhatósági problémák. Ezekre és a jó megoldásra hívta fel egy régi, de most frissített cikkében a Nielsen Norman Group. 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.

A Word-ben ilyen parancs-menük találhatók.

A Word-ben ilyen parancs-menük találhatók.

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.

attributum-valasztasa

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.

Lenyíló doboz űrlap-kitöltésnél

Lenyíló doboz űrlap-kitöltésnél

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:

Az iTunes-ban attól függően változik a menü tartalma, hogy a Libraryben melyik opcióba lépünk.

Az iTunes-ban attól függően változik a menü tartalma, hogy a Libraryben melyik opcióba lépünk.

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.

lenyilo-doboz-evszamokkal

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.

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.