Keresés
Header Háttér

Webshark Blog

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

2018-01-170 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, és minden sikeres digitális terméknek. A jó vizuális hierarchia a felhasználói felület elemeinek hatékony elrendezését jelent, melynek révén a tartalom könnyen érhetővé és vonzóvá válik, a felhasználók könnyen navigálnak az oldalon, és erőfeszítés nélkül képesek kapcsolatba lépni vele. Természetesen a különböző digitális termékek eltérő vizuális hierarchiát igényelnek, ugyanakkor van néhány közös jellemzője is a felület hatékony elrendezésnek.

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 ezek fontosságát 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.

Mire figyelj 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.

Üzleti célok

Az egyes digitális termékek mögött üzleti célok állnak. Annak érdekében, hogy elérd őket át kell gondolni, hogy mely UI-elemek fontosak, és sorrendbe kell őket állítani a szerepük szerint. Egy webáruház esetén a termékfotók azok, melyek megragadják a felhasználók figyelmét. A címsor csak a kép után következik, hogy elmagyarázza, mi látható a képen. A következő fontos elem a CTA gomb, mellyel megvásárolhatják a terméket az emberek. Ugyanakkor minden weboldalnál más lehet a fontossági sorrend, amit azonban a weboldalkészítés során figyelembe kell venni.

Átfutási minták

Gyakran emlegetjük, hogy az emberek a weboldalak gondos elolvasása helyett csak átfutják azokat. Azt akarják megállapítani, hogy van-e rajtuk olyan információ, ami érdekelheti őket. A gyakori minták az F és a Z minta. Az F minta elsősorban olyan digitális termékeknél figyelhető meg, ahol sok a szöveg. Ilyenek például a blogok, híroldalak, stb. Először vízszintesen mozdul a tekintetük, majd a bal oldalon lejjebb vándorol, és ismét vízszintesen mozdul. Ezután pedig az oldalon lefelé tart függőleges irányban, hiszen az emberek keresik a számukra fontos kulcsszavakat a bekezdések elején.

A Z-forma inkább olyan weboldalakra jellemző, melyeken kevesebb a szöveges tartalom, vagy amelyeket nem kell lefelé görgetni. Ilyenkor az emberek tekintete először vízszintesen halad az oldal tetején a fontos információk után kutatva, majd a végére érve az ellentétes sarokba mozdul, ahonnan szintén vízszintesen halad jobb oldali irányba. Ezeket a formákat figyelembe véve olyan pontokra helyezhetők a legfontosabb elemek, ahol biztosan áthalad a felhasználók tekintete.

Funkcionalitás

A vizuális hierarchiának nem csak esztétikai vonatkozása van. A megfelelő elrendezés révén válik világossá a termék (weboldal) használata. Az olyan vizuális hierarchia, mely csak az esztétikát veszi figyelembe, nem hatékony. Egy rosszul elrendezett tartalom gyenge felhasználói élményhez vezet. Vagyis, miközben megpróbálod kialakítani a megfelelő vizuális hierarchiát, mindig vedd figyelembe az egyes elemek funkcióját, és szerepét a navigációs folyamatban!

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ínekkel ugyanis kifejezhető a dolgok fontossági sorrendje.

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.

Ráadásul, ha bizony elemek esetében azonos színt alkalmazunk, akkor az azt mutatja az emberek számára, hogy azok összekapcsolódnak valamiért. Például, ha a vásárlás gombok minden esetben pirosak, akkor az emberek minden esetben a piros gombokat fogják keresni, ha rendelni szeretnének.

Betűtípus

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.

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.

A whitespace minden vizuális kompozíció lényegi része. Egy olyan eszköz, melynek segítségével minden UI-elem észrevehetővé válik a felhasználó számára. A tervezők csoportosíthatják vagy épp elválaszthatják egymástól az elemeket, így alakítva ki a hatékony megjelenést. A negatív tér segít hangsúlyozni bizonyos elemeket, melyek kiemelt figyelmet kapnak a felhasználóktól.

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 – és nem csak esztétikai szempontból, hanem a funkciókat is figyelembe véve -, akkor az emberek élvezik az adott termék használatát, így az hatékonyabban oldja meg a problémáikat. Az erőteljes vizuális hierarchia javítja a navigáció működését, így az emberek ezáltal könnyebben tájékozódnak a terméken belül. Mindez pedig jobb felhasználói élményt jelent.

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.