Összegyűjtöttünk néhány szempontot, tippet-tanácsot, melyeket Neked is érdemes figyelembe venned a weboldalad vizuális hierarchiájának kialakítása, felépítése során.
Egy honlap esetében nagyon fontos, hogy azon a tartalmakat valamilyen rendszer, hierarchia alapján építsük fel. Mindez nagyban megkönnyíti az oldalra érkező látogatók számára az információk áttekinthetőségét, a weboldal használhatóságát, hiszen egy rendezett, jól áttekinthető, logikusan felépített weblapon a felhasználók könnyen és gyorsan megtalálják a számukra lényeges tartalmakat, az általuk keresett információkat.
Manapság mindenki siet, az érdeklődőknek nincs idejük arra, hogy a weboldalon a sok-sok tartalom között keresgessék a számukra relevánsakat, a megoldást a problémájukra. Ebben lesz nagy segítség számukra az egyértelmű és logikus vizuális hierarchia alapján felépített honlaptartalom.
A vizuális hierarchia segítségével kiemelhetjük az adott oldal központi elemeit, fő tartalmait, meghatározhatjuk azok sorrendjét, úgy rendezhetjük el őket, hogy ezek is vezessék, végigvonultassák a látogató figyelmét a weboldalon – mindezt színek, betűk, formák, méretek, elrendezések, kontrasztok és negatív terek segítségével.
Azt, hogy milyen utat járjon be a felhasználó weboldalon, mi kerüljön a központi látóterébe, milyen sorrendben vegye észre az információkat, mikor mire akarjuk felhívni a figyelmét, honnan hová akarjuk navigálni, mikor mit végezzen, ezt bizony mi döntjük el. Ehhez ajánlott, hogy a weboldal elemei, valamint az információk között vizuális hierarchiát állítsunk fel, valamint a látogatók számára egyértelmű kapaszkodókat adjunk.
Nézzük is a legfőbb szempontokat! : )
#színek
A színek a vizuális kommunikáció alapkövei. Jelentésekkel bírnak, üzeneteket hordoznak, képesek döntéseket befolyásolni, érzelmeket kiváltani, hangulatokat közvetíteni és bizalmat erősíteni – hatással vannak a tudatunkra, valamint a lelkünkre. Tehát a weboldal szöveges és vizuális tartalmait a színek keltik életre, adnak hozzájuk plusz értéket, jelentést. Továbbá a megfelelő színek használatával kifejezhetjük az információk jelentősségét, azok sorrendjét is.
A színek használatával többek között “csoportokba rendezhetjük” az azonos tartalmakat. Például ha a termékek/szolgáltatások megnevezéseit azonos színnel szedjük, a látogatók tudják, hogy ezek a tartalmak azonos “szintűek”, azonos fontosságúak, azonos “csoportba” tartoznak, szorosan összetartozó elemekről van szó.
A webhelyek egyik legösztönzőbb elemének, a CTA, azaz call to action (akció)gombnak a segítségével terelhetjük, navigálhatjuk a felhasználókat az oldalon. Egy figyelemfelkeltő színnel ellátott akciógombra előbb navigálnak, kattintanak az érdeklődők, mint egy olyan visszafogottabb árnyalatú gombra, amely már-már “beleolvad” a weboldal háttérszínébe.
#betűk
A betűk is nélkülözhetetlen alapanyagok a weboldalon, a színekhez hasonlóan tudatunkra és érzéseinkre is hatással vannak, egyszerre nyújtanak vizuális-esztétikai élményt és tükröznek hangulatokat, érzéseket.
A weboldalon a látogatók csak átfutják a tartalmakat, gyorsan meg akarják találni a számukra releváns, őket érdeklő/érintő információkat, tartalmakat. Ehhez azonban arra van szükség, hogy navigáljuk az olvasókat, kiemeljük a lényeges mondanivalót, ahol szükséges, ott keltsük fel a figyelmet, tagoljuk az egyes részeket, egyszóval vizuális hierarchiát állítsunk fel. Ennek felállításához pedig arra van szükség, hogy kontrasztot alakítsunk ki a honlap egyes szöveges tartalmai között. A betűk, szöveges tartalmak kontrasztja nemcsak vizuális és esztétikai szempontból fontos, hanem a kommunikációt is hatékonyabbá teszi.
Néhány tipp a kontraszt kialakításához:
# méretezések
# bekezdések/sorok közötti távolságok
# különböző betűtípusok
# eltérő szedésmódok
# különleges karakterek, írásjelek
# színezések
# kreatív ikonok, elválasztók
A tipográfiai hierarchia kialakításához meg kell különböztetnünk egymástól a címsorokat, alcímsorokat, törzsszövegeket. A nagyobb egységek (pl. egyes blokkok címsorai, bejegyzések címsorai) minden esetben kiemeltebbek, volumenesebbek, mint a további bekezdések, blokkok alcímsorai. Például vegyük alapul a főoldalon bemutatott termékeket/szolgáltatásokat. Magának a blokknak az elnevezése (“Termékeink”/”Szolgáltatásaink” stb.) minden esetben kiemeltebb, hangsúlyosabb, figyelemfelkeltőbb, mint maguk a termékek/szolgáltatások megnevezései. A törzsszövegek, tehát pl. a termékek/szolgáltatások leírásai, információi egyértelműen a legkisebb szöveges egységek a weboldalon. Tehát a megfelelő szedésmóddal, kiemeléssel megfelelő kontrasztot alakíthatunk ki a szöveges tartalmaink, mondanivalónk között.
# képek, illusztrációk, formák
A színekhez, betűkhöz hasonlóan képesek megragadni a szemlélő figyelmét, üzenetet közvetíteni, hatást gyakorolni, érzelmeket kiváltani, motiválni döntések meghozatalát. Emellett segítenek szemléltetni, prezentálni, megjeleníteni az adott témát, tartalmat, megerősíteni a szöveges részek mondanivalóját, továbbá stílusossá, dizájnossá tenni az adott munkát.
Jó minőségű, figyelmet megragadó fotók, illusztrációk, ikonok, mintázatok, textúrák segítségével, azok tudatos elrendezésével is megfelelő vizuális hierarchiát építhetünk fel weboldalunkon, a sarkalatos információk, tartalmak felé terelhetjük a felhasználók figyelmét, érdeklődését.
#méret
Ahogyan a legtöbb esetben, úgy a weboldalon is a leglényegesebb elemek, tartalmak nagy méretben, kiemelkedő formában szerepelnek a honlapon. Természetesen ez esetben sem óriási fotókra, hatalmas karakterekkel szedett szöveges tartalmakról van szó. Fontos, hogy a méretezéssel se essünk túlzásba – tehát a fotók ne foglalják el a fél oldalt, hiszen annak bizonyos részei csak görgetés hatására válnak láthatóvá a látogató számára. Így érdemes maximum akkora méretű fotóval dolgozni, amely teljes egészében látható görgetés nélkül a honlapon. A további, kevésbé mérvadó fotók, illusztrációk pedig értelemszerűen kisebb méretben kapnak helyet. A nagy méretkontraszt már önmagában is beszédes, látványos.
A szöveges tartalmak esetében sem szabad túlzásba esni. Lehetőség szerint akkora betűméretet válasszunk, mellyel ezek a tartalmak minden eszközön könnyen olvashatók, jól áttekinthetők.
#elrendezés
Fontos, hogy a weblap tartalmai, blokkjai, logikus, jól felépített rendszer alapján kerüljenek feltüntetésre, az információk fontossági sorrendben kerüljenek a látogatók szeme elé. Például egy webdesigner weboldalán a nyitó blokkot követően szerepelhet egy rövid, néhány soros bemutatkozás névvel és profilfotóval, hiszen ez nagyon meghatározó hitelességi- és bizalmi faktor az érdeklődők számára, célszerű, hogy már a főoldalon találkozzanak az adott szakemberrel. Ezt követően jöhetnek a termékek/szolgáltatások rövid bemutatásai, hiszen ezek azok a tartalmak, megoldások a problémájára, melyek miatt felkereste a látogató a weboldalt. Majd következhetnek az érvek-előnyök, ügyfélvélemények, melyek szintén nagy jelentőséggel bírnak a bizalom kialakításában, utánuk jöhetnek az érdeklődőknek szóló érdekes, hasznos tartalmak (pl. blog, letölthető anyagok, segédletek stb.), majd pedig az elérhetőségek, kapcsolati adatok, melyeken keresztül kapcsolatba tudnak lépni az adott céggel/vállalkozással/szakemberrel. Zárásként pedig a weblap alsó kerete, lezárása, azaz lábrésze szerepel, melyben szintén sok-sok hasznos információ, kötelező elem megjeleníthető.
#white space
A “white space”-el, azaz a fehér üres terekkel szellős, világos, könnyen áttekinthető tartalmakat eredményezhetünk, valamint egyensúlyt teremthetünk vele az egyes elemek között, a lényeges információkat a figyelem középpontjába helyezhetjük. A megfelelő méretű negatív tér segítségével kihangsúlyozhatjuk a honlapon a kulcsfontosságú információkat, tartalmakat, ezáltal a felhasználók könnyebben észreveszik őket.
Tehát bátran dolgozzunk szembetűnő arculati színekkel, kontrasztos betűméretekkel, hangsúlyos mérezetésekkel, látványos elrendezésekkel a weboldalon, hiszen ezáltal a felhasználók könnyebben megtalálják a számukra releváns tartalmakat, nem mellesleg a figyelmük is tudatosan terelhető.