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.