UX tervezés lépésről lépésre

Alapinformációk:

A UX két angol szónak a rövidítése (User Experience), amely magyarul felhasználói élményt jelent. 

A leírás Pásztor Dávid - UX Design könyve alapján készült kiegészítve saját gondolatokkal, tapasztalatokkal!

A UX szemlélet

• Legfontosabb a felhasználók visszajelzése
• Végfelhasználókra és üzletre koncentrálás
• Sok kísérletezés
• Folyamatosan a felhasználók figyelése
• Sokkal fontosabb, hogy jól használható legyen, mint esztétikus vagy trendi 

Perszónák felvázolása minden termékfejlesztés első lépése. Kik azok a különböző embertípusok, akik a termékünket használni fogják? Mi jellemző rájuk? Perszónát például a következő jellemzők alapján alkothatunk:

• Nem, kor és lakóhely
• Végzettség és szakma
• Mit tud a termékről?
• Mi a hobbija?
• Egyedülálló vagy családos?
• Milyenek az anyagi körülményei?
• Milyenek a médiafogyasztási szokásai?
• Milyen eszközöket használ?
• Milyen környezetben használja a termékünket? (Mikor és hol?)
• Mennyi időt tölt online?
• Mire használja az eszközét?
• Mik a kedvenc márkái?
• Mennyire trendkövető?
• Milyen az előképzettsége az adott területen?
• Mik a motivációi? Miért, milyen céllal használja a termékünket?

Legfontosabbak a motiváció és kontextus, vagyis hogy miért és milyen környezetben használják a termékünket. Erre a legalkalmasabb egy perszóna sablon, amely több különböző leendő felhasználó tulajdonságait foglalja össze ugyanazon szempontok alapján. Ilyen szempontok:

• Alapadatok (név, foglalkozás stb)
• Előzetes tudás
• Kontextus (környezet)
• Problémák
• Motiváció (mi a cél)

Itt egy példa sablonra:

A perszónákat érdemes nagyba kinyomtatni, folyamatosan legyen a szemünk előtt a fejlesztés ideje alatt. Interjúztatni kell a felhasználót, fájdalompontokat keresve. Csak nyílt végű kérdéseket szabad feltenni. Példakérdések:

• Mi a legnagyobb problémája az adott témával kapcsolatban?
• Mondja el a három legidegesítőbb dolgot a témával kapcsolatban.
• Mi okozza a legnagyobb fejfájást a témával kapcsolatban?

Problémák priorizárlása:

• Mivel tölti a legtöbb időt? Mire szánja a legtöbb pénzt?
• Mire a legbüszkébb a témával kapcsolatban?
• Mi a fontos számára a témával kapcsolatban?

A megoldás megtalálását segítő kérdések:

• Mesélje el részletesen a legutóbbi konkrét esetet, amikor a probléma előfordult.
• Hogyan oldja meg jelenleg a problémát?
• Mennyi időt / pénzt / erőforrást vesz igénybe a jelenlegi megoldás?

Interjúzás közben ne tegyünk fel olyan kérdéseket például, hogy ez tetszik? ez jó lesz? mert a felhasználó nem tudatos, bizonytalan, nem tudja eldönteni.

Terepkutatás során legjobb a felhasználót a valódi környezetében megfigyelni, megvizsgálni.

A felhasználók útja (USER JOURNEY)

Először a folyamatokat tervezzük meg (pl.: regisztráció vagy fényképfeltöltés lépései). Ehhez két eszköz is van:

• User jouney (felhasználói útvonal), alkalmazáson belüli mozgást vizsgálja
• Customer journey vagy eperience map (élmény térkép), a teljes élményt vizsgálja onnatól, hogy megfogalmazódik az igény a felhasználó fejében, egészen az alkalmazás használatát követő időszakig.

A felhasználói útvonalak meghatározásánál fontos, hogy lineáris útvonalakat tervezzünk. A folyamatot mentális lépésekre bontjuk fel. Az számít egy lépésnek, amit a felhasználók külön cseledetként fogalmaznánk meg, ha megkérdeznénk őket, hogy mi történt velük. Például egy webáruház esetében:

• Rákerestem a cipőkre
• Kiválasztottam a kedvencemet
• Megnéztem, hogy van-e a mértemben, és mennyibe kerül
• Leadtam a rendelést

Egy folyamat akkor jó, ha minél könnyebben és gyorsabban el tudunk jutni a célunkhoz. Jobb elkülöníteni a részeket. 

Onboardingnak nevezzük azt a rövid időszakot amikor egy felhasználó először kipróbál egy alkalmazást és megérti, hogy pontosan mire is való. Bejáró, buborékos tutorial-okat ne használjunk! Mobilos „kezdeti lépések” képeket, valamint egész oldalas elsötétítés és azon lévő mutogatásokat se használjunk ahhoz, hogy a felhasználót tanítsuk. Az emberek ezeket felismerik és mindig bezárják. E helyett úgy kell elkészíteni a felületet, hogy azt a felhasználó MAGÁTÓL könnyedén fedezze fel. Egy új programnál nagyon fontos, hogy az első valami létrehozása jöjjön be és egy nagy cselekvésre ösztönző gomb legyen. Ezeket a képernyőket úgy kell megtervezni, vezessék a felhasználót az igazság pillanata felé (amikor megérti a program működését). A leghatékonyabb, ha először nincs választási lehetősége. Az is nagyon jó, ha megjelenítjük a leendő tartalom körvonalát, sziluettjét. 

A Hooked-modell leírja, hogy hogyan lehet szokássá tenni egy alkalmazás használatát. Először külső késztetésekkel (push-notification, e-mail, hirdetés) kell a felhasználókat az alkalmazásba csalogatni, aztán pedig belső késztetésekkel (triggerekkel). Első lépés egy kezdő akció. Ha ezt megteszi, akkor jutalmazni kell. A jutalom lehet egy gratuláló üzenet egy badge (kitüntetés), egy vicces kép – ezekkel jelezzük a felhasználónak, hogy jó úton jár. Változó jutalmak kellenek. Végül a felhasználót elkötelezetté kell tenni (pl.: a pinterestnél a regisztráció után ki kell választani, hogy milyen témákat szeretsz). Ily módon kialakul a program és felhasználó között egy fajta személyesebb kapcsolat és ezért használni fogja azt.

Képernyők tervezése

7 alapszabály:

1. A három kérdés, amire minden képernyőnek válaszolnia kell
2. A vizuális hierarchia fontossága
3. A szöveg a design része
4. A konvenciók fontosak, és használjuk őket
5. Mobilon a kezünknek is tervezünk
6. A hasznos területek arányára figyelni kell
7. Egyszerűségre és átláthatóságra törekszünk

Részletesebben:

1. Amikor egy új képernyőre érkezünk, három kérdésre keressük a választ:

• Hol vagyunk?
• Mit lehet itt csinálni?
• Hogyan léphetek tovább?

Amikor megérkezünk egy felületre, akkor körbenézünk. Ha egy alkalmazáson belül mozgunk oldalról oldalra, akkor a hasonló elrendezés és színek megnyugtatnak minket, hogy jó helyen járunk. Ha egy linkre kattintunk, és a következő oldalon a címben visszaköszön a link szövege, akkor tudjuk, hogy jó helyre érkeztünk. A menükben is kiszokták emelni, hogy épp melyik oldalon tartózkodunk.

Ezután a következő kérdés, hogy mit lehet itt csinálni: nagyon gyorsan a felhasználó tudtára kell adni, hogy mi mire jó, milyen funkciók és tartalmak vannak.  

A harmadik kérdésre, hogy "Hogyan léphetek tovább?", a választ gyakran a call-to-action gombok formájában, vagy a menüben találja meg az ember.

A három kérdésre nagyon gyorsan, sokszor csak egy-egy másodperc alatt keressük meg a választ.

2. Vizuális hierarchia 

Egy adott képernyő elemeit rangsorolni tudjuk az alapján, hogy mennyire feltűnőek, mennyire hangsúlyosak, milyen hamar vesszük észre ezeket. Ami hangsúlyos és feltűnő, az van a hierarchia tetején, az apró eldugott elemek pedig az alján. Például egy nagybetűs írást előbb elolvasunk, mint egy apróbbat.  

Hogyan alakítsuk ki a vizuális hierarchiát?

• Pozíció: a bal felső sarokhoz közelebb eső elemek hangsúlyosak
• Textúra, forma és orientáció

Fontos tanulság, hogy nemcsak kiemelni tudunk elemeket, hanem eldugni is.

3. A szöveg kommunikáció a gép és ember között, több verziót kell készíteni

4. Használjuk a konvenciókat

A webes és főleg a mobilos világban nagyon gyorsan elterjedtek olyan megoldások, amelyeket a felhasználók megszoktak, keresik azokat. Ezeket a de facto sztenderd megoldásokat konvencióknak nevezzük. Ilyen például, hogy bal felső sarokban van a logó, vagy a link színe kék, mobilnál hamburger menü.

5. Mobilon a kezünknek is tervezünk

A legfontosabb szempont a saját kezünk, amivel nyomkodjuk a felületet. Amikor megnyomunk valamit, az ujjunk egész nagy felületet eltakar a képernyőből. Ahhoz, hogy biztonságosan érezzük, hogy mit nyomtunk meg, fontos, hogy az ujjunk alatt csak egy dolog legyen a lenyomás pillanatában. Jelenlegi telefonok képernyőin széltében, kényelmesen 4 elem fér el maximum. 

A másik fontos szempont, hogy mit hogyan tudunk elérni az ujjainkkal. Amikor mobilra tervezünk célszerű azokra a területekre tenni mozgatható elemeket, ami könnyedén elérhető a hüvelykujj számára. A tiltott terület a képernyő felső része és a jobb alsó sarok. 

6. Hasznos terület aránya: arra NE fordítsunk nagy terület felhasználását, ami nem fontos!

7. Egyszerű és átlátható

Azok a legjobb felületek, amik egyszerűek és világosan érthetőek (simple and clear), vagy ahogy magyarul szokták mondani, letisztultak. Ezt elérni nem egyszerű, főleg ha egy projekt során egyre-másra merülnek fel az új ötletek, amiket meg kell jeleníteni a felületen. Előfordul, hogy más-más információkat tartanak fontosnak. Ilyenkor az a legjobb, ha kiderítjük, hogy mik a pontos üzleti célok.

Tervezési folyamat

A design egy felfedezés. Aki egy ötletet próbál ki és azt finomítja, gyakran elmehet a tökéletes megoldás mellett. Kísérletezni kell, sokféle egymástól minél inkább eltérő megoldásokat.

Drótvázazás 

Sokféle ötlet kipróbáláshoz szükségünk van olyan eszközökre, amivel egy-egy verziót gyorsan fel lehet vázolni. Erre való a drótvázazás. Ezek egyszerű vonalrajzok, amik megmutatják az alapvető struktúrákat különböző kidolgozottsággal. A drótvázak az ergonómiai tervezés részét képezi, ezért nem is használunk színeket vagy bonyolult formákat. Célszerű először papír rajzokat készíteni (skiccelni), majd azután valamilyen erre használható program segítségével már digitális formában, kattintható verziót csinálni.

Look & feel

Amikor kezdenek összeállni a felületek struktúrái, neki lehet állni a UI tervezésnek. Look & feel-nek nevezzük azt, ahogy az alkalmazás kinéz. Ide tartoznak a színek és a pontos formák. Nehézsége, hogy ez egy szubjektív terület. Először mindenképpen vázlatokat kell készíteni majd több lépésben, a projektben a résztvevőket be kell vonni, így a végére senkinek sem lesz meglepetés és mindenki elégedett lesz. 

A look & feel tervezést a projekt tulajdonosaival (stakeholders) tartott stílus felmérő workshoppal kezdjük. Itt különböző stílusban készült alkalmazásokat mutatunk nekik és arról faggatjuk őket, hogy melyik stílust tudnák elképzelni a saját alkalmazásuknak. Mutatunk vidám, játékos és komoly üzleti felületeket. Fiatalos és elegáns, színes és monokróm, minimalista és összetett felületeket is. A cél, hogy konkrét képek láttán könnyebben tudjunk beszélgetni arról, hogy mit szeretnénk a projektben. Ha belőttünk egy stílust, akkor a következő lépés a gyűjtés. Megkeressük a hasonló típusban készült munkákat. Ezeket egy-egy montázsba rendezhetjük, ezt hívják moonboarding-nak is.

A gyűjtés után elkészülnek az első look&feel vázlatok. Kiválasztunk egy konkrét képernyőt a drótvázak közül, és ezen az egy képernyőn kipróbálunk különböző színeket, formákat és stílus elemeket. A look&feel vázlatok, ahogy a nevük is mutatja, nem végleges pixelpontos design-tervek, hanem vázlatok. Arra valók, hogy rövid idő alatt többféle lehetőséget kipróbáljunk.  

UX kutatás

Kutatás nélkül nincs design

A kutatás alapvető része a fejlesztésnek. A kutatás lehet kvantitatív és kvalitatív. Az előbbi mindig valamilyen számmal mérhető dolog, épp ezért ez mindig objektív. A probléma vele az, hogy nem válaszol a miértekre. A számok megmondják, hogy melyik változat működik jobban, de azt nem, hogy miért. Ezért van szükség kvalitatív kutatásra is, melynek eredménye már inkább szubjektív. Segítenek megérteni az emberek viselkedését. 

A UX kutatás fő mantrája a megfigyelés: nem megkérdezzük az embereket, hogy mit szeretnének, hanem építünk egy gyors prototípust, a kezükbe adjuk, és megfigyeljük hogyan használják. 

User (használhatósági) tesztelés 

Ennél a tesztelési formánál fontos, hogy programunkat olyan emberekkel végezzük, akik még soha nem látták azt. Adunk nekik feladatokat és nézzük, hogy hogyan akarják megoldani, hol akadnak el, hol lepődnek meg, hol tétováznak, hol kérdeznek, hol vonják vissza az akciót, hol értenek mást alatta, hol ráncolják a szemöldöküket.

Mielőtt elkezdjük a tesztet a következőket érdemes elmondani:

• Bemutatkozás. Én fogom vezetni a tesztet.
• Egy alkalmazást fogunk tesztelni ezen a számítógépen / mobilon
• A programot teszteljük, nem téged, te nem tudsz hibázni
• Először beszélgetni fogunk egy kicsit, majd egy programod kell kipróbálnod
• Feladatokat fogok adni, amiket meg kell csinálnod. Ezeken önállóan kell majd dolgoznod. Szabad kezet adunk neked, hogy kipróbáld a programot és úgy oldd meg a feladatot, ahogy szeretnéd. Bármikor bárhova kattinthatsz.
• Kérdezhetsz is nyugodtan, mert hasznos tudni a felmerült kérdéseket, de nem mindenre tudok majd válaszolni a teszt közben. 
• Gondolkozz hangosan!
• Kezdhetjük?

Ezután egy kicsit beszélgetünk a tesztalannyal. Honnan jött? Mit dolgozik? Mióta foglalkozik az adott területtel? Ez segít neki feloldódni. A beszélgetés után következik egy kis szituációs játék: "Képzeld el, hogy...".

Ezután kiadjuk az első feladatot. A feladatok három kategóriába sorolhatók:

• Tágan értelmezett feladatok: "próbáld ki ezt az alkalmazást, fedezd fel"
• Konkrét célhoz kötött feladatok: "regisztrálj be"
• Konkrét felületi elemekhez kötött feladatok: "ezen a képernyőn hogyan tennéd a kosárba a cipőt?"

Érdemes videó felvételt készíteni a tesztelésnél és azt visszajátszani!

A teszt után kezdődik az eredmények riportálása, mely három csoportba tehetünk:

• Súlyos probléma: a felhasználó emiatt nem tudja megcsinálni, amit akar
• Zavaró probléma: meg tudja csinálni, de jelentős frusztrációval
• Gördülékenységi probléma: nem kifejezetten súlyosak, de elhárításukkal kellemesebb felhasználó élményt lehetne elérni

A riportok általában a problémák rövid leírását tartalmazzák a súlyosság jelölésével és egy linkkel a felvétel adott másodpercéhez.

Hány tesztalany szükséges?

A Nielsen intézet ajánlása szerint 5 tesztalanyra van szüksége, mert 5-nél többnél már jelentősen csökkenek az észrevehető problémák száma. Olyan tesztelőket válasszunk, akik még soha nem látták a programot. Ez egy lassú folyamat. Létezik gyorsabb tesztelési módszertan is, melyet úgy hívnak, hogy RITE (Rapid Iterative Testing and Evaluation). A lényege, hogy egyszerre mindig csak egy tesztet tartunk, és az észlelt problémát azonnal javítjuk. 

5 másodperces teszt

A lényege, hogy 5 másodpercig mutassunk egy felületet a tesztelőnek, majd utána vegyük el és figyeljük meg a reakcióját. Kérdezzük meg, hogy esetleg tudja e, hogy mi lesz az, amit látott. Milyen benyomást hagyott benned a weboldal? Írj 3 tulajdonságot! Több tesztelő kell, legalább 15, vagy akár 30. Online lehetőség is van a fivesecondtest.com oldalon.

Kártyarendezés (card sorting)

A kártyarendezés segít a navigációs struktúrák és információs architektúrák kialakításában. Az ötlet egyszerű: írd fel kártyákra az alkalmazás funkcióit vagy a weboldal tartalmi egységeit és bízd a tesztalanyokra, hogy csoportosítsák azokat. Így láthatod, hogy ők hogyan gondolkoznak és milyen struktúrákba rendeznék a dolgokat.

Több verzió is ismert:

• Nyílt: A testalany saját maga határozza meg, hogy hány csoportot hoz létre és hogyan nevezi el azokat.
• Zárt: A tesztalanynak előre meghatározott csoportokba kell pakolnia a kártyákat.
• Fordított (vagy fa-teszt): Itt egy kész fa-struktúrába kell pakolni az elemeket.

Vannak erre online programok is: OptimalSort és TreeJack

Analitika

Analitikai eszközök csoportosítva:

• Oldalbetöltésen alapuló eszközök, összesített statisztikákkal: ilyen például a Google Analytics
• Felhasználókra bontott megfigyelés: milyen funkciókat használ, ilyen például: Mixpanel vagy KissMetrics
• Kurzorkövető eszközök, hőtérképek: azt mérik, hogy hogyan mozgatja a felhasználó az egeret az oldalon belül, ilyen például: Hotjar, MouseFlow, Clicktale

A/B tesztelés

A kvantitatív módszerek királya, minden vitás helyzet végső megoldása. Több különböző verzióját készítjük el ugyanannak a felületnek. Az alkalmazás véletlenszerűen minden látogatónak másik verziót mutat meg. Egy látogató csak egy verziót láthat. Minden egyes változatot ugyanannyi embernek mutatunk meg, és közben mérni tudjuk, hogy melyik verzió működött jobban.

A tesztelésnél figyelni kell az alábbi 4 dologra:

1. A különböző verziók időben párhuzamosan legyenek
2. Egyszerre csak egy különbség legyen a verziók között
3. Elég nagy mintán dolgozzunk (50 - 100 fő elég lehet verziónként)
4. A megfelelő metrika kiválasztása: egy bonyolultabb folyamat egészének vizsgálata szükséges

Az A/B tesztek készítéséhez többféle, könnyen kezelhető online eszköz létezik pl.: a Google Analytics Content Experiment funkciója vagy az Optimizely.

Fake Door tesztelés 

Ezt a módszert hívják még feature stubnak, vagy gettó tesztelésnek is. Akkor használjuk, amikor szeretnénk megtudni, hogy egy adott funkciót szívesen használnának-e az emberek. Ahelyett, hogy lefejlesztenénk valamit, csak egy egyszerű felületi elemet teszünk ki és vizsgáljuk, hogy mennyien kattintanak rá. Ha sokan, akkor érdemes lefejleszteni. Egy kis üzenettel kell jelezni, hogy ez a funkció még nem működik.

Agilis és lean design

A UX designfolyamat

A termékfejlesztést két részre lehet bontani. Az első fele az amikor megpróbáljuk kitalálni, hogy mi lesz maga a termék, a második amikor konkrétan megtervezzük a termék felületét. Ezt a két szakaszt lerajzolva dupla gyémántnak nevezik.

1. Funkciómeghatározások
2. Drótvázazás + azok tesztelése (iteratív folyamat)
3. Stílusfelmérés, gyűjtés (look&feel tervezés)
4. Design tervezés (look&feel vázlat)
5. Fejlesztés

Mi az, hogy agilis?

2001-ben egy csoport szoftverfejlesztő kiadta az Agilis kiáltványt, mert elegük lett abból, ahogy a legtöbb szoftveres projekt működött. Úgy gondolták, hogy túl lassan és körülményesen mennek a dolgok. A cél, hogy minél hamarabb üzleti eredményeket produkáljunk. Ez akkor lehetséges, hogyha nem monstre projekteket szervezünk, hanem kicsi, jól definiálható feladatokra bontjuk szét a munkát.
Régebben a projekteket egységes, lineáris folyamat mentén szervezték. Az első lépés mindig a probléma megismerése és megvizsgálása volt. Ez után jött a tervezés, mind a design, mind mérnöki szempontból. Ez alapján leprogramozták a szoftvert, majd tesztelték azt. A tesztelés legtöbbször csak funkcionális tesztet jelentett. Azt nézték, hogy specifikációnak megfelelően működik-e a dolog. Ezzel a hagyományos folyamattal, az ún. vízesés-modellel az volt az egyik probléma, hogy nagyon sokáig folyt olyan munka, ami a végfelhasználók, vagy az üzleti vezetők szempontjából nem hozott értelmezhető eredményeket.
Ezzel szemben az agilis környezetben ezek a feladatok nem egymás után következnek, hanem mind folyamatosan jelen vannak. Folyamatosan zajlik design tervezési munka, fejlesztés és tesztelés is. A terméket kisebb, önállóan is életképes darabokra bontjuk szét, amiket magukban is ki lehet adni.

Scrum és Kanban 

Van két olyan elterjedt módszer, ami mindenkinek hasznos lehet, aki agilis környezetben dolgozik.
A Scrum egy elég szigorú menedzsment rendszer, ami leírja pontosan hogyan kell működnie egy fejlesztő csapatnak. Van egy lista,, amit product backlognak neveznek, és ez tartalmaz minden ötletet és jövőbeni teendőt, amit majd egyszer szeretnénk megcsinálni. A fejlesztési munka időben azonos hosszúságú sprintekre van osztva. Egy sprint cégtől függően lehet egy-. de akár négyhetes időszak is. A sprint elején eldönti a csapat, hogy mit szeretne elkészíteni a sprint alatt. Olyan célokat kell kitűzni, amiknek a végfelhasználói számára is érezhető hatása lesz. A sprint tervezésekor a product backlogból azok a feladatok a feladatok, amiket a csapat bevállal az adott sprintre, átkerülnek a sprint backlogba. Ezután elindul a munka, majd a sprint végén a csapat közösen átnézi, hogy mit sikerült elérni.
A másik népszerű módszertan a Kanban. Ennek lényege, hogy vizuálisan meg jeleníttetni, amit csinálunk. A feladatok vizuális megjelenítése. Ehhez nyújt segítséget a Kanban-tábla. Ezen az egyes munkafázisokat külön oszlopok jelölik, míg a feladatokat az oszlopokba rakott post -itekre, vagy kártyákra írjuk fel. Egy általános elrendezés szerint a következő oszlopokat szokták használni:

• Bejövő (incoming): Ide rakjuk az ötleteinket és a bejövő teendőket
• Folyamatban (doing): Amiken épp most dolgozunk
• Visszajelzés (review): Ami kész van, de még arra vár, hogy valaki más is átnézze
• Kész (done): Ami teljesen elkészült