Felhasználói élmény a weboldalon

Sokat emlegetem a UX-et (User Experience) vagy "felhasználói élmény"-t, de még sosem fejtettem ki, ténylegesen, hogy valójában mi is ez és miért olyan fontos.

Röviden a felhasználói élmény meghatározza, hogy a felhasználók mit tapasztalnak, milyen benyomást kelt bennük a weboldal használata.

A jó felhasználói élmény azt jelenti, hogy a weboldal használata egyszerű és kényelmes, tehát nem kényszeríti a felhasználót felesleges lépésekre vagy bonyolult folyamatok elvégzésére, hanem a leglogikusabb és legrövidebb úton juthat a számára szükséges információhoz.

Mivel tehetünk azért, hogy jó élményt nyújtson a weboldalunk?

Gondoljunk a mobilról netezőkre!

Bár már elcsépelt mondat designeri körökben, de még mindig sokan legyintenek a témára. Most azonban megjegyezném, hogy 60-70% között mozog a mobil eszközről érkezők száma egy weboldal esetében. Tehát jelentős részben a weboldaladat mobil felbontásban látják. Ha eddig elhanyagoltad ezt a nézetet, akkor ideje rendbe szedni, mert lehet szuper asztali nézeted, de a látogatóid 70% utálni fogja a weboldaladat mert kezelhetetlen vagy átláthatatlan mobil nézetben.

Mire gondolok? Például:

• Legyen normális lenyitható menü – legyen átlátható a navigáció
• Legyen továbbra is látható a logó - de azért ízlésesen
• Véletlenül se tüntessünk el információkat mobil nézetben! Ami asztali nézetben látszik szöveges tartalom, annak mobil nézetben is látszódnia kell.
• A hajtás feletti rész vagy Hero header – amit görgetés előtt lát az ember a weboldalból – mobil nézetben is fontos szerepet tölt be. Dolgozzuk ki ezt a részt mobilon is ugyan olyan odafigyeléssel, mint asztali nézetben!

Bővebben a mobil first szemléletről itt ebben a bejegyzésemben olvashattok: Miért mobil first?

Optimalizáljuk a weboldal betöltési sebességét

Ha a weboldalon lassan tölt be, akkor annak a hátterében több dolog is állhat. Ezek közül néhány a teljesség igénye nélkül:

• elavult CMS rendszer (frissítésre szorul a WordPress);
• túlzott animáció használat;
• túl sok widget (vizuális szerkesztőknél jelent sokszor problémát);
• túl nagy méretű és felbontású képek használata;

Azzal kapcsolatosan, hogy a képek esetében mi a teendő ebben a bejegyzésemben találsz segítséget: Képoptimalizálás

Azt pedig, hogy jelenleg hogyan is áll a weboldalad betöltési sebessége az alábbi oldalon tudod ellenőrizni: Google PageSpeed Test

(Kattints a fenti linkre, majd írd be a weboldalad címét. Ezt követően nyomj az elemzésre.)

Az elemzés lefutását követően hasznos információkat fogsz arra vonatkozóan látni, hogy hol és miként lehet javítani a weboldalad sebességén. Amit laikusként is érdemes nézni, hogy javasolja e a képek optimalizálását. Amennyiben igen, úgy érdemes átnézned a képeid méretét és valóban optimalizálnod. Előfordulhat, hogy egyetlen bent felejtettett 1Mb -os kép is lerontja az eredményeidet.

Példaként az optimalizálásra és a sebesség javítására hozom a saját tapasztalataimat a Facebook Chatmodullal kapcsolatban.

Facebook Chat és Evelyn története

2020 áprilisában indítottam útnak a weboldalamat és akkor úgy gondoltam, hogy remek lehetőség egyből bekötni a Facebook Chat ablakot. Azóta sok hónap telt el és éppen itt az ideje összefoglalnom, hogy mik a tapasztalatok.

Először is – ami engem egyébként nagyon is meglepett – az ezen keresztül érkező üzenetek száma a nullához közelít. Tehát, ami eredetileg nagyon hasznosnak és praktikusnak tűnt, az valójában haszontalan.

A második dolog, hogy a PageSpeed Insights folyamatosan hisztizett a script kód miatt. Utólag megjegyzem, hogy elég jogosan..

Ha észrevetted a cikk olvasása közben, akkor már nem ugrik fel a Facebook Chat ikon mert eltávolítottam. Ha nem használta senki, akkor felesleges erőltetni, valamint nyomós érv volt az is, hogy milyen eredményeket ért el az oldalam a Google skáláján az alkalmazása mellett és után…

Facebook Chat-tel:

Facebook Chat nélkül:

Látható, hogy közel 20 pontos javulás volt elérhető egyedül ennek a funkciónak – ráadásul haszontalan funkciónak – a kikötésével... Érdemes tehát meggondolni, hogy valóban szükséges-e minden, amivel telepakoljuk a weboldalt. Természetesen - mint ahogyan ez is - csak akkor derül ki, ha figyelemmel kísérjük a látogatók tevékenységét és okulunk belőle. :) 

Legyen logikus a weboldalad struktúrája

Fontos, hogy ne csak számodra legyen egyértelmű, hogy mi-hol található a weboldalon, hanem a felhasználóknak is. Tedd lehetővé, hogy mindent könnyen és gyorsan megtaláljanak és elérjenek.

Ha blogolsz és már 10-15 posztnál többel rendelkezel érdemes keresőt, címkefelhőt vagy a főbb kategóriákat elhelyezni, hogy segítsd a konkrét témájú cikkek kiszűrését.

Ugyanilyen fontos, hogy a kapcsolati oldalt például ne a szolgáltatások almenüpontjaként találjuk meg, vagy hogy a gombok és a linkek egyértelműen utaljanak arra, hogy hova is fog a felhasználó eljutni, ha rákattint.

Apróságoknak tűnnek, de mégis az ördög bizony ezekben a részletekben rejlik. Az ilyen apró bosszantó dolgokból sajnos egy is bőven elegendő, hogy a felhasználó értéktelennek minősítse a weboldalt és elhagyja.

Valamint, ha már struktúra, akkor érdemes a navigációs menünket is rendbe szedni. Legyen átlátható és könnyen kezelhető. Vannak esetek, amikor tengernyi almenüpont van, de ezek elrendezésére is léteznek nagyszerű megoldások.