Milyen UX Design módszerekkel javíthatod a webshop konverzióját?

Egy weboldal készítése, egy webáruház indítása, netán egy mobil app fejlesztése akkor tud manapság sikeres lenni, ha a modern kinézet mellett maximálisan kiszolgálja az ügyféligényeket is. A konverzió javításához a UI Design mellett alapvető a többféle módszertan, szoftver, analitikai eszköz alkalmazása. A UX Design, azaz a felhasználói élmény tervezés eszköztára sok területet fed le. Hol érdemes elkezdeni, milyen eszközöket célszerű használni a konverzió optimalizálás érdekében? Máriás Attila, 22.design CEO és Lead UX designer ehhez adott hasznos tanácsokat a LogiNet márciusi UX Café eseményén.

Ki is a célszemély?

Sok vállalat beleesik abba a hiába, hogy az online felület létrehozásánál nem veszi figyelembe a felhasználót. Ha nem tudod, milyen problémája van az ügyfélnek, mire keresi a választ, akkor a webshop, a weboldal, illetve a mobil app sem lesz felhasználóbarát.

A UX Design módszereinek alkalmazása során az egyik legfontosabb lépés a végfelhasználó (persona) karakterének megalkotása. Nem egy prekoncepciók alapján elképzelt absztrakt felhasználót kell létrehoznod, hanem egy hiteles és életszerű karaktert, akinek a motivációival és problémáival a tervezés során azonosulni tudsz. A digitális felületek esetében a demográfiai adatoknak már egyre csekélyebb a jelentősége, és nem biztos, hogy a korosztály, életkor alapján érdemes kialakítanod a personákat.

Fontos az egyedi minták megtalálása, ami lehet a motiváció is. Erre jó példa a Spotify, ahol arra keresték a választ, hogy miért is osztja meg bárki másokkal a playlist-jét.

Hasznos tippek

Érdemes a cégen belül kikérned azoknak a véleményét, akikkel a felhasználók kapcsolatba kerülnek a vásárlás vagy a szolgáltatás igénybevétele során (pl. sales, support, ügyfélszolgálat). Ezt követően célszerű a personaként meghatározott célcsoportból pár személlyel mélyebb interjút készíteni, és a visszajelzések alapján finomítani a persona jellemzőit.

A felhasználói útvonal és a prototípusok elkészítése

A felhasználói útvonal (user journey) azokat a lépéseket jelenti, amelyeken a felhasználó keresztül megy. Az első lépés, amikor felmerül benne az igény egy új termék megvásárlására,és a cselekvéseit egészen addig kell követned, amíg megvásárolja a kinézett árut. Ezzel azért fontos tisztában lenned, mivel ez alapján tudod úgy kialakítani az online felületeid (pl. oldal kategóriák, funkciók, terméklisták, keresők, szűrők), hogy választ adjanak a felhasználó felmerülő kérdéseire, igényeire.  

A felhasználói útvonal nyújt segítséget a prototípusok elkészítéséhez is, amelynek két fajtája van. A „low fidelity” prototípusok inkább vázlatosak, ami fekete-fehér skicceket takar, sematikus grafikai elemekkel és „lorem ipsum” szövegekkel. A „high fidelity-k" ezzel szemben kidolgozottabbak, ezért valósághűnek tűnnek. A prototípusok előnyei, hogy mivel interaktív tervek, ezért a felhasználók közvetlenül is kipróbálhatják rajtuk az egyes funkciókat, és ezáltal visszajelzéseket tudsz kapni a termék működéséről még azelőtt, hogy elkezdődött volna a drága fejlesztés.

Hasznos tippek

Érdemes legalább 10 személlyel elvégezni a felhasználói teszteket. A visszajelzések alapján még a tervezési szakasz alatt tökéletesíteni tudod a megoldásodat. Ez ár/érték arányban is hasznos, hiszen a problémákat, hibákat nem egy lefejlesztett és beélesített termék esetében kell kijavítani.

Egyedi megvalósítás vagy testreszabás?

Legyen szó webshopról, weboldalról, landing page-ről, netán mobil appról, általában mindig felvetődik a kérdés, hogy egyedi fejlesztés, egyedi design történjen, vagy egy dobozos szoftver testreszabása (pl. WordPress alapján).

Legtöbbször nem célszerű teljesen a nulláról felépíteni az adott felületet, érdemes megtalálni azokat a pontokat, amik már elérhetők. Ilyen lehet például egy hírlevél kezelő megoldás integrálása (pl. Mailchimp).

Hasznos tippek

Érdemes kihasználni a component library-kben rejlő lehetőséget. Ezek olyan „építőkockák”, amelyek az adott keretrendszerhez (framework) kapcsolódhatnak. Például, ha a fejlesztés JavaScript keretrendszerben történik, akkor ehhez kapcsolódnak olyan UI component library-k, ahonnan például egy naptár modul, check box, vagy éppen gombok átvehetők. Ezek nulláról történő elkészítése sok időt és költséget jelent, egy letesztelt építőelem felhasználása viszont lerövidíti a fejlesztést. Igaz, ez kompromisszumokkal jár, ám lehet egészen jó megoldásokat találni.

Hasznosnak bizonyulhat egy ún. Impact / Effort Matrix elkészítése is, amely azt mutatja meg, hogy milyen fejlesztést, mekkora erőforrással lehet megvalósítani. Az összeállításához szükség van a fejlesztőre – aki erőforrás szempontjából vizsgálja a helyzetet -, az üzleti folyamatokat értő munkatársra / megrendelőre – aki a bevételre gyakorolt hatást nézi -, és a UX designerre, aki a fejlesztés felhasználók számára adott értékét becsüli meg. Az adott fejlesztés hatása és erőforrásigénye nyomán kirajzolódó mátrixból kiolvasható, hogy melyek a könnyen megvalósítható, akár nagy hozzáadott értéket képviselő feladatok (Fill Ins), melyek azok, amiknek nincs sok hozzáadott értéke, de könnyen meg lehet csinálni (Quick Wins), melyek azok, amelyek nehezen megvalósíthatók, ám nincs is komolyabb hatásuk (Thankless Tasks), és melyek azok, amelyek komoly értékkel bírnak, de nehéz is elkészíteni őket (Major Projects).

Üzleti célok megértése

Mindig fontos, hogy tisztában legyél azzal, melyik mutatódon (Key Performance Indicator, KPI) szeretnél javítani. A design tervezése során ezt kell szem előtt tartani, enélkül ugyanis nem lehet növekedési pályára állítani a céget.

Hasznos tippek

A KPI-k felkutatására jó eszköz a Value Proposition Canvas létrehozása, ami abban segít, hogy megtaláld a célcsoportod számára megfelelő értékteremtő terméket vagy szolgáltatást. A model segítségével láthatod, mi az, amiben javulni szeretnél (pl. kosárérték növelése, bevétel emelkedése), milyen növekedési lehetőségeid vannak, milyen problémákra kell megoldást találnod.

Miért fontos a felhasználói élmény nyomon követése?

A UX Designra nem csupán a webshop készítésekor érdemes figyelmet fordítani. A webáruház átláthatóságának, gördülékeny navigációjának fenntartása, a változó vásárlói igényekhez való folyamatos igazítása, a konverziós ráta növelésére való törekvés szükségessé teszi a folyamatos monitorozást, adatelemzést.

Hasznos tippek

A UX Tracking abban segít, hogy a konverziót hogyan tudod javítani. A megfelelő eszközök alkalmazásával (hőtérkép, session recording, analítika) világosan láthatod, hogy mi történik valójában az online felületeden, és ez alapján tudsz módosítani, fejleszteni.

UX Design a cégek szemével

Milyen előnyeit tapasztalták meg a UX Design-nak az Olcsóbbat.hu és a Praktiker? Íme pár hasznos tanács Dévavári Dezsőtől, az Olcsobbat.hu Head of Product vezetőjétől, és Hatvani Zoltántól, a Praktiker e-kereskedelmi vezetőjétől,.

• Érdemes külső UX szakembereket bevonni a tervezési folyamatba, mivel egy “külső szem” olyat is meglát, amit különben cégen belül nem vettek volna észre. 
• A felhasználói tesztek, akár öt fő esetén is, nagyon hasznosnak bizonyulnak. Ilyenkor válik világossá, hogy számos olyan dolog, ami a cég szakemberei számára egyértelmű (például szűrők használata, gombok jelentése), a felhasználók számára korántsem az. 
• Egy apró animációs megoldás is érdemben javíthatja a konverziót. Íme egy példa: a checkout folyamat során, a fizetési mód kiválasztását követően megjelenő zöld pipa - ami azt jelzi, hogy az adatok pontosan ki lettek töltve - megadja a felhasználó számára a biztonságot egy kritikus pillanatban. 
• Célszerű a vevői igényeket figyelembe venni. Egy tanulságos példa: az ügyfelek negatív élményként élték meg, hogy a fizetési módok között a bankkártyás fizetés lehetősége már előre ki volt választva. Bár egy kattintással az utánvétre is módosítani lehetett volna, a felhasználói tesztekből az derült ki, hogy a vevők úgy élték meg ezt, mintha kevesebb fizetési mód közül választhattak volna