2019. június 27., csütörtök

A weboldal dizájn alapjai a Gestalt pszichológia tükrében

Egy weboldal esetén a legfontosabb, hogy ne kelljen gondolkodnia a látogatónak, hogy vajon hogyan működik pontosan egyik vagy másik funkció, ne legyen a megszokottól eltérő a navigáció, lehetőség szerint ne találjunk ki olyan, a szokványostól nagyban eltérő megoldásokat, amelyek idegenek, nem megszokottak és nem ösztönösek az internet közönsége számára.

Ennek háttere, hogy csak akkor lesz könnyen felhasználható, navigálható és jól konvertáló weboldalunk, ha azt a látogatók tudják is használni. Megfontolandó minden olyan rendkívül kreatív megoldás, ami nagyon eltér a megszokott mintázatoktól és ezáltal megzavarja a látogatókat.

A webdizájnereket kivéve az átlagember számára általában ismeretlenek azok a vizuális érzékelési szabályszerűségek, amelyeket érdemes szem előtt tartanunk weboldalunk dizájntervezése során. Ezek az ún. Gestalt pszichológiai alapelvek, más néven alaklélektani megállapítások, amelyek nagyban befolyásolják azt, hogy mit is érzékelnek majd a weboldalunk látogatói az egyes vizuális elemekből.

Ezeket ismertetjük részletesen blogcikkünkben.

A Gestalt pszichológiáról

A Gestalt pszichológia, más néven alaklélektan a német pszichológiában a XX. század elején létrejött irányzat, amely főként a vizuális észleléssel kapcsolatos szabályszerűségek vizsgálatával foglalkozott. Vizsgálta például a mozgásfelismerést és a színek különböző szempontok szerinti észlelését. A legfontosabb feltett kérdés az volt, hogy a szerveződés magában a világban megy végbe vagy az emberi elme hozza létre azokat.

A Gestalt pszichológia legfontosabb megállapítása az, hogy az “egész” jóval több az egyes részek összegénél. Egyszerűbben megfogalmazva az emberi elme mindig összefüggést próbál találni a káoszban és sokszor olyasmit is érzékel - kiegészítve a ténylegesen látott elemeket - ami valóban nincsen is ott.

Legegyszerűbben ez az alábbi példán keresztül érthető meg. Az alábbi képen egy dalmata fajtájú kutyát látunk, holott a kép nem teljes. De az agyunk kiegészíti azt.

Forrás: https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965

A Gestalt pszichológia fő alapelvei

1. A közelség elve

A közelség elve kimondja, hogy az egymáshoz közel lévő objektumokat jobban összetartozónak érzékeljük, mint a távolabb lévő objektumokat. Például az alábbi képen négy darab, kék pöttyökből álló blokkot érzékelünk.

Forrás: http://dbanksdesign.com/blog/introduction-to-proximity/

A weboldal UX dizájn tekintetében ez azt jelenti, hogy pl. a weboldalunkon a szövegek formázásakor ügyelnünk kell arra, hogy a logikailag összetartozó szövegek egymáshoz közelebb, míg az ettől különböző többi szövegblokkok a másik blokktól távolabb helyezkedjenek el. Ehhez egy példa a webma.hu weboldalról:

Forrás: https://www.webma.hu/Szolgaltatasok/YouTube_hirdetesek.html

2. A hasonlóság elve

A vizuálisan hasonló elemeket összetartozónak érzékeljük - még akkor is, ha nincsenek közel egymáshoz -, legyen az hasonló forma, hasonló szín vagy hasonló ikon, esetleg objektumméret.

Ez a weboldal dizájn vonatkozásában azt jelenti, hogy a weboldal látogatóink az egymáshoz hasonló elemeket - pl. ikonokat tartalmazó szövegblokkokat - összetartozónak, hasonlónak fogják érzékelni (lásd az előző alapelvnél bemutatott webma.hu példát), az összetartozó blokkokat pedig érdemes valóban hasonló megjelenésű elemekből felépítenünk. Ha azt szeretnénk, hogy pl. egy call-to-action gomb feltűnő legyen, akkor formázzuk azt színben és megjelenésben is eltérőre a környezetétől.

A hasonlóság elve érvényesül akkor is, amikor a weboldalunkon pl. valamennyi linket ugyanolyanra formázunk, hogy a felhasználó számára világossá tegyük, hogy hasonló szöveglinkekről van szó.

Konverzió-optimalizált weboldal készítése


3. A folyamatosság elve

A folyamatosság elve arról szól, hogy legkézenfekvőbb vonalat tovább követi a szemünk még akkor is, ha valójában az a vonal nem folytatódik.

Forrás: https://www.toptal.com/designers/ui/gestalt-principles-of-design

A weboldal dizájnban ez azt jelenti, hogy például a gördíthető elemeknél hiába nem látszik a következő elem, a szemünk tudja, hogy tovább tudunk gördíteni akár jobbra, a képernyőn kívülre is tovább. De ugyanez érvényesül akkor is, amikor egy weboldal felső menüsorát pásztázza a szemünk.

4. A zártság elve

A zártság elve érvényesül akkor, amikor a szemünk az egyes alakzatok, betűk, képek érzékelésekor teljesnek érzékeli azt annak ellenére, hogy ténylegesen nem az. Ennek oka, hogy az agyunk kiegészíti a látottakat a korábbi tapasztalatok alapján.

A weboldal dizájnban a zártság elve a betöltődésjelző elemekben használatos a leggyakrabban. De tipikus ilyen példát láthatunk pl. a WWF logójában is, ahol csupán a szemünk érzékeli úgy, hogy a pandafigura teljes, valójában csupán a vizuális érzékelésünkben az.

5. A figura/háttér elve

A figura/háttér elve arra utal, hogy hajlamosak vagyunk vizuálisan elkülönülten érzékelni a tőlünk különböző távolságban lévő elemeket. Az elemek vizuális elkülönítése alapvetően háromféleképpen történik: ún. különböző rétegekkel, kontraszttal vagy információs hierarchiával.

Forrás: https://moniquebrickham.com/figure-ground-illustration

A weboldal dizájntervezéskor fontos, hogy vizuálisan jól elkülönüljön a weboldalunk háttere és az azon lévő elemek (elegendő kontraszt használata például a szlájderképen és az azon lévő szövegen), a gombok pedig jól láthatóak legyenek.

Összefoglalásképpen

A webdizájnerek kivételével az átlagember, de még a generalista online marketingesek számára sem ismertek általában azok a dizájn alapelvek, amelyek követése kiemelkedően fontos egy könnyen használható, áttekinthető és felhasználóbarát weboldal elkészítéséhez.

Érdemes követnünk a Gestalt pszichológia, más néven az alaklélektan alapvető, vizuális érzékelésre vonatkozó megállapításait és szabályszerűségeit annak érdekében, hogy ne kergessük az őrületbe weboldal látogatóinkat és nehezítsük meg számukra szükségtelenül a weboldalunk használatát.

Keressen minket bizalommal, ha online marketing aktivitásaihoz profi segítségre van szüksége!


Felhasznált források:

Újabb bejegyzés
Korábbi bejegyzés

0 megjegyzés: