Minden cég életében eljön az az idő, amikor a weboldal megújítását már nem lehet tovább halogatni. Az utóbbi években a weboldalak megújítását már nem elsősorban a változó webdesign trendek, sokkal inkább a technológiai fejlődés motiválta. Az okostelefonok fejlődésével exponenciális mértékben nőtt a mobilról jövő látogatók aránya és most 2019-ben már szinte minden iparágban többségben vannak a mobil látogatók azokkal szemben, akik asztali gépet használnak.

Ebből adódóan a weboldalak megújításának legfontosabb mozgató rugója a reszponzívitás volt. Ez gyakorlatilag azt jelenti, hogy az új weboldal eszköz független legyen, mobilról, tabletről is ugyanolyan felhasználói élményt biztosítson, mint asztali gépről.

Ezzel párhuzamosan gyakorlatilag egy új tudomány, a felhasználói élmény tervezés, angolul user experience design, röviden UX design jelent meg a semmiből és vált elsődleges szemponttá a weboldalak illetve szinte minden digitális termék tervezése során.

Felhasználói élménynek nevezzük azon hatások összességét, amely a user által alkotott képet befolyásolják, mikor egy digitális terméket, mi esetünkben egy weboldalt használ. A weboldal betöltődési sebessége, szövegezése, navigációja, struktúrája, képi anyagai, nyomógombjai, űrlapjai, hibaüzenetei mind mind hatással vannak arra, hogy a látogatóban milyen benyomás alakul ki a weboldallal illetve ezen keresztül a céggel kapcsolatban.

Ha ez a benyomás pozitív, akkor a látogató szívesen marad a weboldalon, böngészik a tartalmak között és előbb-utóbb vásárló, ügyfél lesz belőle. Ha a benyomás negatív, akkor sajnos rövid időn belül elkattint és keres egy konkurens oldalt.

Kérdés, hogy a felhasználói élmény alapú tervezésből mit tudunk felhasználni egy weboldal újratervezése során, amelynek végeredményeképpen biztosak lehetünk abban, hogy az új site jobban fog teljesíteni, több látogatót és ügyfelet hoz. Cikkemben ezt fogom bővebben kifejteni.

UX design alatt nem holmi grafikai tervezést, hanem a folyamatot értjük, amelynek lépései biztosítják azt, hogy egy olyan új termék szülessen, amely magas felhasználói élményt nyújt. Általában terméktől függ, hogy ez a tervezési folyamat pontosan milyen lépésekből áll. Vannak olyan részek, amelyek nem elhagyhatók, kvázi kötelező elemek, míg mások az adott terméktől, iparágtól illetve a projekt erőforrásaitól függenek.

Egy weboldal megújítása során az alábbi UX design folyamaton kell keresztülmenni:

  1. Kutatás
  2. Tervezés
  3. Prototípus készítés
  4. Tesztelés
  5. Mérés

Nézzük ezeket a lépéseket részletesen:

ux design folyamata

1. Kutatás

A kutatás rész a látogatók megértéséről szól. Ebben a lépésben megpróbálunk minél több információt begyűjteni róluk. Honnan érkeznek, milyen demográfiai jellemzőik vannak, mit keresnek, hogyan viselkednek az oldalon, hol hagyják el az oldalt, stb.

Egy most induló cég új weboldala esetében nehéz helyzetben lennénk, mert kevés olyan adat van, amire támaszkodhatunk. Nem úgy egy weboldal megújítás esetében, ahol akár több évnyi Google Analytics statisztikai adatunk van, illetve a hőtérképes elemző szoftvert is villámgyorsan be lehet üzemelni, amely pár hét alatt már megfelelő mennyiségű információt gyűjt ahhoz, hogy a szükséges elemzéseket el tudjuk végezni.

A Google Analytics statisztikák elemzéséből kiderül, hogy milyen a látogatók összetétele, milyen forrásokból jönnek, hogyan viselkednek a weboldalon, milyen tartalmakat, milyen sorrendben néznek meg, milyen pontokon hagyják el a oldalt, mennyi időt töltenek az oldalon … stb. Ezek az információk nagyon sokat segítenek az új weboldal megtervezésében.

A hőtérképes elemzés lehetővé teszi, hogy lássuk pontosan hova kattintanak a látogatók az oldalon, meddig görgetnek, illetve akár videóra is lehet venni a viselkedésüket az oldalon. Ezeknek az információknak az elemzése rávilágít a jelenlegi oldal gyengeségeire, a problematikus pontokra és sokat lendít az újratervezés folyamatában.

2. Tervezés

A második lépés a kutatás információira támaszkodva készít terveket, amelyek az alapját biztosítják majd az új weboldal megjelenésének. Ezek a tervek első lépésként wireframe-ek vagyis drótvázak szoktak lenni. A drótváz szabadkézzel vagy számítógéppel rajzolt fekete-fehér terv, amely a weboldal szerkezetét, elemeinek elrendezését ábrázolja. A képeket négyzetek, a szövegeket vonalak helyettesítik.

A drótvázak célja, hogy gyorsan és hatékonyan lehessen ötletelni különböző megvalósításokon és közülük a legjobbnak ígérkezőt vigyük tovább egy részletesebb kidolgozás irányába.

A drótváz előnye a gyorsaság. Azért fekete-fehér és vázlatos elemekből áll, hogy a döntés során ne a konkrét tartalomra, hanem az elrendezésre koncentrálhassunk. Egy drótvázat pár perc alatt el lehet készíteni, ami lehetőséget ad arra, hogy 3-5 különböző tervet is megversenyeztessünk rövid idő alatt.

3. Prototípus készítés

Ha a weboldal nyitólapból és az aloldalakból is egy végleges drótváz kiválasztásra került, akkor jön a prototípus készítés. A prototípust abban különbözik a drótváztól, hogy funkcionalitással van felruházva. A menüpontok kattinthatók, átvisznek egy másik oldalra, a nyomógombok is funkciót kapnak, így a szemlélő úgy tud végigmenni az oldalon, mint ahogy azt később a látogató fogja megtenni.

4. Tesztelés

Ha már van egy kattintgatható prototípusunk, akkor azt már akár a potenciális látogatókon is letesztelhetjük. A tesztelés folyhat élőben, de akár a weben keresztül is. A lényeg, hogy a látogatónak kisebb weboldalon megoldandó feladatokat adunk és utána megnézzük, hogy melyiket hogyan tudja elvégezni, milyen visszajelzései vannak a megjelenéssel és a működéssel kapcsolatban.

A fejlesztésben résztvevők egészen más érzelmi kapcsolatban vannak az általuk tervezett termékkel, mint egy látogatónak. Azt is mondhatjuk, hogy a projektben résztvevők lehetnek elfogultak, különösen ha már eljutottak idáig és az ötletekből egy működő prototípust készítettek. Ilyenkor nem könnyű szembesülni azzal, hogy valami nem működik vagy nem úgy működik a potenciális célközönségnél, mint ahogy elterveztük. De ennek ellenére vagy talán pont ezért kiemelten fontos, hogy ne magunk teszteljük a saját weboldalunkat.

5. Mérés

Az előző tesztelés fázis utána jön maga a programozási munka, amely már nem kötődik szorosan az UX design-hoz. A programozási szakaszban a fejlesztők elkészítik a működőképes weboldalt, feltöltik tartalommal és élesítik.

Az UX munka azonban ideális esetben itt nem áll meg. Az Analytics tovább fut, tehát a régi oldal látogatottsági statisztikái mellett hamarosan az újból is megfelelő mennyiségű adatunk lesz ahhoz, hogy összevessük a két site teljesítményét és megnézzük, mi az ami működik és mi az ami finomításra szorul. Ezen adatok birtokában vissza lehet kanyarodni az ötletelés szakaszba és akár egy-egy aloldalt vagy tartalmi egységet újra lehet tervezni a magasabb felhasználói élmény érdekében.

A másik lehetőség az A/B tesztelés, amelynek során az oldalon csak egy kisebb részletet módosítunk és utána egy időben, párhuzamosan vetjük össze teljesítményüket. Ez utóbbi gyors és hatékony megoldás a kisebb UX problémák orvoslására.

 

Tusnádi István, Usernet Kft.