A vizuális hierarchia használata a webes tervezésben

A jó vizuális hierarchia nem a Photoshop szűrőkről  és a gyönyörűen elkészített grafikákról szól, hanem arról, hogy a használatával szinte vezesse az olvasót az oldalon. A felhasználói felület és a tartalom hatékony elrendezésével elérhető, hogy a fontos információkat oly módon tálaljuk, amely egy pillanat alatt érthető és logikus lesz a mindennapi látogatók számára.

Ideális esetben a látogató szépen sorról-sorra végigolvas minden elérhető információt az oldalon. Ám ez 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.

 

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. Erre nyújt megoldást a helyes vizuális hierarchia kialakítása.

 

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.

 

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.

 

F minták

Az F-minták leggyakrabban a hagyományos szöveges oldalakra, magazin stílusú oldalakra, cikkekre vagy blogbejegyzésekre használhatóak. Az olvasó itt leellenőrzi az oldal bal felső részét, érdekes kulcsszavakat keres a címsorokban, vagy a különféle témaindító mondatokban, majd jobbra olvas, amikor valami érdekeset talál. Ezután visszatér a bal oldalra, majd lejjebb ugorva megint beleolvas valamibe. Az eredmény úgy néz ki, mint egy F betű.

 

 

Ennek a mintának a használatát a Nielsen Norman Group híres kutatási anyaga is igazolta, amellyel nagyon sok helyen találkozni egyébként, mint fő hivatkozási alappal. Ennek a lényege, hogy egy hőtérképes elemzéssel vizsgálták az olvasási szokásokat, majd ezt elemezve kapták meg azokat az adatokat, amelyek megmutatták a leggyakoribb olvasási mintákat.

 

 

Hogyan tudod ezt használni? Igazítsd a fontos információkat balra, és használj rövid, kiemelt fejléceket és egyéb figyelemfelkeltő elemeket. A legfontosabb infókat pedig mindig az oldal bal felső részében helyezd el.

 

Z minták

A Z-mintákat általában olyan oldalakra alkalmazzuk, amelyek valamilyen ajánlatot jelenítenek meg. Például hirdetésekre vagy olyan webhelyekre, ahol az információ nem feltétlenül jelenik meg a blokk bekezdésében. Ezeknél az oldalaknál általában kevesebb a szöveg és nagyobb hangsúlyt kapnak az egyéb vizuális elemek.

Az olvasó szeme ilyenkor először az oldal tetején pásztáz végig, ahol fontos információk találhatók, majd átlósan átmegy az ellenkező sarokba, és ugyanazt csinálja az oldal alsó részén. Ilyenkor az olvasás iránya egy Z betűt formáz, aminek a végén célszerű valamilyen cselekvésre ösztönző blokkot, pl. feliratkozó formot, ajánlatot vagy gombot elhelyezni. (CTA)

 

 

 

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.

Használd ki ezt úgy, hogy a legfontosabb dolgok legyenek a legnagyobbak az oldalon, míg a kevésbé fontosak kisebb méretűek. Ez a tendencia valójában elég erős lehet ahhoz, hogy felülbírálja a tervezési mintákat is, ezt vedd figyelembe.

 

 

 

Szín

A színeknek jelentős hatásuk van az érzékelésre, mivel megvan a maguk hierarchiája is. Á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.

 

 

 

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 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.

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.

 

 

 

Negatív tér

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.

A negatív tér (whitespace) 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

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.

 

 

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 a távolságot 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.

 

 

 

Ismétlés

Az ismétlés egyfajta relatív jelentést tulajdonít az elemeknek.  Pl. 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 csoportba 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 létrehozásuknál, használatuknál. Ezzel elősegíthetjük a tartalmi elemek közötti navigációt és a fontosabb információk hatékony átadásán túl a felhasználói élményt is javíthatjuk.

 

 

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 kell használni. 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 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.

 

 

---

A szerző: Gergely György

1998-ban kezdtem el komolyabban foglalkozni a számítástechnikával. Kezdetben hagyományos grafikát, reklám illetve dekoráció készítést, majd az informatika mellett webtervezést, animációt és programozást tanultam. 2004-től folyamatosan foglalkozom weboldalak tervezésével, programozásával, grafikai és arculattervezéssel, emellett digitális tananyag fejlesztésből diplomáztam. A web és a grafika ma már nem csak munka, hanem egyfajta szenvedély is lett. Emellett egyre többet foglalkozom új technológiák megismerésével, illetve multimédiás anyagok tervezésével és készítésével is.

 

Ha hasznosnak találtad ezt a bejegyzést, megköszönöm ha megosztod másokkal is!