A vizuális hierarchia kialakításával azért érdemes foglalkozni, mert általa vezethetjük a látogató figyelmét és elérhetjük, hogy a tartalmat olyan sorrendben „fogyassza el”, ahogyan azt mi szeretnénk. A megfelelő vizuális hierarchia kialakításának rengeteg eszköze ismert, amelyekből most az alábbiakat szeretném bemutatni:
Kontraszt és színek használata
Figyelem irányítása a méretekkel
Játék a formákkal
Elhelyezés és white space
Hierarchia kialakítása a méretekkel – mert igenis számit!
A méret és a méretarány egy nagyon kézenfekvő dolog, ugyanakkor a megfelelő használatán van a hangsúly. Fontos, hogy a lényegi részt emeljük ki ilyen módon, vezetve a látogatót és érdemes figyelnünk arra, hogy túlzásba se essünk. Ne emeljünk ki mindent, illetve amit kiemelünk azt is ízlésesen tegyük.
Az alábbi kép egy megfelelő példa arra, hogy hogyan lehet vezetni a látogató figyelmét csupán a megfelelő méretek alkalmazásával.
Ugye, hogy te is abban a sorrendben olvastad el, ahogyan azt én megterveztem? 😉
Hierarchia színekkel és kontraszttal
A kontrasztot és a színeket sokszor arra használhatjuk, hogy valamit kiemeljünk a többi hasonló elem közül.
Megszokott módszer például az ajánlatok közül a legkedveltebb vagy a legelőnyösebb ajánlat kiemelésének a használatára is, ahogy azt az alábbi képen is megfigyelhetitek.
Ugyanakkor fontos, hogy mindig figyeljünk a megfelelő kontrasztra, mivel csupán az eltérő szín alkalmazása nem biztos, hogy a kívánt eredményt hozza, ugyanis számít, hogy milyen színeket milyen környezetben használunk.
Erre tökéletes példa az alábbi két kép. Ha megfigyeled, akkor mind a két esetben ugyan azok a színek kerültek feltüntetésre, csupán a háttér változott. Míg világos háttérrel a kék is jól érvényesül, addig egy sötétebb háttéren már teljesen jelentéktelenné válik. A sárgával pedig ugyan ez a helyzet csak éppen fordítva.
A színekkel történő kiemelésre remek példák a weboldalon található gombok is, aminek pontosan a látogatók figyelmének megragadása a célja. Ezért mindig érdemes az arculatba illő, de a fő tartalomtól eltérő szín használata CTA gombok esetében.
Akár csak a színekkel a formákkal is ugyan így tudjuk vezetni a felhasználó figyelmét, ugyanis egy eltérő formával izolálni tudjuk az adott elemet,tehát „ki fog lógni a sorból”.
Ezt az alábbi példa is jól szemlélteti:
Szintén jól alkalmazható gombok, vagy hasonló típusú tartalmak esetében a fontosabb, újabb, hasznosabb tartalom kiemelésére.
Hagyd levegőhöz jutni a tartalmadat és meghálálja!
Nagyon fontos, hogy sok esetben éppen azért vész el az információ, mert telezsúfoljuk a felületeket tartalommal és nem szűrhető ki jól a lényeg.
Valójában, ha nagy tereket hagyunk üresen, akkor akarva-akaratlanul a felhasználó szeme a tartalmunkra fog tévedni. Talán a white space az egyik leghatásosabb eszköz a weben. Ennél jobban véleményem szerint semmi nem irányítja a figyelmet. Éppen ezért ez is a személyes kedvencem.
Az alábbi példákat azért hoztam, mert nagyon egyszerű mégis nagyon jó az, ahogyan felépülnek ezek az oldalak. Tökéletesen alkalmazzák a fentieket, vezetik a tekintetet és ezáltal az utadat is kialakítják az oldalon.
2019-ben kezdtem el foglalkozni a webdesignnal. A tanulási folyamat alatt rájöttem, hogy ez a szakma tökéletesen ötvözni azt amire szükségem van: a kreativitást és a probléma megoldást. Így 2021-ben elindult a vállalkozásom és az inBalance Webdesign.
A minap ebben a Threads bejegyzésemben feltettek a kérdést, hogy mi a legfontosabb “összetevője” a sikeres weboldalaknak. Mi az, amin áll vagy bukik egy weboldal sikeressége? A 45 szavazat közül 51% szerint a tartalom és...
Ha te is vágytál már arra, hogy lekövethesd hogyan is használják a weboldaladat a felhasználók, akkor ezt a megoldást Neked találták ki! Most ugyanis videón nézheted vissza, hogy hogyan boldogulnak - vagy éppen nem...
Ingyenes UX tippek vállalkozásoknak?!
Vágysz arra, hogy vállalkozásod digitális termékei kiemelkedően sikeresek legyenek? Légy egy támogató közösség tagja és ismerd meg a UX/UI designban rejlő végtelen lehetőségeket!