Vizuális hierarchia, avagy melyek a legfontosabb vizuális elemek egy honlapon

2020-10-06

Manapság már a legtöbb vállalkozás saját weboldallal rendelkezik. Ez nem csak azért hasznos, mert ezáltal lehet hirdetni, de a honlapodon keresztül tájékoztathatod a vásárlóidat a vállalkozásoddal kapcsolatos legfrissebb információkról. A megfelelően felépített weboldal a vállalkozásod színvonalát is tükrözi. Az igényes, letisztult honlap, megbízható és igényes szolgáltatásokra utalhat. Ebben a cikkben szeretnénk nektek egy pár tippet adni, hogy mi azok a tényezők, amelyek segíthetnek a honlapod megjelenésében.

A vizuális hierarchia a vizuális elemek elrendezésére, méretére, színére és kontrasztjára utal. Ez a hierarchia egy fontossági sorrendet állít fel az alapján, hogy a szem milyen sorrendben veszi észre őket. A webdesignerek ezt alkalmazzák annak érdekében, hogy először a fontos elemekre irányítsák a látogatók figyelmét. A vizuális hierarchia miatt követ egy bizonyos útvonalat a szemed, minden egyes alkalommal, mikor egy honlapot végigböngészel.

 

Elrendezés

Elrendezését tekintve a két legmeghatározóbb az F-minta és a Z-minta. Az F-mintát általában olyan weboldalakhoz szokták használni, ahol sok a szöveg, például blogoknál. Ilyenkor a látogató először a honlap bal oldalát, fentről lefelé nézi végig, keresve a kulcsszavakat vagy érdekes bekezdéseket. Amikor az olvasó talál egy érdekes bekezdést, akkor kezdi el rendesen, vízszintesen olvasni a sorokat.

A látogatók ritkán olvassák el a szöveg minden egyes szavát. Az első két bekezdés a legfontosabb, ennek kell tartalmazni a legérdekesebb kulcsszavakat.

A Z-mintát inkább olyan weboldalakon szokták használni, amik nem szövegre koncentrálnak. Ilyenkor a látogató először a honlap tetejét nézi végig, tehát a menüsort, majd mikor a végére ér, akkor a figyelme lefelé és baloldalra irányul. Itt újra megismétli, balról-jobbra nézi végig a következő sort. A Z-minta nagyszerű megoldás lehet olyan weboldalakra, ahol az elsődleges prioritás az egyszerűség, minimalizmus és letisztultság.

 

Szövegméret

Szövegméretet tekintve a nagyobb betűméret talán jobban felkelti az olvasó figyelmét, de nem minden esetben ez a legmegfelelőbb megoldás. Hasznos lehet, ha a weboldalad legfontosabb eleme a legnagyobb méretű, a részletek, bonyolultabb szövegrészek pedig inkább kisebbek. A szövegmérettel a látogató figyelme könnyen ráirányítható a call-to-action (cselekvésre ösztönző) gombokra. Persze ez nem azt jelenti, hogy ezt a gombot 10-szer nagyobbá kell tenni, ugyanis ez tolakodó lehet és az összhang pedig nagyon fontos a weboldal kialakításakor.

 

Színek

A vizuális kommunikációban nagyon fontos a színek használata. Könnyedén alkalmazhatóak a fontos képek vagy információk kiemelésére. Az élénk, piros vagy sárga színeket nehéz figyelmen kívül hagyni (lásd például a közlekedési tábláknál). A helyes színhasználat az egyik legfontosabb módszer az oldal elemeinek megkülönböztetésére és a figyelem felhívására. Érdemes hasonló színeket használni a kapcsolódó elemek csoportosítására. A színek megfelelő használatával a szöveget közelebbinek vagy távolabbinak is érzékeltethetjük. A melegebb színek sötét háttér előtt távoli, míg a sötétebb színek világos háttér előtt közeli hatást keltenek.

 

Kontraszt

Egy tanulmány szerint a kontraszt megfelelő használatával könnyedén irányítható a látogató figyelme. A cselekvésre ösztönző gombok színe helyett érdemes a háttér színének a kontrasztján állítani, vagy a gomb és a gombon lévő szöveg kontrasztján. Minél világosabb a háttér, annál jobban vonzzák a szemet a sötétebb elemek. A kontraszt miatt a szem olyan tárgyakra összpontosít, amelyek a környező tárgyakhoz viszonyított színkülönbségük miatt kitűnnek.

Ám a kontraszt használatot sem szabad túlzásba vinni. A túl sok kontrasztos szín könnyen rendezetlen hatást kelthet.

 

Ha úgy gondolod, hogy a honlapod kiemelkedő megjelenéssel bír, akkor mutasd meg és jelentkezz Az Év Honlapja 2020 pályázatra! Erre október 14-ig van lehetőséged.

Vissza

A Profession.hu már nem csak weben, hanem appban is kiemelkedőt nyújt

2024. 12. 10.
A mai interjúban örömmel mutatjuk be nevezőnket, a Profession alkalmazását. A beszélgetés során bepillantást nyerhetünk a pályázó inspirációjába, a honlapjuk fejlesztésének főbb szakasz…
Bővebben

“Élményalapú tanulással tesszük emlékezetessé a tananyagok elsajátítását!”

2024. 12. 09.
A mai interjúban örömmel mutatjuk be nevezőnket, az iMatekot. A beszélgetés során bepillantást nyerhetünk a pályázó inspirációjába, a honlapjuk fejlesztésének főbb szakaszaiba, és azokb…
Bővebben

Ezért hagyják el a látogatók a weboldalad - Te is ebbe a hibába esel?

2024. 12. 06.
A mai interjúban ’Az Év Honlapja’ pályázat egyik zsűritagjával, Dr. Molontay Patrikkal beszélgettünk. Célunk, hogy a pályázók és a közönség is közelebbről megismerhesse…
Bővebben
További hírek