UX ellenőrző lista weboldalad magasabb felhasználói élménye érdekében

A felhasználói élmény alapú weboldal tervezés az egyik meghatározó trend lett az utóbbi években nem csak a webfejlesztésben, de bármilyen digitális termék fejlesztése során. A cél az, hogy ha egyszer pénzt költöttünk arra, hogy a látogatót behozzuk a weboldalra, akkor ott olyan tartalmat nyújtsunk neki olyan design és funkcionális köntösben, amely elégedettséggel tölti el ezzel elősegítve az elköteleződés kialakulását. Az elköteleződés pedig előbb-utóbb konverziót hoz ezzel bevételt termelve a cégnek.

Az alábbi cikkben egy olyan UX ellenőrző listát állítottam össze, amely összeszedi a legfontosabb tennivalókat a magas felhasználói élmény kiépítése érdekében. Menj végig az egyes pontokon és közben kritikus szemmel ellenőrizd le weboldalad, hogy teljesíti-e az itt leírt szempontokat.

A felhasználók gondolkodásának, pszichológiájának ismerete

A felhasználók gondolkodásának ismerete révén nagymértékben javítani tudod weboldalad használhatóságát. Egy kiemelkedő felhasználói élményt nyújtó weboldal a következő felhasználói kérdésekre ad választ:

  • Miről szól a weboldal?
  • Milyen megoldást nyújt a problémámra? Milyen előnyöket nyújt számomra?
  • Milyen lépéseket kell tennem az előnyök megszerzéséhez?

Az első lépés, hogy a felhasználókkal egyértelműen tudatnod kell, hogy miről is szól a weboldalad. Ezt a címsorban vagy egy jól elhelyezett képpel a tudomásukra hozhatod. Nem is gondolnád, hogy a weboldal elhagyások mögött milyen nagy arányban az a probléma van, hogy a látogató nem érti meg azonnal, miről szól a site.

Mutasd meg a felhasználóidnak, hogy milyen előnyöket nyújt a weboldal. Fontos, hogy ne említsd az indokokat, hogy miért vásároljanak, vagy miért regisztráljanak az oldaladon.

Amikor pedig a felhasználó már tisztában van az előnyökkel, egyértelműen látnia kell, hogy mi a következő lépés, amit meg kell tennie. Ez lehet például: Regisztráció, vásárlás, bejelentkezés, hírlevél feliratkozás, stb.

Navigáció és nyomógombok

A navigáció minden weboldal szerves részét képezi, ez segíti a felhasználókat eligazodni a site-on. A legfőbb kérdés: könnyen átlátható a navigáció a weboldaladon? Amennyiben nem, készíts tervet a leegyszerűsítésére. A felhasználóid akkor lesznek elégedettek, ha gyorsan és akadálymentesen megtalálják azokat az információkat melyekre kíváncsiak. (Ha sok menüpontból áll az oldalad, akkor nézz utána a card sorting nevű UX kutatási módszernek, sokat fog segíteni.)

A menüpontokat csökkenő sorrendben kell elhelyezni, attól függően, hogy a felhasználók számára milyen fontossággal bírnak. A menüsor legfontosabb jellemzője, hogy a weboldal minden aloldalán ugyanott kell elhelyezkednie. Emiatt a felhasználók mindig tisztában lesznek vele, hogy hol találják meg, honnan tudnak navigálni.

A jól használható navigáció mellett fontos még, hogy legyen lehetőség az oldalon belüli keresésre. A kereső mező pedig mindig látható legyen, hogy a felhasználó bármikor rá tudjon keresni az őt érdeklő aloldalra.

A navigáció további fontos elemei a gombok. Az egyik legfontosabb elem a cselekvésre ösztönző gomb (CTA), ami a weboldal céljától függően sokféle lehet („Vásárolok”; „Feliratkozom”; stb). Ezeket a gombokat minden esetben jól látható helyre kell elhelyezni, és a weboldal többi elemétől különbözniük kell mind színben, mind méretben; hogy a felhasználók könnyen észrevegyék és rá is kattintsanak.

Reszponzívitás és sebesség

Az utóbbi évek legfontosabb design trendje elsősorban a reszponzívitásból ered. Mióta a mobil használat szinte minden iparágban felülkerekedett a hagymányos asztali számítógéppel szemben, kiemelkedően fontos lett olyan weboldalakat készíteni, amelyek bármilyen eszközön magas felhasználói élményt nyújtanak. A reszponzívitás hibáinak ellenőrzésével és javításával nagy mértékben tudod növelni a felhasználók elköteleződését mobilon.

Tapasztalataim szerint nem elégséges, ha a weboldal készítőd azt mondja reszponzív az oldal és minden rendben van. Egy alapos teszt rá tud világítani olyan hiányosságokra, amelyek alátámasztják az analitikákban mutatkozó gyengébb teljesítményt a mobil használók esetében.

A hibás reszponzív működés miatt a menüpontok egy része nem látszik az oldalon
A hibás reszponzív működés miatt a menüpontok egy része nem látszik az oldalon

A weboldal betöltődési sebessége szintén a mobil térnyerésével lett kiemelten fontos a felhasználói élmény szempontjából. És itt nem arra gondolok, hogy egy 8 másodperc alatt betöltődő site esetében a felhasználók kevésbé lesznek boldogak, hanem egészen pontosan arról, hogy egy ilyen betöltődési idő esetében prompt elveszíted a mobilról jövő látogatóid 40%-át úgy, hogy már azelőtt elkattint, hogy betöltődne az oldal. Számtalan sebesség ellenőrző eszköz létezik, pár másodperc alatt megtudod, hogyan teljesít site-od ezen a téren.

További érdekes cikkeket olvashatsz reszponzív design témában itt.

Űrlapok

A legtöbb esetben kicsi különbségek vannak egy jó és egy rossz konverziós rátával rendelkező kapcsolatfelvételi űrlap között. A különbség mindig a részletekben rejlik és ez akár egy gomb színválasztásán is múlhat.

A helyes elrendezés az alapja minden űrlapnak. Alapvető szempontok, melyekkel egy hatékony űrlap elkészítésénél figyelembe kell venned:

  • A beviteli mezők mérete egyezzen meg a várható válaszok hosszával. Például a legtöbb ember keresztneve maximum 8 karakter hosszú. Ezért felesleges ennél sokkal nagyobb hosszúságú beviteli mezőt használnod.
  • A leírást és magyarázó szöveget mindig közvetlenül a hozzá kapcsolódó beviteli mező fölé kell elhelyezni.
  • Az űrlapot nem érdemes több oszlopra osztani, és soronként egy kérdést kell feltenni.

Mivel az internetezők több mint fele már mobil eszközökről böngészik, ezért elengedhetetlen, hogy az űrlapok minden készüléken tökéletesen jelenjenek meg, és a mobil eszközt (telefon vagy tablet) használóknak is tökéletes felhasználói élményt (UX) biztosítsanak.

A kötelezően megadandó telefonszám sok látogatót elriaszt az űrlap kitöltésétől
A kötelezően megadandó telefonszám sok látogatót elriaszt az űrlap kitöltésétől

A cselekvésre ösztönző gombnak (CTA) el kell különülnie az oldal többi részétől, jól észrevehetőnek kell lennie. Használj egyértelmű és figyelemfelkeltő színeket, amely egyértelműen jelzi a felhasználóknak, hogy mire kell kattintaniuk, hogy elküldjék kitöltött űrlapot. Számos kutatás szerint a piros a leghatékonyabb figyelemfelkeltő szín. A hatékonyságot növelheted még a narancssárga és a zöld színek használatával is.

Színek és design

A felhasználók számára vonzó design nélkül a weboldalad nem lesz sikeres. Design alatt azonban nem csak a megjelenést, hanem a weboldalad használhatóságát is értjük.

A weboldaladon használt színeknek nem csak szépnek, hanem funkcióval rendelkezőknek is kell lenniük. Minden színnek sugallania kell, hogy az adott elem mire használható. Használj különböző árnyalatot például a „Vásárlás” gomb esetében és más árnyalatot a „Tovább” gomb esetében. És a legfontosabb, hogy az adott szín, mindig ugyanazt a funkciót hordozza az egész oldalon.

Az egységes színhasználat és design hiánya csökkenti a bizalmat a látogatóban
Az egységes színhasználat és design hiánya csökkenti a bizalmat a látogatóban

Ne feledkezz meg a kontraszt használatáról sem. Segítségével kiemelheted a fontosabb elemeket a weboldalból, ezáltal a felhasználók figyelmét is rájuk irányíthatod.

A képek több funkciót is hordoznak, mint elsőre gondolnád. Egy jól megválasztott és elhelyezett képpel irányítani tudod a felhasználóid figyelmét is. Egy egyszerű de hatékony eszköz, ha egy képet helyezel el a weboldaladon, amin egy személy néz egy adott irányba. A látogatóid önkénytelenül is a weboldalad azon részére fognak nézni, amerre a képen szereplő személy is néz. Ezáltal irányítani tudod a figyelmüket.

A sablonos stock fotók személytelenné teszik a weboldalt a látogató szemében
A sablonos stock fotók személytelenné teszik a weboldalt a látogató szemében

Szövegezés

A következő pontokat ellenőrizd weboldalad szövegezésével kapcsolatban:

  • Győződj meg arról, hogy a weboldaladon található szövegek nyelvezete elég egyszerű ahhoz, hogy minden látogatód megértse.
  • A gombokon és a menükben található utasításoknak rövidnek és közvetlennek kell lenniük.
  • Mindenképpen került a szakmai szövegeket, vagy olyan kifejezéseket, amik félreérhetők vagy zavarók lehetnek.
  • Győződj meg róla, hogy az oldaladon található hírek vagy cikkek olvasói tisztában legyenek azzal, hogy aktuális-e még az adott tartalom. Ennek érdekében lásd el dátumokkal a különböző tartalmaidat.
  • Használj címkéket az aloldalaidon, ezáltal a felhasználók könnyebben tudnak az oldaladon belül keresni.
  • Az aloldalad url címei legyenek rövidek és utaljanak az aloldal tartalmára.

Összefoglalás

A tervezők és fejlesztők feladata, hogy egy weboldal a felhasználók számára érdekes és legfőképpen könnyen használható legyen. Milliónyi technika és megközelítés létezik ennek biztosítására, de az előbbi pontok remélhetőleg segítséget nyújtanak mindenki számára a weboldala jobbá tételében.

A szerző

István Tusnádi

Közel 20 éve foglalkozom vállalati weboldalak tervezésével, fejlesztésével. Az utóbbi években elsősorban tanácsadóként és projekt vezetőként veszek részt a weboldal fejlesztéseket érintő munkákban. Kedvenc területem az UX design, UX audit és versenytárs elemzés.
PPC Pro Facebook-csoport

Csatlakozz Facebook-csoportunkhoz!

PPC és analitika, nem csak Pro felhasználóknak.

Belépek

Írj nekünk!

Kérdésed van? Cikket írnál? Van egy jó képzésed? Feladnál egy álláshirdetést? Írj üzenetet!