Webdesign és pszichológia: hogyan tedd könnyebbé a weboldalad befogadását?

Tartalomjegyzék
Bővített tartalomjegyzék

A webdesign és a UX-tervezés általában a pszichológiára hivatkozik. Nem véletlenül, hiszen a gyakorlat minden elemének visszavezethetőnek kell lennie az emberi agy működési alapelveire.

Minél kevesebbet kell gondolkodniuk a látogatóknak a weboldaladon, annál jobban tudnak a céljukra összpontosítani. A feladat tehát az, hogy megkönnyítsd számukra a haladást az akadályok felszámolásával. (Ugyanakkor persze az akadályok is lehetnek adott esetben hasznosak, de ez egy másik bejegyzés témája.) A cél az, hogy csökkentsd a kognitív terhelést a weboldalak használata során.

Mi az a kognitív terhelés és túlterhelés?

A webdesignba Steve Krug hozta be a kognitív terhelés elméletét a Ne törd a fejem! című klasszikusával. A kognitív terhelésről elegendő annyit tudni, hogy annak nagysága abból adódik, hogy mennyi információt kell feldolgoznia a munkamemóriánknak.  A lényeg itt az, hogy az emberi agy túlterheltté válik, és nem működik kellően hatékonyan, ha egyszerre túl sok információt kell feldolgoznia. Ez igaz akkor is, ha weboldalakról van szó. A túlzsúfolt, nem kellően átgondolt weboldalak, melyeken össze vannak dobálva a különféle elemek, és ahol a call to action gombok nincsenek a megfelelő helyen, nem működnek jól.

Az összetett és bonyolult weboldalak arra kényszerítik az embereket, hogy problémákat oldjanak meg rajtuk. Azok a látogatók, akiknek gondolkodniuk kell a weboldaladon a felületet, a lehetőségeket és a navigációt látva, azt érezhetik, hogy túlterheled őket. Ezt nevezzük kognitív túlterhelésnek. Kognitív túlterhelés akkor következik be, ha több információt kap az agy, mint amennyit egyszerre fel tud dolgozni kényelmesen. Ez frusztrációhoz és romló döntésképességhez vezet.

Tehát amikor a felhasználó megáll gondolkodni valamin, miközben böngészik a weboldaladon, akkor a munkamemóriáját terheli. Például olyan kérdésekkel, hogy “ez kattintható?” vagy, hogy “hol van a home gomb?”. És ez csak azért baj, mert rontja a felhasználói élményt.

A kognitív túlterhelés leggyakoribb okai

A felhasználók gondolkodását netezés közben persze nem csak a különböző weboldalak, hanem külső tényezők is befolyásolják. Ilyen például, ha mondjuk egy holnap tartandó prezentáció miatt egyébként is izgatott valaki, vagy ha egy szomszédban zajló építkezés zaja zavarja. Ezekre nincs befolyásod, és lehet akármilyen nagyszerű a webdesignod, problémái lehetnek vele, mert a külső ingerek leterhelik.

Arról sem szabad megfeledkezni, hogy minden felhasználónak eltérő munkamemória-kapacitása van. A laza felhasználók lehet, hogy semmin nem akadnak meg a weboldalad használata közben, míg azoknak, akik gyakran stresszelnek, minden apróság gondot okoz majd. Az is jellemző, hogy azok az emberek, akik ritkán használják a netet, sokkal többet gondolkodnak, mint a tapasztalt felhasználók. Ennek ellenére persze meghatározhatók azok a webdesign hibák, amelyek általában a kognitív terhelést okozzák.

Szükségtelen cselekvések

Minden egyes lépés, amit a felhasználó megtesz a weboldaladon, a kognitív terhelését növeli. Túl sok felesleges cselekvés csak eltéríti vagy felidegesíti. És mivel az emberek munkamemóriája egy speciális célra irányul, a felesleges akciók arra kényszerítik, hogy még jobban összpontosítson, még több munkamemóriát bevonva a feladatba. A lényeg, hogy a felhasználók gyorsan végezni akarnak az előttük álló feladattal, így el kell távolítani az útjukból minden akadályt.

A megoldás ebben az esetben az, hogy meg kell találni a felesleges cselekvést kiváltó elemeket. Szedj listába mindegy egyes lépést, amit a felhasználónak meg kell tennie, hogy befejezzen egy feladatot a weboldaladon! Ezután nézd át a listát, és a felesleges lépéseket távolítsd el a weboldalról. Az a lényeg, hogy az adott lépést Te, a weboldalad elvégezze helyette. Például azzal, hogy a szövegmezőben automatikusan megjelenik a kurzor, így megspórolható számára egy plusz kattintás.

Túlstimuláció

A zsúfolt, zűrzavaros weboldalak szintén eltérítik a felhasználót a feladatától. Ahogy nehéz egy dologra figyelni, ha közben emberek beszélnek hozzád, úgy a weben is nehéz összpontosítani, amikor túl sok a kép, az animáció, az ikon, a hirdetés, a szövegtípus, vagy túl erős színek harcolnak a figyelmedért.

Habár egy weboldal színeit többnyire az határozza meg, hogy melyek a cég által használt színek, sokat számít az is, hogy miként alkalmazzuk ezeket. Általában egy cég vizuális identitását meghatározó színek között semleges színek is találhatók, melyek a fő színek mellett vannak jelen.

A legtöbb modern designban ezeknek a semleges színeknek kell dominálniuk. Tehát, ha egy cég színei között a kék és a sárga szerepel, de mellette jelen van a fehér és a fekete, akkor valószínűleg a fehéret fogják háttérként választani a weboldalon a kék vagy a sárga helyett. Ezek a semleges színek lehetőséget adnak a tekintetnek egy kis pihenőre.

Emellett természetesen arról sem szabad megfeledkezni, hogy a színeknek pszichológiájuk van.

  • A kék, a zöld vagy a lila színek általában nyugalmat, szakmaiságot sugároznak, míg
  • a sárga, narancssárga és piros színek amellett, hogy melegséget és kreativitást, olyan negatív érzéseket is, mint a harag és a stressz. A semleges színek közül
  • a fehér nyitottságot fejez ki, ugyanakkor unalmas lehet.
  • A szürke modern és tiszta, viszont nagyon hideg és nem túl hívogató.

Természetesen ezek a hatások függenek az árnyalattól, valamint, hogy mennyit használunk belőle az oldalunkon.

A megoldás a túlstimulációra az az, hogy megszabadulsz mindentől, amire nincs feltétlenül szükség a weboldalon. Ha csak azt tartod meg, ami szükséges, akkor azzal csökken a betöltődési idő és jobb lesz a felhasználói élmény. Emellett változatossá is kellene tenned a tartalmaidat az egyensúly kedvéért. Vagyis ha egyetlen típusú tartalomból (kép, szöveg) túl sok van az oldalon, akkor az jobban leterheli a látogatót. Ha kiegyensúlyozottan használod a képet, szöveget és videókat, akkor az harmóniát teremt, és könnyebb az embereknek is befogadni az üzeneted.

Vagyis, ha már csak a szükséges dolgok vannak a weboldaladon, akkor próbáld azokat szimmetrikusan vagy okos asszimetriával elrendezni, mert így könnyebben megértik. Az tehát még nem elég, hogy csak a szükséges elemeket hagytad meg, ezeket rendezetten kell megjeleníteni.

Túl sok lehetőség

A paradoxon: a felhasználók sok lehetőséget akarnak, de a túl sok lehetőség zavarja őket. Hick törvénye szerint minél több lehetőséggel találkozik a látogató, annál több időbe telik neki döntést hozni. Gondolj úgy az egyes opciókra, mint felvillanó fényekre. Túl sok felvillanó fény túlterheli az embert.

A megoldás az, hogy ha már megszabadultál a felesleges opcióktól, akkor a maradékot kategóriákba rendezed. Ez tehát nem azt jelenti, hogy kevesebb lesz a választási lehetőség, hanem csak azt, hogy egyszerre kevesebb lehetőséggel találkozik a felhasználó. Erre megoldás a rejtett navigáció is, aminek azonban van hátránya is, mint arról korábban már írtunk.

Túl sok tartalom

Ez hasonló a túl sok lehetőség megjelenítéséhez: a felhasználó figyelmét eltéríti. Nyilvánvalóan tehát annyi tartalmat és akkor kell megmutatni neki, amennyire feltétlenül szüksége van az adott helyzetben. A weboldaltulajdonosok vagy a marketingesek gyakran túl sok információt akarnak megosztani a potenciális ügyfeleikkel. Sok esetben azonban felesleges fárasztják őket ezekkel az információkkal, és csak elbizonytalanítják a vásárlásban.

hosszú szövegek stresszt okoznak az embereknek, idegesek lesznek tőle, és összességében kellemetlen benyomásokat szereznek a weboldalról. Úgy kell tehát elrendezni az információkat, vagyis a szövegeket a weboldaladon, hogy azzal ne okozz kellemetlen érzéseket. Ezért először találd ki weboldalad tartalmának logikáját, és maga a tartalom legyen kellően egyszerű, rövid, érthető, könnyen befogadható az olvasók számára.

Az is gond, amikor azelőtt osztunk meg bizonyos információkat az emberekkel, hogy arra szükségük lenne. Például amikor a cégek már azelőtt tájékoztatást adnak a visszatérítési lehetőségekről, amikor a felhasználóknak ez még eszükbe sem jutott. Nem jó megoldás, ha például a “Megrendelem” gomb környékén ezekkel az információkkal találkoznak. A tesztek szerint ez 10-30 százalékkal is csökkenti a konverziós arányt. Ehelyett inkább más előnyökre fókuszáljunk, például a szállítási kedvezményekre.

De az sem túl jó, ha a cégek túl korán az adatvédelmi irányelveikkel hozakodnak elő. Ugyanis ennek láttán a felhasználók azt gondolják, hogy talán van is miért aggódniuk. Miközben ezeknek olvashatónak kell lenniük, nem mindegy hogy mikor, milyen formában jelennek meg. Azt kell elérni, hogy ne ijesszük el a vásárlókat, csak a szükséges, minimális mértékben zavarjuk őket. Helyezzünk inkább nagyobb hangsúlyt más, megbízhatóságunkat alátámasztó elemekre, mint vevővélemények, közösségi média ikonok és egyéb biztonsági garanciák.

Van amikor persze minden tartalom fontos, és ilyenkor itt is szervezni kell, hogy ne okozzon gondot. Ez hasonlít ahhoz, mint amikor egy telefonszámot több részre bontasz, és így könnyebben megjegyezhetővé válik. Egy szöveg esetében ez azt jelenti, hogy rövid bekezdéseket használsz, alcímeket, felsorolásokat és bőséges whitespace-t. Hosszú űrlapoknál is érdemes többlépésessé tenned a folyamatot, azaz nem egy végtelen hosszúságú űrlappal elriasztani az embereket, hanem rövidebb egységekben adagolni nekik, több oldalon keresztül. Ilyenkor már csak azt kell jelezni, hogy éppen hol tartanak a folyamatban.

Hagyd megpihenni a felhasználókat a whitespace-szel! A különböző tartalmi egységeket úgy lehet még hatékonyan szétválasztani, ha kellő whitespace-t hagyunk körülöttük. Ezzel is utalunk arra, hogy mi az ami összetartozik. A whitespace-nél azokról a területekről van szó, melyek üresek a weboldalon, mégis funkciójuk van. Az a szerepük, hogy vizuális pihenőt biztosítsanak a tekintetnek, körülhatároljanak vagy elválasszanak elemeket.

Ha egy látogató olyan weboldalra érkezik, melynek minden pixelét szövegek vagy képek borítják, akkor nagyon gyorsan kényelmetlenül fogja magát érezni a káosz és a zsúfoltság miatt. Whitespace hiányában nincs olyan pont a weboldalon, ahova egy kis nyugalmat keresve elmozdulhatna a tekintete.

A tartalmat tehát optimális nagyságú üres térben kell elhelyezni, hogy az szervezettséget és professzionalizmust sugározzon. A megfelelően elrendezett tartalom és whitespace azt üzeni a látogatóknak, hogy a weboldal tulajdonosa tudja, mi fontos, és nem akarja feleslegesen rabolni látogató idejét.

Zavaros felület

A kognitív terhelés kialakításában a legnagyobb bűnös általában a zavaros felhasználói felület. A rosszul megtervezett weboldalak megterhelik a felhasználók agyát. Pedig az emberek szeretik a rutint, az egyszerűséget, és ha az információkhoz olyan könnyen hozzáférnek, amennyire csak lehetséges. Vagyis a felhasználók számára olyan módon kell tálalni az információkat, amelyhez már hozzászoktak a weben.

Az embereknek soha nem szabadna hosszú ideig gondolkodniuk azon, hogy miként tegyenek meg valamit az oldalon, vagy hogy mit jelent egy-egy ikon. Nem kell feltalálni újra a kereket, egyszerűen ki kell használni azokat a vizuális jelzéseket, melyeket az emberek már ismernek más weboldalakról. Ezek segítségével olyan weboldalakon is tudnak tájékozódni, melyen még soha nem jártak.

Ugyanez érvényes a mikroszövegekre (micrcopy) is. A gomboknak sztenderd címkéket kell kapniuk (kapcsolat, küldés, stb.), hogy könnyen érthetőek legyenek. Ezek megkönnyítik a felhasználók haladását, míg az eredetieskedő szövegeken gondolkodniuk kell. Nem tanácsos például rejtélyes vagy nagyon eredeti módon fogalmazni például a termékeid vagy szolgáltatásaid leírásánál, vagy akár a navigációs menü horgonyszövegeiben. Kerüld az olyan szavakat, melyek esetében az embereknek gondolkodniuk kell azon, hogy vajon mit takarhatnak!

A megszokott szavak tudják meggyőzni az embereket arról, hogy érdemes továbblépniük megtorpanás nélkül, ahelyett, hogy azon gondolkodnának, vajon jó úton járnak-e. Gyakran a cégek belterjes kifejezéseket használnak a weboldalaikon, melyek számukra teljesen megszokottak, azonban a felhasználók nem ezekre keresnek rá a weben. Próbáljunk a felhasználók fejével gondolkodni!

De mi van akkor, ha van egy olyan funkciód, ami sehol máshol? Akkor azt önmagát magyarázóvá kell tenned egy valós életből vett megjelenéssel. Amikor például megjelent az e-mail, akkor egy borítékot ábrázoló ikonnal kellett megmagyarázni, hogy mit is jelent. Az nem jó, ha az embereknek azért kell rákattintaniuk egy ikonra, hogy kiderüljön mit takar.

Nehéz megtalálni oldalakat és funkciókat

Lehet, hogy a felhasználónak rendelkezésére bocsátottál mindent, de elképzelhető, hogy mégsem fogják megtalálni. Így a helyzet nem jobb, mint ha hiányozna vagy nem működne az adott funkció. A navigációnak ezért könnyen használhatónak és stresszmentesnek kell lennie. A használat legyen intuitív, és a felhasználó szabadon bóklászhasson az oldalon, miközben nem kell amiatt aggódnia, hogy elveszik rajta.

A megoldás az, ha az információ tematikus csoportosítása és hierarchiába rendezése, vagyis az információs architektúra átgondolása a felhasználói igények figyelembe vételével. Így az emberek könnyen meg tudják határozni, hogy mi legyen a következő lépés a weboldalon. Az emberi agy szereti a rendet és a sablonokat. Ha hiányzik az információk megfelelő csoportosítása a weboldalon, akkor a felhasználóknak meg kell állniuk, meg kell tanulniuk egy új mintát vagy sémát a használatra, amit aztán ki kell próbálniuk. Ettől azonban lelassul a folyamat, ami viszont sok esetben romló konverziós arányokhoz vezet.

A célcsoportod lehet, hogy nem úgy gondolkodik, mint Te. Azt kell tehát megtudnod, hogy a felhasználóid miként kategorizálnák a témáidat. Emellett itt is el kell távolítani a felesleget, például oldalak egyesítésével. Ha pedig bizonyos funkciók fontosabban, mint mások, akkor használj vizuális jelzéseket, mellyel felhívod rájuk a figyelmet. Ez a gyakorlatban jelenthet méretnövelést, plusz animációt, kontrasztos színt.

Jó megoldás lehet az információkat színek vagy formák segítségével csoportosítani. A lényeg, hogy könnyen megkülönböztethető csoportokat alakítsunk ki, így a felhasználóknak nem kell az egész oldal átpásztázniuk a tekintetükkel, ha valami keresnek rajta.

Belső következetlenség

Tegyük fel, hogy a főoldaladon a linkeket kék színnel és aláhúzással jeleníted meg, ugyanakkor egyik aloldaladon már eltűnik az aláhúzás. Ebben az esetben még ha nem is kattintott korábban a linkedre a felhasználó, meg fog torpanni, és elkezd gondolkodni, hogy vajon linkről van-e szó. Lehet, hogy nem is érdekli a link, de egy pillanatra megakad a következetlenség miatt. Az elgépelések és a helyesírási hibák is ugyanígy működnek. A legjobb UX láthatatlan, viszont a hibákat mindig észreveszik az emberek, azaz ilyenkor sérül a felhasználói élmény.

A következetesség szempontjából egy stílus-útmutató nagy segítség. Az olyan dolgok, mint a háttérszín, a képek méretei vagy a címek betűtípusa ebben mind rögzítve van. A helyesírási hibák, elgépelések viszont nem szándékosak, így ezekkel nehezebb a dolgod. Ilyenkor nem szabad pusztán a helyesírás-ellenőrzőre hagyatkoznod. Mindig át kell nézni a szövegeket még a megjelenés előtt.

Összefoglalva

A felhasználói élménynek tehát áramvonalasnak kell lennie. Bármilyen hiba – mint amilyen a kognitív túlterhelés – az egész gépet leránthatja. A webdesignereknek tehát arra kell törekedniük, hogy kellően hatékony weboldalakat tervezzenek, melyek csökkentik az agy kognitív terhelését, és nem erőltetik meg a látogatót. A lényeg:

  • Kognitív terhelés lehet bármilyen információ, ami a munkamemóriát terheli. Kognitív túlterhelés akkor következik be, ha túl sok információ nehezíti a döntéshozatalt és rontja a felhasználói élményt.
  • Használj többféle tartalomtípust és jól strukturált weboldalt, hogy elkerüld a vizuális zsúfoltságot!
  • A rejtett menük csökkentik az egyszerre elérhető lehetőségek számát, de ezt a felfedezhetőség rovására teszik.
  • Az olyan technikák, mint a tartalmak feldarabolása, csökkentik a kognitív terhelést.
  • A könnyen felismerhető ikonok és mikroszövegek, melyek a felhasználók meglévő tudásán alapulnak, csökkentik a gondolkodás szükségességét.
  • Az információs architektúrát az alapján építsd fel, ahogy a felhasználóid gondolkodnak!
  • A következetlenség és a hibák eltérítik az embereket.
  • Csökkentsd a felesleges elemek számát, ahogy a lépések számát is!

Miért legalább kétféle felhasználóra kellene tervezned a weboldalad?

Amikor hazaérsz egy nehéz és fárasztó nap végén, akkor semmi mást nem akarsz, csak egy kis nyugalmat. Ilyenkor a menekülést sokan a céltalan netezésben találják meg. Ilyenkor megszűnik az itt és most, és belemerülünk az online határtalan világába. Másnap aztán némi pihenés és pár csésze kávé után ismét fókuszálni tudsz a feladataidra, célirányosan végzed a dolgodat. Ugyanaz az ember maradsz, mégis teljesen másként fogod használni ugyanazokat a weboldalakat a kétféle tudatállapotodban.

A magyarázat az ELM

Nem akaratlagosan váltasz a kétféle információfeldolgozási módszer, a központi és perifériás között, hanem automatikusan kapcsol át az agyad. Ezt Petty és Cacioppo feldolgozási valószínűségi modellje (Elaboration Likelihood Model – ELM) írja le. A központi feldolgozás működésekor az ember motivált, hogy a fontos információk feldolgozása révén eljusson egy következtetésig. Amennyiben nem tud ennek érdekében már erőfeszítéseket tenni, mert mondjuk fáradt, akkor váltja fel ezt a perifériás feldolgozás.

Ez elméletben kétféle látogatót jelent, aki azonban gyakorlatban lehet ugyanaz a személy is eltérő tudatállapotokban:

  • az egyik célirányosan akar valamit,
  • a másik a céltalan,

és csak arra kíváncsi, hogy egy adott weboldal vajon mit kínál, milyen szórakozási lehetőséget nyújt a számára.

A kétféle viselkedés jellemzői

Dr. Liraz Margalit pszichológus, akinek a vásárlói élmény a szakterülete a ClickTale-nél, megvizsgálta ennek a kétféle csoportnak a viselkedését. Az egyik célzottan érkezett egy honlap egy aloldalára, a másik viszont automatikusan át lett irányítva egy videó megtekintése után ugyanarra az oldalra. Az itt megfigyelt viselkedésük alapján markánsan kirajzolódott a különbség: a célirányos látogató egyből a navigációs elemekre vetette magát semmi mással nem törődve, míg a céltalan elkezdte nézegetni a cikkeket, képeket, miközben ügyet sem vetett a menüre, a tájékoztató szövegekre vagy a keresőre. További lényeges különbségek:

  • A céltalan csoport háromszor annyi időt töltött az oldalon, mint a céltudatos csoport.
  • Előbbiek legörgettek az oldal aljára, míg utóbbiak nem.

Viselkedésük a heatmapen így nézett ki: Heatmap

  • A céltalan látogatók a tipikus F-formát járták be az egerükkel, míg a cél-orientált csoport csak a navigációs elemek körül mozgott.
  • Az előbbieket magukkal ragadták a különböző érzelmekre ható szavak, mint a sokkoló vagy a csábítás, míg utóbbiak kevésbé voltak fogékonyak ezekre.
  • A céltalanok átlagosan nyolc oldalt nyitottak meg, míg a cél-orientáltak ennél sokkal kevesebbet, és jóval kevesebb időt is töltöttek az oldalon.
  • Általában a céltudatosak a keresési találatok mentén indultak el, míg a bóklászókat a különböző felkínált tartalmak kötötték le.

Hogyan optimalizálhatod a weboldaladat a kétféle látogatóra?

Mivel a célorientáltakat nem lehet eltéríteni a szándékuktól, ezért meg kell teremteni számukra a lehetőséget, hogy a lehető legrövidebb úton elérjék céljukat, és arra az információra kell hagyatkozni, amit már amúgy is ismernek. Egyértelmű navigációs elemeket, keresőmezőt kell biztosítani a megszokott helyeken, melyek segítségével a lehető legkönnyebben és leggyorsabban elérhetik kitűzött céljaikat. Természetesen a megfontolt döntéshez nekik is szükségük lehet további információkra, ezért ezeket biztosítani kell számukra.

A céltalanul böngésző látogatók ezzel szemben érzelmi alapon dolgozzák fel az információkat, nagyobb figyelmet szentelnek a színes képeknek, a videóknak, a magával ragadó címeknek, szlogeneknek. Ahhoz, hogy megragadjuk a figyelmüket, színes és vonzó, nem túl nagy információtartalmú weboldalt kell készíteni sok-sok képpel és videóval.

Mivel őket jellemzően asszociációk rángatják egyik gondolattól a másikig, ahogy a linkek is, ezért jó linkelésekkel az oldalunkon tudjuk tartani őket. Amennyiben a már meglátogatott oldalakhoz hasonló tartalmat tudunk linkelni folyamatosan – jellemzően az oldalak alján – újra meg újra, akkor hosszú időre meg tudjuk fogni őket. Tipikus megoldás, amikor egy webshop az éppen megtekintetthez hasonló termékeket ajánl a termékoldalon “hasonló termékek” vagy “neked ajánljuk” mondatok kíséretében. A látogató pedig ezekre kattintgatva tölti el az egész estéjét.

A lényeg tehát az, hogy legalább erre a két típusra – amellett, hogy annál jobb, minél többféle látogatóra egyedi oldalt tudunk szabni – optimalizáljuk weboldalunkat. Ha nem adunk elég ingert a céltalanul böngésző csoportnak, akkor gyorsan elhagyják az oldalunkat, míg ha nem elég egyértelmű a navigáció, akkor a céllal érkezők fognak eltűnni.

Címkék: , ,

A Webshark.hu a hozzászólásoknál előzetes moderálást alkalmaz. Moderálási szabályaink itt olvashatók.