Ideális esetben a látogató szépen sorról-sorra végigolvas minden elérhető információt az oldalon amit leírtál. Sajnos ez így ebben a formában sohasem valósul meg. A valóságban pár pillanat alatt felméri, hogy az adott tartalom érdekes vagy értékes- e a számára és olvasni kezd, vagy elkattint. A webes tervezés során felépített helyes vizuális hierarchia azonban segíthet a látogatót az oldalon tartni.
Bizonyára te is voltál már úgy, hogy egy oldalra tévedve a szép grafika és a jó színek ellenére úgy érezted valami még hiányzik, valamitől nem teljes és egységes az egész. Valamitől a mondanivaló nincs összhangban a megjelenéssel. Vagy az oldal annyira tele volt zsúfolva különféle design elemekkel, hogy azt sem tudtad, hol kezd az olvasást.
Design = Kommunikáció
Alapvetően a tervezés a vizuális kommunikációval foglalkozik. Ahhoz, hogy hatékony tervező legyél, képesnek kell lenned arra, hogy egyértelműen közöld az ötleteidet így megszerezve az emberek figyelmét. Az oldalad látogatói azonban nem mindig hajlanak erre, ha hatalmas adatblokkot adsz nekik valószínű, hogy sokan nem fogják elolvasni. Miért? Mert a legtöbb ember a természeténél fogva vizuálisan gondolkodik, nem pedig adatfeldolgozóként.
Emiatt fontos megérteni, hogy hogyan látjuk a dolgokat. Az emberek nagy része a vizuális információ megszerzése és egyenletes feldolgozása helyett egy pillanat alatt felméri, amit a “vizuális kapcsolatok” tekintetében lát. Magyarul mi az, amit először észrevesz, mi az amit utána, majd amit következőnek megnéz.
A tervezésben ezért használunk olyan alapelveket, amelyek segítségével az olvasó figyelmét a legfontosabb mondanivalóra irányíthatjuk, vagy amelyek segítségével egyfajta utat bejárva vezethetjük a figyelmét az oldalon.
Tervezési minták
A különféle nemzetek közül a legtöbben felülről lefelé és balról jobbra olvasnak. Ezt kihasználva célszerű lehet valamilyen elrendezési mintát követve elhelyezni a tartalmi elemeket az oldalon is. Ezzel kihasználható az olvasóknak az a szokása, ahogy szkennelik az oldalt és elérhető az olvasói figyelem irányítása.
Eszközök a vizuális hierarchia kialakítására
Méret
Azok a tárgyak, amelyek nagyobbak, nagyobb figyelmet is kapnak általában. A méret hierarchikus eszközként való felhasználása az egyik leghatékonyabb módja annak, hogy a néző szemét az adott oldal egy részére irányítsa. Ez azon alapul, hogy a nagy dolgok az emberek számára mindig fontosabbak, mint a kicsik, ezért a felhasználók figyelme automatikusan a nagyméretű szavakra és a nagyobb képekre irányul először.
A méretezés használatának gyakorlata:
- Próbálj meg 3 kulcsméretet használni – kicsit, közepeset és nagyot. A három méret ugyanis legtöbbször elegendő változatosságot biztosít a tervezéshez és a vizuális hierarchia kialakításához. Gondolj csak a címsorok, alcímek és a törzsszövegek használatára. A webterveknél a méretek általánosan a következő képpen alakulnak. 16 képponttól indulnak a törzsszövegek, 24-32 képpont közötti mérettől az alcímek, és akár 36 képponttól felfelé a fejlécek és a címsorok. Ezek az általános méretek, de ez változhat a tartalom vagy pl. a szövegmennyiség függvényében, ahol is a szövegek tagolására nagyobb hangsúly kell fektetni.
- Mindig a legfontosabb elem legyen a legnagyobb. Használd ki ezt úgy, hogy a legfontosabb dolgok legyenek a legnagyobbak az oldalon, míg a kevésbé fontosak kisebb méretűek. Ennek a használata valójában elég erős lehet ahhoz is, hogy felülbírálja a tervezési mintákat, ezért ezt mindig vedd figyelembe.
Színek
A színeknek jelentős hatásuk van az érzékelésre, mivel megvan a maguk hierarchiája. Általában amellett, hogy milyen érzéseket váltanak ki úgy is csoportosítjuk őket, hogy milyen erősen hatnak az emberekre. A weboldal egy adott elemének kiemelt, kontrasztos színei szinte igénylik a figyelmet. Ezeket használjuk általában kiemelésekre, gombokhoz, vagy hivatkozásokhoz. Vannak olyan kevésbé erőteljes színek is, amelyek viszont jobban működnek háttérként és helyes megválasztásukkal még inkább erősíthetjük az erősebb színek hatásait.
A színek használatának gyakorlata:
- Vedd figyelembe a színtelítettséget. Az élénk színek kiemelkednek a többi közül, ezért mindig a fontos dolgokhoz használd őket, a kevésbé telített színek pedig a kisebb jelentőségű elemekhez használhatók. Figyelj arra is, hogy tartsd fenn a meleg élénk színeket, például a pirosat a figyelmeztetésekhez, vagy hibákhoz.
- Ne használj túl sok színt. Noha néhány összetett színséma nagyon jól mutat, egy weboldalon túlzónak is tűnhet. Ha túl sok hasonló, nagy telítettségű színt használsz, az gyakran csökkenti az elemek közötti vizuális hierarchiát.
- Ne hagyatkozz csak a színekre a vizuális hierarchia kialakításánál. Egységesebb hatást tudsz kialakítani, ha együtt használod a színeket, a kontrasztot és a csoportosítást a hierarchia felépítésénél. Ezen kívül előfordulhat az is, hogy a színvakságban szenvedők, vagy a színtévesztők nem érzékelik a különbségeket bizonyos színkombinációk között.
Kontraszt
A kontraszt szintén nagyon fontos vizuális elem. A jelentőségét egy dokumentumon belül sokszor nem használjuk ki, pedig nagyon fontos lenne. Kontraszt ugye akkor van két elem között, ha elég nagy közöttük az eltérés grafikailag. A világos háttérszíntől a sötét háttérszínig történő változtatás gyorsan elkülönítheti az oldal tartalmi részeit. Ugyanígy kontrasztot alkot, ha eltérő méretű és stílusú betűtípusokat használunk. A megfelelő kontraszt révén a felhasználók könnyen el tudják különíteni egymástól az egyes tartalmi elemeket.
A kontraszt használatának gyakorlata:
- Kontrasztot kialakíthatsz színekkel, különböző méretetekkel és stílusok használatával is. A használatakor ügyelj arra, hogy próbáld meg egyensúlyban tartani, így az egyik tartalmi elem nem fogja elnyomni a másikat.
Üres területek (white space)
Egy oldalon mindig több különböző elem is helyet kap. A figyelem felhívásának egyik jó módja lehet az, hogy a tartalomnak elegendő helyet biztosítunk. Ha pl. egy gomb körül jelentős üres hely marad, vagy egy szövegblokk jól körülhatárolható a hasábtörés és a hasábok közötti elválasztó hely miatt, ezek az elemek könnyebben láthatók lesznek az olvasók számára.
Az üres terület, vagy negatív tér (white space) azt jelenti, hogy megfelelő teret kell hagyni az elemek között. Sokan nem úgy gondolnak erre, mint a weboldal egy elemére, pedig ez egy hatékony tervezési eszköz a megfelelő tartalom kialakításához. Ezen kívül nemcsak az olvashatóságot teszi sokkal könnyebbé, hanem az úgynevezett kognitív terhelést is csökkenti.
Közelség elve, más néven a csoportosítás
A tárgyakat minták felismerésével azonosítjuk, mert így gyorsabban értelmezni tudjuk az agyunkba jutó ingereket. A szemünk és az agyunk akkor is mintákat akar felfedezni, ha valójában nincsenek is ott. Ezért van az, hogy a képen valószínűleg négy pár, és nem 8 db téglalapot látsz. A téglalapok közötti üres terület és a téglalapok közelsége miatt két-két téglapot összetartozónak érzékelsz.
A csoportosítás használatának gyakorlata:
- „Hagyd lélegezni”. Az egyes elemek közelségére ezért kell különösen figyelni, hiszen hajlamosak vagyunk arra, hogy a közel levő vizuális elemeket csoportokba rendezzük. A tervezésnél ezért használjuk az üres területeket olyan eszközként, amely segít a különféle tartalmi részeket kategóriákra bontani. Ha a weboldalon az elemeket ennek megfelelően helyezed el, akkor a felhasználók könnyen össze tudják majd kapcsolni őket.
- Fontold meg valamilyen „konténer” használatát. Ha az üres területek használata önmagában nem elegendő a vizuális hierarchia létrehozásához, adj hozzá további elemeket, például szegélyeket vagy háttereket. De vigyázz, ezek a kiegészítő elemek egyfajta vizuális zűrzavart is okozhatnak, ezért inkább ritkábban használd őket.
Ismétlés
Az ismétlés egyfajta relatív jelentést tulajdonít az elemeknek. Például ha minden bekezdés szöveg szürke, akkor a felhasználó ha egy új szürke szövegblokkot lát feltételezheti, hogy ez egy másik alapvető bekezdés. Ez amiatt van így, mivel a felhasználók ha bizonyos elemek hasonlóan néznek ki, akkor automatikusan egy kategóriába tartozónak tekintik őket.
Az ismétlés segít a dokumentum egyes részeinek elkülönítésében, ezért mindig egy egységes szabályrendszert alakítsunk ki a használatuknál. Ezzel a fontosabb információk hatékony átadásán túl a felhasználói élményt is javíthatjuk.
A „hunyorgás” teszt
Sok tervezőiskolában azt tanítják, hogy hunyorogj, vagy tegyél valamilyen enyhe elmosódást a tervedre és nézd meg így is. Így egy pontosabb képet kaphatsz a csoportokról, a kontrasztról és ezáltal a kialakított hierarchiáról. Ez a technika ugyanis kiemeli a tervben hangsúlyos dolgokat és feltárja a mögöttes hierarchiát.
A fenti példában egy 5 pixeles sugárral való elmosás jól mutatja, hogy a csoportosítások és a kiemelések rendeltetésszerűen működnek. Ha nem tudod elolvasni a szöveget, akkor is jól elkülönül a címsor, az első tartalmi blokk, és ebből hangsúlyosan kiemelkedik a Call to Action gomb is.
Következtetés
Az egyes építőelemek használatának ismerete fontos követelmény minden webes tervező számára. Tudni kell az egyes elveket használni, illetve azt is, mikor mit és hogyan célszerű alkalmazni.
A cél az, hogy jobban tudatában légy annak, hogyan használhatod a vizuális hierarchia fogalmát az elemek kiemelésének kézben tartására és hogyan irányítsd az olvasókat az oldalon belül abban az irányban, ahogy azt eltervezted. Ez nem csak a tartalom megértésének szempontjából fontos, de egy landing oldalon akár az értékesítési folyamat sikeressége is múlhat ezen.
