![\"Webshark](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/01\/Webshark-weboldalk\u00e9sz\u00edt\u00e9s-02.jpg\")
<\/a><\/figure><\/div>\n\n\nKezdj\u00fck ott, hogy mi is az a navig\u00e1ci\u00f3s men\u00fc? A navig\u00e1ci\u00f3s men\u00fc a tartalmi kateg\u00f3ri\u00e1idnak vagy funkci\u00f3knak egy olyan list\u00e1ja, mely linkekk\u00e9nt, esetleg ikonk\u00e9nt jelenik meg egy csoportban \u00e9s vizu\u00e1lisan elk\u00fcl\u00f6n\u00fcl a weboldal t\u00f6bbi r\u00e9sz\u00e9t\u0151l.<\/p>\n\n\n\n
Minden weboldal k\u00e9sz\u00edt\u00e9se sor\u00e1n<\/a> az egyik legfontosabb feladat a felhaszn\u00e1l\u00f3k megfelel\u0151 navig\u00e1l\u00e1sa. Hi\u00e1ba van a weboldaladon remek tartalom, vagy rendk\u00edv\u00fcl j\u00f3l haszn\u00e1lhat\u00f3 funkci\u00f3k, ha az emberek azokat nem tal\u00e1lj\u00e1k meg. \u00c9s m\u00e9g ha van is keres\u00e9si funkci\u00f3 a weboldaladon, nem t\u00e1maszkodhatsz teljes m\u00e9rt\u00e9kben a keres\u00e9sre, mint navig\u00e1ci\u00f3s eszk\u00f6zre.<\/p>\n\n\n\n A men\u00fck olyannyira fontosak, hogy n\u00e9h\u00e1ny kiv\u00e9telt\u0151l eltekintve minden weboldalon megtal\u00e1lhatod \u0151ket. Ugyanakkor persze nem minden men\u00fc egyform\u00e1n j\u00f3l haszn\u00e1lhat\u00f3. Hab\u00e1r egyszer\u0171nek t\u0171nik a dolog, sok esetben tal\u00e1lkozhatunk olyan men\u00fckkel, melyek haszn\u00e1lat\u00e1val csak szenvednek az emberek, mert \u00f6sszezavarja \u0151ket vagy egyszer\u0171en csak neh\u00e9z megtal\u00e1lni.<\/p>\n\n\n A navig\u00e1ci\u00f3s men\u00fc alapos \u00e1tgondol\u00e1sa – m\u00e9g a tervez\u00e9si szakaszban – igen fontos r\u00e9sze egy weboldal designj\u00e1nak. Ilyenkor nem csak azt kell megfontolni, hogy milyen linkeket helyez\u00fcnk bele, hanem azt is, hogy azokat milyen form\u00e1ban t\u00e1laljuk, ki akarunk-e fejezni a sorrenden t\u00fal valamif\u00e9le hierarchi\u00e1t a linkek csoportos\u00edt\u00e1s\u00e1val, vagy minimalizmusra t\u00f6reksz\u00fcnk, esetleg vannak-e olyan tartalmaink, melyekre k\u00fcl\u00f6n fel akarjuk h\u00edvni a navig\u00e1ci\u00f3 sor\u00e1n az emberek figyelm\u00e9t. \u00c9s azt\u00e1n ezeknek a szempontoknak megfelel\u0151en alak\u00edtjuk ki a men\u00fcnket.<\/p>\n\n\n\n A navig\u00e1ci\u00f3 megtervez\u00e9se egy weboldaln\u00e1l olyan, mint egy h\u00e1z alapj\u00e1nak a meg\u00e9p\u00edt\u00e9se. Ha hib\u00e1zunk az alapokn\u00e1l, ak\u00e1r \u00f6ssze is omolhat a h\u00e1z. \u00c9s teljesen mindegy, hogy egy\u00e9bk\u00e9nt milyen sz\u00e9p volt. Ugyan\u00edgy a weboldalunk sem lesz m\u0171k\u00f6d\u0151k\u00e9pes, ha rossz a navig\u00e1ci\u00f3. Id\u0151t kell teh\u00e1t szak\u00edtani arra, hogy megtervezz\u00fck, hogyan fognak a felhaszn\u00e1l\u00f3k kapcsolatba ker\u00fclni a tartalmainkkal, \u00e9s alaposan v\u00e9gig kell gondolni, hogy mik\u00e9nt tudjuk a leghat\u00e9konyabban elrendezni \u00e9s prezent\u00e1lni azt sz\u00e1mukra. Ha ezt elrontjuk, akkor a l\u00e1togat\u00f3k egy nagy r\u00e9sz\u00e9t elvesz\u00edtj\u00fck.<\/p>\n\n\n\n A navig\u00e1ci\u00f3 megtervez\u00e9se olyan, mint minden m\u00e1s ter\u00fclete a webdesignnak: nincs egy \u00e1ltal\u00e1nosan elfogadott helyes \u00fat, amit mindenkinek k\u00f6vetnie kell. Minden weboldalnak megvannak a maga kih\u00edv\u00e1sai, melyek t\u00f6bbf\u00e9le m\u00f3don is megoldhat\u00f3k. Ugyanakkor vannak olyan m\u00f3dszerek a tartalom elrendez\u00e9s\u00e9re, melyek r\u00e9v\u00e9n minimaliz\u00e1lhatjuk a hiba lehet\u0151s\u00e9g\u00e9t.<\/p>\n\n\n\n Egy weboldal tartalm\u00e1nak a megtervez\u00e9se mindig megel\u0151zi a navig\u00e1ci\u00f3\u00e9t. Az inform\u00e1ci\u00f3s architekt\u00fara<\/a>, azaz a tartalom fel\u00e9p\u00edt\u00e9s\u00e9vel alak\u00edtjuk a weboldalunk haszn\u00e1lhat\u00f3s\u00e1g\u00e1t. Amikor a tartalom fel\u00e9p\u00edt\u00e9s\u00e9n dolgozunk, akkor sokat seg\u00edt, ha k\u00e9pesek vagyunk \u00e1ttekinteni az eg\u00e9szet, de m\u00e9g enn\u00e9l is fontosabb, hogy a felhaszn\u00e1l\u00f3k szemsz\u00f6g\u00e9b\u0151l l\u00e1ssuk a tartalmat. Ut\u00f3bbi pedig nem felt\u00e9tlen\u00fcl egyezik meg a weboldaltulajdonos elk\u00e9pzel\u00e9seivel.<\/p>\n\n\n\n N\u00e9h\u00e1ny k\u00e9rd\u00e9s, amit fel kell tenni magunknak a tervez\u00e9s sor\u00e1n:<\/p>\n\n\n\n Ezeknek a k\u00e9rd\u00e9seknek a megv\u00e1laszol\u00e1sa, valamint annak meg\u00e9rt\u00e9se, hogy mik\u00e9nt viszonyul a tartalmunk a felhaszn\u00e1l\u00f3khoz, az alapj\u00e1t jelenti a j\u00f3 navig\u00e1ci\u00f3s men\u00fcnek.<\/p>\n\n\n\n B\u00e1rki, aki haszn\u00e1lt m\u00e1r valaha weboldalt, az val\u00f3sz\u00edn\u0171leg egyet\u00e9rt azzal a kijelent\u00e9ssel, hogy a navig\u00e1ci\u00f3nak a lehet\u0151 legegyszer\u0171bbnek kellene lennie. Nem t\u00fal szerencs\u00e9s t\u00falterhelni a felhaszn\u00e1l\u00f3t a lehet\u0151s\u00e9gek t\u00f6meg\u00e9vel, \u00e9s a navig\u00e1ci\u00f3s men\u00fct telezs\u00fafolni sz\u00f6vegekkel. Ezen az eg\u00e9sz oldal haszn\u00e1lhat\u00f3s\u00e1ga m\u00falik.<\/p>\n\n\n\n Az egyszer\u0171s\u00e9g egy\u00e9bk\u00e9nt megt\u00e9veszt\u0151 lehet. Sokszor, ha m\u00e9lyebbre \u00e1sunk, kider\u00fcl, hogy egy egyszer\u0171nek l\u00e1tsz\u00f3 szerkezet rendk\u00edv\u00fcl \u00f6sszetett tud lenni. Ez az amikor az inform\u00e1ci\u00f3s architekt\u00fara m\u0171k\u00f6dik.<\/p>\n\n\n\n Ha a sz\u00e1m\u00edt\u00f3g\u00e9pek monitorait tekintj\u00fck, akkor egy horizont\u00e1lis elrendez\u00e9s logikus v\u00e1laszt\u00e1snak t\u0171nik. \u00c1ltal\u00e1ban a kiegyens\u00falyozotts\u00e1g \u00e9rzet\u00e9t kelti, kev\u00e9sb\u00e9 tolakod\u00f3, \u00e9s tervez\u00e9si szempontb\u00f3l k\u00f6nnyebben elhelyezhet\u0151 a weboldalon.<\/p>\n\n\n\n Ugyanakkor egy horizont\u00e1lis navig\u00e1ci\u00f3s men\u00fc nem minden esetben haszn\u00e1lhat\u00f3, ez\u00e9rt tal\u00e1lkozunk nagyon gyakran vertik\u00e1lis kialak\u00edt\u00e1sokkal web\u00e1ruh\u00e1zakn\u00e1l. Egy v\u00edzszintes men\u00fcbe nem is felt\u00e9tlen\u00fcl lehet olykor belezs\u00fafolni annyi tartalmat \u00e9s sz\u00f6veget, mint egy f\u00fcgg\u0151leges men\u00fcbe. Persze, ha sok a term\u00e9k\u00fcnk, akkor egy vertik\u00e1lis men\u00fcvel sem lesz t\u00fal egyszer\u0171 a megold\u00e1s.<\/p>\n\n\n\n Mint minden dolog a weben, az \u00faj technik\u00e1k, technol\u00f3gi\u00e1k, eszk\u00f6z\u00f6k \u00e9s a trendek mindig \u00faj kih\u00edv\u00e1sokat \u00e9s \u00faj megold\u00e1sokat hoznak. \u00cdgy azt\u00e1n \u00e1lland\u00f3an v\u00e1ltozik a navig\u00e1ci\u00f3 kialak\u00edt\u00e1sa is. Ez\u00e9rt sem l\u00e9tezik egyetlen helyes \u00fat a t\u00f6k\u00e9letes navig\u00e1ci\u00f3 kialak\u00edt\u00e1s\u00e1ra. Viszont a tesztek, a statisztik\u00e1k \u00e9s a konverzi\u00f3s adatok vizsg\u00e1lata mindig k\u00f6zelebb visz a legjobb megold\u00e1shoz. V\u00e9g\u00fcl pedig elmondhat\u00f3, hogy tekints\u00fcnk \u00fagy a navig\u00e1ci\u00f3ra, mint a weboldal motorj\u00e1ra, aminek kisz\u00e1m\u00edthat\u00f3nak, egyszer\u0171nek \u00e9s k\u00f6vetkezetesnek kell lennie.<\/p>\n\n\n\n A felhaszn\u00e1l\u00f3k fej\u00e9ben a navig\u00e1ci\u00f3val kapcsolatban \u00e1ltal\u00e1ban n\u00e9gy k\u00e9rd\u00e9s mer\u00fcl fel.<\/p>\n\n\n\n Amikor az emberek \u00faj helyeket fedeznek fel, akkor jelezni kell sz\u00e1mukra kor\u00e1bbi l\u00e9p\u00e9seiket \u00e9s d\u00f6nt\u00e9seiket. A felhaszn\u00e1l\u00f3knak sz\u00fcks\u00e9g\u00fck van arra, hogy l\u00e1ss\u00e1k a megtett utat maguk m\u00f6g\u00f6tt, hogy meg tudj\u00e1k ford\u00edtani a ir\u00e1nyt, ha sz\u00fcks\u00e9gesnek l\u00e1tj\u00e1k. A morzsamen\u00fc a legegyszer\u0171bb p\u00e9lda erre.<\/p>\n\n\n\n Ez az alapvet\u0151 k\u00e9rd\u00e9s, amikor egy felhaszn\u00e1l\u00f3 valahonnan valahova tart. Annak sz\u00fcks\u00e9gess\u00e9ge, hogy elhelyezz\u00fck magunkat valahol a t\u00e9rben \u00e9s az id\u0151ben alapvet\u0151 fontoss\u00e1g\u00fa az ember sz\u00e1m\u00e1ra. Egy akt\u00edv \u00e1llapot\u00fa gomb egy men\u00fcben j\u00f3 p\u00e9lda arra, hogy mik\u00e9nt jelezhet\u0151 vissza egy felhaszn\u00e1l\u00f3 aktu\u00e1lis poz\u00edci\u00f3ja.<\/p>\n\n\n\n Gondoskodni kell a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra olyan jelekr\u0151l, melyeket k\u00f6vethetnek az \u00fatjuk sor\u00e1n. Ha elhelyezt\u00fck magunkat valahol a t\u00e9rben \u00e9s az id\u0151ben, akkor ez a k\u00e9rd\u00e9s teljesen term\u00e9szetesen mer\u00fcl fel. Egy almen\u00fc vagy egy navig\u00e1ci\u00f3s panel a p\u00e9lda arra, hogy mivel, mik\u00e9nt jelezhet\u0151 az \u00fat.<\/p>\n\n\n\n N\u00e9h\u00e1ny esetben plusz seg\u00edts\u00e9gre is sz\u00fcks\u00e9g lehet a navig\u00e1ci\u00f3hoz. A k\u00fcl\u00f6nb\u00f6z\u0151 jelz\u00e9sek a felhaszn\u00e1l\u00f3i fel\u00fcleten megmutatj\u00e1k hova mehetnek a felhaszn\u00e1l\u00f3k, \u00e9s \u00edgy kirajzolj\u00e1k azt az utat, melyet megtehetnek. Egy weboldalon, a tartalom r\u00e9szek\u00e9nt elhelyezett link is ilyen jelz\u00e9s. <\/p>\n\n\n\n A Norman Nielsen Group<\/a> – melynek szavaira mindenkinek \u00e9rdemes figyelni, akinek k\u00f6ze van a webdesignhoz – az al\u00e1bbi tan\u00e1csokat adja navig\u00e1ci\u00f3s men\u00fc kialak\u00edt\u00e1s\u00e1ra:<\/p>\n\n\n\n Ne haszn\u00e1lj apr\u00f3 men\u00fcket vagy men\u00fcikonokat a nagy kijelz\u0151k\u00f6n! \u00c9s ahogy a hamburger ikon kapcs\u00e1n k\u00e9sz\u00edtett vizsg\u00e1latb\u00f3l m\u00e1r kider\u00fclt, nem kellene \u0151ket elrejteni sem, k\u00fcl\u00f6n\u00f6sen akkor, ha rengeteg t\u00e9r \u00e1ll rendelkez\u00e9sre egy desktop kijelz\u0151n.<\/p>\n\n\n\n A felhaszn\u00e1l\u00f3k ugyanis arra sz\u00e1m\u00edtanak, hogy ott tal\u00e1lj\u00e1k a a felhaszn\u00e1l\u00f3i fel\u00fclet egyes elemeit, ahol l\u00e1tt\u00e1k kor\u00e1bban m\u00e1s weboldalakon vagy appokban, vagyis a weboldal fels\u0151 r\u00e9sz\u00e9n, illetve a bal oldalon. Haszn\u00e1ld ki teh\u00e1t az elv\u00e1r\u00e1saikat a saj\u00e1t el\u0151ny\u00f6dre, azaz, hogy k\u00f6nnyebben tudj\u00e1k haszn\u00e1lni a weboldaladat!<\/p>\n\n\n\n A felhaszn\u00e1l\u00f3k ugyanis nem felt\u00e9tlen\u00fcl j\u00f6nnek r\u00e1, hogy men\u00fcr\u0151l van sz\u00f3, ha nem l\u00e1tszik, hogy az elemei kattinthat\u00f3k. A men\u00fck adott esetben csak dekorat\u00edv k\u00e9pnek t\u0171nhetnek vagy a fejl\u00e9c r\u00e9sz\u00e9nek, ha t\u00fal sok grafikai elemet haszn\u00e1lsz a kialak\u00edt\u00e1sukkor, vagy esetleg t\u00fal szigor\u00faan veszed a flat design elveit<\/a>.<\/p>\n\n\n\n Sok esetben a megszokott helyen megjelen\u0151 men\u00fck nem ig\u00e9nyelnek nagyobb whitespace-t vagy elt\u00e9r\u0151 sz\u00ednt, hogy \u00e9szrevehet\u0151ek legyenek. Ha azonban a design kiss\u00e9 zs\u00fafolt, \u00e9s hi\u00e1nyzik a vizu\u00e1lis hangs\u00faly, akkor elveszhetnek a sok grafika, hirdet\u00e9s \u00e9s c\u00edm k\u00f6z\u00f6tt, melyek mind a felhaszn\u00e1l\u00f3 figyelm\u00e9\u00e9rt harcolnak.<\/p>\n\n\n\n Sok webdesigner nem veszi figyelembe a kontraszt kialak\u00edt\u00e1s\u00e1ra vonatkoz\u00f3 szab\u00e1lyokat<\/a>. Pedig m\u00e1r an\u00e9lk\u00fcl is el\u00e9g neh\u00e9z a digit\u00e1lis t\u00e9rben navig\u00e1lni, hogy zavarn\u00e1 a szem\u00fcnket egy rossz kontraszttal kialak\u00edtott men\u00fc.<\/p>\n\n\n\n De m\u00e9g ha a designerek ismerik is az el\u0151bb felsorolt elveket, m\u00e9g mindig k\u00e9sz\u00edthetnek olyan men\u00fct, melyet figyelmen k\u00edv\u00fcl hagynak a felhaszn\u00e1l\u00f3k. Ennek oka, hogy mindenkinek neh\u00e9z meg\u00edt\u00e9lnie a saj\u00e1t munk\u00e1j\u00e1t, k\u00fcl\u00f6n\u00f6sen olyan szubjekt\u00edv dolgok eset\u00e9n, amikor arr\u00f3l van sz\u00f3, hogy valami j\u00f3l l\u00e1that\u00f3-e vagy sem. Az nem el\u00e9g, hogy Te tudod, hol van a men\u00fc, hiszen Te tetted oda. Ez az, ami\u00e9rt fontos lenne tesztelni a men\u00fcidet is a felhaszn\u00e1l\u00f3kkal.<\/p>\n\n\n\n Hol vagyok? – teszik fel a k\u00e9rd\u00e9st a felhaszn\u00e1l\u00f3k, \u00e9s erre a k\u00e9rd\u00e9sre kell v\u00e1laszolnod a hat\u00e9kony navig\u00e1ci\u00f3val. Az embereknek ebben olyan vizu\u00e1lis elemek seg\u00edtenek, melyek a men\u00fcben vagy a morzsamen\u00fcben tal\u00e1lhat\u00f3k<\/a>. A leggyakoribb hiba \u00e1ltal\u00e1ban a men\u00fckkel az, hogy nem siker\u00fcl megmutatni a felhaszn\u00e1l\u00f3knak, hogy \u00e9ppen hol j\u00e1rnak. Pedig pont a men\u00fckn\u00e9l lenne a legnagyobb sz\u00fcks\u00e9g arra, hogy t\u00e1j\u00e9koztass\u00e1k az embereket, mivel sok esetben nem a f\u0151oldalr\u00f3l kezdenek navig\u00e1lni.<\/p>\n\n\n\n Der\u00edtsd ki, hogy mit keresnek a felhaszn\u00e1l\u00f3k \u00e9s olyan kateg\u00f3riac\u00edmk\u00e9ket haszn\u00e1lj, melyek ismer\u0151sek \u00e9s relev\u00e1nsak sz\u00e1mukra. Ne a men\u00fcdben legy\u00e9l vicces vagy haszn\u00e1lj szakszavakat! Ragaszkodj azokhoz a kifejez\u00e9sekhez, melyek pontosan le\u00edrj\u00e1k a tartalmad \u00e9s a funkci\u00f3t.<\/p>\n\n\n\n Ezzel cs\u00f6kkentheted azt az id\u0151t, amit a felhaszn\u00e1l\u00f3k a men\u00fck olvas\u00e1s\u00e1val t\u00f6ltenek.<\/p>\n\n\n\n Ha a tipikus felhaszn\u00e1l\u00f3i \u00fat sor\u00e1n az embereknek t\u00f6bb szintet kell megtenni\u00fck, akkor a mega men\u00fck vagy a hagyom\u00e1nyos leny\u00edl\u00f3 men\u00fck id\u0151t takar\u00edtanak meg nekik, hiszen ezzel egy vagy k\u00e9t szintet \u00e1tugorhatnak.<\/p>\n\n\n\n Ha az emberek gyakran hasonl\u00edtanak \u00f6ssze term\u00e9keket vagy v\u00e9geznek egyszerre t\u00f6bb k\u00fcl\u00f6nb\u00f6z\u0151 tev\u00e9kenys\u00e9get, akkor ezeket az oldalakat \u00e9rdemes l\u00e1that\u00f3v\u00e1 tenni egy helyi navig\u00e1ci\u00f3s men\u00fcben, ahelyett, hogy le-fel kellene rohang\u00e1lniuk a hierarchi\u00e1ban.<\/p>\n\n\n\n K\u00e9pek, grafik\u00e1k, sz\u00ednek seg\u00edthetik a felhaszn\u00e1l\u00f3kat a navig\u00e1ci\u00f3s men\u00fc meg\u00e9rt\u00e9s\u00e9ben. Arr\u00f3l azonban gy\u0151z\u0151dj meg, hogy a k\u00e9pek seg\u00edtik a felhaszn\u00e1l\u00f3kat a feladataik v\u00e9grehajt\u00e1s\u00e1ban, vagy legal\u00e1bbis nem akad\u00e1lyozz\u00e1k \u0151ket.<\/p>\n\n\n\n Ha a linkek t\u00fal kicsik vagy t\u00fal k\u00f6zel vannak egym\u00e1shoz, akkor az komoly kih\u00edv\u00e1st jelenthet a mobilos felhaszn\u00e1l\u00f3knak, de m\u00e9g a nagym\u00e9ret\u0171 kijelz\u0151n is feleslegesen neh\u00e9zz\u00e9 teszik a haszn\u00e1latot.<\/p>\n\n\n\n A hoverrel ny\u00edl\u00f3 men\u00fck, melyek t\u00fal r\u00f6videk, frusztr\u00e1l\u00f3k lehetnek az emberek sz\u00e1m\u00e1ra, ha k\u00f6nnyen elt\u0171nnek, mik\u00f6zben \u00e9ppen a kattint\u00e1ssal pr\u00f3b\u00e1lkoznak. De a t\u00fal hossz\u00fa leny\u00edl\u00f3k sem praktikusak, amikor m\u00e9g le is kell g\u00f6rgetnie a felhaszn\u00e1l\u00f3nak ahhoz, hogy el\u00e9rje a lista alj\u00e1t. A t\u00fal sz\u00e9les leny\u00edl\u00f3kkal pedig az lehet a gond, hogy egy \u00faj oldalnak n\u00e9zik a felhaszn\u00e1l\u00f3k, \u00e9s nem \u00e9rtik, mi\u00e9rt jelent meg, amikor nem is kattintottak m\u00e9g sehova.<\/p>\n\n\n\n Amikor a felhaszn\u00e1l\u00f3k el\u00e9rnek egy hossz\u00fa oldal alj\u00e1ra, akkor sokat kell g\u00f6rgetni\u00fck az\u00e9rt, hogy visszat\u00e9rjenek az oldal tetej\u00e9n tal\u00e1lhat\u00f3 men\u00fch\u00f6z. Ha viszont a navig\u00e1ci\u00f3s men\u00fc folyamatosan l\u00e1that\u00f3 marad a kijelz\u0151 fels\u0151 r\u00e9sz\u00e9n, akkor ez nem gond a felhaszn\u00e1l\u00f3knak, k\u00fcl\u00f6n\u00f6sen kisebb kijelz\u0151k\u00f6n.<\/p>\n\n\n\n \u00c9rdemes a men\u00fcben a leggyakrabban haszn\u00e1lt elemeket egym\u00e1shoz k\u00f6zel \u00e9s a leny\u00edl\u00f3 men\u00fct leny\u00edt\u00f3 r\u00e9szhez k\u00f6zel elhelyezni, \u00edgy a felhaszn\u00e1l\u00f3knak nem kell t\u00fal nagy utat bej\u00e1rniuk. Mostan\u00e1ban t\u00f6bb mobilapp is elkezdett k\u00f6r-men\u00fcket haszn\u00e1lni, melyek a men\u00fc-opci\u00f3kat egym\u00e1s k\u00f6zel\u00e9ben tartj\u00e1k.<\/p>\n\n\n\n Ink\u00e1bb nem. A cool effekteket ne a men\u00fcre tartogasd! Lehet, hogy lesznek olyan szakmabeliek, akiknek tetszenek a l\u00e1tv\u00e1nyos megold\u00e1sok, de a felhaszn\u00e1l\u00f3k ink\u00e1bb a j\u00f3 tartalmat \u00e9rt\u00e9kelik, melyet k\u00f6nnyen el\u00e9rnek egy k\u00f6nnyen haszn\u00e1lhat\u00f3 men\u00fcb\u0151l.<\/p>\n\n\n\n Term\u00e9szetesen n\u00e9ha megjelennek olyan \u00faj t\u00edpus\u00fa men\u00fck, melyek jav\u00edtj\u00e1k a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt. Ilyen volt annak idej\u00e9n a mega-men\u00fc. Esetleg megjelennek olyan \u00faj technol\u00f3gi\u00e1k, melyek m\u00e9g nem szerepelnek az itt felsorolt elvek k\u00f6z\u00f6tt, gondoljunk csak a hangfelismer\u00e9sre, melyn\u00e9l teljesen mindegy a men\u00fc vizu\u00e1lis megjelen\u00e9se.<\/p>\n\n\n\n Friss\u00edt\u00e9s, 2021.08.05.:<\/em><\/p>\n\n\n\n Amikor navig\u00e1ci\u00f3r\u00f3l van sz\u00f3, gyakran mer\u00fcl fel az \u00fagynevezett \u201ch\u00e1romkattint\u00e1sos szab\u00e1ly\u201d, azaz, hogy h\u00e1rom kattint\u00e1ssal c\u00e9lszer\u0171 lenne el\u00e9rni egy weboldal b\u00e1rmely lapj\u00e1t. Az enn\u00e9l m\u00e9lyebb weboldalak m\u00e1r nem hat\u00e9konyak, azt nem l\u00e1togatj\u00e1k meg a felhaszn\u00e1l\u00f3k – sz\u00f3l az elm\u00e9let. <\/p>\n\n\n\n A designerek gyakran alkalmazz\u00e1k ezt a szab\u00e1lyt a weboldalak navig\u00e1ci\u00f3j\u00e1nak kialak\u00edt\u00e1sakor, de m\u00e9g m\u00e1s t\u00edpus\u00fa feladatokn\u00e1l is \u00e9rv\u00e9nyesnek tartj\u00e1k, \u00edgy p\u00e9ld\u00e1ul egy \u0171rlap kit\u00f6lt\u00e9se eset\u00e9n. <\/p>\n\n\n\n A h\u00e1romkattint\u00e1sos szab\u00e1ly azt felt\u00e9telezi, hogy a felhaszn\u00e1l\u00f3k ink\u00e1bb feladj\u00e1k c\u00e9ljuk el\u00e9r\u00e9s\u00e9t, ha azt h\u00e1rom kattint\u00e1s alatt nem tudj\u00e1k azt a c\u00e9lt el\u00e9rni. A szab\u00e1ly teh\u00e1t els\u0151sorban az interakci\u00f3s k\u00f6lts\u00e9gre mutat r\u00e1, ugyanakkor a hiba a t\u00falzott leegyszer\u0171s\u00edt\u00e9sben rejlik. \u00c9s ezt nem m\u00e1s, mint a Nielsen Norman Group<\/a> \u00e1ll\u00edtja, mely egy\u00e9bk\u00e9nt szeret a hagyom\u00e1nyokhoz \u00e9s bevett webdesign-elvekhez ragaszkodni.<\/p>\n\n\n\n Mint mondj\u00e1k, a legnagyobb probl\u00e9ma a szab\u00e1llyal az, hogy semmif\u00e9le eddig k\u00f6zz\u00e9tett tanulm\u00e1nyban szerepl\u0151 adat nem t\u00e1masztja al\u00e1. S\u0151t, egy Joshua Porter \u00e1ltal k\u00e9sz\u00edtett tanulm\u00e1ny m\u00e9g meg is c\u00e1folja. A kutat\u00e1s szerint ugyanis a felhaszn\u00e1l\u00f3k lemorzsol\u00f3d\u00e1sa vagy el\u00e9gedetlens\u00e9ge nem n\u0151, amikor egy feladat elv\u00e9gz\u00e9s\u00e9hez h\u00e1romn\u00e1l t\u00f6bb kattint\u00e1sra van sz\u00fcks\u00e9g. <\/p>\n\n\n\n Teh\u00e1t, az interakci\u00f3s k\u00f6lts\u00e9g cs\u00f6kkent\u00e9se ugyan fontos dolog, azonban a val\u00f3s\u00e1g enn\u00e9l bonyolultabb, \u00e9s nem m\u0171k\u00f6dnek az ilyen \u00f6k\u00f6lszab\u00e1lyok. A kattint\u00e1ssz\u00e1ml\u00e1l\u00e1s \u00f6nmag\u00e1ban nem egy \u00e9rv\u00e9nyes m\u00e9r\u0151sz\u00e1m, aminek t\u00f6bb oka is van:<\/p>\n\n\n\n A l\u00e9nyeg teh\u00e1t, hogy a h\u00e1romkattint\u00e1sos szab\u00e1lyt nem lehet vakon alkalmazni egy weboldal inform\u00e1ci\u00f3s architekt\u00far\u00e1j\u00e1nak \u00e9s navig\u00e1ci\u00f3j\u00e1nak megtervez\u00e9sekor. <\/p>\n\n\n\n A legkor\u00e1bban k\u00f6zz\u00e9tett hivatkoz\u00e1s Jeffrey Zeldman 2001-es k\u00f6nyv\u00e9ben, a Taking Your Talent to the Webben jelent meg, ahol m\u00e1r elterjedt szab\u00e1lyk\u00e9nt hivatkozik r\u00e1 a szerz\u0151. A k\u00f6nyv azonban nem er\u0151s\u00edti meg semmilyen adattal a h\u00e1romkattint\u00e1sos szab\u00e1ly \u00e9rv\u00e9nyess\u00e9g\u00e9t, puszt\u00e1n arra hivatkozik, hogy sz\u00e9lesk\u00f6r\u0171en elfogadott elv. Vagyis puszt\u00e1n felt\u00e9telez\u00e9s, amit a k\u00f6nyv \u00e1ll\u00edt, hogy ha a felhaszn\u00e1l\u00f3k nem \u00e9rik el h\u00e1rom kattint\u00e1ssal, amit keresnek, akkor egy m\u00e1sik oldalon n\u00e9znek ink\u00e1bb k\u00f6r\u00fcl. <\/p>\n\n\n\n A legink\u00e1bb a navig\u00e1ci\u00f3s men\u00fck kialak\u00edt\u00e1s\u00e1n\u00e1l kezdt\u00e9k alkalmazni a designerek a h\u00e1romkattint\u00e1sos szab\u00e1lyt. Az elv az volt, hogy nem szabad a keresett inform\u00e1ci\u00f3t t\u00f6bbszintes m\u00e9lys\u00e9gbe elhelyezni. Ez arra k\u00e9nyszer\u00edtette a tervez\u0151ket, hogy sz\u00e9lesebb inform\u00e1ci\u00f3s architekt\u00far\u00e1t alak\u00edtsanak ki a m\u00e9lyebb IA helyett.<\/p>\n\n\n\n Pedig nem csak a m\u00e9ly, hanem a sz\u00e9les inform\u00e1ci\u00f3s architek\u00far\u00e1nak is megvannak a maga haszn\u00e1lhat\u00f3s\u00e1gi probl\u00e9m\u00e1i. Ha egy sz\u00e9les IA-t alkalmazunk, akkor sok fels\u0151 szint\u0171 kateg\u00f3ri\u00e1ra van sz\u00fcks\u00e9g, amit nehezebben l\u00e1tnak \u00e1t a felhaszn\u00e1l\u00f3k, r\u00e1ad\u00e1sul sok helyet is foglal a fel\u00fcletb\u0151l. <\/p>\n\n\n\n Ezzel szemben a nagyon m\u00e9ly weboldalak, ahol csak n\u00e9h\u00e1ny legfels\u0151 szint\u0171 kateg\u00f3ria tal\u00e1lhat\u00f3, ugyanakkor nagyon sok szint, vagy komoly kutat\u00f3munk\u00e1t ig\u00e9nyelnek a felhaszn\u00e1l\u00f3kt\u00f3l, vagy pedig sok id\u0151t kell elt\u00f6lteni a kateg\u00f3ria c\u00e9loldalak bet\u00f6lt\u00e9s\u00e9re. <\/p>\n\n\n\n A gyakorlatban ez azt jelenti, hogy a designereknek k\u00e9t UX-m\u00edtosz k\u00f6z\u00fcl kell v\u00e1lasztani (melyek egyik\u00e9t sem t\u00e1masztj\u00e1k al\u00e1 adatok): a kattint\u00e1ssz\u00e1m semmilyen oldal eset\u00e9n ne haladja meg a h\u00e1rmat, illetve ne legyen t\u00f6bb h\u00e9t darab f\u0151 kateg\u00f3ri\u00e1n\u00e1l. Pedig sok esetben mindkett\u0151 egyar\u00e1nt rossz felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt eredm\u00e9nyezhet.<\/p>\n\n\n\n A kattint\u00e1ssz\u00e1ml\u00e1l\u00e1s egy t\u00falzott leegyszer\u0171s\u00edt\u00e9s, amikor az interakci\u00f3s k\u00f6lts\u00e9get \u00e9s a feladatv\u00e9gz\u00e9si hat\u00e9konys\u00e1got kell megbecs\u00fclni. Nem vesz figyelembe p\u00e9ld\u00e1ul olyan t\u00e9nyez\u0151ket, mint amikor a felhaszn\u00e1l\u00f3nak el kell olvasnia \u00e9s meg kell \u00e9rtenie a lehet\u0151s\u00e9gek egy hossz\u00fa list\u00e1j\u00e1t, vagy hogy ki kell tal\u00e1lnia, adott pillanatban hol tart\u00f3zkodik az oldalon, vagy amikor meg kell becs\u00fclnie, hogy mennyi munk\u00e1ra lesz m\u00e9g sz\u00fcks\u00e9ge a feladata v\u00e9grehajt\u00e1s\u00e1hoz. Pedig az ilyen t\u00e9nyez\u0151k vannak olyan fontosak, mint egy-egy kattint\u00e1s.<\/p>\n\n\n\n N\u00e9h\u00e1ny fontos t\u00e9nyez\u0151 a j\u00f3 navig\u00e1ci\u00f3n\u00e1l:<\/p>\n\n\n\n Teh\u00e1t mik\u00f6zben az er\u0151fesz\u00edt\u00e9s m\u00e9rs\u00e9kl\u00e9se fontos az inform\u00e1ci\u00f3k el\u00e9r\u00e9s\u00e9n\u00e9l \u00e9s a feladatok v\u00e9grehajt\u00e1s\u00e1n\u00e1l, a h\u00e1romkattint\u00e1sos szab\u00e1ly nem l\u00e9tezik. Nincs olyan \u00f6k\u00f6lszab\u00e1ly a webdesignban, mely azt mondan\u00e1 meg, hogy az emberek mikor lesznek frusztr\u00e1ltak a weboldaladon. Teh\u00e1t szimpl\u00e1n a kattint\u00e1sok sz\u00e1molgat\u00e1sa helyett arr\u00f3l kell meggy\u0151z\u0151dni, hogy a navig\u00e1ci\u00f3 j\u00f3l kialak\u00edtott, j\u00e1rhat\u00f3 utakkal, a tartalmak egyre speci\u00e1lisabba, ahogy egyre m\u00e9lyebbre jutunk, valamint hogy az oldal l\u00e1togat\u00f3i mindig tudj\u00e1k hol j\u00e1rnak az oldalon \u00e9s hogyan jutnak el a c\u00e9ljukhoz. <\/p>\n\n\n\n Hab\u00e1r tal\u00e1n m\u00e1r az eddigiekb\u0151l is minden vil\u00e1gos lehet, az\u00e9rt l\u00e1ssuk azt, hogy mi az n\u00e9h\u00e1ny kifejezett hiba, amit mindenk\u00e9ppen ker\u00fclj el a navig\u00e1ci\u00f3s men\u00fc kialak\u00edt\u00e1s\u00e1n\u00e1l.<\/p>\n\n\n\n Ha az emberek el\u0151tt t\u00fal sok a v\u00e1laszt\u00e1si lehet\u0151s\u00e9g, akkor az \u00f6sszezavarja \u0151ket. El kell kezdeni\u00fck gondolkodni arr\u00f3l, hogy mit v\u00e1lasszanak. Ez\u00e9rt min\u00e9l kevesebb a v\u00e1laszt\u00e1si lehet\u0151s\u00e9g, ann\u00e1l gyorsabban haladnak el\u0151re. A weboldalak tulajdonosai viszont gyakran abba a hib\u00e1ba esnek, hogy minden lehet\u0151s\u00e9get megpr\u00f3b\u00e1lnak belezs\u00fafolni a navig\u00e1ci\u00f3s men\u00fcbe, mutatva az inform\u00e1ci\u00f3k sz\u00e9les t\u00e1rh\u00e1z\u00e1t, illetve az\u00e9rt, hogy a l\u00e1togat\u00f3k minden lehet\u0151s\u00e9get egyb\u0151l el\u00e9rjenek.<\/p>\n\n\n\n \u00c9s b\u00e1r els\u0151re tal\u00e1n j\u00f3 megold\u00e1snak t\u0171nik, hogy a felhaszn\u00e1l\u00f3knak nem kell aloldalakra t\u00e9vedve, \u00fajabb linkekre kattintva keresg\u00e9lni a weboldalon, azonban az els\u0151dleges navig\u00e1ci\u00f3n\u00e1l a t\u00fal sok linkkel ellent\u00e9tes hat\u00e1st \u00e9r\u00fcnk el. Az emberek k\u00e9ptelenek lesznek kiigazodni a sok v\u00e1laszt\u00e1si lehet\u0151s\u00e9g k\u00f6z\u00f6tt, a d\u00f6nt\u00e9s\u00fck t\u00fal sok id\u0151t vesz ig\u00e9nybe. Amint elkezdenek k\u00e9rd\u00e9seket feltenni maguknak azzal kapcsolatban, hogy vajon most hova is kellene kattintaniuk, rendk\u00edv\u00fcli m\u00e9rt\u00e9kben megn\u0151 az es\u00e9lye annak, hogy egyszer\u0171en a \u201cvissza\u201d gombra fognak klikkelni, \u00e9s t\u00e1voznak a weboldaladr\u00f3l.<\/p>\n\n\n\n Teh\u00e1t amikor a weboldal els\u0151dleges navig\u00e1ci\u00f3j\u00e1nak megtervez\u00e9s\u00e9r\u0151l van sz\u00f3, akkor a men\u00fct a lehet\u0151 legr\u00f6videbbre kell v\u00e1gni, hogy csak a legfontosabb opci\u00f3k szerepeljenek benne. Azzal, hogy kevesebbet adunk az indul\u00e1sn\u00e1l, tulajdonk\u00e9ppen b\u00e1tor\u00edtjuk az embereket arra, hogy gyorsabb d\u00f6nt\u00e9seket hozzanak \u00e9s egyre m\u00e9lyebbre \u00e1ssanak a weboldalunkon.<\/p>\n\n\n\n A k\u00f6vetkez\u0151 hiba, amikor rosszul hat\u00e1rozzuk meg, hogy mi ker\u00fclj\u00f6n az els\u0151dleges navig\u00e1ci\u00f3s linkek k\u00f6z\u00e9, \u00e9s mit soroljunk h\u00e1tr\u00e9bb. Enn\u00e9l a pontn\u00e1l \u00e9rdemes hangs\u00falyozni, hogy egy weboldal a felhaszn\u00e1l\u00f3i ig\u00e9nyek kiel\u00e9g\u00edt\u00e9s\u00e9re j\u00f6n l\u00e9tre, vagyis nem olyan linkeket kell el\u0151re tolni, melyek nek\u00fcnk fontosak, hanem amelyek a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra azok. Ne ess\u00fcnk teh\u00e1t abba a hib\u00e1ba, hogy a saj\u00e1t preferenci\u00e1ink alapj\u00e1n \u00e1ll\u00edtjuk \u00f6ssze a f\u0151 helyre ker\u00fcl\u0151 navig\u00e1ci\u00f3s linkeket!<\/p>\n\n\n\n Manaps\u00e1g a weboldalakat m\u00e1r mindenf\u00e9le eszk\u00f6zr\u0151l felkeresik, \u00edgy a kis kijelz\u0151s okostelefonokon is \u00e1lland\u00f3an netez\u00fcnk. Az a korszak v\u00e9get \u00e9rt, amikor csak a nagym\u00e9ret\u0171 monitorokat kellett figyelembe venni, ez viszont azzal j\u00e1r, hogy a webodalnak, \u00e9s azon bel\u00fcl a navig\u00e1ci\u00f3nak is igazodna kell a kisebb kijelz\u0151kh\u00f6z.<\/p>\n\n\n\n A navig\u00e1ci\u00f3s men\u00fcket t\u00fal gyakran asztali g\u00e9pek monitoraihoz tervezik. Ilyenkor viszont a kisebb kijelz\u0151k\u00f6n haszn\u00e1lhatatlann\u00e1 v\u00e1lnak. Ez\u00e9rt is olyan fontos a weboldalaknak reszponz\u00edvv\u00e1, mobilbar\u00e1tt\u00e1 v\u00e1lniuk. Egy reszponz\u00edv oldalon pedig a navig\u00e1ci\u00f3 is minden kijelz\u0151m\u00e9rethez megfelel\u0151en igazodik, mindig j\u00f3l l\u00e1that\u00f3 \u00e9s j\u00f3l haszn\u00e1lhat\u00f3 lesz.<\/p>\n\n\n\n Amikor a navig\u00e1ci\u00f3 egyszer\u0171s\u00edt\u00e9se sor\u00e1n m\u00e1r siker\u00fclt kiv\u00e1lasztani azokat a men\u00fcpontokat, amiket \u00e9rdemes eltvol\u00edtani az els\u0151dleges szintr\u0151l, akkor ezeket \u00e1ltal\u00e1ban egy leg\u00f6rd\u00fcl\u0151 men\u00fcbe sz\u00e1m\u0171z\u00f6d. A leg\u00f6rd\u00fcl\u0151 men\u00fck egy r\u00e9sze \u00fagy m\u0171k\u00f6dik, hogy ha f\u00f6l\u00e9 vissz\u00fck a kurzornyilat, akkor leny\u00edlik. Ezt a funkci\u00f3t azonban mobilokon nem lehet haszn\u00e1lni, tekintve, hogy ott nincs eg\u00e9rmutat\u00f3, csak a kattint\u00e1s l\u00e9tezik. M\u00e1rpedig a linkeket valahogy mobilon is el kell \u00e9rni. R\u00e1ad\u00e1sul az \u00f3ri\u00e1si vagy t\u00f6bbszintes leg\u00f6rd\u00fcl\u0151 men\u00fcknek nem t\u00fal praktikus a haszn\u00e1lata m\u00e9g asztali g\u00e9peken sem. Vagyis az egyszer\u0171s\u00edt\u00e9s ne eredm\u00e9nyezze a navig\u00e1ci\u00f3 bonyol\u00edt\u00e1s\u00e1t!<\/p>\n\n\n\n Amikor egy felhaszn\u00e1l\u00f3 a f\u0151oldaladon m\u00e1r tal\u00e1lkozott a men\u00fcddel, \u00e1tl\u00e1tja, meg\u00e9rti azt \u00e9s tudja haszn\u00e1lni, akkor nem t\u00fal szerencs\u00e9s, ha az aloldalaidon elt\u00e9r\u0151 fel\u00e9p\u00edt\u00e9s\u0171 men\u00fckre bukkan. Egy weboldalnak minden oldal\u00e1n ugyanazokb\u00f3l az elemekb\u0151l kell \u00e1llnia az els\u0151dleges navig\u00e1ci\u00f3nak, r\u00e1ad\u00e1sul minden eszk\u00f6z\u00f6n ragaszkodni kell ehhez. Az almen\u00fck eset\u00e9ben elk\u00e9pzelhet\u0151 esetleg v\u00e1ltoztat\u00e1s oldalank\u00e9nt, de az els\u0151dleges navig\u00e1ci\u00f3nak k\u0151be v\u00e9settnek kell lennie.<\/p>\n\n\n\n Az egy dolog, hogy a min\u00e9l kevesebb lehet\u0151s\u00e9g felsorol\u00e1s\u00e1ra t\u00f6reksz\u00fcnk az els\u0151dleges men\u00fcben, ugyanakkor arra is t\u00f6rekedni kell, hogy a men\u00fcpontok elnevez\u00e9sei, vagyis a linkek horgonysz\u00f6vegei min\u00e9l r\u00f6videbbek legyenek. Lehet\u0151leg egy vagy k\u00e9t sz\u00f3t haszn\u00e1ljunk egy men\u00fcpontn\u00e1l. Teh\u00e1t ne legyen olyan, hogy \u201cMinden, amit a c\u00e9g\u00fcnkr\u0151l tudni akart\u00e1l\u201d, elegend\u0151 annyi, hogy \u201cR\u00f3lunk\u201d. Ez mindenki sz\u00e1m\u00e1ra \u00e9rthet\u0151 \u00e9s megszokott, ami nagy el\u0151ny egy weboldal haszn\u00e1lat\u00e1n\u00e1l. Ugyanakkor a k\u00f6vetkez\u0151 pont figyelembev\u00e9tel\u00e9vel az\u00e9rt n\u00e9mileg \u00e1rnyaljuk a k\u00e9pet.<\/p>\n\n\n\n Minden weboldalnak van egy st\u00edlusa, egy hangneme. Ez lehet laza \u00e9s bar\u00e1ts\u00e1gos vagy szakmai \u00e9s egyenes, tulajdonk\u00e9ppen olyan, mellyel k\u00f6nnyebben megsz\u00f3l\u00edthatjuk a l\u00e1togat\u00f3inkat. De b\u00e1rmilyen is legyen a weboldal hangneme, ehhez igazodnia kell a navig\u00e1ci\u00f3nak is.<\/p>\n\n\n\n Ha p\u00e9ld\u00e1ul egy weboldal bar\u00e1ts\u00e1gosra \u00e9s seg\u00edt\u0151k\u00e9szre veszi a hangnem\u00e9t, akkor jobb, ha a men\u00fcpont \u00fagy hangzik, hogy \u201cMiben seg\u00edthet\u00fcnk?\u201d, mint ha egyszer\u0171en annyit \u00edrunk, hogy \u201cSzolg\u00e1ltat\u00e1saink\u201d. Persze, ezzel k\u00e9tszavass\u00e1 v\u00e1lik a remek, egyszavas men\u00fcpontunk, azonban a c\u00e9l nem els\u0151dlegesen az, hogy min\u00e9l r\u00f6videbb legyen, hanem hogy \u00f6sszess\u00e9g\u00e9ben a legjobb, leghat\u00e9konyabb megold\u00e1st tal\u00e1ljuk meg. Ebbe beletartozik a megfelel\u0151 sz\u00f6veghossz\u00fas\u00e1g, de a j\u00f3l illeszked\u0151 sz\u00f6vegek is.<\/p>\n\n\n\n Mint az kider\u00fclt, egy weboldal navig\u00e1ci\u00f3j\u00e1n sok m\u00falik. Azzal, hogy biztos\u00edtjuk a teljesen vil\u00e1gos, k\u00f6nnyen haszn\u00e1lhat\u00f3 navig\u00e1ci\u00f3s strukt\u00far\u00e1t, arra b\u00e1tor\u00edtjuk a felhaszn\u00e1l\u00f3inkat, hogy min\u00e9l t\u00f6bb id\u0151t t\u00f6ltsenek a weboldalunkon, valamint seg\u00edt\u00fcnk nekik megtal\u00e1lni azt a tartalmat vagy funkci\u00f3t, amit keresnek. Ez pedig fontos a c\u00e9g\u00fcnknek is.<\/p>\n\n\n\n A nagy weboldalakon sok a tartalom, \u00edgy el\u00e9g sok inform\u00e1ci\u00f3t kell egyszerre megjelen\u00edteni. Ilyenkor lehet sz\u00fcks\u00e9g els\u0151dleges \u00e9s m\u00e1sodlagos men\u00fcre, hiszen egyetlen men\u00fcsorban nem oldhat\u00f3 meg a sok inform\u00e1ci\u00f3 elhelyez\u00e9se. A k\u00e9rd\u00e9s m\u00e1r csak az, hogy a tartalom mely r\u00e9sze ker\u00fclj\u00f6n az els\u0151dleges, \u00e9s mely r\u00e9sze a m\u00e1sodlagos navig\u00e1ci\u00f3s men\u00fcbe. <\/p>\n\n\n\n Az els\u0151dleges navig\u00e1ci\u00f3 a weboldal legfontosabb ir\u00e1ny\u00edt\u00f3 eleme. Ennek megfelel\u0151 kialak\u00edt\u00e1s\u00e1val tudunk a legnagyobb m\u00e9rt\u00e9kben seg\u00edteni a felhaszn\u00e1l\u00f3knak abban, hogy megtal\u00e1lj\u00e1k azokat az inform\u00e1ci\u00f3kat, melyeket a weboldalunkon keresnek. <\/p>\n\n\n\n Az els\u0151dleges navig\u00e1ci\u00f3 teh\u00e1t \u00e1ltal\u00e1ban olyan fontos inform\u00e1ci\u00f3kat tartalmaz, mint mondjuk az \u00e1r, a let\u00f6lt\u00e9s, szolg\u00e1ltat\u00e1sok, stb., amit persze weboldalank\u00e9nt v\u00e1ltoz\u00f3. A l\u00e9nyeg, hogy k\u00f6nnyen \u00e9rthet\u0151nek \u00e9s megtal\u00e1lhat\u00f3nak kell lennie. Seg\u00edtenie kell a felhaszn\u00e1l\u00f3knak megmutatni azt, hogy hol vannak, \u00e9s mit tal\u00e1lhatnak az oldalon.<\/p>\n\n\n\n A m\u00e1sodlagos navig\u00e1ci\u00f3 \u00e9rtelemszer\u0171en a kev\u00e9sb\u00e9 l\u00e9nyeges elemeket tartalmazza. Ez a m\u00e1sodlagos navig\u00e1ci\u00f3s men\u00fc gyakran olyan oldalra ker\u00fcl, mely az els\u0151dleges navig\u00e1ci\u00f3s men\u00fc r\u00e9v\u00e9n \u00e9rhet\u0151 csak el. A felhaszn\u00e1l\u00f3kat azonban ugyanolyan k\u00f6nnyen kell vezetnie a kev\u00e9sb\u00e9 fontos, de plusz inform\u00e1ci\u00f3k fel\u00e9, mint az els\u0151dleges navig\u00e1ci\u00f3nak.<\/p>\n\n\n\n A webdesign mindig feszegeti a hat\u00e1rait, \u00faj \u00e9s \u00faj \u00f6tletek, megold\u00e1sok bukkannak fel. Ezekre akkor \u00e9rdemes n\u00e9mi figyelmet vesztegetni, amikor el\u00e9rnek egy olyan elterjedts\u00e9get, hogy a gyakorlottabb felhaszn\u00e1l\u00f3k egyre ink\u00e1bb rutinb\u00f3l haszn\u00e1lj\u00e1k \u0151ket.<\/p>\n\n\n\n Mostan\u00e1ban a webdoldalak tetej\u00e9n l\u00e9v\u0151, horizont\u00e1lisan h\u00faz\u00f3d\u00f3 men\u00fcsor sz\u00e1m\u00edt term\u00e9szetesnek \u00e9s a legt\u00f6bb ember sz\u00e1m\u00e1ra egy\u00e9rtelm\u0171nek. Ez azonban egyr\u00e9szt nem volt mindig \u00edgy, m\u00e1sr\u00e9szt nem is marad v\u00e1ltozatlan. Nyilv\u00e1n sokan eml\u00e9keznek m\u00e9g arra, hogy \u00e9vekkel ezel\u0151tt a men\u00fck jellemz\u0151en a bal oldalon kaptak helyet. Innen k\u00f6lt\u00f6ztek fel k\u00e9s\u0151bb fel\u00fclre, v\u00edzszintesen elny\u00falva. A mobilkorszak bek\u00f6sz\u00f6nt\u00e9vel pedig a navig\u00e1ci\u00f3s men\u00fc – igazodva a kisebb kijelz\u0151kh\u00f6z – k\u00e9nytelen volt \u00f6sszeh\u00faz\u00f3dni hamburger men\u00fcv\u00e9. De milyen vari\u00e1ci\u00f3k vannak?<\/p>\n\n\n\n Ez a ma uralkod\u00f3 navig\u00e1ci\u00f3s men\u00fc megold\u00e1s, \u00edgy persze ennek a legk\u00f6nnyebb a haszn\u00e1lata. A megold\u00e1s teh\u00e1t a hagyom\u00e1nyokra \u00e9p\u00edt, \u00e9pp ez\u00e9rt hat\u00e9kony: gyorsabb\u00e1 teszi a felhaszn\u00e1l\u00f3knak, hogy a men\u00fc seg\u00edts\u00e9g\u00e9vel tal\u00e1ljanak meg inform\u00e1ci\u00f3kat a weboldalon.<\/p>\n\n\n\n A j\u00f3 \u00f6reg, bal oldalra rendezett megold\u00e1s, melyet m\u00e1r sok-sok \u00e9ve kiszor\u00edtott a fels\u0151 men\u00fcsor, most pedig visszat\u00e9rt. Ennek egyik alternat\u00edv megold\u00e1sa, amikor ezt a f\u00fcgg\u0151leges men\u00fcsort egy hamburger ikonra val\u00f3 kattint\u00e1s nyitja meg. <\/p>\n\n\n Valamivel nagyobb a tervez\u0151k mozg\u00e1stere egy f\u00fcgg\u0151leges navig\u00e1ci\u00f3s men\u00fc eset\u00e9ben, mint az el\u0151bb eml\u00edtett v\u00edzszintes navig\u00e1ci\u00f3n\u00e1l. Lehet statikus vagy dinamikus, kicsi vagy nagy, \u00e9s k\u00f6nnyebben szem\u00e9lyre szabhat\u00f3.<\/p>\n\n\n\n Amennyiben csak n\u00e9h\u00e1ny els\u0151dleges c\u00e9l jelenik meg a weboldaladon vagy az appodban mobilon, akkor egy tab-szer\u0171 navig\u00e1ci\u00f3 praktikus megold\u00e1s lehet. A men\u00fc megjelenhet az oldal fels\u0151 vagy als\u00f3 r\u00e9sz\u00e9n is, felh\u00edvva a figyelmet arra, hogy van navig\u00e1ci\u00f3 az oldalon, \u00e9s az emberek b\u00e1rmikor k\u00e9pesek haszn\u00e1lni azt.<\/p>\n\n\n\n Ez a legegyszer\u0171bb navig\u00e1ci\u00f3s megold\u00e1s, ugyanakkor n\u00e9h\u00e1ny dolog korl\u00e1tozza a haszn\u00e1lat\u00e1t:<\/p>\n\n\n\n Annak \u00e9rdek\u00e9ben, hogy a men\u00fc ne foglaljon t\u00fal sok helyet \u00e9rdemes elt\u00fcntetni, illetve megjelen\u00edteni le- \u00e9s felfel\u00e9 g\u00f6rget\u00e9sn\u00e9l.<\/p>\n\n\n\n A hamburger men\u00fct a hamburger ikon jelzi, vagyis h\u00e1rom v\u00edzszintes vonal, \u00e9s m\u00e1ra rendk\u00edv\u00fcl elterjedt\u00e9 v\u00e1lt, k\u00fcl\u00f6n\u00f6sen mobilos megjelen\u00e9sn\u00e9l. <\/p>\n\n\n\n Ebben az esetben a hamburger ikon mellett m\u00e9g megjelennek a legfontosabbnak \u00edt\u00e9lt linkek is<\/strong>. Azaz ut\u00f3bbi megold\u00e1sn\u00e1l nem a teljes men\u00fcsort tessz\u00fck l\u00e1that\u00f3v\u00e1, hanem annak kev\u00e9sb\u00e9 l\u00e9nyegesnek \u00edt\u00e9lt r\u00e9sz\u00e9t az ikon al\u00e1 rendezz\u00fck, viszont a legfontosabb linkek k\u00fcl\u00f6n-k\u00fcl\u00f6n megjelennek a men\u00fcn k\u00edv\u00fcl, kiemelkedve az oldalon. Ezzel teh\u00e1t mutatunk m\u00e1r egy link-hierarchi\u00e1t a l\u00e1togat\u00f3k sz\u00e1m\u00e1ra.<\/p>\n\n\n Hamburger ikonra a men\u00fcpontok mellett akkor is sz\u00fcks\u00e9g lehet, ha p\u00e9ld\u00e1ul mobilon az el\u0151bb eml\u00edtett tab barra nem f\u00e9r r\u00e1 minden c\u00e9loldal linkje, mert \u00f6tn\u00e9l t\u00f6bb van bel\u0151le. Ilyenkor van n\u00e9gy men\u00fcpont, plusz egy hamburger ikon, ami a tov\u00e1bbi elemek list\u00e1j\u00e1t tartalmazza. Ez lehet egy leg\u00f6rd\u00fcl\u0151 men\u00fc, vagy ak\u00e1r eljuttathatja a felhaszn\u00e1l\u00f3t egy k\u00fcl\u00f6n oldalra is. A hamburger ikon mindig az utols\u00f3 helyen \u00e1ll. Ez a kialak\u00edt\u00e1s persze nem sokkal jobb UX szempontb\u00f3l, mint a hamburger men\u00fc, hiszen tov\u00e1bbra is takarja a tartalom egy r\u00e9sz\u00e9t.<\/p>\n\n\n\n Ennek a megold\u00e1snak egy tov\u00e1bbi vari\u00e1ci\u00f3ja, amikor a men\u00fc a kijelz\u0151m\u00e9rett\u0151l f\u00fcgg\u0151en h\u00faz\u00f3dik \u00f6ssze, illetve b\u0151v\u00fcl ki<\/strong>. Teh\u00e1t min\u00e9l nagyobb a kijelz\u0151, ann\u00e1l t\u00f6bb elem l\u00e1that\u00f3 a men\u00fcben a hamburger ikonon k\u00edv\u00fcl.<\/p>\n\n\n Szint\u00e9n nagyon gyakori navig\u00e1ci\u00f3s megold\u00e1s, sok sz\u00f3t \u00edgy nem is vesztegetn\u00e9nk r\u00e1. \u00cdgy n\u00e9z ki:<\/p>\n\n\n A teljes kijelz\u0151s men\u00fc egy olyan \u00fajabb jelens\u00e9g a webdesignban, ami megint csak a mobilok t\u00e9rh\u00f3d\u00edt\u00e1s\u00e1val hozhat\u00f3 \u00f6sszef\u00fcgg\u00e9sbe. Kor\u00e1bban az volt a jellemz\u0151, hogy a leny\u00edl\u00f3 men\u00fc csak egy kis szelet\u00e9t foglalta el a kijelz\u0151nek, \u00e9ppen csak a sz\u00fcks\u00e9ges legkisebb m\u00e9retben. Most m\u00e1r azonban egyre t\u00f6bbsz\u00f6r nagyon b\u00e1tran bebor\u00edtja a teljes kijelz\u0151t. A mobilkijelz\u0151k\u00f6n egy\u00e9bk\u00e9nt nem k\u00fcl\u00f6n\u00f6sebben extr\u00e9m megold\u00e1snak t\u0171n\u0151 men\u00fc-megold\u00e1st – azaz, hogy a teljes kijelz\u0151n elter\u00fcl – egyszer\u0171en ber\u00e1ntott\u00e1k a designerek a desktopok vil\u00e1g\u00e1ba.<\/p>\n\n\n\n Teljes kijelz\u0151s men\u00fc megjelenhet fixk\u00e9nt, illetve hamburger ikonra val\u00f3 kattint\u00e1s ut\u00e1n. El\u0151bbi eset\u00e9ben gyakorlatilag a f\u0151oldal v\u00e1lik navig\u00e1ci\u00f3s men\u00fcv\u00e9<\/strong>. Az egyes men\u00fcpontok azt\u00e1n \u00e1tvihetik a felhaszn\u00e1l\u00f3t egy aloldalra, vagy pedig tov\u00e1bb men\u00fcpontok nyithat\u00f3k meg kattint\u00e1sra, illetve \u00e9rint\u00e9sre. Miut\u00e1n azonban a felhaszn\u00e1l\u00f3 eld\u00f6nt\u00f6tte, hogy merre tart, elt\u0171nik a kijelz\u0151r\u0151l a navig\u00e1ci\u00f3, \u00e9s m\u00e1r csak a tartalom l\u00e1that\u00f3 rajta. Akkor haszn\u00e1lhat\u00f3 els\u0151sorban ez a megold\u00e1s, amikor a f\u0151 tartalomm\u00e1 tulajdonk\u00e9ppen a navig\u00e1ci\u00f3 l\u00e9p el\u0151. Ilyenkor nem kell sokat gondolkodniuk a felhaszn\u00e1l\u00f3knak, hogy mit, hol tal\u00e1lnak, hogyan haszn\u00e1lj\u00e1k a weboldalt. J\u00f3 p\u00e9lda erre az Aria Studio honlapja<\/a>.<\/p>\n\n\n\n A m\u00e1sik esetben a hamburger ikonra val\u00f3 kattint\u00e1s nyitja meg a teljes kijelz\u0151s men\u00fct:<\/p>\n\n\n Amit szokni kell a haszn\u00e1latuk sor\u00e1n, hogy mivel teljesen r\u00e1fekszenek a weboldalra, betakarj\u00e1k azt, \u00edgy egy az egyben el is t\u00fcntetik a felhaszn\u00e1l\u00f3k szemei el\u0151l. Ez\u00e1ltal persze a men\u00fc bez\u00e1r\u00e1sa sem \u00fagy t\u00f6rt\u00e9nik, mint egy leny\u00edl\u00f3 men\u00fcn\u00e9l, hogy vagy elh\u00fazzuk r\u00f3la az egeret, vagy csak a kijelz\u0151 egy m\u00e1s r\u00e9sz\u00e9re kattintunk. Bizony, itt klikkelni kell egy X gombra, j\u00f3 esetben azt legal\u00e1bb nem kell hosszan keresni, \u00e9s persze mobilon ez a megold\u00e1s teljesen term\u00e9szetes.<\/p>\n\n\n\n Ennek egy tov\u00e1bbfejlesztett verzi\u00f3ja, amikor m\u00e1r nem csak a men\u00fcben szerepl\u0151 linkek jelennek meg a felbukkan\u00f3 oldalon, hanem a navig\u00e1ci\u00f3s men\u00fc mellett egy\u00e9b inform\u00e1ci\u00f3k<\/strong>, melyeket esetleg fontosnak v\u00e9l a weboldal tulajdonosa. Ilyen lehet egy kontaktfel\u00fclet a k\u00fcl\u00f6nb\u00f6z\u0151 el\u00e9rhet\u0151s\u00e9gekkel, vagy a k\u00f6z\u00f6ss\u00e9gi oldalak ikonjai. De a vari\u00e1ci\u00f3k v\u00e9gtelenek, \u00e9s ezt mutatj\u00e1k azok a gigantikusra n\u0151tt leny\u00edl\u00f3 men\u00fck is, ahov\u00e1 b\u00e1rmit k\u00e9pesek bepakolni, olyan dolgokat, melyeknek k\u00f6ze nincs a szigor\u00faan vett men\u00fc-funkci\u00f3hoz.<\/p>\n\n\n Ezzel el\u00e9rkezt\u00fcnk egy \u00fajabb megold\u00e1shoz, melyn\u00e9l ugyan megint leg\u00f6rd\u00fcl\u0151 men\u00fckr\u0151l van sz\u00f3, azonban az egyszer\u0171, egym\u00e1s al\u00e1 rendezett linkek helyett, illetve ink\u00e1bb mellett, valami eg\u00e9sz m\u00e1s is megjelenik. M\u00e9gpedig a tartalom egy kis szelete is helyet kap. G\u00e1tl\u00e1sok n\u00e9lk\u00fcl helyeznek el ott k\u00e9peket p\u00e9ld\u00e1ul a leg\u00fajabb akci\u00f3kr\u00f3l, term\u00e9kekr\u0151l, vagyis arr\u00f3l, ami aktu\u00e1lisan a legfontosabb kontent a weboldal tulajdonosa sz\u00e1m\u00e1ra. K\u00e9rd\u00e9s persze, hogy ez mennyire hat\u00e9kony, esetleg ink\u00e1bb csak zavar\u00f3 az inform\u00e1ci\u00f3t keres\u0151 l\u00e1togat\u00f3 sz\u00e1m\u00e1ra. Ez d\u00f6nti el, hogy tart\u00f3s lesz-e a trend vagy sem.<\/p>\n\n\n Hab\u00e1r a navig\u00e1ci\u00f3s men\u00fc hagyom\u00e1nyos elrendez\u00e9sben vagy fel\u00fclre, vagy pedig bal oldalra ker\u00fcl, a webdesignerek most a weblap alj\u00e1ra helyezett navig\u00e1ci\u00f3s men\u00fcvel kezdtek el k\u00eds\u00e9rletezni. Enn\u00e9l a megold\u00e1sn\u00e1l tal\u00e1n \u00e9rdemes \u00fagy megtervezni a men\u00fct, hogy az minden aloldalon megjelenjen alul, ahogy azt a fels\u0151 men\u00fckn\u00e9l is megszokhattuk, valamint lefel\u00e9 g\u00f6rget\u00e9sn\u00e9l maradjon a b\u00f6ng\u00e9sz\u0151ablak alj\u00e1hoz r\u00f6gz\u00edtve. Ez olyan, mint mobilon a tab bar, csak desktopra alkalmazva.<\/p>\n\n\n Az anim\u00e1ci\u00f3 egyre nagyobb trend a webdesignban, nem meglep\u0151, hogy megjelent a navig\u00e1ci\u00f3n\u00e1l is. De persze itt is csak akkor \u00e9rdemes alkalmazni, ha egyszer\u0171bb\u00e9 teszi a felhaszn\u00e1l\u00f3 \u00e9let\u00e9t, k\u00f6nnyebben tudja haszn\u00e1lni az oldalt. Egy\u00e9bk\u00e9nt pedig rendk\u00edv\u00fcl l\u00e1tv\u00e1nyos, izgalmas \u00e9s sz\u00f3rakoztat\u00f3 tud lenni, de t\u00falz\u00e1sokba nem j\u00f3 esni, ahogy itt sem tett\u00e9k<\/a>.<\/p>\n\n\n\n Nagyon letisztult megold\u00e1s, azonban csak kisebb m\u00e9ret\u0171 weboldalaknak \u00e9rdemes alkalmazniuk. Els\u0151sorban olyan esetekben m\u0171k\u00f6d\u0151k\u00e9pes, ha egy el\u0151n\u00e9zeti oldalad van, mely azt\u00e1n k\u00e9s\u0151bb kap egy navig\u00e1ci\u00f3s men\u00fct. Olyan weboldalakn\u00e1l nem igaz\u00e1n alkalmas, amelyeknek t\u00f6bb aloldala is van, hab\u00e1r van, aki \u00edgy is haszn\u00e1lja<\/a>.<\/p>\n\n\n\n Ezek ut\u00e1n l\u00e1ssunk az el\u0151bbiek k\u00f6z\u00fcl n\u00e9h\u00e1nyat r\u00e9szletesen!<\/p>\n\n\n\n A hamburger ikon egyre gyakrabban jelenik meg mobiltelefonokon, tableteken, s\u0151t m\u00e1r desktop kijelz\u0151k\u00f6n is tal\u00e1lkozhatunk vele. Egysz\u00f3val er\u0151s trend lett bel\u0151le. Sokan elhib\u00e1zottnak tartj\u00e1k a haszn\u00e1lat\u00e1t, m\u00e1sok viszont nem l\u00e1tj\u00e1k ennyire tragikusnak a helyzetet. El\u0151sz\u00f6r azonban n\u00e9zz\u00fck meg, hogy honnan is sz\u00e1rmazik a hamburger ikon! Ez az\u00e9rt is \u00e9rdekes, mert gy\u00f6kerei sokkal t\u00e1volabbra ny\u00falnak, mint azt a legt\u00f6bben gondolj\u00e1k.<\/p>\n\n\n\n Alex Tyagulsky app-designer mondta el egyszer a BBC-nek nyilatkozva<\/a>, hogy az els\u0151 nagyobb applik\u00e1ci\u00f3, ahol alkalmazt\u00e1k a hamburger ikont, a Path volt – legal\u00e1bbis az \u0151 legjobb tud\u00e1sa szerint. N\u00e9pszer\u0171s\u00e9ge viszont akkor n\u0151tt meg \u00f3ri\u00e1si m\u00e9rt\u00e9kben, amikor a Facebook is \u00e1tvette. Ekkort\u00f3l egyre t\u00f6bb app kezdte el haszn\u00e1lni.<\/p>\n\n\n\n Nem ez volt azonban az els\u0151 megjelen\u00e9se a h\u00e1rom egym\u00e1s felett fekv\u0151 vonalnak. A \u201870-es \u00e9vek v\u00e9g\u00e9n, \u201880-as \u00e9vek elej\u00e9n a designerek egy korai gener\u00e1ci\u00f3ja m\u00e1r haszn\u00e1lt egy hasonl\u00f3 szimb\u00f3lumot az els\u0151 grafikus fel\u00fcleteken. A Xerox Star nev\u0171 irodai rendszerben a gombsor jobb oldal\u00e1n kapott helyet a hamburger ikon. Erre kattintva tov\u00e1bbi opci\u00f3k ny\u00edltak meg a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra – mondta el a lapnak a ma 63 \u00e9ves Norm Cox, amerikai tervez\u0151-grafikus. Akkoriban azzal viccel\u0151dtek az els\u0151 \u00fcgyfelekkel, hogy ez egy szell\u0151z\u0151ny\u00edl\u00e1s, ami hidegen tartja az ablakot. Teh\u00e1t ekkor m\u00e9g nem volt sz\u00f3 hamburgerr\u0151l.<\/p>\n\n\n\n Igaz\u00e1n n\u00e9pszer\u0171v\u00e9 viszont 30-40 \u00e9vvel k\u00e9s\u0151bb v\u00e1lt. N\u00e9pszer\u0171s\u00e9g\u00e9nek n\u00f6veked\u00e9s\u00e9hez a facebookos haszn\u00e1lat mellett az is hozz\u00e1j\u00e1rult, hogy mindenf\u00e9le inform\u00e1ci\u00f3t nagyon k\u00f6nnyen bele tudunk zs\u00fafolni. De mennyire hat\u00e9kony a haszn\u00e1lata? T\u00f6bb kutat\u00e1s is sz\u00fcletett a t\u00e9m\u00e1ban, melyek megk\u00e9rd\u0151jelezik a hat\u00e9konys\u00e1g\u00e1t.<\/p>\n\n\n\n James Foster, \u00faj-z\u00e9landi webfejleszt\u0151 t\u00f6bb tesztet v\u00e9gzett a t\u00e9m\u00e1ban, \u00e9s mindegyik azt mutatta, hogy a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra nem annyira egy\u00e9rtelm\u0171 a haszn\u00e1lata, mint azt sok fejleszt\u0151 vagy designer gondolja.<\/p>\n\n\n\n Olyan fontos meg\u00e1llap\u00edt\u00e1sokat tett, miszerint<\/p>\n\n\n\n Foster szerint a h\u00e1rom vonalat nem t\u00fal k\u00f6nny\u0171 \u00e9szrevenni egy oldalon, r\u00e1ad\u00e1sul mindenkinek m\u00e1st \u00e9s m\u00e1st jelenthet, nem felt\u00e9tlen\u00fcl azt, hogy \u201citt egy csom\u00f3 inform\u00e1ci\u00f3t tal\u00e1lsz\u201d. Ez\u00e9rt azt\u00e1n az, ami a hamburger ikonnal jelzett men\u00fcbe ker\u00fcl, sokszor rejtve marad a l\u00e1togat\u00f3k el\u0151l.<\/p>\n\n\n\n Azt ugyanakkor hozz\u00e1 kell tenni, hogy Foster 2014 elej\u00e9n v\u00e9gezte az els\u0151 tesztjeit, viszont az\u00f3ta eltelt egy kis id\u0151. Tov\u00e1bbra is vizsg\u00e1lja a hamburger ikon haszn\u00e1lat\u00e1t, \u00e9s az \u00faj vizsg\u00e1latok alapj\u00e1n \u00fagy t\u0171nik sz\u00e1m\u00e1ra, hogy az emberek egyre jobban tudj\u00e1k \u00e9rtelmezni a funkci\u00f3j\u00e1t<\/strong>.<\/p>\n\n\n\n Nem \u00edgy l\u00e1tja azonban 2016-os kutat\u00e1saiban a Norman Nielsen Group. Szerint\u00fck mintegy fel\u00e9re cs\u00f6kken egy weboldal felfedezhet\u0151s\u00e9ge<\/strong> abban az esetben, ha takarjuk a navig\u00e1ci\u00f3s men\u00fct egy hamburger ikonnal. R\u00e1ad\u00e1sul a feladatok v\u00e9grehajt\u00e1sa is hosszabb id\u0151t vesz ig\u00e9nybe. Emellett nehezebbnek is t\u0171nik ezek elv\u00e9gz\u00e9se az emberek sz\u00e1m\u00e1ra.<\/p>\n\n\n\n A Nielsen Norman Group<\/a> vizsg\u00e1lata szerint rejtett navig\u00e1ci\u00f3 haszn\u00e1lata eset\u00e9n romlik a weboldal felfedezhet\u0151s\u00e9ge egy olyan weboldalhoz k\u00e9pest, ahol l\u00e1that\u00f3 vagy legal\u00e1bb r\u00e9szben l\u00e1that\u00f3 a navig\u00e1ci\u00f3s men\u00fc.<\/p>\n\n\n\n A rejtett navig\u00e1ci\u00f3 rosszabb felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt jelent a l\u00e1that\u00f3hoz vagy a r\u00e9szben l\u00e1that\u00f3hoz k\u00e9pest, nem csak desktop fel\u00fcleten, hanem m\u00e9g mobilon is. Ez t\u00f6bb UX m\u00e9r\u0151sz\u00e1m eset\u00e9n is bebizonyosodott, \u00edgy a feladat neh\u00e9zs\u00e9g\u00e9nek a meg\u00edt\u00e9l\u00e9s\u00e9n\u00e9l, a feladatra ford\u00edtott id\u0151n\u00e9l \u00e9s a sikeres feladatv\u00e9gz\u00e9sn\u00e9l is. A navig\u00e1ci\u00f3 takar\u00e1sa legnagyobb m\u00e9rt\u00e9kben arra a tartalomra volt hat\u00e1ssal, mely nem volt el\u00e9rhet\u0151 k\u00f6zvetlen linken kereszt\u00fcl az adott oldalr\u00f3l.<\/p>\n\n\n\n A vizsg\u00e1lat r\u00e9szleteit itt nem ismertetj\u00fck, az megtal\u00e1lhat\u00f3 a Nielsen anyag\u00e1ban, csak a f\u0151 k\u00f6vetkeztet\u00e9sekre t\u00e9r\u00fcnk ki, mert ezek mindenki sz\u00e1m\u00e1ra rendk\u00edv\u00fcl tanuls\u00e1gosak lehetnek.<\/p>\n\n\n\n A felsorolt pontok k\u00f6z\u00fcl egyed\u00fcl az utols\u00f3 az, amelyikn\u00e9l javul\u00e1s k\u00f6vetkezhet be id\u0151vel az NNGroup szerint. Elm\u00e9letileg ugyanis lehets\u00e9ges a szabv\u00e1nyos\u00edt\u00e1s, melynek r\u00e9v\u00e9n ismer\u0151sebb\u00e9 v\u00e1lik az emberek sz\u00e1m\u00e1ra a rejtett navig\u00e1ci\u00f3. De a Nielsen tapasztalatai azt mutatj\u00e1k, hogy ezek a sztenderdek nem alakulnak ki egyhamar. R\u00e1ad\u00e1ul az els\u0151 h\u00e1rom pont, vagyis a rossz \u00e9szrevehet\u0151s\u00e9g, a m\u00e9rs\u00e9kelt inform\u00e1ci\u00f3s \u00e9rt\u00e9k, \u00e9s a vele j\u00e1r\u00f3 plusz munka mindig is adott marad a rejtett navig\u00e1ci\u00f3 eset\u00e9ben.<\/p>\n\n\n\n M\u00e1sok azonban nem l\u00e1tj\u00e1k ennyire tragikusan a helyzetet. Illetve m\u00e1s t\u00e9nyez\u0151kre h\u00edvj\u00e1k fel a figyelmet. P\u00e9ld\u00e1ul arra, hogy hib\u00e1t k\u00f6vet el az, aki mobilos tervez\u00e9sn\u00e9l a navig\u00e1ci\u00f3s men\u00fcre koncentr\u00e1l, mondv\u00e1n: fontos a funkci\u00f3ja, hiszen ez vezeti a felhaszn\u00e1l\u00f3t. Mert nem \u00edgy van.<\/p>\n\n\n\n Ezt magyar\u00e1zta Steven Hoober a UX Mattersen<\/a> megjelent \u00edr\u00e1s\u00e1ban, ahol abb\u00f3l indul ki, hogy mi\u00e9rt is van teljes m\u00e9rt\u00e9kben l\u00e9tjogosults\u00e1ga a hamburger ikonnak a webdesignban. Szerinte egy\u00e1ltal\u00e1n nem gond, hogy az emberek nem tal\u00e1lnak r\u00e1 az inform\u00e1ci\u00f3kra<\/strong>.<\/p>\n\n\n\n A navig\u00e1ci\u00f3s men\u00fckkel az a baj, hogy \u00fagy m\u0171k\u00f6dnek, mint egy parkol\u00f3 vagy egy m\u00e9lygar\u00e1zs rendszere, ahol ahhoz, hogy megtal\u00e1ljuk az aut\u00f3nkat, meg kell ismern\u00fcnk annak bels\u0151 nyelv\u00e9t \u00e9s strukt\u00far\u00e1j\u00e1t, meg kell tanulnunk azokat a k\u00f3dokat, jelz\u00e9seket, melyek meghat\u00e1rozz\u00e1k, hogy hol is parkoltunk le. Ez azonban nem k\u00f6nny\u0171 senki sz\u00e1m\u00e1ra sem, ez\u00e9rt jelent\u0151s m\u00e9rt\u00e9kben arra hagyatkozunk, hogy milyen a k\u00f6rnyezet, milyen egy\u00e9b ismertet\u0151jeleket, t\u00e1rgyakat l\u00e1tunk, \u00e9s egyszer\u0171en arra megy\u00fcnk, amerre a t\u00f6bbiek is. Hib\u00e1s teh\u00e1t minden olyan megk\u00f6zel\u00edt\u00e9s, mely valamilyen szigor\u00fa navig\u00e1ci\u00f3ra \u00e9p\u00edt, hogy az majd megfelel\u0151en vezeti az embereket.<\/p>\n\n\n\n Az emberek nem \u00fagy viselkednek mobilon, hogy a weboldalakat a tetej\u00e9t\u0151l kezdve, balr\u00f3l jobbra v\u00e9gign\u00e9zik, hanem mindig k\u00f6z\u00e9pre poz\u00edcion\u00e1lnak. Mobilos tervez\u00e9sn\u00e9l teh\u00e1t abb\u00f3l kell kiindulni, hogy a felhaszn\u00e1l\u00f3k el\u0151sz\u00f6r a kijelz\u0151 k\u00f6zep\u00e9n l\u00e9v\u0151 tartalomra pillantanak<\/strong>, azt olvass\u00e1k el, azzal ker\u00fclnek interakci\u00f3ba, \u00e9s csak akkor mozdulnak innen el a tekintet\u00fckkel, ha nem tal\u00e1lt\u00e1k meg, amit kerestek. Egy\u00e9bk\u00e9nt viszont teljes m\u00e9rt\u00e9kben hanyagolj\u00e1k a kijelz\u0151 fels\u0151 \u00e9s als\u00f3 r\u00e9sz\u00e9n elhelyezked\u0151 dolgokat.<\/p>\n\n\n\n Ez vezette Hoobert ahhoz a design-elvhez, melyet alkalmaz: ha arra \u00e9p\u00edtj\u00fck a folyamatot, hogy a felhaszn\u00e1l\u00f3 majd olvas, azt\u00e1n pedig v\u00e1laszt, akkor rossz \u00faton j\u00e1runk. Mit tehet\u00fcnk? El\u0151sz\u00f6r is azt, hogy megadjuk sz\u00e1m\u00e1ra a legfontosabb inform\u00e1ci\u00f3kat a kijelz\u0151 k\u00f6zep\u00e9re rendezve<\/strong>, a m\u00e1sodlagos funkci\u00f3kat pedig kitoljuk a sz\u00e9l\u00e9re. Ilyen az, amikor a levelez\u0151kliensben k\u00f6z\u00e9pen a levelekkel tal\u00e1lkozunk, \u00e9s valahol alul vagy fel\u00fcl helyet kap az \u201c\u00faj lev\u00e9l l\u00e9trehoz\u00e1sa\u201d ikon. Az ikonok \u00e9s a linkek elhelyez\u00e9se a fels\u0151 vagy az als\u00f3 sorban a leggyakoribb m\u00f3dja a m\u00e1sodlagos funkci\u00f3k elhelyez\u00e9s\u00e9nek, legyen sz\u00f3 mobilra optimaliz\u00e1lt weboldalakr\u00f3l vagy mobil-alkalmaz\u00e1sokr\u00f3l.<\/p>\n\n\n Azokat a funkci\u00f3kat pedig, melyeket az emberek a m\u00e1sodlagosokn\u00e1l is ritk\u00e1bban haszn\u00e1lnak, a men\u00fcben kell elhelyezni. Nyilv\u00e1n az ezekben szerepl\u0151 dolgokhoz m\u00e1r nehezebb eljutni. De annak az es\u00e9lye is kisebb, hogy a felhaszn\u00e1l\u00f3k pont az itt elhelyezett funkci\u00f3kat keresn\u00e9k.<\/p>\n\n\n\n P\u00e9ldak\u00e9nt hozza fel a YouTube applik\u00e1ci\u00f3j\u00e1t, melyben k\u00f6z\u00e9pen kapnak helyet az aj\u00e1nlott vide\u00f3k, valamint tal\u00e1lkozhatunk m\u00e9g egy Zene linkkel, a keres\u00e9ssel \u00e9s egy hamburger men\u00fcvel. Mik\u00f6zben maga a YouTube egy meglehet\u0151sen bonyolult \u00e9s \u00f6sszetett rendszer mindenf\u00e9le kateg\u00f3ri\u00e1kkal, csatorn\u00e1kkal. L\u00e1that\u00f3, hogy mi a fontos a YouTube sz\u00e1m\u00e1ra. Els\u0151sorban az aj\u00e1nlott vide\u00f3k, m\u00e1sr\u00e9szt pedig a keres\u00e9s, hiszen ezzel lehet megtal\u00e1lni a vide\u00f3kat.<\/p>\n\n\n\n Az utols\u00f3 design-elv teh\u00e1t az lenne, hogy mindig a k\u00f6z\u00e9ppontb\u00f3l tervezz\u00fcnk kifel\u00e9. Ehhez el\u0151sz\u00f6r meg kell hat\u00e1rozni a funkci\u00f3k hierarchi\u00e1j\u00e1t, majd a felhaszn\u00e1l\u00f3i fel\u00fcletnek ehhez kell igazodnia.<\/p>\n\n\n\n Azt kell teh\u00e1t meg\u00e9rteni, hogy mindig a jelenlegi eszk\u00f6z\u00f6kre \u00e9s felhaszn\u00e1l\u00f3kra tervezz\u00fcnk. Ne pedig a r\u00e9gi felt\u00e9telez\u00e9sekre, bevett gyakorlatokra \u00e9p\u00edts\u00fcnk<\/strong>, melyek m\u00e9g a r\u00e9gi eszk\u00f6zk\u00f6rnyezetben alakultak ki. De azt se felejts\u00fck, hogy egy weboldal att\u00f3l m\u00e9g nem lesz mobilbar\u00e1t, hogy a navig\u00e1ci\u00f3s men\u00fcsort lecser\u00e9lj\u00fck egy hamburger ikonra. Ehelyett az eg\u00e9sz oldalt \u00fajra kell tervezni olyan megold\u00e1sok l\u00e9trehoz\u00e1s\u00e1val, melyek a mobilok \u00e9s tabletek egyedi fel\u00fclet\u00e9t haszn\u00e1l\u00f3k sz\u00e1m\u00e1ra is hat\u00e9konyan haszn\u00e1lhat\u00f3k.<\/p>\n\n\n\n Az el\u0151bbiek alapj\u00e1n teh\u00e1t m\u00e1r nagyj\u00e1b\u00f3l k\u00f6rvonalaz\u00f3dhat az is, hogy mikor \u00e9rdemes a hamburger men\u00fct bevetni az applik\u00e1ci\u00f3dban vagy ak\u00e1r weboldaladon. Igen, akkor, ha olyan a tartalmad, mely egy vagy n\u00e9h\u00e1ny f\u0151 funkci\u00f3 k\u00f6r\u00e9 rendezhet\u0151, \u00e9s ezek mondjuk CTA gombk\u00e9nt jelennek meg<\/strong>.<\/p>\n\n\n\n Ilyenkor az els\u0151dleges navig\u00e1ci\u00f3s lehet\u0151s\u00e9gek a weboldal vagy az applik\u00e1ci\u00f3 k\u00f6zep\u00e9re ker\u00fclnek, \u00e9s minden m\u00e1snak m\u00e1sodlagos szerep jut, azaz elt\u00fcntethet\u0151 egy hamburger ikon m\u00f6g\u00f6tt, mint m\u00e1sodlagos navig\u00e1ci\u00f3<\/strong>. Ez az\u00e9rt is j\u00f3 megold\u00e1s, mert ilyenkor a tov\u00e1bbi men\u00fcpontok nem zavarj\u00e1k meg a felhaszn\u00e1l\u00f3t, nem t\u00e1ntor\u00edtj\u00e1k el a f\u0151 funkci\u00f3 haszn\u00e1lat\u00e1t\u00f3l. Ha nem vil\u00e1gos mir\u0151l van sz\u00f3, akkor vess egy pillant\u00e1st az Uber megold\u00e1s\u00e1ra:<\/p>\n\n\n Itt minden az aut\u00f3rendel\u00e9s k\u00f6r\u00e9 szervez\u0151dik, az ker\u00fcl a k\u00f6z\u00e9ppontba. Az olyan lehet\u0151s\u00e9geket, mint p\u00e9ld\u00e1ul a be\u00e1ll\u00edt\u00e1sok, m\u00e1r a hamburger men\u00fc rejti. Az ugyanis nagyon val\u00f3sz\u00edn\u0171tlen, hogy az, aki t\u00f6bbsz\u00f6r is megnyitja az appot, mindig a be\u00e1ll\u00edt\u00e1sokat keresse, ne pedig az aut\u00f3rendel\u00e9ssel foglalkozzon<\/p>\n\n\n\n A hamburger ikon itt a legkisebb m\u00e9rt\u00e9kben sem zavarja meg a felhaszn\u00e1l\u00f3t, nem t\u00e9r\u00edti el az \u00fatj\u00e1t\u00f3l, m\u00e9gis b\u00e1rmikor hozz\u00e1f\u00e9rhet\u0151k sz\u00e1m\u00e1ra. Hiszen min\u00e9l kevesebb a navig\u00e1ci\u00f3s elem, ann\u00e1l kissebb az es\u00e9ly arra, hogy a felhaszn\u00e1l\u00f3t elt\u00e9r\u00edti valami<\/strong>. A navig\u00e1ci\u00f3 minimaliz\u00e1l\u00e1s\u00e1val a felhaszn\u00e1l\u00f3 sokkal jobban tud a feladat v\u00e9grehajt\u00e1s\u00e1ra \u00f6sszpontos\u00edtani.<\/p>\n\n\n\n Vagyis, ha nem tudod eld\u00f6nteni, hogy haszn\u00e1ld vagy sem a hamburger men\u00fct, akkor tedd fel magadnak a k\u00e9rd\u00e9st: azokat a navig\u00e1ci\u00f3s elemeket, melyeket a hamburger ikon m\u00f6g\u00e9 rejtesz ritk\u00e1n haszn\u00e1lj\u00e1k csak az emberek? Ha igen, akkor pr\u00f3b\u00e1ld ki a hamburger ikont.<\/p>\n\n\n\n V\u00e9g\u00fcl \u00e1lljanak itt a NN Group tan\u00e1csai azzal kapcsolatban, hogy hogyan haszn\u00e1ld a hamburger men\u00fct<\/strong>. Asztali kijelz\u0151n\u00e9l \u0151k nem l\u00e1tj\u00e1k \u00e9rtelm\u00e9t, mert rendk\u00edv\u00fcl nagy t\u00e9r \u00e1ll a rendelkez\u00e9s\u00fcnkre a navig\u00e1ci\u00f3 megjelen\u00edt\u00e9s\u00e9re, \u00fagyhogy jelenjenek meg a legfels\u0151 szint\u0171 navig\u00e1ci\u00f3s lehet\u0151s\u00e9get az oldal tetej\u00e9n vagy a bal oldalon.<\/p>\n\n\n\n Mobilos kijelz\u0151k\u00f6n nincsenek egy\u00e9rtelm\u0171 szab\u00e1lyok, de \u00e1ltal\u00e1noss\u00e1gban a k\u00f6vetkez\u0151ket lehet mondani:<\/p>\n\n\n\n Ugyanakkor ne felejtsd el, hogy nincsenek rossz vagy j\u00f3 designmegold\u00e1sok, mert minden a kontextust\u00f3l f\u00fcgg. Arra figyelj els\u0151sorban, hogy a weboldalad vagy alkalmaz\u00e1sod c\u00e9lj\u00e1t seg\u00edti-e a hamburger men\u00fc vagy sem.<\/p>\n\n\n\n A mega men\u00fck vagy \u00f3ri\u00e1smen\u00fck olyan kibonthat\u00f3 men\u00fck, melyek sz\u00e1mtalan lehet\u0151s\u00e9get k\u00edn\u00e1lnak egy k\u00e9tdimenzi\u00f3s, leny\u00edl\u00f3 elrendez\u00e9sben. Alkalmasak arra, hogy ha viszonylag sok opci\u00f3t k\u00edn\u00e1lunk az embereknek, akkor mindegyik megjelen\u00edthet\u0151 legyen, \u00e9s egy pillant\u00e1ssal \u00e1ttekinthet\u0151v\u00e9 v\u00e1ljanak a weboldal als\u00f3bb szintjei is.<\/p>\n\n\n\n R\u00e1ad\u00e1sul mikor nagym\u00e9ret\u0171, \u00fagynevezett mega men\u00fct haszn\u00e1lsz navig\u00e1ci\u00f3ra, akkor az ott szerepl\u0151 linkek megfelel\u0151 csoportos\u00edt\u00e1s\u00e1val sz\u00fcks\u00e9gtelenn\u00e9 tehet\u0151 a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra a g\u00f6rget\u00e9s – h\u00edvta fel a figyelmet elemz\u00e9s\u00e9ben az Nielsen Norman Group<\/a>.<\/p>\n\n\n\n Egy \u00f3ri\u00e1smen\u00fcben a k\u00e9peknek is elegend\u0151 hely juthat, ami az\u00e9rt el\u0151ny\u00f6s, mert seg\u00edthetnek a felhaszn\u00e1l\u00f3knak a megfelel\u0151 lehet\u0151s\u00e9g kiv\u00e1laszt\u00e1s\u00e1ban. A mega men\u00fc r\u00e9v\u00e9n megmutathatjuk, a weboldal inform\u00e1ci\u00f3s architekt\u00far\u00e1j\u00e1nak t\u00f6bb szintj\u00e9t is.<\/p>\n\n\n A felhaszn\u00e1l\u00f3i tesztek azt mutatj\u00e1k, hogy a mega men\u00fck j\u00f3l m\u0171k\u00f6dnek. Ennek oka t\u00f6bbek k\u00f6z\u00f6tt:<\/p>\n\n\n\n Amennyiben a mega men\u00fc hover haszn\u00e1lat\u00e1val jelenik meg, akkor a kih\u00edv\u00e1s az, hogy megk\u00fcl\u00f6nb\u00f6ztess\u00fcnk k\u00e9tf\u00e9le felhaszn\u00e1l\u00f3 sz\u00e1nd\u00e9kot:<\/p>\n\n\n\n Vil\u00e1gos, hogy a m\u00e1sodik lehet\u0151s\u00e9g eset\u00e9ben kell csak megjelennie a men\u00fcnek a kijelz\u0151n. Ennek \u00e9rdek\u00e9ben \u00e9rdemes be\u00e1ll\u00edtani egy id\u0151intervallumot, am\u00edg az eg\u00e9rmutat\u00f3nak az \u00f3ri\u00e1smen\u00fc linkj\u00e9n kell elhelyezkednie, hogy az aktiv\u00e1l\u00f3djon. Az NNG javaslata szerint f\u00e9l m\u00e1sodpercig kellene mozdulatlannak lennie az eg\u00e9rmutat\u00f3nak a mega men\u00fc linkj\u00e9n. Amennyiben enn\u00e9l r\u00f6videbb az id\u0151tartam, akkor zavar\u00f3 vill\u00f3dz\u00e1snak t\u0171nhet a kijelz\u0151n a men\u00fc megjelen\u00e9se. Csak f\u00e9l m\u00e1sodperc eltelte ut\u00e1n felt\u00e9telezhetj\u00fck nagy val\u00f3sz\u00edn\u0171s\u00e9ggel azt, hogy a felhaszn\u00e1l\u00f3 a men\u00fct szeretn\u00e9 l\u00e1tni.<\/p>\n\n\n\n Vagyis az id\u0151z\u00edt\u00e9s \u00edgy n\u00e9z ki:<\/p>\n\n\n\n Egyetlen kiv\u00e9tel lehet csak a h\u00e1rmas pontn\u00e1l. Adott esetben m\u00edg a navig\u00e1ci\u00f3s s\u00e1vr\u00f3l halad a men\u00fc egy eleme fel\u00e9 az eg\u00e9rmutat\u00f3, t\u00f6bb mint f\u00e9l m\u00e1sodpercre elhagyhatja a meghat\u00e1rozott ter\u00fcletet, holott a felhaszn\u00e1l\u00f3 sz\u00e1nd\u00e9ka egy\u00e9rtelm\u0171. Ilyenkor a men\u00fcnek nem szabad elt\u0171nnie.<\/p>\n\n\n A webdesignban sokat hangoztatott egyszer\u0171s\u00e9gre t\u00f6rekv\u00e9s<\/a> term\u00e9szetesen a mega men\u00fck eset\u00e9ben is fontos. Csak az\u00e9rt mert egy nagym\u00e9ret\u0171 men\u00fcbe szinte b\u00e1rmit el lehet helyezni, m\u00e9g nem jelenti azt, hogy musz\u00e1j telezs\u00fafolni. A kevesebb lehet\u0151s\u00e9g eset\u00e9ben a felhaszn\u00e1l\u00f3knak kevesebb opci\u00f3t kell \u00e1tfutniuk, kevesebbet kell meg\u00e9rteni\u00fck, \u00e9s kisebb az es\u00e9ly a hib\u00e1z\u00e1sra.<\/p>\n\n\n\n Maradjunk a kattint\u00e1sok haszn\u00e1lat\u00e1n\u00e1l, enn\u00e9l bonyolultabb interakci\u00f3s megold\u00e1soknak itt nincs helye. Ugyan\u00edgy a keres\u0151mez\u0151nek sem itt kellene megjelennie, hanem folyamatosan l\u00e1that\u00f3nak kell lennie a weboldalon.<\/p>\n\n\n\n A dinamikus elemek alkalmaz\u00e1s\u00e1n\u00e1l mindig felmer\u00fclhetnek hozz\u00e1f\u00e9rhet\u0151s\u00e9gi probl\u00e9m\u00e1k. Ez\u00e9rt fontos, hogy a k\u00e9perny\u0151felolvas\u00f3k haszn\u00e1lat\u00e1t is szem el\u0151tt tartsuk a kialak\u00edt\u00e1sukn\u00e1l. Egy mega men\u00fc m\u00e9g akkor is probl\u00e9m\u00e1t fog okozni azok sz\u00e1m\u00e1ra, akik rosszul l\u00e1tnak \u00e9s kijelz\u0151nagy\u00edt\u00f3t haszn\u00e1lnak, ha megfelel\u0151en van meg\u00edrva a k\u00f3dja. Ugyanez a probl\u00e9ma okostelefonok \u00e9s tabletek eset\u00e9ben is felmer\u00fcl.<\/p>\n\n\n\n Ennek oka, hogy a mega men\u00fcnek egyszerre csak egy r\u00e9szlete l\u00e1tszik ilyenkor. A felhaszn\u00e1l\u00f3k pedig azt hiszik, hogy csak azt tartalmazza a men\u00fc, amennyit l\u00e1tnak bel\u0151le. Ennek ak\u00e1r jelent\u0151s hat\u00e1sa is lehet a megrendel\u00e9sekre, ha t\u00f6bb ilyen \u00fcgyfele is van a weboldalnak, p\u00e9ld\u00e1ul, ha id\u0151sebb felhaszn\u00e1l\u00f3kat c\u00e9loz. A megold\u00e1s az lehet, hogy vil\u00e1gosan kell jel\u00f6lni a men\u00fc hat\u00e1rait.<\/p>\n\n\n\n Tov\u00e1bbi probl\u00e9m\u00e1t jelentenek a kism\u00e9ret\u0171 opci\u00f3k, melyek kiv\u00e1laszt\u00e1s\u00e1n\u00e1l hib\u00e1k jelentkezhetnek \u00e9rint\u0151kijelz\u0151k haszn\u00e1lat\u00e1n\u00e1l. A hozz\u00e1f\u00e9rhet\u0151s\u00e9g alapvet\u0151en k\u00e9t m\u00f3don jav\u00edthat\u00f3 a mega men\u00fckn\u00e9l:<\/p>\n\n\n\n Ha megengedheted magadnak, vagy \u00fcgyfeleid jelent\u0151s r\u00e9sze miatt fontos a hozz\u00e1f\u00e9rhet\u0151s\u00e9g biztos\u00edt\u00e1sa, akkor a legjobb, ha mind az egyszer\u0171, mind a nehezebb megold\u00e1st haszn\u00e1lod. A legt\u00f6bb weboldal eset\u00e9ben azonban az els\u0151 megold\u00e1s is elegend\u0151.<\/p>\n\n\n\n \u00d6sszess\u00e9g\u00e9ben teh\u00e1t elmondhat\u00f3, hogy a mega men\u00fck jav\u00edtj\u00e1k a weboldalad navig\u00e1lhat\u00f3s\u00e1g\u00e1t. Persze a legjobb megold\u00e1s, ha teszteled is, hogy val\u00f3ban \u00edgy van-e. Ha seg\u00edtesz az embereknek abban, hogy t\u00f6bb dolgot megtal\u00e1ljanak a weboldaladon, akkor \u0151k seg\u00edtenek neked abban, hogy t\u00f6bb dolgot tudj\u00e1l eladni rajta.<\/p>\n\n\n\n Az \u00f6sszetett inform\u00e1ci\u00f3s architekt\u00far\u00e1j\u00fa weboldalakon a t\u00f6bbszintes men\u00fck jav\u00edthatj\u00e1k a navig\u00e1ci\u00f3t, ami jobb felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt, \u00edgy pedig t\u00f6bb konverzi\u00f3t eredm\u00e9nyez.<\/p>\n\n\n\n A felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny fontos eleme a navig\u00e1ci\u00f3 a weboldalakon. Ha az emberek nem tudj\u00e1k hogyan mozoghatnak a weboldalon \u00e9s hol tal\u00e1lj\u00e1k meg, amit keresnek, akkor az csal\u00f3d\u00e1st okoz sz\u00e1mukra, \u00edgy elhagyj\u00e1k a weboldalad.<\/p>\n\n\n\n Egy t\u00f6bbszintes men\u00fc rosszul kivitelezve k\u00fcl\u00f6n\u00f6sen nyomaszt\u00f3 lehet sz\u00e1mukra, hiszen hirtelen nem is tudj\u00e1k, hogy hov\u00e1 kattintsanak a sok lehet\u0151s\u00e9g k\u00f6z\u00fcl. Egy t\u00f6bbszintes men\u00fc kivitelez\u00e9se ez\u00e9rt komoly figyelmet ig\u00e9nyel, ann\u00e1l is ink\u00e1bb, mivel az elt\u00e9r\u0151 kijelz\u0151m\u00e9retek m\u00e9g jobban megbonyol\u00edtj\u00e1k a dolgot.<\/p>\n\n\n\n Ugyanakkor vannak olyan \u00f6k\u00f6lszab\u00e1lyok, melyekre lehet t\u00e1maszkodni a t\u00f6bbszintes men\u00fck kialak\u00edt\u00e1s\u00e1n\u00e1l, hogy javul\u00f3 navig\u00e1ci\u00f3t \u00e9s megtal\u00e1lhat\u00f3s\u00e1got biztos\u00edtsanak a l\u00e1togat\u00f3k sz\u00e1m\u00e1ra.<\/p>\n\n\n\n Egy j\u00f3 t\u00f6bbszintes men\u00fc k\u00e9pes a felhaszn\u00e1l\u00f3kat gyorsan oda vezetni a weboldalon, ahov\u00e1 el akarnak jutni. Ezt az inform\u00e1ci\u00f3k vil\u00e1gos \u00e9s intuit\u00edv megjelen\u00edt\u00e9s\u00e9vel \u00e9ri el. <\/p>\n\n\n\n Amennyiben t\u00f6bbszintes men\u00fcben gondolkodsz, fontos, hogy soha ne haszn\u00e1lj k\u00e9t almen\u00fc-szintn\u00e9l t\u00f6bbet!<\/strong> Az enn\u00e9l t\u00f6bb szint m\u00e1r annyira bonyolult a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, hogy nem k\u00e9pesek \u00e9rtelmezni. A navig\u00e1ci\u00f3 maradjon mindig a lehet\u0151 leglaposabb, hogy jav\u00edtsa a megtal\u00e1lhat\u00f3s\u00e1got \u00e9s cs\u00f6kkentse a felhaszn\u00e1l\u00f3k kognit\u00edv terhel\u00e9s\u00e9t. <\/p>\n\n\n\n Ha egy weboldal strukt\u00far\u00e1ja t\u00fal m\u00e9ly, akkor helyi navig\u00e1ci\u00f3s men\u00fct<\/strong> \u00e9rdemes alkalmazni a kapcsol\u00f3d\u00f3 weboldalakn\u00e1l. A Zoho, mely meglehet\u0151sen \u00f6sszetett term\u00e9kpalett\u00e1t k\u00edn\u00e1l a c\u00e9geknek, term\u00e9kspecifikus helyi men\u00fct alkalmaz minden term\u00e9koldal\u00e1n, a f\u0151men\u00fc alatt. Mik\u00f6zben a f\u0151men\u00fc felsorolja a Zoho f\u0151 aj\u00e1nlatait, addig a helyi men\u00fck a r\u00e9szletesebb inform\u00e1ci\u00f3khoz vezetik a l\u00e1togat\u00f3kat.<\/p>\n\n\n Egy m\u00e1sik fontos dolog, hogy az almen\u00fcket ikonnal jelezd<\/strong>! Teh\u00e1t l\u00e1ss\u00e1k a felhaszn\u00e1l\u00f3k azt, amikor almen\u00fcre sz\u00e1m\u00edthatnak valamely men\u00fcpontn\u00e1l. A megszokott jelz\u00e9s a lefel\u00e9 ford\u00edtott h\u00e1romsz\u00f6g vagy lefel\u00e9 mutat\u00f3 ny\u00edl, mely az almen\u00fc megnyit\u00e1sakor elfordulhat.<\/p>\n\n\n\n Oda kell figyelni az inform\u00e1ci\u00f3k elrendez\u00e9s\u00e9re is: az inform\u00e1ci\u00f3k hierarchi\u00e1ja \u00f6sszhangban legyen a felhaszn\u00e1l\u00f3k elv\u00e1r\u00e1s\u00e1val<\/strong>. Teh\u00e1t p\u00e9ld\u00e1ul, ha egy web\u00e1ruh\u00e1zban a felhaszn\u00e1l\u00f3k a cip\u0151k men\u00fcpontra kattintanak, akkor nem \u00e1rt tudni, hogy hasznosabb-e sz\u00e1mukra, ha itt t\u00edpus szerinti (f\u00e9lcip\u0151k, edz\u0151cip\u0151k, bakancsok, stb.) vagy m\u00e1rka szerinti elrendez\u00e9st tal\u00e1lnak. Ehhez kellhet a piackutat\u00e1s vagy a konkurencia megold\u00e1sainak vizsg\u00e1lata.<\/p>\n\n\n\n Fontos, hogy a felhaszn\u00e1l\u00f3k mindig tudj\u00e1k, hogy \u00e9ppen hol j\u00e1rnak a weboldalon<\/strong>. Mindig emeld ki a f\u0151men\u00fcben azt a linket, ahol \u00e9ppen tart\u00f3zkodik a felhaszn\u00e1l\u00f3. Ha az adott oldal valahol egy almen\u00fcben tal\u00e1lhat\u00f3, akkor nem csak az almen\u00fcben l\u00e9v\u0151 linket kell kiemelni, hanem a kapcsol\u00f3d\u00f3 f\u0151men\u00fc elemet is.<\/p>\n\n\n\n Emellett persze a lehet\u0151 legvil\u00e1gosabban kell megfogalmazni a men\u00fcpontok sz\u00f6veg\u00e9t. Sokszor mondtuk m\u00e1r, de a men\u00fc nem az a r\u00e9sze a weboldalnak, ahol eredetieskedni kell. A felhaszn\u00e1l\u00f3knak azonnal \u00e9rteni\u00fck kell, mit takar egy men\u00fcpont, m\u00e9g azel\u0151tt, hogy r\u00e1kattintan\u00e1nak. <\/p>\n\n\n\n Mik\u00f6zben a monitorokon megjelen\u0151 weboldalad men\u00fcj\u00e9nek \u00f6sszhangban kell lennie a mobilos weboldalad men\u00fcj\u00e9vel, vannak olyan szab\u00e1lyok, melyek el\u0151bbiek eset\u00e9ben \u00e9rv\u00e9nyesek. <\/p>\n\n\n\n Ilyen az, hogy a men\u00fcnek kattint\u00e1sra kellene kiny\u00edlnia, nem pedig hoverrel<\/strong>. Hab\u00e1r ut\u00f3bbi is n\u00e9pszer\u0171, az almen\u00fc kattint\u00e1ssal val\u00f3 megnyit\u00e1sa egy sokkal megb\u00edzhat\u00f3bb \u00e9s intuit\u00edvabb megold\u00e1s. M\u00e1r csak az\u00e9rt is, mivel k\u00f6vetkezetesebb haszn\u00e1latot tesz lehet\u0151v\u00e9 a sz\u00e1m\u00edt\u00f3g\u00e9pek \u00e9s az \u00e9rint\u0151k\u00e9perny\u0151k eset\u00e9ben.<\/p>\n\n\n\n R\u00e1ad\u00e1sul elker\u00fclhet\u0151 vele a hover miatti felhaszn\u00e1l\u00f3i frusztr\u00e1ci\u00f3, ami megjelenhet a v\u00e9letlenszer\u0171 megnyit\u00e1s, illetve a hover-alag\u00fat miatt, amely ha t\u00fal sz\u0171kre siker\u00fcl, akkor a men\u00fc azel\u0151tt becsuk\u00f3dhat a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra, hogy el\u00e9rn\u00e9 a megc\u00e9lzott linket.<\/p>\n\n\n\n De felmer\u00fclhet olyan probl\u00e9ma is hover eset\u00e9n, hogy nem egy\u00e9rtelm\u0171 a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra, hogy mi kattinthat\u00f3. Ilyenkor ugyanis nem tudj\u00e1k, hogy a sz\u00fcl\u0151 link kattinthat\u00f3-e, am\u00edg r\u00e1 nem kattintanak. <\/p>\n\n\n\n Ugyanakkor a kattint\u00e1sra ny\u00edl\u00f3 men\u00fck eset\u00e9ben \u00e9rdemes haszn\u00e1lni a hover \u00e1llapotokat minden kattinthat\u00f3 elemn\u00e9l, mivel ez meger\u0151s\u00edti a felhaszn\u00e1l\u00f3t abban, hogy a link akt\u00edv \u00e9s kattinthat\u00f3. A kattinthat\u00f3 ter\u00fclet sz\u00edne megv\u00e1ltozhat, \u00edgy jelezve a hover \u00e1llapotot. A kattinthat\u00f3 ter\u00fcletnek \u00e9s a hover-ter\u00fcletnek persze azonosnak kell lennie. <\/p>\n\n\n\n Egy\u00e9bk\u00e9nt az almen\u00fc becsuk\u00e1s\u00e1nak is kattint\u00e1sra kellene t\u00f6rt\u00e9nnie: teh\u00e1t, ha a felhaszn\u00e1l\u00f3 m\u00e1shov\u00e1 kattint a weboldalon vagy megnyit egy m\u00e1sik almen\u00fct, akkor az addig nyitva l\u00e9v\u0151 almen\u00fc bez\u00e1r\u00f3dik. A felhaszn\u00e1l\u00f3k t\u00f6bbs\u00e9ge sz\u00e1m\u00e1ra ez a megold\u00e1s a legk\u00e9zenfekv\u0151bb.<\/p>\n\n\n\n L\u00e9nyeges k\u00e9rd\u00e9s, hogy leny\u00edl\u00f3 vagy pedig mega men\u00fct alkalmazzunk. Ha p\u00e9ld\u00e1ul a monitoron megjelen\u0151 weboldal hagyom\u00e1nyos men\u00fc elrendez\u00e9s\u0171 (teh\u00e1t van egy v\u00edzszintes men\u00fcs\u00e1v a weboldal tetej\u00e9n), akkor k\u00e9t almen\u00fct\u00edpus k\u00f6z\u00fcl v\u00e1laszthatsz: az egyik az egyhas\u00e1bos leny\u00edl\u00f3, a m\u00e1sik a t\u00f6bbhas\u00e1bos leny\u00edl\u00f3. Eg\u00e9szen nyolc linkig haszn\u00e1lhat\u00f3 az egyhas\u00e1bos megold\u00e1s, de ha m\u00e1r f\u00fcgg\u0151leges g\u00f6rget\u00e9sre lenne sz\u00fcks\u00e9g a men\u00fc hossza miatt, akkor vagy \u00e1t kell rendezni a dolgokat vagy mega men\u00fct kell haszn\u00e1lni. A mega men\u00fcr\u0151l a navig\u00e1ci\u00f3s men\u00fc kialak\u00edt\u00e1s\u00e1r\u00f3l sz\u00f3l\u00f3 bejegyz\u00e9s\u00fcnkben m\u00e1r \u00edrtunk r\u00e9szletesen, \u00edgy itt erre nem t\u00e9r\u00fcnk ki.<\/p>\n\n\n\n V\u00e9g\u00fcl monitoros megjelen\u00e9sn\u00e9l lehet\u0151v\u00e9 kellene tenni a billenty\u0171k seg\u00edts\u00e9g\u00e9vel t\u00f6rt\u00e9n\u0151 navig\u00e1ci\u00f3t is, hiszen nem mindenki szeret egeret haszn\u00e1lni. Ez azt jelenti, hogy minden link eset\u00e9ben kell lennie egy f\u00f3kusz-\u00e1llapotnak, \u00edgy a felhaszn\u00e1l\u00f3 l\u00e1tja, hogy hol j\u00e1r. \u00c1ltal\u00e1ban egy s\u00f6t\u00e9tebb keret j\u00f3 jelz\u00e9se a f\u00f3kusz-\u00e1llapotnak.<\/p>\n\n\n\n A hagyom\u00e1nyos men\u00fcelrendez\u00e9s ritk\u00e1n m\u0171k\u00f6dik j\u00f3l mobilkijelz\u0151k\u00f6n. Ha egyszer\u0171en csak lekicsiny\u00edted a men\u00fct a kisebb kijelz\u0151h\u00f6z igaz\u00edtva, akkor nem fogj\u00e1k tudni elolvasni a men\u00fcpontokat a felhaszn\u00e1l\u00f3k. Ez\u00e9rt a f\u0151men\u00fct sokszor egyszer\u0171s\u00edteni kell. Ezt elrejt\u00e9ssel \u00e9rheted el, \u00edgy a f\u0151men\u00fc egyszer\u0171bb lesz, \u00e9s csak a legfontosabb linkeket tartalmazza.<\/p>\n\n\n\n Elrejtheted a teljes men\u00fct is, ilyenkor hamburger ikont haszn\u00e1lhatsz, vagy egy k\u00f6nnyen el\u00e9rhet\u0151 lebeg\u0151 gombot. Ha id\u0151sebb felhaszn\u00e1l\u00f3knak sz\u00f3l a weboldalad, akkor hamburger ikon helyett egy „men\u00fc” felirat\u00fa doboz praktikusabb lehet. De ha bizonyos funkci\u00f3kat kiemeln\u00e9l, akkor azokat f\u00fclekk\u00e9nt is megjelen\u00edtheted az oldal als\u00f3 vagy fels\u0151 r\u00e9sz\u00e9n. <\/p>\n\n\n\n A men\u00fct sokf\u00e9lek\u00e9ppen megjelen\u00edtheted, haszn\u00e1lhatsz teljes sz\u00e9less\u00e9g\u0171 elrendez\u00e9st vagy ak\u00e1r egy oldals\u00e1vot s\u00f6t\u00e9tebb h\u00e1tt\u00e9rrel. A men\u00fc legyen g\u00f6rgethet\u0151, hogy minden men\u00fcelemhez hozz\u00e1f\u00e9rjenek a felhaszn\u00e1l\u00f3k ak\u00e1r kisebb mobilokon is.<\/p>\n\n\n\n Fontos, hogy k\u00f6nnyen bez\u00e1rhat\u00f3 legyen a men\u00fc, \u00edgy ha a felhaszn\u00e1l\u00f3k mell\u00e9 kattintanak, akkor csuk\u00f3djon be. De egy X gombot is \u00e9rdemes lehet emellett haszn\u00e1lni. A hamburger ikonb\u00f3l X v\u00e1lhat, vagy egyszer\u0171en csak a jobb fels\u0151 sarokban elhelyezel egy X-et. <\/p>\n\n\n\n \u00c9rdemes kibonthat\u00f3 szakaszokat haszn\u00e1lni az egyes almen\u00fckh\u00f6z, ami azt jelenti, hogy egyes men\u00fcpontok kinyithat\u00f3k olyan form\u00e1n, hogy a sz\u00fcl\u0151-elem alatt ny\u00edlnak ki \u00e9s egy elt\u00e9r\u0151 sz\u00ednnel jelzik, hogy egy al\u00e1rendelt szakaszr\u00f3l van sz\u00f3. Tedd lehet\u0151v\u00e9, hogy a felhaszn\u00e1l\u00f3k egyszerre t\u00f6bb almen\u00fct is kibontva tartsanak. Az almen\u00fck megl\u00e9t\u00e9t lefel\u00e9 mutat\u00f3 ny\u00edllal vagy h\u00e1romsz\u00f6gekkel jelezheted.<\/p>\n\n\n\n Ha egy megamen\u00fc vagy egy t\u00f6bbszintes almen\u00fc bonyol\u00edtja a helyzetet, akkor \u00e9rdemesebb az almen\u00fct r\u00e1helyezni a sz\u00fcl\u0151 men\u00fcre. Ilyenkor sz\u00fcks\u00e9g van egy „Vissza” gombra is, mellyel visszal\u00e9phet a felhaszn\u00e1l\u00f3 a fels\u0151bb szintre. <\/p>\n\n\n Ami m\u00e9g hasznos lehet, hogy m\u00edg asztali g\u00e9pes megjelen\u00e9sn\u00e9l praktikus megold\u00e1s, ha a men\u00fcben jelezz\u00fck, hogy mely linken j\u00e1r a felhaszn\u00e1l\u00f3 \u00e9s melyik ennek a sz\u00fcl\u0151 linkje, addig mobilos megjelen\u00e9sn\u00e9l \u00e9rdemes enn\u00e9l tov\u00e1bb menni, \u00e9s a men\u00fcre val\u00f3 kattint\u00e1sn\u00e1l automatikus kiny\u00edl\u00f3 almen\u00fct alkalmazni, \u00e9s jelezni a linket, hogy a felhaszn\u00e1l\u00f3 egyb\u0151l l\u00e1ssa, hol j\u00e1r az oldalon.<\/p>\n\n\n\n M\u00edg kor\u00e1bban egyeduralkod\u00f3 volt, az elm\u00falt \u00e9vekben kiszorult a weboldalakr\u00f3l az oldals\u00f3, illetve vertik\u00e1lis navig\u00e1ci\u00f3s men\u00fc. Ugyanakkor mostan\u00e1ban ism\u00e9t megjelentek olyan, j\u00f3l megtervezett, friss weboldalak, melyek a fels\u0151 men\u00fcsor vagy a hamburger ikon helyett a bal oldalon elhelyezett men\u00fct haszn\u00e1lnak. <\/p>\n\n\n\n Persze legink\u00e1bb csak akkor mer\u00fcl fel a f\u00fcgg\u0151leges navig\u00e1ci\u00f3 lehet\u0151s\u00e9ge, amikor annyi men\u00fcpont ker\u00fcl egy navig\u00e1ci\u00f3s men\u00fcbe, hogy nem igaz\u00e1n f\u00e9r el a megszokott v\u00edzszintes elrendez\u00e9sben. Els\u0151 k\u00f6rben a weboldaltulajdonosok azzal pr\u00f3b\u00e1lkoznak, hogy kisebbre vegy\u00e9k a men\u00fcben szerepl\u0151 linkek bet\u0171it, r\u00f6videbb c\u00edmk\u00e9ket pr\u00f3b\u00e1lnak alkalmazni, vagy \u00f6sszezs\u00fafolj\u00e1k az egyes men\u00fcpontokat.<\/p>\n\n\n\n S\u0151t, egyesek ahhoz a v\u00e9gs\u0151 eszk\u00f6zh\u00f6z ny\u00falnak, hogy elkezdenek kivenni kev\u00e9sb\u00e9 fontosnak t\u0171n\u0151 elemeket a men\u00fcb\u0151l, csak hogy elf\u00e9rjen a rendelkez\u00e9sre \u00e1ll\u00f3 ter\u00fcleten. Ez viszont azt jelenti, hogy a l\u00e1togat\u00f3knak sokkal t\u00f6bb id\u0151be telik az \u00e1ltaluk keresett kateg\u00f3ri\u00e1t megtal\u00e1lni.<\/p>\n\n\n\n Pedig, ha nem f\u00e9r el egy men\u00fc v\u00edzszintesen a weboldal fejl\u00e9c\u00e9ben, akkor a Nielsen Norman Group tan\u00e1csa szerint<\/a> ott a lehet\u0151s\u00e9g egy vertik\u00e1lis men\u00fc kialak\u00edt\u00e1s\u00e1ra. De vajon \u00e9rdemes Neked is elgondolkodnod az alkalmaz\u00e1s\u00e1n?<\/p>\n\n\n\n A vertik\u00e1lis men\u00fc \u00fajb\u00f3li megjelen\u00e9se tulajdonk\u00e9ppen a hamburger ikonok elterjed\u00e9s\u00e9nek k\u00f6vetkezm\u00e9nye. Ezek ugyanis kattint\u00e1sra kiny\u00edlnak. Igaz, hogy k\u00fcl\u00f6nb\u00f6z\u0151 form\u00e1kban – teh\u00e1t elfoglalhatj\u00e1k a teljes kijelz\u0151t is ak\u00e1r -, m\u00e9gis jellemz\u0151en lefel\u00e9 ny\u00edlnak, \u00e9s teszik l\u00e1that\u00f3v\u00e1 a navig\u00e1ci\u00f3s men\u00fct. Ha innen tov\u00e1bbl\u00e9p\u00fcnk, akkor ak\u00e1r \u00e1lland\u00f3v\u00e1 is tehetj\u00fck a weboldalunk bal sz\u00e9l\u00e9n a men\u00fc megjelen\u00e9s\u00e9t.<\/p>\n\n\n\n Az ilyen men\u00fc \u00e1ltal\u00e1ban a bal oldalon<\/strong> jelenik meg – ugyan\u00fagy, ahogy \u00e9vekkel ezel\u0151tt az oldals\u00f3 men\u00fck -, meglehet\u0151sen minimalist\u00e1k<\/strong>, gyakran ovarlayk\u00e9nt l\u00e1that\u00f3k, ugyanakkor kifejezetten sok whitespace-t haszn\u00e1lnak<\/strong>, \u00edgy csak n\u00e9h\u00e1ny j\u00f3l haszn\u00e1lhat\u00f3 opci\u00f3 ker\u00fcl r\u00e1juk. Magukban foglalhatj\u00e1k a navig\u00e1ci\u00f3s linkeken t\u00fal a log\u00f3t, a k\u00f6z\u00f6ss\u00e9gi m\u00e9dia ikonokat \u00e9s a keres\u00e9s mez\u0151t is.<\/p>\n\n\n Vannak persze olyan t\u00e9nyez\u0151k, melyeknek meg kell felelni\u00fck, hogy m\u0171k\u00f6djenek. Fontos a megjelen\u00e9s\u00fckn\u00e9l, hogy kell\u0151en kontrasztosak legyenek<\/strong> a weboldal t\u00f6bbi r\u00e9sz\u00e9vel, ez\u00e1ltal v\u00e1lva \u00e9szrevehet\u0151v\u00e9 a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra. Haszn\u00e1lhat\u00f3nak kell lenni\u00fck mobilon<\/strong> is, ami nem egyszer\u0171, valamint el\u00e9g sz\u00e9lesnek<\/strong> ahhoz, hogy olvashat\u00f3 bet\u0171t\u00edpussal \u00edr\u00f3djanak.<\/p>\n\n\n\n Szint\u00e9n l\u00e9nyeges, hogy az oldals\u00f3 men\u00fc ne legyen zs\u00fafolt<\/strong>, ne pr\u00f3b\u00e1ljuk kihaszn\u00e1lni a rendelkez\u00e9s\u00fcnkre \u00e1ll\u00f3 teljes teret. A megfelel\u0151 whitespace haszn\u00e1lata<\/a> itt is javasolt, s\u0151t k\u00f6telez\u0151. Az \u00fcres t\u00e9r r\u00e1ir\u00e1ny\u00edtja a men\u00fcre a felhaszn\u00e1l\u00f3k tekintet\u00e9t<\/strong>, \u00e9s jav\u00edtja a weboldal haszn\u00e1lhat\u00f3s\u00e1g\u00e1t.<\/p>\n\n\n\n Kezdj\u00fck tal\u00e1n az el\u0151ny\u00f6kkel:<\/p>\n\n\n\n H\u00e1tr\u00e1nyai:<\/p>\n\n\n\n A f\u00fcgg\u0151leges navig\u00e1ci\u00f3s s\u00e1vot mindig a bal oldalra<\/strong> \u00e9rdemes elhelyezni. Ennek oka, hogy a felhaszn\u00e1l\u00f3k a weboldalak bal oldal\u00e1ra figyelnek els\u0151sorban, mik\u00f6zben a jobb oldalon elhelyezked\u0151 elemeket \u00e9szre sem veszik (mivel \u00e1ltal\u00e1ban itt helyezkednek el a hirdet\u00e9sek).<\/p>\n\n\n\n Emellett fontos, hogy a men\u00fc vizu\u00e1lisan elk\u00fcl\u00f6n\u00fclj\u00f6n<\/strong> a weboldal t\u00f6bbi r\u00e9sz\u00e9t\u0151l. Egy elt\u00e9r\u0151 sz\u00f6veg- vagy h\u00e1tt\u00e9rsz\u00edn mindenk\u00e9ppen indokolhat\u00f3 lehet, de a szeg\u00e9lyek is hat\u00e9konyak tudnak lenni az elv\u00e1laszt\u00e1s jelz\u00e9s\u00e9ben.<\/p>\n\n\n\n Szint\u00e9n fontos, hogy a f\u00fcgg\u0151leges men\u00fct ne ism\u00e9teld meg horizont\u00e1lisan<\/strong> is. Mostan\u00e1ban egyre t\u00f6bbsz\u00f6r lehet tal\u00e1lkozni azzal, hogy egy weboldalon jelen van egy v\u00edzszintes men\u00fcs\u00e1v, benne egy hamburger ikonnal, mely egy f\u00fcgg\u0151leges men\u00fct nyit le. Ez a kett\u0151z\u00e9s sz\u00fcks\u00e9gtelen \u00e9s ak\u00e1r zavar\u00f3 is lehet a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra.<\/p>\n\n\n\n Szint\u00e9n sokszor lehet tal\u00e1lkozni azzal, hogy a sz\u00f6veges kateg\u00f3riac\u00edmk\u00e9k helyett ikonokat haszn\u00e1lnak<\/strong> egy-egy weboldalon, \u00e9s a sz\u00f6veg csak akkor jelenik meg a l\u00e1togat\u00f3 sz\u00e1m\u00e1ra, amikor r\u00e1kattint, meg\u00e9rinti, vagy a c\u00edmke f\u00f6l\u00e9 viszi az eg\u00e9rmutat\u00f3t. <\/p>\n\n\n\n Sokan az\u00e9rt d\u00f6ntenek asztali g\u00e9pes megjelen\u00e9s eset\u00e9ben az ikon m\u00f6g\u00e9 elrejt\u00e9s mellett, hogy ne vegyenek el ter\u00fcletet a tartalomt\u00f3l. Ez azonban \u00faj probl\u00e9m\u00e1kat eredm\u00e9nyez. <\/p>\n\n\n\n Egyr\u00e9szt az\u00e9rt, mert a felhaszn\u00e1l\u00f3k nem felt\u00e9tlen\u00fcl \u00e9rtik meg az ikonok jelent\u00e9s\u00e9t els\u0151re<\/strong>. Ilyenkor pedig egyszer\u0171en nem vesznek tudom\u00e1st a navig\u00e1ci\u00f3s men\u00fcr\u0151l. De akik kapcsolatba l\u00e9pnek vele, azokn\u00e1l is nagyobb az interakci\u00f3s k\u00f6lts\u00e9g \u00e9s az ikonok \u00e9rtelmez\u00e9se miatti kognit\u00edv terhel\u00e9s.<\/p>\n\n\n\n Ez\u00e9rt ink\u00e1bb ne rejtsd el a kateg\u00f3riac\u00edmk\u00e9ket ikonok m\u00f6g\u00e9<\/strong>, akkor sem, ha a f\u00fcgg\u0151leges men\u00fc t\u00fal sok helyet foglalna el. Ha ikont haszn\u00e1lsz, akkor mell\u00e9j\u00fck \u00e9rdemes egy folyamatosan l\u00e1that\u00f3 sz\u00f6vegc\u00edmk\u00e9t helyezni, nem csak az\u00e9rt, mert egy\u00e9rtelm\u0171bb\u00e9 teszik azt, hanem az\u00e9rt is, mert n\u00f6veli az \u00e9rinthet\u0151 r\u00e9sz m\u00e9ret\u00e9t. <\/p>\n\n\n\n V\u00e9g\u00fcl pedig, ha t\u00fal hossz\u00fa f\u00fcgg\u0151leges men\u00fcd van, \u00e9rdemes a kev\u00e9sb\u00e9 fontos men\u00fcpontokat a lista v\u00e9g\u00e9re helyezni<\/strong>. Egy hossz\u00fa men\u00fc eset\u00e9ben ugyanis jelentkezhet az a probl\u00e9ma, hogy a men\u00fc alja m\u00e1r t\u00fall\u00f3g a hajt\u00e1son. \u00c9s mivel a felhaszn\u00e1l\u00f3knak k\u00fcl\u00f6nb\u00f6z\u0151 kijelz\u0151ik vannak, nem igaz\u00e1n tudod, hogy egy l\u00e1togat\u00f3 eset\u00e9ben hov\u00e1 ker\u00fcl majd a hajt\u00e1s a weboldaladon. A megold\u00e1s teh\u00e1t annyi, hogy fontoss\u00e1gi sorrend alapj\u00e1n rendezed el a men\u00fcpontokat, a legfontosabbal kezdve.<\/p>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/07\/navigacio.png\")
A hat\u00e9kony navig\u00e1ci\u00f3s men\u00fc tervez\u00e9s\u00e9nek h\u00e1rom szab\u00e1lya<\/strong><\/h2>\n\n\n\n
1. Kezdd az inform\u00e1ci\u00f3s architekt\u00far\u00e1val!<\/h4>\n\n\n\n
\n
2. Legyen egyszer\u0171<\/h4>\n\n\n\n
3. V\u00e1laszd meg a t\u00e1jol\u00e1st!<\/h4>\n\n\n\n
Az alapvet\u0151 k\u00e9rd\u00e9sek, melyekre v\u00e1laszt kell adnia a navig\u00e1ci\u00f3nak<\/strong><\/h2>\n\n\n\n
Hogyan jutottam el ide?<\/h4>\n\n\n\n
Hol vagyok?<\/h4>\n\n\n\n
Hova mehetek?<\/h4>\n\n\n\n
Hogyan jutok el oda?<\/h4>\n\n\n\n
Mire figyelj a navig\u00e1ci\u00f3s men\u00fc kialak\u00edt\u00e1s\u00e1n\u00e1l?<\/h2>\n\n\n\n
Tedd l\u00e1that\u00f3v\u00e1!<\/h4>\n\n\n\n
A megszokott helyre tedd a navig\u00e1ci\u00f3s men\u00fct!<\/h4>\n\n\n\n
Tedd interakt\u00edv megjelen\u00e9s\u0171v\u00e9 a men\u00fcket!<\/h4>\n\n\n\n
A men\u00fcdnek legyen kell\u0151 vizu\u00e1lis s\u00falya!<\/h4>\n\n\n\n
Kontrasztos sz\u00ednt haszn\u00e1lj a navig\u00e1ci\u00f3s men\u00fc link-sz\u00f6veg\u00e9n\u00e9l!<\/h4>\n\n\n\n
Jelezd a felhaszn\u00e1l\u00f3knak, hogy az, ahol \u00e9ppen tart\u00f3zkodnak, hol helyezkedik el a men\u00fcben!<\/h4>\n\n\n\n
Haszn\u00e1lj \u00e9rthet\u0151 linkc\u00edmk\u00e9ket!<\/h4>\n\n\n\n
Legyenek k\u00f6nnyen \u00e1ttekinthet\u0151k a c\u00edmk\u00e9k!<\/h4>\n\n\n\n
Nagyobb weboldalakn\u00e1l olyan men\u00fcket haszn\u00e1lj, melyek r\u00e9v\u00e9n az als\u00f3bb szintekre is betekinthetnek az emberek!<\/h4>\n\n\n\n
Haszn\u00e1lj helyi men\u00fct a kapcsol\u00f3d\u00f3 tartalmakn\u00e1l!<\/h4>\n\n\n\n
Haszn\u00e1ld ki a vizu\u00e1lis kommunik\u00e1ci\u00f3 lehet\u0151s\u00e9geit!<\/h4>\n\n\n\n
Legyenek el\u00e9g nagyok a men\u00fc-linkek!<\/h4>\n\n\n\n
A leny\u00edl\u00f3k ne legyen sem t\u00fal kicsik, sem t\u00fal nagyok<\/h4>\n\n\n\n
Haszn\u00e1lj ragad\u00f3s men\u00fcket a hossz\u00fa oldalakon!<\/h4>\n\n\n\n
K\u00f6nny\u0171 hozz\u00e1f\u00e9rhet\u0151s\u00e9g a gyakran haszn\u00e1lt elemekhez<\/h4>\n\n\n\n
\u00c9rdemes leny\u0171g\u00f6zn\u00f6d a felhaszn\u00e1l\u00f3kat valamilyen eredeti \u00e9s \u00e9rdekes men\u00fc-megold\u00e1ssal?<\/h4>\n\n\n\n
Mi az a h\u00e1romkattint\u00e1sos szab\u00e1ly? \u00c9s van-e l\u00e9tjogosults\u00e1ga?<\/h2>\n\n\n\n
\n
Honnan sz\u00e1rmazik a h\u00e1romkattint\u00e1sos szab\u00e1ly?<\/h4>\n\n\n\n
A h\u00e1romkattint\u00e1sos szab\u00e1ly alkalmaz\u00e1sa<\/h4>\n\n\n\n
Mire figyelj kattint\u00e1ssz\u00e1ml\u00e1l\u00e1s helyett?<\/h4>\n\n\n\n
\n
7 navig\u00e1ci\u00f3s hiba, amit mindenk\u00e9ppen ker\u00fclj el!<\/strong><\/h2>\n\n\n\n
1. T\u00fal sok lehet\u0151s\u00e9g<\/h4>\n\n\n\n
2. Rossz lehet\u0151s\u00e9gek<\/h4>\n\n\n\n
3. Ha nem haszn\u00e1lhat\u00f3 minden eszk\u00f6z\u00f6n<\/h4>\n\n\n\n
4. T\u00fal \u00f6sszetett men\u00fc<\/h4>\n\n\n\n
5. K\u00f6vetkezetlens\u00e9g<\/h4>\n\n\n\n
6. T\u00fal hossz\u00fa horgonysz\u00f6vegek<\/h4>\n\n\n\n
7. A rossz hangnem<\/h4>\n\n\n\n
Mi az az els\u0151dleges \u00e9s m\u00e1sodlagos men\u00fc?<\/h2>\n\n\n\n
Els\u0151dleges navig\u00e1ci\u00f3<\/h4>\n\n\n\n
M\u00e1sodlagos navig\u00e1ci\u00f3<\/h4>\n\n\n\n
A navig\u00e1ci\u00f3s men\u00fck t\u00edpusai<\/h2>\n\n\n\n
V\u00edzszintes navig\u00e1ci\u00f3s men\u00fc<\/h4>\n\n\n\n
F\u00fcgg\u0151leges men\u00fc<\/h4>\n\n\n\n
![\"Bal](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2016\/07\/yoke.jpg\")
Tab-szer\u0171 navig\u00e1ci\u00f3<\/h4>\n\n\n\n
\n
Hamburger men\u00fc<\/h4>\n\n\n\n
Hamburger men\u00fc + men\u00fc<\/h4>\n\n\n\n
![\"Hamburger](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/01\/02.jpg\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/02\/kinyilo-menu.gif\")
Leny\u00edl\u00f3 men\u00fc<\/h4>\n\n\n\n
![\"Leny\u00edl\u00f3](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/05\/lenyilo-menu.png\")
Teljes kijelz\u0151s navig\u00e1ci\u00f3s men\u00fc<\/h4>\n\n\n\n
![\"Teljes](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/01\/07.jpg\")
![\"Nemcsak](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/01\/03.jpg\")
\u00d3ri\u00e1si, leny\u00edl\u00f3 men\u00fck (mega men\u00fck)<\/h4>\n\n\n\n
![\"Egy](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/01\/131.jpg\")
Als\u00f3 men\u00fc<\/h4>\n\n\n\n
![\"Itt](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2016\/07\/makgoods.jpg\")
Anim\u00e1lt navig\u00e1ci\u00f3s elemek<\/h4>\n\n\n\n
Amikor nincs navig\u00e1ci\u00f3s men\u00fc<\/h4>\n\n\n\n
Hamburger men\u00fc \u00e9s a rejtett navig\u00e1ci\u00f3: mi a gond vele? Mikor haszn\u00e1ld \u00e9s mikor ne?<\/strong><\/h2>\n\n\n\n
M\u00e1r a ’70-es \u00e9vekben megjelent<\/h4>\n\n\n\n
Nem egy\u00e9rtelm\u0171 az emberek sz\u00e1m\u00e1ra<\/h4>\n\n\n\n
\n
Nehezebb\u00e9 \u00e9s lassabb\u00e1 v\u00e1lik a feladatok elv\u00e9gz\u00e9se a hamburger men\u00fc miatt<\/h4>\n\n\n\n
\n
\n
Mi\u00e9rt nem gond ez?<\/h4>\n\n\n\n
Az inform\u00e1ci\u00f3t hangs\u00falyozd, ne a navig\u00e1ci\u00f3t<\/h4>\n\n\n\n
![\"A](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2016\/08\/Youtube-app.png\")
Bel\u00fclr\u0151l kifel\u00e9 tervezve<\/h4>\n\n\n\n
\n
Mikor \u00e9rdemes haszn\u00e1lnod a hamburger men\u00fct?<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/08\/uber-hamburger-menu.jpg\")
\n
Mi az a mega men\u00fc? \u00c9s mikor m\u0171k\u00f6dik hat\u00e9konyan?<\/strong><\/h2>\n\n\n\n
A mega men\u00fck jellemz\u0151i<\/h4>\n\n\n\n
\n
![\"john-lewis-mega-menu\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/03\/john-lewis-mega-menu.jpg\")
Mi\u00e9rt jobb a mega men\u00fc, mint a megszokott leny\u00edl\u00f3 men\u00fck?<\/h4>\n\n\n\n
\n
![\"K\u00e9pek](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/03\/moleskine-oriasmenu.jpg\")
Id\u0151z\u00edt\u00e9s a mega men\u00fckn\u00e9l hover haszn\u00e1lata eset\u00e9n<\/h4>\n\n\n\n
\n
\n
![\"(Forr\u00e1s:](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/03\/mega-menu-problema.jpg\")
Az elemek csoportos\u00edt\u00e1sa a mega men\u00fcben<\/h4>\n\n\n\n
\n
Maradjon egyszer\u0171 az \u00f3ri\u00e1smen\u00fc<\/h4>\n\n\n\n
Hozz\u00e1f\u00e9rhet\u0151s\u00e9g<\/h4>\n\n\n\n
\n
Hogyan alak\u00edts ki t\u00f6bbszintes men\u00fct a weboldaladon? (FRISS\u00cdT\u00c9S, 2023.05.16.)<\/h2>\n\n\n\n
Elvek, melyek b\u00e1rmely kijelz\u0151n\u00e9l alkalmazhat\u00f3k<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2022\/03\/zoho.png\")
Speci\u00e1lis szab\u00e1lyok desktop oldaln\u00e1l<\/h3>\n\n\n\n
Speci\u00e1lis szab\u00e1lyok mobilkijelz\u0151kh\u00f6z<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2022\/03\/toyota.png\")
Mi\u00e9rt lehet j\u00f3 v\u00e1laszt\u00e1s egy f\u00fcgg\u0151leges navig\u00e1ci\u00f3s men\u00fc?<\/h2>\n\n\n\n
Hogyan n\u00e9zzen ki, \u00e9s mire \u00e9rdemes figyelni?<\/h3>\n\n\n\n
![\"arbor-boston\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/05\/arbor-boston.jpg\")
Milyen el\u0151nyei \u00e9s h\u00e1tr\u00e1nyai vannak?<\/h3>\n\n\n\n
\n
![\"mammoth-media\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/05\/mammoth-media.jpg\")
\n
Hogyan alak\u00edts ki egy j\u00f3l haszn\u00e1lhat\u00f3 f\u00fcgg\u0151leges men\u00fct?<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/07\/bdo-711-595.png\")
<\/figure>\n\n\n\nTov\u00e1bbi tippek f\u00fcgg\u0151leges navig\u00e1ci\u00f3s men\u00fc kialak\u00edt\u00e1s\u00e1hoz<\/h4>\n\n\n\n
\n