Keresés
Header Háttér

Webshark Blog

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

2017-10-180 komment

Vizuális hierarchia: hogyan rendezd el a tartalmaidat a weboldaladon?

Az emberek szeretik a rendet, mert az érthetőbbé teszi a dolgokat. Ugyanez igaz a felhasználói felületeknél, például a weboldaladnál is. Amikor a felhasználói felület elemei jól elrendezettek, akkor az emberek könnyebben tudják azt használni, és elégedettebbek vele.

A vizuális hierarchia az alapja a hatékony információs architektúrának. A felhasználói felület tartalmának megfelelő elrendezéséhez a designerek a vizuális hierarchiának nevezett technikát alkalmazzák. De mi is a vizuális hierarchia lényege, és hogyan segíthet Neked abban, hogy megfelelően rendezd el a tartalmaidat a weboldaladon?

Mi az a vizuális hierarchia?

A vizuális hierarchia egy olyan alapvető technika, mely a designfolyamat során kerül alkalmazásra. A Gestalt elméletre épül, mely azt vizsgálja, hogy az emberek miként érzékelnek elemeket, ha azok kapcsolatban vannak egymással, valamint megmutatja, hogy az emberek hogyan rendeznek csoportokba vizuális elemeket.

A vizuális hierarchia olyan módon igyekszik bemutatni egy termék (például egy weboldal) tartalmát, hogy az emberek megértsék az egyes megjelenő elemek fontossági sorrendjét. Úgy rendezi el az egyes UI-elemeket, hogy az emberi agy képes legyen ezeket megkülönböztetni fizikai jellemzőik közötti különbségek – mint a méretük, a színük, a stílusuk, stb. – alapján.

Vizuális hierarchia és felhasználói élmény

A felhasználói felület egyes elemeinek vizuális megjelenítése nagy hatással van a felhasználói élményre. Ha a tartalom egyes elemei zűrzavarosak, akkor az emberek nem tudnak navigálni a terméken belül, vagy megfelelően kapcsolatba lépni vele.

Ráadásul, egy rendezetlen szöveges tartalom nehezen is átlátható, így a felhasználók nem tudják gyorsan átfutni, és jelentős erőfeszítést kell tenniük annak érdekében, hogy megtalálják azokat az adatokat, melyeket keresnek. A rossz felhasználói élmény gyenge felhasználói elégedettséghez vezet, vagyis a termék nem lesz vonzó az emberek számára.

Tipográfiai hierarchia

A szöveges tartalom a felhasználói felület egyik legfontosabb része. A vizuális hierarchia ezért nagymértékben a tipográfiára épít. A tipográfiai hierarchia a vizuális hierarchia egy különálló része. A rendszer a szövegeknek a felhasználói befogadás számára legmegfelelőbb módon történő elrendezését célozza. A designerek módosítják és variálják a betűtípusokat, hogy kontrasztot alakítsanak ki a közönséges szöveg és a legfontosabb szövegelemek – melyeket a felhasználónak elsőként kell észrevennie – között. A betűk különbözhetnek méretűket, színűket, családjukat tekintve.

A tipográfiai hierarchia kialakításához meg kell különböztetni címsorokat, alcímeket, kenyérszöveget, call to actiont, képaláírásokat, stb. A hatékony vizuális hierarchia kialakításához minden elemet különböző szintekre kell besorolni. Milyen szintekről van szó?

Elsődleges szint. Ide tartoznak a legnagyobb méretű betűk, jellemzően ilyenek a címsorok. Az elsődleges szint célja az, hogy gondoskodjon a felhasználó számára a legfontosabb információkról, valamint felhívja a figyelmüket magára a termékre.

A másodlagos szint. A szövegeknek ez a típusa olyan, melyet könnyű átfutni. Rendszerint ez jelenik meg az alcímek, a képaláírások esetében, melyek segítenek a felhasználóknak navigálniuk a tartalomban.

A harmadik szint. Ide tartozik a kenyérszöveg és más adatok. A designerek jellemzően kisméretű betűket alkalmaznak ezeknél, melyek azonban még mindig könnyen olvashatók.

Mivel általában a szöveges tartalom hordozza a legtöbb információt a felhasználói felületen, ezért a designereknek az adatokat fokozatosan kell megjeleníteniük. A szöveges elemek különböző szintekre helyezésével azt segítik elő, hogy a felhasználók könnyebben jussanak el az egyik szövegegységtől a másikig, miközben az információkat a megfelelő sorrendben kapják meg.

Mobilos megjelenésnél az előbbiek annyiban változnak, hogy a kisméretű kijelző nem bír el három szintet, csak kettőt. Ezért jellemzően a másodlagos szinthez tartozó elemek, mint például az alcímek, eltűnnek annak érdekében, hogy a mobilos felhasználói felület megjelenése kellően letisztult legyen.

Milyen eszközöket használhatsz a vizuális hierarchia kialakításánál?

Ha már kiválasztottad valamennyi tartalmi elemet, melynek meg kell jelennie a weboldalon, akkor itt az idő ezeket sorrendbe rakni. Milyen eszközök segíthetnek a designereknek a felhasználói felület hatékony vizuális hierarchiájának kialakításában?

Méret

Az egyik legerőteljesebb eszköz a vizuális anyag átalakítására a méret. Ez azon a törvényszerűségén alapul, hogy a nagy dolgok az emberek számára mindig fontosabbak, mint a kicsik. Ez az oka annak, hogy a felhasználók figyelme automatikusan a nagy szavakra és a nagy képekre vándorol. A designereknek meg kell különböztetniük a fontossági szinteket minden tartalmi elem esetében, és ebből kiindulva alakítani az egyes elemeket kisebbé vagy nagyobbá.

Szín

A színeknek jelentős hatásuk van arra, hogy az emberek miként érzékelik a dolgokat. Ez az oka annak, hogy miért hatékony eszköz a színek használata a vizuális hierarchia kialakításánál.

A színeknek megvan a maguk hierarchiája, az alapján, hogy milyen erősen hatnak az emberekre. Vannak olyan erős színek, mint a piros, a narancs vagy a fekete, melyek könnyen magukra vonják a figyelmet. Másrészről viszont vannak olyan kevésbé erőteljes színek, mint a fehér vagy a bézs, melyek jobban működnek háttérként.

A különböző színek használatával a designerek megerősíthetik a felhasználói felület elemeinek hierarchiáját. Például egy CTA gombnál egy harsány színnel könnyen elérhető az, hogy a felhasználók elsőként figyeljenek fel rá, ha a több elem sokkal visszafogottabb színeket használ.

Kontraszt

A hierarchia a kontraszton alapul. A megfelelő kontraszt révén a felhasználók meg tudják különböztetni egymástól az egyes tartalmi elemeket. Kontrasztot lehet kialakítani színnel, mérettel és stílussal. Ugyanakkor ajánlott a kontrasztot egyensúlyban tartani, így az egyik tartalmi elem nem fogja teljesen elnyomni a másikat.

Negatív tér

Egy felhasználói felületen több elem is helyet kap. Annak érdekében, hogy ezek mindegyike észlelhető legyen az emberek számára, némi magánszférát kell ezen elemek számára biztosítani. Ez azt jelenti, hogy megfelelő teret kell hagyni közöttük. Ez a negatív tér, vagy másnéven whitespace, amivel korábban már részletesen foglalkoztunk.

Sokan nem úgy gondolnak az üres térre, mint a weboldal egy elemére, pedig a szakértők számára ez egy hatékony eszköz a megfelelő kompozíció kialakításához. A megfelelő mennyiségű negatív tér az egyes elemek között segít a felhasználóknak abban, hogy észrevegyék és feldolgozzák őket.

Közelség

Mint azt már korábban is említettük, a vizuális hierarchia a Gestalt elveken alapul. Ezért kell kiemelt figyelmet fordítani az egyes UI-elemek közelségére. Az emberek hajlamosak arra, hogy az egyes vizuális elemeket csoportokba rendezzék. Ha néhány elem között kisebb a távolság, akkor az emberek egy csoportként tekintenek rájuk. A designerek ezért a távolságot olyan eszközként használják, mely segít a tartalmat kategóriákra bontani. Ha a weboldalon az elemeket ennek megfelelően helyezed el, akkor a felhasználók könnyen tudják kategorizálni őket.

Ismétlés

Ha az emberek azt veszik észre, hogy bizonyos elemek hasonlónak néznek ki, akkor automatikusan egy csoportba tartozónak tekintik őket. Ha a designerek egy mintát ismételnek, akkor az abba tartozó elemeket egymáshoz tartozónak tartják majd a felhasználók. Például egy weboldalon, ahol nagy mennyiségű szöveg van, a fontosabb mondatokat ki lehet emelni egy eltérő színnel. Ha az emberek csak az eltérő színű mondatokat olvassák, akkor az egyik kulcsfontosságú információtól a másikig jutnak el.

Összegezve tehát elmondható, hogy amikor a felhasználói felület elemei rendezettek, az emberek élvezik az adott termék használatát, így az hatékonyabban oldja meg a problémáikat. Ráadásul az erőteljes vizuális hierarchia javítja a navigáció működését, és az emberek ezáltal könnyebben tájékozódnak a terméken belül.

(A bejegyzés ezen cikk szövege alapján készült.)

Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.