Hogyan alkalmazd a vizuális hierarchia szabályait?


Hogyan alkalmazd a vizuális hierarchia szabályait?

Legyen rend a weboldaladon is! Te is jobban érzed magad, ha rend van körülötted? Érezted már, hogy nyomaszt a rendetlenség és a káosz az íróasztalodon? Miért lenne másképp ez, ha weboldalakról van szó?! A tartalmak rendezett és ízléses elhelyezése egy weboldal sikerének alapja. Az igazán esztétikus megjelenés kulcsa pedig, a vizuális hierarchia szabályainak betartása. Mit is jelent ez? Máris mutatom a részleteket…

A jó design kommunikál helyetted…

Mind szeretnénk, hogy a gondosan megírt szövegeinket az elsőtől az utolsó szóig, figyelmesen végigolvassák, ez azonban az esetek többségében nem valósul meg.

A látogatók általában végigpásztázzák a weboldalt, sőt… az első néhány másodpercben döntenek arról, hogy maradnak vagy inkább tovább keresgélnek.

Épp ezért kiemelten fontos figyelnünk rá, hogy a tartalmat a lehető legvonzóbb formában jelenítsük meg, igazodva a felhasználói igényekhez. Vagyis, hogy a felhasználó azonnal értse, hogy mi a fő üzenet, melyik elemek a hangsúlyosak és hol találja az oldal fontos részeit.

Tehát a cél, hogy a tartalmakat hatékonyan rendezzük el

Úgy, hogy egyértelmű legyen az üzenetünk és az emberi szemnek kellemes, könnyen feldolgozható, logikus felépítésű legyen az oldal.

Ebben segít a vizuális hierarchia.

Mert hiába a profi fotók, a szép grafika és a jól megválasztott brand színek. Ha az elrendezésre nem figyelünk, az előbbiek pozitív hatását sem fogjuk tudni teljes egészében kihasználni.

Az emberek nem tömör adathalmazokat szeretnének befogadni, amikor egy problémára keresnek megoldást és a te oldaladra tévednek.. sokkal inkább azok az oldalak fognak hatást gyakorolni rájuk, ahol a tartalmak vizuális megjelenítése is igényes és tudatos tervezés eredménye.

Ehhez pedig a tervezőnek, a designernek előre meg kell határoznia, hogy mi legyen az, amit a látogató először észrevesz,a designnak vezetnie kell a látogatót az oldalon.

Van néhány alapszabály, amit érdemes betartani…

A világ legtöbb pontján balról jobbra, és fentről lefelé haladunk az olvasásban. Ez már önmagában egy biztos alapot ad a tervezéshez. 

Vannak különféle mintázatok, amiket népszerű weboldalak hőtérképes mérésével állapítottak meg és számos weboldal tervezésénél segítségül szolgálnak.

Ilyen például az F vagy a Z minta.

Az F minta a magazin jellegű oldalakra és pl blogbejegyzések megjelenítésére is alkalmas. Ilyenkor a látogató először az oldal felső részét nézi meg balról jobbra haladva, majd kicsit lentebb görgetve ugyanezt teszi, utána pedig halad az oldal aljáig.

Ezt tudva érdemes a legfontosabb infokat balra rendezni és rövid, figyelemfelkeltő címsorokat használni.

A Z mintát általában olyan oldalaknál használják sikerrel, ahol kevesebb a szöveg és nagyobb hangsúlyt kapnak a vizuális elemek. Leginkább olyan esetekben javasolt, amikor egy hirdetésből érkezik az oldalra a látogató és az oldalnak egyértelmű célja pl. a feliratkozás vagy valaminek a letöltése. Ilyenkor a felső sor után a látogató figyelmét a bal oldali rész köti le, majd következik a jobb oldalon elhelyezett űrlap vagy vásárlás rész.

Milyen eszközök segítenek a vizuális hierarchia megteremtésében?

Webdesignerként feladatom a kapott tartalom ízléses formába öntése úgy, hogy az a lehető leghatékonyabb legyen és igazodjon az előzetesen meghatározott célokhoz. 

Ezt úgy érem el, hogy (többek között) az alábbi eszközöket alkalmazom a különböző elemek kihangsúlyozására, egymáshoz viszonyított jelentőségük kifejezésére:

  • Méret
    Meghatározott mérete van a címsor 2-nek a címsor 3-nak és így tovább. Általános szabály az is, hogy ami fontos, azt nagyobb méretben mutatjuk, hiszen ez fogja vonzani a látogató tekintetét.
  • Szín
    A használt színeket egyrészt befolyásolja a vállalkozás arculata, viszont emellett fontos szempont az is, hogy kontrasztos legyen a végeredmény és tudjuk, hogy a kiváltani kívánt érzelemhez, melyik szín passzol (link a színekről szóló blogbejegyzéshez) leginkább. Különösen fontos ez egy értékesítési oldal esetében.
  • Negatív tér
    A kevesebb több. Elcsépeltnek tűnik, de igaz. Sokkal kellemesebb ránézni egy “szellősen” elrendezett oldalra, mint egy olyanra, ahol a szövegek és a képek között szinte semmi hely nincsen és túlzsúfolt hatást kelt az egész. A “white space” az egyik legfontosabb eszköze egy webdesignernek.
  • Ismétlés
    Az egységes megjelenés segíti az információ feldolgozását. Ha bizonyos elemek ismétlődnek, ugyanolyan módon jelennek meg, az könnyebbséget jelent az agyunknak.
  • Közelség
    … vagy épp távolság. Az agyunk az egymáshoz közel lévő dolgokat összetartozónak érzékeli, ezért a különböző grafikai elemek elhelyezésénél erre is érdemes figyelni.

Amikor egy weboldalon betartják ezeket a szabályokat, a végeredmény egy könnyen kezelhető, letisztult és átlátható oldal lesz, amit az emberek szeretnek használni. Ennek pedig vállalkozóként azt gondolom mindannyian örülünk. 🙂 

Most indulsz vagy a felsorolt szabályoknak megfelelően felújítanád a weboldalad? Keress bátran és segítek!

Információk forrása: Webshark


Kövess engem instagramon is!