A leny\u00edl\u00f3 tartalmak \u00e9s men\u00fck rendk\u00edv\u00fcl n\u00e9pszer\u0171ek a weboldalakon, k\u00fcl\u00f6n\u00f6sen mobilon, hiszen \u00e1ltaluk elt\u00fcntethet\u0151 vagy megjelen\u00edthet\u0151 egy tartalom, ami kezelhet\u0151bb\u00e9 teszi a weboldal hossz\u00e1t. Ugyanakkor monitoros megjelen\u00e9sn\u00e9l is hasznosak, hiszen cs\u00f6kkentik egy adott weboldal vizu\u00e1lis \u00f6sszetetts\u00e9g\u00e9t, \u00e9s lehet\u0151v\u00e9 teszik a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, hogy a tartalomra \u00f6sszpontos\u00edtsanak. <\/p>\n\n\n\n A defin\u00edci\u00f3 szerint a leny\u00edl\u00f3 egy olyan egy olyan fejl\u00e9c, amely kattint\u00e1sra felfedi, illetve elrejti a hozz\u00e1 kapcsol\u00f3d\u00f3 tartalmat<\/strong>. Tipikusan h\u00e1rom elemb\u0151l \u00e1ll:<\/p>\n\n\n\n A leny\u00edl\u00f3 tartalom l\u00e9nyege teh\u00e1t az, hogy az inform\u00e1ci\u00f3 fokozatosan v\u00e1lik el\u00e9rhet\u0151v\u00e9 a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra. Els\u0151 k\u00f6rben a panel m\u00e9g rejtve van, \u00e9s a c\u00edmsort l\u00e1tj\u00e1k, mely alapj\u00e1n eld\u00f6nthetik, hogy elolvass\u00e1k vagy sem. <\/p>\n\n\n\n A leny\u00edl\u00f3 tartalmak nagyon rugalmasan haszn\u00e1lhat\u00f3k, funkci\u00f3jukban hasonl\u00f3ak a horgonylinkekhez: seg\u00edtenek a felhaszn\u00e1l\u00f3nak navig\u00e1lni a weboldal tartalm\u00e1ban. Abban is seg\u00edtenek, hogy logikusan elrendezd az inform\u00e1ci\u00f3kat a weboldaladon. <\/p>\n\n\n\n Emellett megjelen\u00e9s\u00fck r\u00e9v\u00e9n cs\u00f6kkentik a zs\u00fafolts\u00e1got<\/strong>, mivel a nem haszn\u00e1lt tartalmat elrejtik eg\u00e9szen addig, m\u00edg a felhaszn\u00e1l\u00f3nak nincs sz\u00fcks\u00e9ge r\u00e1. Ezzel egyszer\u0171bb\u00e9 teszik az oldal megjelen\u00e9s\u00e9t<\/strong>, cs\u00f6kkentik a felhaszn\u00e1l\u00f3 kognit\u00edv terhel\u00e9s\u00e9t, \u00e9s lehet\u0151v\u00e9 teszi, hogy csak arra az inform\u00e1ci\u00f3ra koncentr\u00e1ljon egy adott pillanatban, ami val\u00f3ban \u00e9rdekli.<\/p>\n\n\n\n Leny\u00edl\u00f3 tartalmak haszn\u00e1lat\u00e1val kevesebbet kell g\u00f6rgetnie a felhaszn\u00e1l\u00f3nak<\/strong>, mivel jelent\u0151sen ler\u00f6vid\u00edti az oldalt, mik\u00f6zben a relev\u00e1ns tartalom l\u00e1that\u00f3. Hosszabb weboldalakon nagyon hasznos a navig\u00e1ci\u00f3ban<\/strong>, a felhaszn\u00e1l\u00f3k k\u00f6nnyebben \u00e1tl\u00e1tj\u00e1k az oldalon fellelhet\u0151 t\u00e9m\u00e1kat. \u00cdgy egyb\u0151l l\u00e1tj\u00e1k, hogy j\u00f3 helyen j\u00e1rnak (vagy sem), amint meg\u00e9rkeznek a weboldalra. <\/p>\n\n\n\n A hat\u00e9kony weboldal ugyanis a meg\u00e9rkez\u00e9skor m\u00e1r jelzi a l\u00e1togat\u00f3knak, hogy mire sz\u00e1m\u00edthatnak az oldalon, \u00e9s nem kell g\u00f6rgetve keresg\u00e9lni\u00fck, hogy az \u0151ket \u00e9rdekl\u0151 t\u00e9ma val\u00f3ban felbukkan-e rajta. Gyakorlatilag \u00fagy m\u0171k\u00f6dik, mint egy tartalomjegyz\u00e9k<\/strong>.<\/p>\n\n\n\n Jav\u00edtja az \u00e1tfuthat\u00f3s\u00e1got<\/strong>, ami az\u00e9rt fontos, mivel a felhaszn\u00e1l\u00f3k nem sz\u00f3r\u00f3l sz\u00f3ra olvass\u00e1k el a weboldalakat, hanem \u00e1tfutnak rajtuk, felt\u00e9rk\u00e9pezik. A leny\u00edl\u00f3 nagyon egyszer\u0171v\u00e9 teszi a weboldal tartalm\u00e1n val\u00f3 \u00e1tfut\u00e1st, nem csak a tartalomjegyz\u00e9k miatt, hanem, mert em\u00e9szthet\u0151 m\u00e9ret\u0171 egys\u00e9gekbe van rendezve az inform\u00e1ci\u00f3, \u00edgy egy-egy egys\u00e9get is k\u00f6nnyebben \u00e1ttekintenek.<\/p>\n\n\n\n Az el\u0151bb felsorolt el\u0151ny\u00f6k mellett ugyanakkor ennek a megold\u00e1snak h\u00e1tr\u00e1nyai is vannak. Az egyik a sz\u00e9tt\u00f6redezett inform\u00e1ci\u00f3<\/strong>, ami akkor gond, ha a felhaszn\u00e1l\u00f3 a weboldal teljes tartalm\u00e1t fel akarja dolgozni. Ilyenkor minden egyes r\u00e9szt k\u00fcl\u00f6n le kell nyitnia, ami f\u00e1raszt\u00f3 lehet sz\u00e1m\u00e1ra. <\/p>\n\n\n\n R\u00e1ad\u00e1sul, ha a sz\u00e1m\u00e1ra fontos inform\u00e1ci\u00f3k elt\u00e9r\u0151 paneleken jelennek meg, akkor elveszhet k\u00f6z\u00f6tt\u00fck, hiszen nincs azonnali r\u00e1l\u00e1t\u00e1sa az \u00e9ppen elrejtett inform\u00e1ci\u00f3kra. Ezeket az elt\u00e9r\u0151 paneleken szerepl\u0151 inform\u00e1ci\u00f3kat nehezebben is tudja \u00f6sszekapcsolni. Ez k\u00fcl\u00f6n\u00f6sen akkor okoz probl\u00e9m\u00e1t, ha a leny\u00edl\u00f3 automatikusan becsuk\u00f3dik, amikor a felhaszn\u00e1l\u00f3 egy m\u00e1sikat megnyit. Teh\u00e1t, ha a Te weboldaladon a felhaszn\u00e1l\u00f3k v\u00e1rhat\u00f3an egyszerre t\u00f6bb r\u00e9szben szerepl\u0151 inform\u00e1ci\u00f3t is \u00f6ssze akarnak vetni, akkor azt \u00e9rdemes egyszerre megmutatni nekik, nem leny\u00edl\u00f3val.<\/p>\n\n\n\n A leny\u00edl\u00f3k haszn\u00e1lat\u00e1val az \u00fagynevezett interakci\u00f3s k\u00f6lts\u00e9g is n\u00f6vekszik<\/strong>, hiszen a felhaszn\u00e1l\u00f3nak el kell d\u00f6ntenie a c\u00edmsorok elolvas\u00e1s\u00e1val, hogy melyik r\u00e9szt akarj\u00e1k megnyitni, erre kattintaniuk is kell, majd megv\u00e1rni, hogy a tartalom megjelenjen. Ez lehet, hogy nem t\u0171nik t\u00fal sz\u00e1mottev\u0151nek, azonban n\u00e9h\u00e1ny felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra probl\u00e9m\u00e1t okozhat. <\/p>\n\n\n\n Az is probl\u00e9m\u00e1t jelenthet, hogy a l\u00e9nyeges tartalom is rejtve maradhat<\/strong> a felhaszn\u00e1l\u00f3k el\u0151l, \u00e9s lehet, hogy soha nem is fedezik fel. Ennek k\u00fcl\u00f6n\u00f6sen akkor nagy a val\u00f3sz\u00edn\u0171s\u00e9ge, ha a c\u00edmsor nem el\u00e9g informat\u00edv vagy nem kelti fel az \u00e9rdekl\u0151d\u00e9st. <\/p>\n\n\n\n Emellett hozz\u00e1f\u00e9rhet\u0151s\u00e9gi probl\u00e9m\u00e1k<\/strong> is jelentkezhetnek azok sz\u00e1m\u00e1ra, akik csak billenty\u0171zetet haszn\u00e1lnak vagy k\u00e9perny\u0151-felolvas\u00f3t. A megold\u00e1s k\u00f6nnyebben hozz\u00e1f\u00e9rhet\u0151 a billenty\u0171zetet haszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, ha a c\u00edmsor eg\u00e9sze gombk\u00e9nt funkcion\u00e1l. Ha pedig egy leny\u00edl\u00f3 \u00f6sszecsuk\u00f3dik, akkor annak nem csak vizu\u00e1lisan kell elt\u0171nnie, hanem teljesen el\u00e9rhetetlenn\u00e9 kell v\u00e1lnia minden felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra. <\/p>\n\n\n\n V\u00e9g\u00fcl pedig \u00e9rdemes megeml\u00edteni, hogy a weboldal nyomtat\u00e1sa kapcs\u00e1n is felmer\u00fclhetnek probl\u00e9m\u00e1k. <\/p>\n\n\n\n Hogy a k\u00e9rd\u00e9st meg tudd v\u00e1laszolni, tiszt\u00e1ban kell lenned a k\u00f6z\u00f6ns\u00e9ged ig\u00e9nyeivel, \u00e9s hogy mit k\u00edv\u00e1n az a tartalom, amit k\u00f6zz\u00e9teszel. Teh\u00e1t:<\/p>\n\n\n\n Teh\u00e1t \u00e9rdemes haszn\u00e1lni, ha a felhaszn\u00e1l\u00f3id csak a tartalmad egy darabk\u00e1j\u00e1ra k\u00edv\u00e1ncsiak<\/strong>, \u00e9s a t\u00f6bbit csak \u00e1tugorj\u00e1k, illetve, ha a feladatuk v\u00e9grehajt\u00e1sa egy logikus, l\u00e9p\u00e9sr\u0151l-l\u00e9p\u00e9sre folyamatban kivitelezhet\u0151. Hiszen a leny\u00edl\u00f3 vezeti a felhaszn\u00e1l\u00f3t, mik\u00f6zben elrejti azokat a r\u00e9szeket, melyek csak h\u00e1tr\u00e1ltatn\u00e1k a feladat v\u00e9grehajt\u00e1s\u00e1ban. <\/p>\n\n\n\n Akkor is j\u00f3 megold\u00e1s, ha a weboldalon l\u00e9v\u0151 tartalmi egys\u00e9gek f\u00fcggetlenek egym\u00e1st\u00f3l<\/strong>, \u00e9s a felhaszn\u00e1l\u00f3knak val\u00f3sz\u00edn\u0171leg nincs sz\u00fcks\u00e9g\u00fck arra a feladatuk v\u00e9grehajt\u00e1s\u00e1hoz, hogy egyszerre k\u00e9t leny\u00edl\u00f3t is nyitva tartsanak. Ilyen lehet egy GYIK vagy egy term\u00e9kr\u00e9szletek.<\/p>\n\n\n\n V\u00e9g\u00fcl pedig akkor is j\u00f3 megold\u00e1s, ha hossz\u00fa a tartalom a weboldalon<\/strong>, illetve hangs\u00falyos mobilhaszn\u00e1lat miatt a legt\u00f6bb felhaszn\u00e1l\u00f3 kis kijelz\u0151n l\u00e1tja az oldalt. <\/p>\n\n\n\n Akkor viszont ne haszn\u00e1ld, ha<\/p>\n\n\n\n Amire figyelni kell, hogy a c\u00edmsor pontosan t\u00fckr\u00f6zze az adott panel tartalm\u00e1t<\/strong>. Vagyis egy\u00e9rtelm\u0171, le\u00edr\u00f3 c\u00edmsor kell. Ennek hi\u00e1ny\u00e1ban \u00e1tsiklanak felette a felhaszn\u00e1l\u00f3k, mert nem \u00e9rtik, tal\u00e1lgatni meg id\u0151 hi\u00e1ny\u00e1ban nem fognak.<\/p>\n\n\n\n A vizu\u00e1lis designnak utalnia kell arra, hogy lenyithat\u00f3 elemmel van dolguk. A legnagyobb probl\u00e9ma az szokott lenni, amikor hi\u00e1nyzik az a vil\u00e1gos, r\u00e1utal\u00f3 elem<\/strong>, mely mutatja sz\u00e1mukra a lenyit\u00e1s lehet\u0151s\u00e9g\u00e9t. A kattinthat\u00f3s\u00e1got jeleznie kell, az ikon k\u00e9rd\u00e9s\u00e9re pedig hamarosan visszat\u00e9r\u00fcnk. <\/p>\n\n\n\n Lehet\u0151v\u00e9 kell tenni a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra, hogy egyszerre t\u00f6bb panelt is lenyisson<\/strong>. Elk\u00e9pzelhet\u0151, hogy egy „mindent kinyit” \u00e9s „mindent becsuk” gomb is hasznos lehet az oldalon. <\/p>\n\n\n\n V\u00e9g\u00fcl, ha vannak rendk\u00edv\u00fcl fontos inform\u00e1ci\u00f3k az adott oldalon, akkor azokat ne rejtsd el leny\u00edl\u00f3 panelen. Ezek jelenjenek meg a leny\u00edl\u00f3 r\u00e9szek el\u0151tt, hogy egyb\u0151l el tudj\u00e1k olvasni, akik az oldalra l\u00e9pnek.<\/p>\n\n\n\n Az alc\u00edmben feltett k\u00e9rd\u00e9sre a v\u00e1laszt egy r\u00e9gi, de friss\u00edtett cikk\u00e9ben<\/a> a Nielsen Norman Group adta meg.<\/p>\n\n\n\n De kezdj\u00fck ott, hogy a designerek a leny\u00edl\u00f3 men\u00fcket t\u00f6bb c\u00e9lra is haszn\u00e1lhatj\u00e1k:<\/p>\n\n\n\n 1. Parancs men\u00fck<\/strong> – melyek egy kiv\u00e1lasztott opci\u00f3 alapj\u00e1n elind\u00edtanak egy bizonyos cselekv\u00e9st.<\/p>\n\n\n 2. Navig\u00e1ci\u00f3s men\u00fck<\/strong> – melyek a weboldalakon a felhaszn\u00e1l\u00f3kat egy m\u00e1sik oldalra viszik.<\/p>\n\n\n\n 3. \u0170rlap-kit\u00f6lt\u0151k<\/strong> – amikor a felhaszn\u00e1l\u00f3k egy leg\u00f6rd\u00fcl\u0151 men\u00fcben tudj\u00e1k kiv\u00e1lasztani a megfelel\u0151 opci\u00f3t, mely azt\u00e1n ki is t\u00f6lti az \u0171rlap megfelel\u0151 mez\u0151j\u00e9t.<\/p>\n\n\n\n 4. Attrib\u00fatum v\u00e1laszt\u00e1sa<\/strong> – amikor a felhaszn\u00e1l\u00f3 kiv\u00e1laszthat egy \u00e9rt\u00e9ket a men\u00fcben felsorolt lehets\u00e9ges \u00e9rt\u00e9kek k\u00f6z\u00fcl.<\/p>\n\n\n M\u00e9g egy dolgot \u00e9rdemes el\u00f6lj\u00e1r\u00f3ban tiszt\u00e1zni. Eredetileg a leny\u00edl\u00f3 doboz \u00e9s a leny\u00edl\u00f3 men\u00fc ugyanazt jelentette, azonban az id\u0151k sor\u00e1n elkezdtek k\u00fcl\u00f6nb\u00f6zni egym\u00e1st\u00f3l. Ma a leny\u00edl\u00f3 men\u00fc alapvet\u0151en az el\u0151bb felsorolt els\u0151 k\u00e9t lehet\u0151s\u00e9get jelenti, vagyis a navig\u00e1ci\u00f3t \u00e9s a parancs-list\u00e1t. Ugyanakkor a leny\u00edl\u00f3 dobozok \u00e1ltal\u00e1ban a v\u00e1laszt\u00e1s m\u00f3dj\u00e1t jelentik egy \u0171rlap kit\u00f6lt\u00e9s\u00e9n\u00e9l vagy egy attrib\u00fatum v\u00e1laszt\u00e1s\u00e1n\u00e1l.<\/p>\n\n\n\n A leny\u00edl\u00f3 dobozok alapvet\u0151en m\u00e1sk\u00e9nt n\u00e9znek ki, mint a leny\u00edl\u00f3 men\u00fck: megjelenik mellett\u00fck egy kis ny\u00edl, \u00e9s a haszn\u00e1latukkal kiv\u00e1laszthat\u00f3 a bevinni k\u00edv\u00e1nt adat a megadott list\u00e1b\u00f3l, illetve az attrib\u00fatum. Ezt a funkci\u00f3t \u00e1ltal\u00e1ban t\u00e1mogatja egy mez\u0151c\u00edmke vagy egy olyan c\u00edm, mely az els\u0151 helyen szerepel a leny\u00edl\u00f3 list\u00e1ban.<\/p>\n\n\n A leny\u00edl\u00f3 men\u00fck haszn\u00e1lat\u00e1nak megvannak a maga el\u0151nyei. Az egyik, hogy helyet takar\u00edt meg. Mivel m\u00e1r egy megszokott eszk\u00f6z, ez\u00e9rt a felhaszn\u00e1l\u00f3k tudj\u00e1k, hogy mik\u00e9nt kezelj\u00e9k \u0151ket. \u0170rlapokn\u00e1l \u00e9s attrib\u00fatum-v\u00e1laszt\u00e1sn\u00e1l r\u00e1ad\u00e1sul megel\u0151zik azt a hib\u00e1t, hogy az emberek rossz adatokat vigyenek fel, hiszen csak az adott opci\u00f3k k\u00f6z\u00fcl v\u00e1laszthatnak.<\/p>\n\n\n\n Ezen el\u0151ny\u00f6k ellen\u00e9re a web haszn\u00e1lhat\u00f3s\u00e1ga csak javulna, ha a designerek kevesebb leny\u00edl\u00f3 men\u00fct haszn\u00e1ln\u00e1nak. Ha m\u00e9gis \u00fagy d\u00f6ntesz, hogy Neked is kell, akkor itt van n\u00e9h\u00e1ny szab\u00e1ly, melyet vegy\u00e9l figyelembe:<\/p>\n\n\n\n 1. Ker\u00fcld el az interakci\u00f3ba l\u00e9p\u0151 men\u00fcket<\/strong>! Vagyis az opci\u00f3k ne v\u00e1ltozzanak az egyik men\u00fcben, ha a felhaszn\u00e1l\u00f3 az oldalon egy m\u00e1sik men\u00fcben kiv\u00e1laszt valamit. Ez a megold\u00e1s csak megzavarja az embereket, illetve neh\u00e9z az opci\u00f3 l\u00e1that\u00f3v\u00e1 t\u00e9tele, ha megjelen\u00e9s\u00e9nek az a felt\u00e9tele, hogy egy m\u00e1sik opci\u00f3 ki legyen v\u00e1lasztva. Ha nem vil\u00e1gos, itt a p\u00e9lda:<\/p>\n\n\n 2. Sz\u00fcrk\u00edtsd be az el\u00e9rhetetlen opci\u00f3kat<\/strong>, ahelyett, hogy elt\u00e1vol\u00edtan\u00e1d \u0151ket a men\u00fcb\u0151l! Vagyis azok az elemek, melyek nem v\u00e1laszthat\u00f3k, tov\u00e1bbra is maradjanak l\u00e1that\u00f3k, csak ne legyenek haszn\u00e1lhat\u00f3k. M\u00e9g jobb megold\u00e1s, ha egy sz\u00f6vegbubor\u00e9kban inform\u00e1ci\u00f3t is mutatsz az egeret r\u00e1juk mozgat\u00f3 felhaszn\u00e1l\u00f3knak arr\u00f3l, hogy mi\u00e9rt inakt\u00edv az elem \u00e9s mik\u00e9nt tehet\u0151 akt\u00edvv\u00e1. Ha viszont elt\u00e1vol\u00edtasz elemeket, akkor a fel\u00fclet elveszti a k\u00f6vetkezetess\u00e9g\u00e9t, \u00e9s sokkal nehezebb\u00e9 v\u00e1lik megismerni.<\/p>\n\n\n\n 3. Ha nagyon hossz\u00fa leny\u00edl\u00f3t haszn\u00e1lsz<\/strong>, akkor ezzel a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra lehetetlenn\u00e9 teszed, hogy valamennyi lehet\u0151s\u00e9get egyszerre \u00e1ttekints\u00e9k. R\u00e1ad\u00e1sul nagyon \u00f3vatos eg\u00e9rhaszn\u00e1latra k\u00e9nyszer\u00edted \u0151ket, hogy v\u00e9letlen\u00fcl ne csuk\u00f3djon be a leny\u00edl\u00f3 men\u00fc. Ugyanis min\u00e9l hosszabb \u00e9s keskenyebb az a csatorna, amelyen mozgatni tudj\u00e1k az eg\u00e9rmutat\u00f3t, ann\u00e1l lassabban tudnak egyik pontb\u00f3l a m\u00e1sikba eljutni.<\/p>\n\n\n\n \u00c1llj ellen a k\u00eds\u00e9rt\u00e9snek, hogy min\u00e9l t\u00f6bb elemet zs\u00fafolj bele a leny\u00edl\u00f3dba, mondv\u00e1n: \u00fagysem foglal helyet. Ha t\u00fal sok elemed van, akkor ink\u00e1bb gondolkodj el egy alternat\u00edv megjelen\u00e9si megold\u00e1son, mint amilyen egy mega men\u00fc<\/a>, mely k\u00e9t ir\u00e1nyba is b\u0151v\u00edthet\u0151, ahelyett, hogy csak egy s\u00e1vot foglalna el. \u00cdgy pedig a felhaszn\u00e1l\u00f3k k\u00f6nnyebben tudj\u00e1k haszn\u00e1lni, gyorsabban \u00e9rik el a benne l\u00e9v\u0151 elemeket.<\/p>\n\n\n\n 4. Ne haszn\u00e1lj leny\u00edl\u00f3t, ha gyorsabb beg\u00e9pelni<\/strong> a felhaszn\u00e1l\u00f3nak a sz\u00f6veget, mint kiv\u00e1lasztani a list\u00e1b\u00f3l! Tipikus eset\u00e9ben ilyen az orsz\u00e1gok list\u00e1ja, melyet v\u00e9gigg\u00f6rgetni lehet, hogy tov\u00e1bb tart, mint beg\u00e9pelni az orsz\u00e1g nev\u00e9t. Ez persze Magyarorsz\u00e1g eset\u00e9ben nem felt\u00e9tlen\u00fcl igaz, de Amerik\u00e1ban val\u00f3ban egyszer\u0171bb az \u00e1llam r\u00f6vid\u00edt\u00e9s\u00e9t (p\u00e9ld\u00e1ul NY) be\u00fctni, mint kikeresni egy list\u00e1b\u00f3l. Term\u00e9szetesen, ha szabadon kit\u00f6lthet\u0151 lesz az \u0171rlap adott mez\u0151je, akkor a v\u00e9g\u00e9n ellen\u0151rizni kell a bevitt adatot, azonban haszn\u00e1lhat\u00f3s\u00e1gi szempontb\u00f3l m\u00e9gis sok esetben jobb megold\u00e1s.<\/p>\n\n\n\n 5. Ne haszn\u00e1lj leny\u00edl\u00f3 dobozokat olyan adatokhoz, melyek bevitele nem okoz neh\u00e9zs\u00e9get<\/strong> az embereknek. Ilyen p\u00e9ld\u00e1ul a sz\u00fclet\u00e9si \u00e9vsz\u00e1muk, a h\u00f3nap, nap megad\u00e1sa. Csak lelass\u00edtja \u0151ket az \u0171rlap kit\u00f6lt\u00e9s\u00e9ben, ha \u00e9vsz\u00e1mok k\u00f6z\u00f6tt kell v\u00e1logatni, ahelyett, hogy be\u00edrn\u00e1k a n\u00e9gy sz\u00e1mot.<\/p>\n\n\n 6. Mindig l\u00e1tsz\u00f3djon a men\u00fc c\u00edmk\u00e9je vagy le\u00edr\u00e1sa<\/strong>! Teh\u00e1t akkor is, ha a leny\u00edl\u00f3 men\u00fc ki lett bontva. Ez seg\u00edti a felhaszn\u00e1l\u00f3 t\u00e1j\u00e9koz\u00f3d\u00e1s\u00e1t, az esz\u00e9ben tartja, hogy mi az, ami k\u00f6z\u00fcl \u00e9ppen v\u00e1lasztania kell. Ha viszont a c\u00edmke elt\u0171nik, amikor kiny\u00edlik a men\u00fc, akkor az embereknek gondolkodniuk kell, miel\u0151tt cselekszenek.<\/p>\n\n\n\n 7. Desktop fel\u00fcleten ne ker\u00fclj\u00f6n a glob\u00e1lis navig\u00e1ci\u00f3 leny\u00edl\u00f3 men\u00fcbe<\/strong>. Ez azt jelenti, hogy a legfels\u0151bb szint\u0171 kateg\u00f3ri\u00e1kat nem \u00e9rdemes elrejteni egy leny\u00edl\u00f3 men\u00fcbe, mert nehez\u00edti a haszn\u00e1latot.<\/p>\n\n\n\n 8. Engedd a billenty\u0171zet haszn\u00e1lat\u00e1t a leny\u00edl\u00f3n bel\u00fcli navig\u00e1ci\u00f3n\u00e1l<\/strong>! Vagyis nem el\u00e9g, ha csak eg\u00e9rrel lehet haszn\u00e1lni, hanem fontos, hogy a sz\u00e1m\u00edt\u00f3g\u00e9p billenty\u0171zet\u00e9t is be lehessen vetni. A gyorsbillenty\u0171k seg\u00edts\u00e9g\u00e9vel az emberek sokkal gyorsabb tudnak v\u00e1lasztani a l\u00e1that\u00f3 opci\u00f3k k\u00f6z\u00fcl az eg\u00e9r haszn\u00e1lata n\u00e9lk\u00fcl. Ilyenkor csak be kell \u00fctni\u00fck a megfelel\u0151 bet\u0171t, mely \u00e1ltal gyorsan eljutnak ahhoz az opci\u00f3hoz, mely az adott bet\u0171vel kezd\u0151dik.<\/p>\n\n\n\n Ami m\u00e9g l\u00e9nyeges, hogy \u00e9rdemes tesztelni a leny\u00edl\u00f3k haszn\u00e1lat\u00e1t. Ugyanis vannak olyan helyzetek, amikor leny\u00edl\u00f3k alkalmaz\u00e1s\u00e1val csak megzavarod az embereket. P\u00e9ld\u00e1ul \u201ca k\u00f6zter\u00fclet jellege\u201d bevitelekor nem felt\u00e9tlen\u00fcl el\u0151ny\u00f6s, ha leny\u00edl\u00f3b\u00f3l kell kiv\u00e1lasztani, hogy t\u00e9r, \u00fat, utca, stb., mert az emberek megszokt\u00e1k, hogy az utcan\u00e9v megad\u00e1s\u00e1n\u00e1l be\u00edrj\u00e1k annak jelleg\u00e9t is. Itt teh\u00e1t nem kell \u201cseg\u00edteni\u201d \u0151ket, mert csak nehez\u00edted a helyzetet. Egy teszt viszont megmutatja, hogy mikor okoznak zavart a leny\u00edl\u00f3k, \u00e9s mikor nem.<\/p>\n\n\n\n Felmer\u00fcl azonban a k\u00e9rd\u00e9s, hogy melyik az az ikon, amely a leghat\u00e9konyabban jelzi, hogy egy men\u00fc vagy egy tartalmi r\u00e9sz lenyithat\u00f3, azaz kibonthat\u00f3. Milyen lehet\u0151s\u00e9gek k\u00f6z\u00fcl v\u00e1laszthatunk? <\/p>\n\n\n\n <\/p>\n\n\n\n Van ezeknek az ikonoknak m\u00e1r egy bevett haszn\u00e1lata, \u00edgy a lefel\u00e9 mutat\u00f3 nyilat vagy a plusz jelet arra haszn\u00e1lj\u00e1k a designerek, hogy jelezz\u00e9k a kiny\u00edl\u00e1st, m\u00edg a jobbra mutat\u00f3 ny\u00edl k\u00e9t dolgot is jelenthet: kiboml\u00f3 tartalmat vagy pedig ugr\u00e1st egy m\u00e1sik oldalra. Jellemz\u0151en egy\u00e9bk\u00e9nt a tartalom kiboml\u00e1sa ut\u00e1n a ny\u00edl megfordul, vagy a plusz jel m\u00ednusz jell\u00e9 v\u00e1lik, jelezve, hogy egy \u00fajabb kattint\u00e1s eset\u00e9n mi v\u00e1rhat\u00f3 (becsuk\u00f3d\u00f3 tartalom). Az NNG mindenesetre megvizsg\u00e1lt<\/a> 5 lehet\u0151s\u00e9get kvantitat\u00edv teszttel, hogy kider\u00fclj\u00f6n, melyik k\u00f6z\u00fcl\u00fck a leghat\u00e9konyabb. <\/p>\n\n\n\n Ennek \u00e9rdek\u00e9ben elk\u00e9sz\u00edtettek 11 mobil weboldal protot\u00edpust, illetve ezek mindegyik\u00e9nek 5 v\u00e1ltozat\u00e1t. Ezek a protot\u00edpusok nem voltak interakt\u00edvak, csak mockupok men\u00fcvel, melyek m\u00e1r nyitva voltak, valamint l\u00e1that\u00f3 volt a kateg\u00f3ri\u00e1k list\u00e1ja. Ezzel azt akart\u00e1k el\u00e9rni, hogy csak a leny\u00edl\u00f3 men\u00fcvel val\u00f3 interakci\u00f3t m\u00e9rj\u00e9k, \u00e9s ne zavarjanak be a felhaszn\u00e1l\u00f3k azon t\u00f6rekv\u00e9sei, melyek a men\u00fck megtal\u00e1l\u00e1s\u00e1ra vagy a weboldal vizsg\u00e1lat\u00e1ra ir\u00e1nyulnak. <\/p>\n\n\n\n A tesztben 136 f\u0151 vett r\u00e9szt, \u00e9s mindenkinek megmutatt\u00e1k a 11 protot\u00edpus valamelyik\u00e9t. Miut\u00e1n a r\u00e9sztvev\u0151k jelezt\u00e9k, hogy hova kattintan\u00e1nak a megadott feladat elv\u00e9gz\u00e9se \u00e9rdek\u00e9ben, v\u00e1laszolniuk kellett n\u00e9h\u00e1ny k\u00e9rd\u00e9sre, melyekre arra vonatkoztak, hogy v\u00e1rakoz\u00e1saik szerint vajon mi t\u00f6rt\u00e9nhet: \u00faj weboldalra \u00e9rkeznek, \u00fajabb men\u00fc-opci\u00f3k ny\u00edlnak ugyanazon az oldalon, vagy valami m\u00e1s. <\/p>\n\n\n\n Adatokat gy\u0171jt\u00f6ttek teh\u00e1t arr\u00f3l, hogy hova kattintottak a felhaszn\u00e1l\u00f3k: k\u00f6zvetlen\u00fcl a c\u00edmk\u00e9re, az ikonra, a c\u00edmke \u00e9s az ikon k\u00f6z\u00f6tti \u00fcres r\u00e9szre, vagy valahov\u00e1 m\u00e1shov\u00e1 az oldalon. Emellett r\u00f6gz\u00edtett\u00e9k a r\u00e9sztvev\u0151k v\u00e1rakoz\u00e1sait. <\/p>\n\n\n\n Mint kider\u00fclt, a legt\u00f6bb kattint\u00e1s az ikonra vagy a sz\u00f6vegre \u00e9rkezett (nem pedig a kett\u0151 k\u00f6z\u00e9), ugyanakkor az is l\u00e1that\u00f3, hogy a lefel\u00e9 mutat\u00f3 ny\u00edl eset\u00e9ben kattintottak legt\u00f6bben az ikonra, a c\u00edmke helyett. Ez azt jelenti, hogy amikor megjelent a men\u00fcben a lefel\u00e9 mutat\u00f3 ny\u00edl, akkor nagyobb val\u00f3sz\u00edn\u0171s\u00e9ggel az ikonra kattintottak, mint a c\u00edmk\u00e9re. Egy\u00e9bk\u00e9nt a t\u00f6bbi h\u00e1rom ikon eset\u00e9ben is az ikonra esett a felhaszn\u00e1l\u00f3k v\u00e1laszt\u00e1sa, de ez nem volt statisztikailag szignifik\u00e1ns, illetve, amikor nem volt jelen ikon, csak a helye, akkor term\u00e9szetesen a c\u00edmk\u00e9re \u00e9rkeztek a kattint\u00e1sok. <\/p>\n\n\n\n A m\u00e1sik l\u00e9nyeges dolog viszont az, hogy mire sz\u00e1m\u00edtottak a r\u00e9sztvev\u0151k. A v\u00e1laszok elemz\u00e9se r\u00e9v\u00e9n kider\u00fclt, hogy a legkisebb es\u00e9llyel a lefel\u00e9 mutat\u00f3 ny\u00edl eset\u00e9ben val\u00f3sz\u00edn\u0171s\u00edtett\u00e9k a felhaszn\u00e1l\u00f3k, hogy \u00faj oldalra viszi \u0151ket a kattint\u00e1s. M\u00e1rpedig egy leny\u00edl\u00f3 men\u00fcn\u00e9l az ar\u00e1nynak 50 sz\u00e1zal\u00e9k alatt kell maradnia – hangs\u00falyozta az NNG, ez pedig csak a lefel\u00e9 mutat\u00f3 ny\u00edl \u00e9s a plusz jel eset\u00e9ben adott. Azt is megjegyezt\u00e9k azonban a k\u00f6vetkeztet\u00e9sek levon\u00e1sakor, hogy nem szabad \u00fagy kialak\u00edtani az \u00f6sszetartoz\u00f3 c\u00edmk\u00e9t \u00e9s ikont, hogy a c\u00edmk\u00e9re t\u00f6rt\u00e9n\u0151 kattint\u00e1s egy \u00faj oldalra vigye a felhaszn\u00e1l\u00f3t, m\u00edg az ikonra kattint\u00e1s lenyissa a men\u00fct, mivel ugyanazt v\u00e1rj\u00e1k el mindkett\u0151t\u0151l. <\/p>\n\n\n\n Ugyancsak meg\u00e1llap\u00edtott\u00e1k, hogy a jobbra mutat\u00f3 ny\u00edl nem jelezte egy\u00e9rtelm\u0171en a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, hogy az arra t\u00f6rt\u00e9n\u0151 kattint\u00e1s \u00faj oldalra visz, annak ellen\u00e9re, hogy sok designer gondolja ezt. <\/p>\n\n\n\n Mindebb\u0151l teh\u00e1t azt a k\u00f6vetkeztet\u00e9st lehet levonni a weboldaladra n\u00e9zve, hogy ha leny\u00edl\u00f3 men\u00fct haszn\u00e1lsz, akkor a legjobb megold\u00e1s a lefel\u00e9 mutat\u00f3 ny\u00edl a funkci\u00f3 jelz\u00e9s\u00e9re. Ugyanakkor a c\u00edmk\u00e9nek nem szabad \u00faj oldalra vinnie a felhaszn\u00e1l\u00f3t, mik\u00f6zben a ny\u00edl lenyitja a men\u00fct. A felhaszn\u00e1l\u00f3k ugyanis nagyj\u00e1b\u00f3l egyenl\u0151 ar\u00e1nyban kattintottak a ny\u00edlra \u00e9s a c\u00edmk\u00e9re, mik\u00f6zben nem sz\u00e1m\u00edtottak arra, hogy ezek elt\u00e9r\u0151 dolgot eredm\u00e9nyeznek. V\u00e9g\u00fcl pedig, ha \u00faj oldalra vinn\u00e9d a felhaszn\u00e1l\u00f3t a men\u00fcb\u0151l, akkor ne haszn\u00e1lj jobbra mutat\u00f3 nyilat, mert ez nem egy\u00e9rtelm\u0171 a sz\u00e1m\u00e1ra. <\/p>\n\n\n\n Leny\u00edl\u00f3 men\u00fc r\u00e9v\u00e9n egyszer\u0171bb, letisztultabb lehet a design, felmer\u00fcl viszont a k\u00e9rd\u00e9s, hogy m\u00e1r akkor tal\u00e1lkozzon-e a leny\u00edl\u00f3 men\u00fcsorral a felhaszn\u00e1l\u00f3, ha \u00e9ppen f\u00f6l\u00e9 mozd\u00edtja az egeret, vagy r\u00e1 is kelljen kattintania? Melyek az el\u0151nyei \u00e9s h\u00e1tr\u00e1nyai az egyiknek, \u00e9s melyek a m\u00e1siknak? Az el\u0151bbire egy\u00e9bk\u00e9nt itt egy p\u00e9lda<\/a>, m\u00edg a kattint\u00f3s leny\u00edl\u00f3 navig\u00e1ci\u00f3s men\u00fc ismer\u0151s lehet a Google keres\u00e9s oldal\u00e1r\u00f3l.<\/p>\n\n\n\n Term\u00e9szetesen mindez csak desktopon \u00e1llja meg a hely\u00e9t. Nyilv\u00e1n az\u00e9rt, mert a probl\u00e9ma igaz\u00e1b\u00f3l nem l\u00e9tezik mobilon, hiszen ott csakis \u00e9rint\u00e9ssel lehet m\u0171k\u00f6d\u00e9sbe hozni egy leny\u00edl\u00f3 men\u00fct. Na, de l\u00e1ssuk, melyek<\/p>\n\n\n\n a hover el\u0151nyei:<\/p>\n\n\n\n H\u00e1tr\u00e1nyai:<\/p>\n\n\n\n \u00c9s akkor l\u00e1ssuk a kattint\u00e1s el\u0151nyeit:<\/p>\n\n\n\n Az ellen\u00e9rvek:<\/p>\n\n\n\n <\/p>\n <\/p>\r\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/lenyilo-menu.png\")
<\/figure>\n\n\n\nMi az a leny\u00edl\u00f3 tartalom?<\/h2>\n\n\n\n
\n
Milyen el\u0151nyei vannak a lenyithat\u00f3 tartalomnak?<\/h2>\n\n\n\n
Melyek a h\u00e1tr\u00e1nyai a leny\u00edl\u00f3 tartalmaknak?<\/h2>\n\n\n\n
Mikor haszn\u00e1lj \u00e9s mikor ne haszn\u00e1lj leny\u00edl\u00f3 tartalmat?<\/h2>\n\n\n\n
\n
\n
Hogyan alak\u00edtsd ki a leny\u00edl\u00f3 tartalmat a weboldaladon?<\/h2>\n\n\n\n
Hogyan alak\u00edtsd ki a leny\u00edl\u00f3 men\u00fct a weboldaladon?<\/h2>\n\n\n\n
![\"A](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/06\/word-parancs-lenyilo-menu.png\")
![\"attributum-valasztasa\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/06\/attributum-valasztasa.jpg\")
<\/figure><\/div>\n\n\n![\"Leny\u00edl\u00f3](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/06\/lenyilo-doboz.jpg\")
Hogyan tervezz leny\u00edl\u00f3 men\u00fct?<\/h4>\n\n\n\n
![\"Az](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/06\/itunes-lenyilo-menu.jpg\")
![\"lenyilo-doboz-evszamokkal\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/06\/lenyilo-doboz-evszamokkal.jpg\")
<\/figure><\/div>\n\n\nMilyen ikonnal jelezheted a leghat\u00e9konyabban a leny\u00edl\u00f3 men\u00fct vagy tartalmat a weboldaladon?<\/h2>\n\n\n\n
\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/icons.png\"){kind=icon}
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/hova-kattintottak-felhasznalok.png\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/mire-szamitottak-felhasznalok.png\")
Mi aktiv\u00e1lja a leny\u00edl\u00f3 men\u00fct? Hover vagy kattint\u00e1s?<\/strong><\/h2>\n\n\n\n
![\"Leg\u00f6rd\u00fcl\u0151](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2016\/07\/leg\u00f6rd\u00fcl\u0151-men\u00fc-kattint\u00e1ssal-a-Google-oldal\u00e1n.png\")
\n
\n
\n
\n