Az emberek szeretik a rendet, mert az \u00e9rthet\u0151bb\u00e9 teszi a dolgokat. Ugyanez igaz a felhaszn\u00e1l\u00f3i fel\u00fcletekn\u00e9l, p\u00e9ld\u00e1ul a weboldaladn\u00e1l is. Amikor a felhaszn\u00e1l\u00f3i fel\u00fclet elemei j\u00f3l elrendezettek, akkor az emberek k\u00f6nnyebben tudj\u00e1k azt haszn\u00e1lni, \u00e9s el\u00e9gedettebbek vele.<\/strong><\/p>\n\n\n\n\n\n\n\n A vizu\u00e1lis hierarchia az alapja a hat\u00e9kony inform\u00e1ci\u00f3s architekt\u00far\u00e1nak<\/a>, \u00e9s minden sikeres digit\u00e1lis term\u00e9knek. Term\u00e9szetesen a k\u00fcl\u00f6nb\u00f6z\u0151 digit\u00e1lis term\u00e9kek elt\u00e9r\u0151 vizu\u00e1lis hierarchi\u00e1t ig\u00e9nyelhetnek, ugyanakkor van n\u00e9h\u00e1ny k\u00f6z\u00f6s jellemz\u0151je is a fel\u00fclet hat\u00e9kony elrendez\u00e9snek.<\/p>\n\n\n\n A vizu\u00e1lis hierarchia egy olyan alapvet\u0151 technika, mely a designfolyamat sor\u00e1n ker\u00fcl alkalmaz\u00e1sra. A Gestalt elm\u00e9letre<\/a> \u00e9p\u00fcl, mely azt vizsg\u00e1lja, hogy az emberek mik\u00e9nt \u00e9rz\u00e9kelnek elemeket, ha azok kapcsolatban vannak egym\u00e1ssal, valamint megmutatja, hogy az emberek hogyan rendeznek csoportokba vizu\u00e1lis elemeket.<\/p>\n\n\n\n A vizu\u00e1lis hierarchia olyan m\u00f3don igyekszik bemutatni egy term\u00e9k (p\u00e9ld\u00e1ul egy weboldal) tartalm\u00e1t, hogy az emberek meg\u00e9rts\u00e9k az egyes megjelen\u0151 elemek fontoss\u00e1gi sorrendj\u00e9t. \u00dagy rendezi el az egyes UI-elemeket, hogy az emberi agy k\u00e9pes legyen ezek fontoss\u00e1g\u00e1t megk\u00fcl\u00f6nb\u00f6ztetni fizikai jellemz\u0151ik k\u00f6z\u00f6tti k\u00fcl\u00f6nbs\u00e9gek – mint a m\u00e9ret\u00fck, a sz\u00edn\u00fck, a st\u00edlusuk, stb. – alapj\u00e1n.<\/p>\n\n\n\n A j\u00f3 vizu\u00e1lis hierarchia a felhaszn\u00e1l\u00f3i fel\u00fclet elemeinek hat\u00e9kony elrendez\u00e9s\u00e9t jelenti, melynek r\u00e9v\u00e9n a tartalom k\u00f6nnyen \u00e9rhet\u0151v\u00e9 \u00e9s vonz\u00f3v\u00e1 v\u00e1lik, a felhaszn\u00e1l\u00f3k k\u00f6nnyen navig\u00e1lnak az oldalon, \u00e9s er\u0151fesz\u00edt\u00e9s n\u00e9lk\u00fcl k\u00e9pesek kapcsolatba l\u00e9pni vele. A vizu\u00e1lis hierarchia vezeti a felhaszn\u00e1l\u00f3t a fontos inform\u00e1ci\u00f3kt\u00f3l a kev\u00e9sb\u00e9 fontosak fel\u00e9. Kialak\u00edt\u00e1s\u00e1nak eszk\u00f6zei: a sz\u00edn, a m\u00e9ret, a forma, a t\u00e1vols\u00e1g, az ar\u00e1ny \u00e9s a t\u00e1jol\u00e1s.<\/p>\n\n\n\n A felhaszn\u00e1l\u00f3i fel\u00fclet egyes elemeinek vizu\u00e1lis megjelen\u00edt\u00e9se nagy hat\u00e1ssal van a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyre. Ha a tartalom egyes elemei z\u0171rzavarosak, akkor az emberek nem tudnak navig\u00e1lni a term\u00e9ken bel\u00fcl, vagy megfelel\u0151en kapcsolatba l\u00e9pni vele.<\/p>\n\n\n\n R\u00e1ad\u00e1sul, egy rendezetlen sz\u00f6veges tartalom nehezen is \u00e1tl\u00e1that\u00f3, \u00edgy a felhaszn\u00e1l\u00f3k nem tudj\u00e1k gyorsan \u00e1tfutni, \u00e9s jelent\u0151s er\u0151fesz\u00edt\u00e9st kell tenni\u00fck annak \u00e9rdek\u00e9ben, hogy megtal\u00e1lj\u00e1k azokat az adatokat, melyeket keresnek. A rossz felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny gyenge felhaszn\u00e1l\u00f3i el\u00e9gedetts\u00e9ghez vezet, vagyis a term\u00e9k nem lesz vonz\u00f3 az emberek sz\u00e1m\u00e1ra.<\/p>\n\n\n\n Ha m\u00e1r kiv\u00e1lasztottad valamennyi tartalmi elemet, melynek meg kell jelennie a weboldalon, akkor itt az id\u0151 ezeket elrendezni a fel\u00fcleten. Az \u00fczleti c\u00e9ljaid alapj\u00e1n elk\u00e9sz\u00edtesz egy fontoss\u00e1gi sorrendet, \u00e1tgondolod, hogy mely UI-elemek fontosak. Egy web\u00e1ruh\u00e1z eset\u00e9n p\u00e9ld\u00e1ul a term\u00e9kfot\u00f3k azok, melyek megragadj\u00e1k a felhaszn\u00e1l\u00f3k figyelm\u00e9t. A c\u00edmsor csak a k\u00e9p ut\u00e1n k\u00f6vetkezik, hogy elmagyar\u00e1zza, mi l\u00e1that\u00f3 a k\u00e9pen. A k\u00f6vetkez\u0151 fontos elem a CTA gomb, mellyel megv\u00e1s\u00e1rolhatj\u00e1k a term\u00e9ket az emberek. Ugyanakkor minden weboldaln\u00e1l m\u00e1s lehet a fontoss\u00e1gi sorrend.<\/p>\n\n\n\n Nyilv\u00e1n nem teheted r\u00e1 a list\u00e1dat a weboldaladra \u00edrott form\u00e1ban, \u00edgy a list\u00e1n szerepl\u0151 elemeket el kell rendezni a fel\u00fcleten. Milyen t\u00e9nyez\u0151k seg\u00edtenek az elemek sorrendbe \u00e1ll\u00edt\u00e1s\u00e1ban, \u00e9s milyen t\u00e9nyez\u0151ket vegy\u00e9l figyelembe?<\/p>\n\n\n\n A sz\u00edn a legnagyobb hat\u00e1s\u00fa eleme minden vizu\u00e1lis designnak. A sz\u00edneknek ugyanis jelent\u0151s szerep\u00fck van abban, hogy az emberek mik\u00e9nt \u00e9rz\u00e9kelik a vil\u00e1got. A sz\u00ednekkel kifejezhet\u0151 az elemek fontoss\u00e1gi sorrendje is. Gondolj bele, hogy mekkora k\u00fcl\u00f6nbs\u00e9g van egy sz\u00fcrke vagy egy piros sz\u00edn\u0171 kereszt k\u00f6z\u00f6tt a hat\u00e1s\u00e1t tekintve. K\u00fcl\u00f6n\u00f6sen akkor, ha a piros kereszt t\u00f6bb sz\u00fcrke k\u00f6z\u00f6tt jelenik meg.<\/p>\n\n\n\n A sz\u00edneknek megvan a maguk hierarchi\u00e1ja, az alapj\u00e1n, hogy milyen er\u0151sen hatnak az emberekre. Az olyan er\u0151s sz\u00ednek, mint a piros vagy a narancss\u00e1rga k\u00f6nnyen magukra vonj\u00e1k a figyelmet. De b\u00e1rmely er\u0151s sz\u00edn ki tud emelkedni egy semleges h\u00e1tt\u00e9rb\u0151l. Hiszen vannak olyan kev\u00e9sb\u00e9 er\u0151teljes sz\u00ednek, mint a feh\u00e9r, a b\u00e9zs, a sz\u00fcrke melyek jobban m\u0171k\u00f6dnek h\u00e1tt\u00e9rk\u00e9nt, \u00e9s ink\u00e1bb kiemelik az er\u0151s sz\u00edneket.<\/p>\n\n\n\n Nem szabad elfeledkezni arr\u00f3l sem, hogy a sz\u00ednek \u00e9rz\u00e9seket v\u00e1ltanak ki, jelent\u00e9s\u00fck van, melyeket tudatalatti szinten \u00e9rtelmeznek is az emberek. Teh\u00e1t m\u00e9g az el\u0151tt lesz egy hat\u00e1sa a weboldaladon haszn\u00e1lt sz\u00edneknek, hogy a l\u00e1togat\u00f3k b\u00e1rmit is tudn\u00e1nak a c\u00e9gedr\u0151l.<\/p>\n\n\n\n A k\u00fcl\u00f6nb\u00f6z\u0151 sz\u00ednek haszn\u00e1lat\u00e1val a designerek meger\u0151s\u00edthetik a felhaszn\u00e1l\u00f3i fel\u00fclet elemeinek hierarchi\u00e1j\u00e1t. P\u00e9ld\u00e1ul egy CTA gombn\u00e1l egy hars\u00e1ny sz\u00ednnel k\u00f6nnyen el\u00e9rhet\u0151 az, hogy a felhaszn\u00e1l\u00f3k els\u0151k\u00e9nt figyeljenek fel r\u00e1, ha a t\u00f6bb elem sokkal visszafogottabb sz\u00edneket haszn\u00e1l.<\/p>\n\n\n\n R\u00e1ad\u00e1sul, ha bizonyos elemek eset\u00e9ben azonos sz\u00ednt alkalmazunk, akkor az azt mutatja az emberek sz\u00e1m\u00e1ra, hogy azok \u00f6sszekapcsol\u00f3dnak valami\u00e9rt. Azaz sz\u00ednek r\u00e9v\u00e9n csoportokat alak\u00edthatunk ki. P\u00e9ld\u00e1ul, ha a v\u00e1s\u00e1rl\u00e1s gombok minden esetben pirosak, akkor az emberek minden esetben a piros gombokat fogj\u00e1k keresni, ha rendelni szeretn\u00e9nek, mert tudj\u00e1k, hogy a piros gombok ezt jelzik.<\/p>\n\n\n\n A m\u00e1sik er\u0151teljes eszk\u00f6z a vizu\u00e1lis hierarchia kialak\u00edt\u00e1s\u00e1ra a m\u00e9ret. K\u00e9pzelj el egy olyan \u00e1br\u00e1t, melyen egy nagy n\u00e9gyzet mellett h\u00e1rom kicsi sorakozik. Ez minden tov\u00e1bbi inform\u00e1ci\u00f3 n\u00e9lk\u00fcl mindj\u00e1rt kommunik\u00e1lja is a kapcsolatot, a hierarchi\u00e1t az egyes elemek k\u00f6z\u00f6tt.<\/p>\n\n\n\n Ez azon a t\u00f6rv\u00e9nyszer\u0171s\u00e9g\u00e9n alapul, hogy a nagy dolgok az emberek sz\u00e1m\u00e1ra mindig fontosabbak, mint a kicsik. Ez az oka annak, hogy a felhaszn\u00e1l\u00f3k figyelme automatikusan a nagy k\u00e9pekre v\u00e1ndorol. A designereknek meg kell k\u00fcl\u00f6nb\u00f6ztetni\u00fck a fontoss\u00e1gi szinteket minden tartalmi elem eset\u00e9ben, \u00e9s ebb\u0151l kiindulva alak\u00edtani az egyes elemeket kisebb\u00e9 vagy nagyobb\u00e1.<\/p>\n\n\n\n A webdesignban teh\u00e1t a megszokott strat\u00e9gia az, hogy a legfontosabb elemek kapj\u00e1k a legnagyobb m\u00e9retet, \u00e9s min\u00e9l kev\u00e9sb\u00e9 fontos valami, az ann\u00e1l kisebb lesz. A m\u00e9ret teh\u00e1t alapvet\u0151en hat\u00e1rozza meg a vizu\u00e1lis hierarchi\u00e1t. Ez nagyon j\u00f3l megmutatkozik a bet\u0171m\u00e9retekn\u00e9l, hiszen a c\u00edm mindig nagyobb bet\u0171vel \u00edrjuk mint az alc\u00edmeket, \u00e9s a sz\u00f6vegt\u00f6rzset.<\/p>\n\n\n\n A sz\u00f6veges tartalom \u00e1ltal\u00e1ban a felhaszn\u00e1l\u00f3i fel\u00fcletek fontos r\u00e9sze. A vizu\u00e1lis hierarchia ez\u00e9rt megmutatkozik itt is. A tipogr\u00e1fiai hierarchia a vizu\u00e1lis hierarchia egy k\u00fcl\u00f6n\u00e1ll\u00f3 r\u00e9sze. A rendszer a sz\u00f6vegeknek a felhaszn\u00e1l\u00f3i befogad\u00e1s sz\u00e1m\u00e1ra legmegfelel\u0151bb m\u00f3don t\u00f6rt\u00e9n\u0151 elrendez\u00e9s\u00e9t c\u00e9lozza. A designerek m\u00f3dos\u00edtj\u00e1k \u00e9s vari\u00e1lj\u00e1k a bet\u0171t\u00edpusokat, hogy kontrasztot alak\u00edtsanak ki a k\u00f6z\u00f6ns\u00e9ges sz\u00f6veg \u00e9s a legfontosabb sz\u00f6vegelemek – melyeket a felhaszn\u00e1l\u00f3nak els\u0151k\u00e9nt kell \u00e9szrevennie – k\u00f6z\u00f6tt. A bet\u0171k k\u00fcl\u00f6nb\u00f6zhetnek m\u00e9ret\u0171ket, sz\u00edn\u0171ket, csal\u00e1djukat tekintve<\/strong>.<\/p>\n\n\n\n A tipogr\u00e1fiai hierarchia kialak\u00edt\u00e1s\u00e1hoz meg kell k\u00fcl\u00f6nb\u00f6ztetni c\u00edmsorokat, alc\u00edmeket, sz\u00f6vegt\u00f6rzset, call to actiont, k\u00e9pal\u00e1\u00edr\u00e1sokat, stb. A hat\u00e9kony vizu\u00e1lis hierarchia kialak\u00edt\u00e1s\u00e1hoz minden elemet k\u00fcl\u00f6nb\u00f6z\u0151 szintekre kell besorolni. Milyen szintekr\u0151l van sz\u00f3?<\/p>\n\n\n\n Els\u0151dleges szint<\/strong>. Ide tartoznak a legnagyobb m\u00e9ret\u0171 bet\u0171k, jellemz\u0151en ilyenek a c\u00edmsorok. Az els\u0151dleges szint c\u00e9lja az, hogy gondoskodjon a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra a legfontosabb inform\u00e1ci\u00f3kr\u00f3l, valamint felh\u00edvja a figyelm\u00fcket mag\u00e1ra a term\u00e9kre.<\/p>\n\n\n\n M\u00e1sodlagos szint<\/strong>. A sz\u00f6vegeknek ez a t\u00edpusa olyan, melyet k\u00f6nny\u0171 \u00e1tfutni. Rendszerint ez jelenik meg az alc\u00edmek, a k\u00e9pal\u00e1\u00edr\u00e1sok eset\u00e9ben, melyek seg\u00edtenek a felhaszn\u00e1l\u00f3knak navig\u00e1lniuk a tartalomban.<\/p>\n\n\n\n A harmadik szint<\/strong>. Ide tartozik a sz\u00f6vegt\u00f6rzs \u00e9s m\u00e1s adatok. A designerek jellemz\u0151en kism\u00e9ret\u0171 bet\u0171ket alkalmaznak ezekn\u00e9l, melyek azonban m\u00e9g mindig k\u00f6nnyen olvashat\u00f3k.<\/p>\n\n\n\n A sz\u00f6veges elemek k\u00fcl\u00f6nb\u00f6z\u0151 szintekre helyez\u00e9s\u00e9vel azt seg\u00edtj\u00fck el\u0151, hogy a felhaszn\u00e1l\u00f3k k\u00f6nnyebben jussanak el az egyik sz\u00f6vegegys\u00e9gt\u0151l a m\u00e1sikig, mik\u00f6zben az inform\u00e1ci\u00f3kat a megfelel\u0151 sorrendben kapj\u00e1k meg.<\/p>\n\n\n\n Mobilos megjelen\u00e9sn\u00e9l az el\u0151bbiek annyiban v\u00e1ltoznak, hogy a kism\u00e9ret\u0171 kijelz\u0151 nem b\u00edr el h\u00e1rom szintet, csak kett\u0151t. Ez\u00e9rt jellemz\u0151en a m\u00e1sodlagos szinthez tartoz\u00f3 elemek, mint p\u00e9ld\u00e1ul az alc\u00edmek, elt\u0171nnek annak \u00e9rdek\u00e9ben, hogy a mobilos felhaszn\u00e1l\u00f3i fel\u00fclet megjelen\u00e9se kell\u0151en letisztult legyen.<\/p>\n\n\n\n A form\u00e1k a sz\u00ednekhez hasonl\u00f3an \u00fczenteket k\u00f6zvet\u00edtenek, szem\u00e9lyis\u00e9get, jelent\u00e9st adnak egyes elemeknek. A geometrikus form\u00e1k fontos kell\u00e9kei a hat\u00e9kony kommunik\u00e1ci\u00f3nak a webdesignban, mivel jelent\u00e9s hordoznak, \u00e9s ezt r\u00e1ad\u00e1sul gyorsabban adj\u00e1k \u00e1t, mint egy sz\u00f6veg.<\/p>\n\n\n\n A form\u00e1k \u00e1ltal\u00e1ban ikonok form\u00e1j\u00e1ban jelennek meg, melyek leggyakrabban geometriai form\u00e1kb\u00f3l \u00e1llnak \u00f6ssze. Egy l\u00e1jkol\u00e1s, egy let\u00f6lt\u00e9s, egy h\u00edv\u00e1s, mint \u00fczenet k\u00f6nnyed\u00e9n \u00e1tadhat\u00f3 ikonok, azaz geometriai form\u00e1k \u00e1ltal.<\/p>\n\n\n\n K\u00e9pzelj el n\u00e9gyzeteket egy sorban, melyek k\u00f6z\u00fcl egy a soron k\u00edv\u00fcl \u00e1ll. Melyik n\u00e9gyzetre ir\u00e1nyul ekkor a figyelem? Amikor valamely elem megt\u00f6ri a strukt\u00far\u00e1t, akkor ezzel felh\u00edvja mag\u00e1ra a figyelmet, \u00e9s meghat\u00e1rozza kapcsolat\u00e1t a t\u00f6bbi elemhez is (mint k\u00edv\u00fcl\u00e1ll\u00f3 \u00e9s elt\u00e9r\u0151).<\/p>\n\n\n\n Egy teljesen szab\u00e1lyos sor mindig unalmas, hacsak valami meg nem t\u00f6ri. A reszponz\u00edv webdesign miatt m\u00e1r r\u00e9g\u00f3ta r\u00e1csokban gondolkodnak a designerek, \u00edgy a „r\u00e1cs megt\u00f6r\u00e9se” az, amivel fel lehet h\u00edvni egy elemre a figyelmet. Az az elem, mely megt\u00f6ri a r\u00e1csot nagyobb vizu\u00e1lis s\u00falyt kap, azaz fontosabb\u00e1 v\u00e1lik.<\/p>\n\n\n\n Egy felhaszn\u00e1l\u00f3i fel\u00fcleten mindig t\u00f6bb elem jelenik meg. Annak \u00e9rdek\u00e9ben, hogy ezek mindegyike \u00e9szlelhet\u0151 legyen az emberek sz\u00e1m\u00e1ra, n\u00e9mi mag\u00e1nszf\u00e9r\u00e1t kell ezen elemek sz\u00e1m\u00e1ra biztos\u00edtani. Ez azt jelenti, hogy megfelel\u0151 teret kell hagyni k\u00f6z\u00f6tt\u00fck. Ez a negat\u00edv t\u00e9r, vagy m\u00e1s n\u00e9ven whitespace<\/a>, amivel kor\u00e1bban m\u00e1r r\u00e9szletesen foglalkoztunk.<\/p>\n\n\n\n Sokan nem \u00fagy gondolnak az \u00fcres t\u00e9rre, mint a weboldal egy elem\u00e9re, pedig a szak\u00e9rt\u0151k sz\u00e1m\u00e1ra ez egy hat\u00e9kony eszk\u00f6z a megfelel\u0151 kompoz\u00edci\u00f3 \u00e9s vizu\u00e1lis hierarchia kialak\u00edt\u00e1s\u00e1hoz. A megfelel\u0151 mennyis\u00e9g\u0171 negat\u00edv t\u00e9r az egyes elemek k\u00f6z\u00f6tt seg\u00edt a felhaszn\u00e1l\u00f3knak abban, hogy \u00e9szrevegy\u00e9k \u00e9s feldolgozz\u00e1k \u0151ket. Min\u00e9l nagyobb negat\u00edv t\u00e9r vesz k\u00f6r\u00fcl egy elemet, az ann\u00e1l fontosabb\u00e1 v\u00e1lik<\/strong>.<\/p>\n\n\n\n A whitespace minden vizu\u00e1lis kompoz\u00edci\u00f3 l\u00e9nyegi r\u00e9sze. Egy olyan eszk\u00f6z, melynek seg\u00edts\u00e9g\u00e9vel minden UI-elem \u00e9szrevehet\u0151v\u00e9 v\u00e1lik a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra. A tervez\u0151k csoportos\u00edthatj\u00e1k vagy \u00e9pp elv\u00e1laszthatj\u00e1k egym\u00e1st\u00f3l az elemeket, \u00edgy alak\u00edtva ki a hat\u00e9kony megjelen\u00e9st. A negat\u00edv t\u00e9r teh\u00e1t seg\u00edt hangs\u00falyozni bizonyos elemeket, melyek kiemelt figyelmet kapnak a felhaszn\u00e1l\u00f3kt\u00f3l.<\/p>\n\n\n\n Mint azt m\u00e1r kor\u00e1bban is eml\u00edtett\u00fck, a vizu\u00e1lis hierarchia a Gestalt elveken alapul. Ez\u00e9rt kell kiemelt figyelmet ford\u00edtani az egyes UI-elemek k\u00f6zels\u00e9g\u00e9re. Az emberek hajlamosak arra, hogy az egyes vizu\u00e1lis elemeket csoportokba rendezz\u00e9k. Ha n\u00e9h\u00e1ny elem k\u00f6z\u00f6tt kisebb a t\u00e1vols\u00e1g, akkor az emberek egy csoportk\u00e9nt tekintenek r\u00e1juk.<\/p>\n\n\n\n A designerek ez\u00e9rt a t\u00e1vols\u00e1got olyan eszk\u00f6zk\u00e9nt haszn\u00e1lj\u00e1k, mely seg\u00edt a tartalmat kateg\u00f3ri\u00e1kra bontani. Ha a weboldalon az elemeket ennek megfelel\u0151en helyezed el, akkor a felhaszn\u00e1l\u00f3k k\u00f6nnyen tudj\u00e1k kategoriz\u00e1lni \u0151ket.<\/p>\n\n\n\n Ha az emberek azt veszik \u00e9szre, hogy bizonyos elemek hasonl\u00f3nak n\u00e9znek ki, akkor automatikusan egy csoportba tartoz\u00f3nak tekintik \u0151ket. Ha a designerek egy mint\u00e1t ism\u00e9telnek, akkor az abba tartoz\u00f3 elemeket egym\u00e1shoz tartoz\u00f3nak tartj\u00e1k majd a felhaszn\u00e1l\u00f3k. P\u00e9ld\u00e1ul egy weboldalon, ahol nagy mennyis\u00e9g\u0171 sz\u00f6veg van, a fontosabb mondatokat ki lehet emelni egy elt\u00e9r\u0151 sz\u00ednnel. Ha az emberek csak az elt\u00e9r\u0151 sz\u00edn\u0171 mondatokat olvass\u00e1k, akkor az egyik kulcsfontoss\u00e1g\u00fa inform\u00e1ci\u00f3t\u00f3l a m\u00e1sikig jutnak el.<\/p>\n\n\n\n \u00d6sszegezve teh\u00e1t elmondhat\u00f3, hogy amikor a felhaszn\u00e1l\u00f3i fel\u00fclet elemei rendezettek – \u00e9s nem csak eszt\u00e9tikai szempontb\u00f3l, hanem a funkci\u00f3kat is figyelembe v\u00e9ve -, akkor az emberek \u00e9lvezik az adott term\u00e9k haszn\u00e1lat\u00e1t, \u00edgy az hat\u00e9konyabban oldja meg a probl\u00e9m\u00e1ikat. Az er\u0151teljes vizu\u00e1lis hierarchia jav\u00edtja a navig\u00e1ci\u00f3 m\u0171k\u00f6d\u00e9s\u00e9t, \u00edgy az emberek ez\u00e1ltal k\u00f6nnyebben t\u00e1j\u00e9koz\u00f3dnak a term\u00e9ken bel\u00fcl. Mindez pedig jobb felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt jelent.<\/p>\n\n\n\n A mozg\u00f3 elemeknek nagyobb a vizu\u00e1lis s\u00falya, ha \u00e1ll\u00f3 elemek veszik k\u00f6r\u00fcl. A nyomtatott designban a mozg\u00e1st, mint eszk\u00f6zt nem lehetett haszn\u00e1lni, azonban a digit\u00e1lis fel\u00fcleteken m\u00e1r hat\u00e9konyan alkalmazhat\u00f3 a hierarchia kialak\u00edt\u00e1s\u00e1ra. A mozg\u00e1s gyakran azt fejezi ki. hogy egy elemmel kapcsolatba tud l\u00e9pni a felhaszn\u00e1l\u00f3.<\/p>\n\n\n\n Gyakran emlegetj\u00fck, hogy az emberek a weboldalak gondos elolvas\u00e1sa helyett csak \u00e1tfutj\u00e1k azokat<\/a>. Azt akarj\u00e1k meg\u00e1llap\u00edtani, hogy van-e rajtuk olyan inform\u00e1ci\u00f3, ami \u00e9rdekelheti \u0151ket. A gyakori mint\u00e1k az F \u00e9s a Z minta<\/a>. Az F minta els\u0151sorban olyan digit\u00e1lis term\u00e9kekn\u00e9l figyelhet\u0151 meg, ahol sok a sz\u00f6veg. Ilyenek p\u00e9ld\u00e1ul a blogok, h\u00edroldalak, stb. El\u0151sz\u00f6r v\u00edzszintesen mozdul a tekintet\u00fck, majd a bal oldalon lejjebb v\u00e1ndorol, \u00e9s ism\u00e9t v\u00edzszintesen mozdul. Ezut\u00e1n pedig az oldalon lefel\u00e9 tart f\u00fcgg\u0151leges ir\u00e1nyban, hiszen az emberek keresik a sz\u00e1mukra fontos kulcsszavakat a bekezd\u00e9sek elej\u00e9n.<\/p>\n\n\n\n A Z-forma ink\u00e1bb olyan weboldalakra jellemz\u0151, melyeken kevesebb a sz\u00f6veges tartalom, vagy amelyeket nem kell lefel\u00e9 g\u00f6rgetni. Ilyenkor az emberek tekintete el\u0151sz\u00f6r v\u00edzszintesen halad az oldal tetej\u00e9n a fontos inform\u00e1ci\u00f3k ut\u00e1n kutatva, majd a v\u00e9g\u00e9re \u00e9rve az ellent\u00e9tes sarokba mozdul, ahonnan szint\u00e9n v\u00edzszintesen halad jobb oldali ir\u00e1nyba. Ezeket a form\u00e1kat figyelembe v\u00e9ve olyan pontokra helyezhet\u0151k a legfontosabb elemek, ahol biztosan \u00e1thalad a felhaszn\u00e1l\u00f3k tekintete.<\/p>\n\r\nMi az a vizu\u00e1lis hierarchia?<\/h2>\n\n\n\n
Vizu\u00e1lis hierarchia \u00e9s felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny<\/h3>\n\n\n\n
A vizu\u00e1lis hierarchia kialak\u00edt\u00e1s\u00e1nak eszk\u00f6zei<\/h2>\n\n\n\n
Sz\u00edn<\/h3>\n\n\n\n
M\u00e9ret<\/h3>\n\n\n\n
Bet\u0171t\u00edpus<\/h3>\n\n\n\n
Forma<\/h3>\n\n\n\n
A sor megt\u00f6r\u00e9se<\/h3>\n\n\n\n
Negat\u00edv t\u00e9r<\/h3>\n\n\n\n
K\u00f6zels\u00e9g<\/h3>\n\n\n\n
Ism\u00e9tl\u00e9s<\/h3>\n\n\n\n
Mozg\u00e1s<\/h3>\n\n\n\n
\u00c1tfut\u00e1si mint\u00e1k<\/h3>\n\n\n\n