Webshark Blog

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. Természetesen a különböző digitális termékek eltérő vizuális hierarchiát igényelhetnek, 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.

A jó vizuális hierarchia a felhasználói felület elemeinek hatékony elrendezését jelenti, 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. A vizuális hierarchia vezeti a felhasználót a fontos információktól a kevésbé fontosak felé. Kialakításának eszközei: a szín, a méret, a forma, a távolság, az arány és a tájolás.

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.

A vizuális hierarchia kialakításának eszközei

Ha már kiválasztottad valamennyi tartalmi elemet, melynek meg kell jelennie a weboldalon, akkor itt az idő ezeket elrendezni a felületen. Az üzleti céljaid alapján elkészítesz egy fontossági sorrendet, átgondolod, hogy mely UI-elemek fontosak. Egy webáruház esetén például 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.

Nyilván nem teheted rá a listádat a weboldaladra írott formában, így a listán szereplő elemeket el kell rendezni a felületen. Milyen tényezők segítenek az elemek sorrendbe állításában, és milyen tényezőket vegyél figyelembe?

Szín

A szín a legnagyobb hatású eleme minden vizuális designnak. A színeknek ugyanis jelentős szerepük van abban, hogy az emberek miként érzékelik a világot. A színekkel kifejezhető az elemek fontossági sorrendje is. Gondolj bele, hogy mekkora különbség van egy szürke vagy egy piros színű kereszt között a hatását tekintve. Különösen akkor, ha a piros kereszt több szürke között jelenik meg.

A színeknek megvan a maguk hierarchiája, az alapján, hogy milyen erősen hatnak az emberekre. Az olyan erős színek, mint a piros vagy a narancssárga könnyen magukra vonják a figyelmet. De bármely erős szín ki tud emelkedni egy semleges háttérből. Hiszen vannak olyan kevésbé erőteljes színek, mint a fehér, a bézs, a szürke melyek jobban működnek háttérként, és inkább kiemelik az erős színeket.

Nem szabad elfeledkezni arról sem, hogy a színek érzéseket váltanak ki, jelentésük van, melyeket tudatalatti szinten értelmeznek is az emberek. Tehát még az előtt lesz egy hatása a weboldaladon használt színeknek, hogy a látogatók bármit is tudnának a cégedről.

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 bizonyos elemek esetében azonos színt alkalmazunk, akkor az azt mutatja az emberek számára, hogy azok összekapcsolódnak valamiért. Azaz színek révén csoportokat alakíthatunk ki. 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, mert tudják, hogy a piros gombok ezt jelzik.

Méret

A másik erőteljes eszköz a vizuális hierarchia kialakítására a méret. Képzelj el egy olyan ábrát, melyen egy nagy négyzet mellett három kicsi sorakozik. Ez minden további információ nélkül mindjárt kommunikálja is a kapcsolatot, a hierarchiát az egyes elemek között.

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 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á.

A webdesignban tehát a megszokott stratégia az, hogy a legfontosabb elemek kapják a legnagyobb méretet, és minél kevésbé fontos valami, az annál kisebb lesz. A méret tehát alapvetően határozza meg a vizuális hierarchiát. Ez nagyon jól megmutatkozik a betűméreteknél, hiszen a cím mindig nagyobb betűvel írjuk mint az alcímeket, és a szövegtörzset.

Betűtípus

A szöveges tartalom általában a felhasználói felületek fontos része. A vizuális hierarchia ezért megmutatkozik itt is. 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, szövegtörzset, 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.

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 szövegtörzs és más adatok. A designerek jellemzően kisméretű betűket alkalmaznak ezeknél, melyek azonban még mindig könnyen olvashatók.

A szöveges elemek különböző szintekre helyezésével azt segítjük 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.

Forma

A formák a színekhez hasonlóan üzenteket közvetítenek, személyiséget, jelentést adnak egyes elemeknek. A geometrikus formák fontos kellékei a hatékony kommunikációnak a webdesignban, mivel jelentés hordoznak, és ezt ráadásul gyorsabban adják át, mint egy szöveg.

A formák általában ikonok formájában jelennek meg, melyek leggyakrabban geometriai formákból állnak össze. Egy lájkolás, egy letöltés, egy hívás, mint üzenet könnyedén átadható ikonok, azaz geometriai formák által.

A sor megtörése

Képzelj el négyzeteket egy sorban, melyek közül egy a soron kívül áll. Melyik négyzetre irányul ekkor a figyelem? Amikor valamely elem megtöri a struktúrát, akkor ezzel felhívja magára a figyelmet, és meghatározza kapcsolatát a többi elemhez is (mint kívülálló és eltérő).

Egy teljesen szabályos sor mindig unalmas, hacsak valami meg nem töri. A reszponzív webdesign miatt már régóta rácsokban gondolkodnak a designerek, így a „rács megtörése” az, amivel fel lehet hívni egy elemre a figyelmet. Az az elem, mely megtöri a rácsot nagyobb vizuális súlyt kap, azaz fontosabbá válik.

Negatív tér

Egy felhasználói felületen mindig több elem jelenik meg. 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ás né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ó és vizuális hierarchia 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. Minél nagyobb negatív tér vesz körül egy elemet, az annál fontosabbá válik.

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 tehát 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.

Mozgás

A mozgó elemeknek nagyobb a vizuális súlya, ha álló elemek veszik körül. A nyomtatott designban a mozgást, mint eszközt nem lehetett használni, azonban a digitális felületeken már hatékonyan alkalmazható a hierarchia kialakítására. A mozgás gyakran azt fejezi ki. hogy egy elemmel kapcsolatba tud lépni a felhasználó.

Á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.