Nyisd meg most a saját weboldaladat egy másik lapon, és számold meg, hány gomb verseng ugyanabban a színben a látogatód figyelméért. Ha háromnál többet találtál, lehet, hogy nem az ajánlatoddal van a probléma. Lehet, hogy egyszerűen túl sok minden próbál egyszerre fontosnak látszani.
Egy weboldalon ugyanis nem az a cél, hogy minden elem feltűnjön. Az a cél, hogy a látogató gyorsan felismerje, mi az, amire most érdemes figyelnie.
Ennek megértéséhez érdemes visszamenni egy közel százéves pszichológiai jelenséghez, amelyet ma Von Restorff-effektusként, illetve izolációs hatásként ismerünk.
Egy 1933-as kísérlet, amely ma is ott van a képernyődön
Hedwig von Restorff német pszichológus 1933-ban olyan kísérleteket végzett, amelyekben a résztvevők egymáshoz hasonló elemekből álló sorozatokat láttak. Bizonyos esetekben egyetlen elem eltért a többitől, például más típusú vagy más jellegű volt. Az izolált elemeket a résztvevők később jobb eséllyel idézték fel.
A jelenség lényege egyszerű: ami eltér a környezetétől, arra könnyebben felfigyelünk, és azt gyakran könnyebben is megjegyezzük. Ezt nevezzük Von Restorff-effektusnak vagy izolációs hatásnak.
A hatás nem azt jelenti, hogy minden szokatlan dolog automatikusan fontosabb. A lényeg a környezethez viszonyított különbség. Egy elem akkor tud igazán kitűnni, ha van mellette egy viszonylag egységes háttér, amelyhez képest eltér.
Éppen ezért működik egy kiemelt gomb, egy kontrasztos címke vagy egy eltérő méretű kártya sokkal jobban akkor, ha a körülötte lévő elemek visszafogottak maradnak.
Miért fontos ez neked, ha nem pszichológus vagy, hanem vállalkozó?
Mert a weboldalad minden egyes látogatóval ugyanezt az alapvető figyelmi problémát kezeli, csak éppen szavak, gombok, árak, képek és menüpontok formájában.
A látogató nem fogja tudatosan elemezni az oldalad minden elemét. Ehelyett gyorsan próbálja felismerni, mi fontos, mi kapcsolódik hozzá, és mit érdemes következőként megtennie.
Ha minden elem ugyanolyan hangsúlyos, akkor éppen az történik, amit a legtöbb rosszul megtervezett weboldalnál látunk: semmi sem kap valódi prioritást.
Ezért a vizuális hierarchia egyik legfontosabb szabálya nem az, hogy „emelj ki minél több dolgot”, hanem az, hogy tudd, minek kell először feltűnnie.
Hol találkozol vele nap mint nap, anélkül hogy észrevennéd?
Nézz meg egy tipikus árlistát. Ha minden csomag ugyanolyan méretű, ugyanolyan háttérrel és ugyanolyan gombbal jelenik meg, a látogatónak kell végig dolgoznia az összehasonlítást. Ha viszont egyetlen ajánlat kap egy „Legnépszerűbb” címkét, eltérő háttérszínt vagy hangsúlyosabb vizuális kezelést, az már önmagában létrehoz egy világosabb vizuális prioritást.
Ugyanez működik egy űrlapnál is. Ha minden mező, segédszöveg és gomb ugyanolyan hangsúlyos, a felhasználó nehezebben látja, mi a következő lépés. Egy jól elkülönített elsődleges gomb viszont gyorsabban megtalálható.
És nem csak a szín számít. A méret, a forma, az elhelyezés, a körülötte hagyott üres tér és a környezethez viszonyított kontraszt egyaránt segíthet abban, hogy egy elem kiemelkedjen.
Ha az egyik gomb vizuálisan eltér a környezetétől, gyorsabban megtalálható. A kiemelés erejét azonban éppen a visszafogott háttér adja.
A csapda, amibe sok KKV-weboldal besétál
Az izolációs hatás csak akkor tud igazán érvényesülni, ha valóban van különbség az elemek között. Sok kisvállalkozói weboldalon azonban éppen az ellenkezője történik: egyszerre van kiemelt akciós szalag, feltűnő kupon, színes menüpont, többféle CTA és egymástól eltérő gombszín.
Egyenként ezek közül bármelyik lehet indokolt. Együtt viszont könnyen létrehoznak egy olyan vizuális zajt, amelyben nincs egyértelmű elsődleges cselekvés.
Képzeld el, hogy öt ember egyszerre próbálja megmutatni neked, merre kell menned. Nem az lesz az eredmény, hogy ötször gyorsabban megtalálod az utat, hanem az, hogy egy pillanatra megállsz, és próbálod kibogozni, kire érdemes figyelned.
Egy kiemelt elem akkor működik igazán jól, ha a környezete segít neki kitűnni. Ha mindent kiemelsz, megszűnik a hierarchia.
Öt konkrét lépés, amivel a saját oldaladon is alkalmazhatod
Egy elsődleges akciót jelölj ki
Válaszd ki azt az egy műveletet, amely az adott oldalon a legfontosabb. Lehet ez ajánlatkérés, kapcsolatfelvétel, vásárlás vagy időpontfoglalás. Ne próbáld egyszerre mindet ugyanolyan erősen kiemelni.
A másodlagos gombok maradjanak visszafogottak
A „Mégsem”, „Vissza” vagy „Részletek” típusú műveleteknek nem kell versenyezniük a fő CTA-val. Használhatsz körvonalas vagy semleges gombokat, hogy a hierarchia egyértelmű maradjon.
Az ajánlott csomagot emeld ki, de ne rejtsd el a többit
Ha valóban van olyan csomagod, amelyet a legtöbb ügyfél számára ajánlanál, adhatsz neki erősebb vizuális hangsúlyt, például eltérő hátteret vagy „Legnépszerűbb” címkét. A cél az irányadás, nem a többi lehetőség elrejtése.
Használd a fehér teret is
Egy gombot nemcsak színnel lehet kiemelni. Ha elegendő üres teret hagysz körülötte, már ettől is tisztább és hangsúlyosabb lehet a vizuális szerepe.
Minden képernyőn tedd fel ugyanazt a kérdést
Mi az az egy dolog, amit szeretnél, hogy a látogató most megtegyen? Ha erre nem tudsz egyértelmű választ adni, valószínűleg a vizuális hierarchián is érdemes javítani.
Egy 30 másodperces teszt, amit most azonnal elvégezhetsz
Nem kell hozzá elemzőeszköz vagy fejlesztő. Nyisd meg a főoldaladat, nézz rá körülbelül két másodpercig, majd figyeld meg, mi ragadta meg először a tekinteted.
Ha a válasz az, hogy „nem tudom, túl sok minden van”, akkor valószínűleg nem elég egyértelmű a vizuális hierarchia.
Készíts egy képernyőképet a főoldaladról, majd nézd meg szürkeárnyalatosan. Így a színek kevésbé tudják elrejteni a problémákat, és könnyebben észreveheted, hogy valóban a fontos elem emelkedik-e ki.
Ha a fő CTA szürkeárnyalatos nézetben teljesen elveszik a többi elem között, érdemes újragondolni a hierarchiát.
Gyakori kérdések
Azt jelenti ez, hogy minden fontos elemet ki kell emelnem a weboldalon?
Éppen az ellenkezőjét. Az izolációs hatás abból profitál, hogy a kiemelés viszonylag ritka. Ha minden fontos elemként jelenik meg, a látogató nehezebben tud sorrendet felállítani közöttük.
Csak színnel lehet alkalmazni a Von Restorff-effektust?
Nem. A méret, a forma, az elhelyezés, a térköz és a környezethez viszonyított kontraszt mind hozzájárulhat ahhoz, hogy egy elem kiemelkedjen.
Egy kisvállalkozás weboldalán is érdemes ezzel foglalkozni?
Igen. Egy kisebb látogatottságú oldalon különösen fontos lehet, hogy a rendelkezésre álló figyelmet jól használd ki. Nem feltétlenül több látogatóra van szükséged, hanem arra, hogy a meglévő látogatók könnyebben megértsék, mi a következő lépés.
A kiemelés nem attól működik, hogy hangos
A Von Restorff-effektus egyik legfontosabb tanulsága, hogy a figyelemért nem feltétlenül kell egyre több vizuális eszközt bevetned.
Sokszor éppen az működik jobban, ha visszaveszel a környezetből, és tudatosan meghagyod egyetlen elemnek a főszerepet.
Nem az a kérdés, hogy hogyan teheted feltűnőbbé a gombodat. Hanem az, hogy mit tudsz kevésbé feltűnővé tenni körülötte.
Mert a jó webdesign nem attól jó, hogy minden része látványos. Attól jó, hogy a látogató pontosan azt veszi észre, amit az adott pillanatban észre kell vennie.
- Hedwig von Restorff eredeti, 1933-as tanulmánya: Über die Wirkung von Bereichsbildungen im Spurenfeld
- APA Dictionary of Psychology: Distinctiveness effect
- Memory & Cognition: Zeigarnik and von Restorff: The memory effects and the stories behind them
Nézzük meg, hol veszíted el a látogatóid figyelmét
Átnézzük a weboldalad gombjait, vizuális hierarchiáját és kiemeléseit, hogy kiderüljön, valóban az kapja-e a figyelmet, aminek üzletileg a legfontosabbnak kell lennie.
Egy jó weboldalon nem minden elem akar egyszerre főszereplő lenni.
Kérem az auditot
