A felhasználói élmény tervezésének folyamata

A felhasználói élmény, angolul user experience az egyik fő mozgató rugója lett az utóbbi években a weboldalak tervezésnek. A fejlett weboldal elemző és hőtérképes szoftvereknek köszönhetően ugyanis mindennél pontosabb képünk van arról, hogy mik azok a szempontok, amelyek egy látogató véleményét befolyásolják egy weboldal megtekintése során.

Ha nagyon röviden szeretném összefoglalni, akkor azt mondhatom, hogy a látogató azt szereti, ha egy weboldal gyorsan töltődik be, mobilon is jól működik, könnyen megtalálható, könnyen navigálható, releváns és hasznos információkat nyújt és hatékony, gyors választ ad a felmerülő kérdésekre.

Ha egy kicsit mélyebben megvizsgáljuk az előbbiekben felsorolt látogatói elvárásokat, akkor azt látjuk, hogy nem is olyan könnyű olyan weboldalt tervezni és készíteni, amely minden szempontból megfelel ezeknek a feltételeknek.

Ahhoz, hogy a végeredmény minél közelebb legyen a tökéleteshez, alaposan meg kellett reformálni azt, ahogy korábban a weboldalainkat terveztük és egy egészen új munkafolyamatot kellett kialakítanunk. Ennek a folyamatnak, vagyis a felhasználói élmény tervezésének a lépéseit fogom az alábbiakban bemutatni.

1. lépés: kutatás

Ebben a lépésben megpróbálunk minél többet megtudni arról a közegről, arról az iparágról, amelyben a cég illetve a weboldala versenyezni fog.

• Megvizsgáljuk a versenytársakat, milyen a weboldaluk, milyen stratégiát folytatnak, milyen erősségeik, gyengeségeik vannak, mi az amiben jobbak, mi az amit érdemes eltanulni tőlük.
• Megvizsgáljuk a jelenlegi weboldalt, hogy minél több tapasztalatot gyűjtsünk az új megtervezéséhez. A látogatóknak milyen jellemzői vannak, melyek a legnépszerűbb oldalak, hol morzsolódnak le az emberek, mennyi időt töltenek a site-on.
• Interjúkat készítünk néhány személlyel a potenciális célcsoportból, hogy minél többet megtudjunk motivációikról, eszköz használatukról, a bennük felmerülő kérdésekből.
• Hőtérképes elemzésnek vetjük alá a jelenlegi oldalt, hogy meglássuk melyek azok a pontok, ahol gyengén szerepel, melyek azok a részek, amelyeknek használatában a látogatóknak problémái adódtak.

2. lépés: elemzés

Az előző lépés tapasztalatai alapján megpróbáljuk az ott nyert információkat rendszerbe foglalni és előkészíteni a következő tervezési fázishoz. Ebben a lépésben …

• meghatározzuk a perszónákat. Azokat a fiktív személyeket, akik a legjobban jellemzik a weboldal célközönség típusait.
• meghatározzuk a felhasználói útvonalat, amely jelzi, hogy a célközönség hol, milyen pontokon kerül érintkezésbe a weboldallal és ott milyen kérdésekre, problémákra keres választ.

3. lépés: tervezés

Azok után, hogy tudjuk a jelenlegi weboldalnak milyen gyengeségei vannak, ki a célközönség és nekik milyen jellemzőik, problémáik és igényeik vannak, nekiállunk az új weboldal megtervezésének. Nem pontos grafikai terveket készítünk, hanem csak úgy nevezett wireframe-eket. A wireframe-ek (magyarul drótváz) olyan szabadkézzel vagy célszoftverrel készült fekete-fehér rajzok, amelyek a weboldal főbb elrendezéseit mutatják nagy vonalakban. A wireframe-ek célja, hogy nagyon gyorsan többfajta elrendezést, megvalósítást fel tudjunk vázolni egyfajta ötletelés jelleggel és utána pontozásos technikával el tudjuk dönteni, hogy melyik terv lesz az, ami a legjobbnak bizonyul és amivel folytatni fogjuk a munkát.

A wireframe-ekből többfajta verzió is készülhet, az utolsó változatok már részletesebben kidolgozottak. Ezt követi a prototípusok létrehozása, amely a wireframe-ekből egy kattintható félig-meddig működőképes verziót hoz létre, amelyet már akár a célközönséggel is tesztelni tudunk.

4. lépés: tesztelés

A végleges részletesen kidolgozott grafikai tervek elkészítése előtt többfajta módszerrel teszteljük a terveket. Számos különböző eljárás létezik erre, a legnépszerűbbek a usability tesztek, a kérdőíves tesztek, a fókusz csoportos tesztelés és az A/B tesztelés. Mindegyiknek az a célja, hogy a lehető legpontosabb választ kapjuk arra, hogy az általunk készített tervek működőképesek lesznek-e a gyakorlatban, megfelelnek-e a célcsoport elvárásainak.

5. lépés: grafikai tervezés

Ebben a lépésben elkészülnek a végleges grafikai tervek. A prototípusok vagy wireframe-ek alapján a grafikusok elkészítik a weboldal pontos design terveit. A korábbi fekete-fehér vázlatok helyét színes, a cég arculatának megfelelő megjelenés, végleges fotók, grafikák valamint pontosan definiált betűtípusok veszik át.

A tervezés nem csak a nyitólapot érinti, hanem az egyes aloldal típusok, landing page-ek, köszönő oldalak terveit is. Ezzel párhuzamosan készül egy design kiírás, amely a programozóknak nyújt segítséget az egyes design alapelemek, pl. nyomógombok pontos kódolásához illetve stíluslapjainak kialakításához.

Összefoglalás

A felhasználói élmény tervezésének folyamata lényegesen eltér attól, ahogy korábban weboldalainkat terveztük. A cél tehát az, hogy a célközönség igényeihez leginkább illeszkedő weboldalt készítsünk és ezzel magas felhasználói élményt nyújtsunk.

Ehhez az itt felsorolt lépések nyújtanak támpontot, bár azt azért el meg kell jegyeznem, hogy általában egy adott projekttől függ, hogy pontosan milyen lépésekből fog állni a folyamat. Vannak olyan lépések, amelyekre kisebb hangsúly kerülhet vagy akár el is hagyhatók annak függvényében, hogy pontosan milyen bonyolultságú az adott feladat és milyen jellegű információkra támaszkodhatunk.