UX / UI Vona Márton

Átírás

1

2 UX / UI Vona Márton

3 Első téma Mi az a UX? (UX szemlélet)

4 Második téma A felhasználók feltérképezése

5 Harmadik téma A felhasználók útjai

6 Negyedik téma A felhasználói felület (UI)

7 Ötödik téma Kutatás és elemzés

8 Hatodik téma Agilis tervezés

9 Első téma Mi az a UX? (UX szemlélet)

10 A varázs szó A varázs szó A jéghegy csúcsa Mit jelent, hogy UX / UI? UX: user experience - felhasználói élmény UI: user interface - felhasználói felület

11 A varázs szó A varázs szó A jéghegy csúcsa

12 A varázs szó A varázs szó A jéghegy csúcsa

13 A jéghegy csúcsa A varázs szó A jéghegy csúcsa

14 Második téma A felhasználók feltérképezése

15 Kik a cél csoportunk? Hogyan elemezzük őket? Perszónák Interjú Mi alapján állítsunk fel perszónát: Nem, kor, lakhely? Végzettség és szakma? Mit tud a termékről? Milyen média fogyasztási szokásai vannak? Milyen eszközöket használ? Mikor és hol használja a terméket? Mennyi időt tölt online? Mennyire trend követő? Mik a motivációi?... Terepkutatás

16 Kik a cél csoportunk? Hogyan elemezzük őket? Perszónák Interjú Terepkutatás Mi alapján állítsunk fel perszónát: Nem, kor, lakhely? Végzettség és szakma? Mit tud a termékről? Milyen média fogyasztási szokásai vannak? Milyen eszközöket használ? Mikor és hol használja a terméket? Mennyi időt tölt online? Mennyire trend követő? Mik a motivációi?... MOTIVÁCIÓ + KONTEXTUS

17 Ki a célcsoportunk? Hogyan elemezzük őket? Perszónák Interjú Leggyakoribb belső motivációk Versengés másokkal jutalom megszerzése vágy ez elismerés után félelem kontroll utáni vágy gyűjtögetés tartozni akarok valahova Terepkutatás

18 Ki a célcsoportunk? Hogyan elemezzük őket? Perszónák Interjú Terepkutatás

19 Ki a célcsoportunk? Hogyan elemezzük őket? Perszónák Interjú Terepkutatás

20 Interjú Perszónák Interjú Terepkutatás Cél Fájdalom pontok felkutatása Arany szabály Csak nyitott kérdéseket tegyünk fel

21 Interjú Perszónák Interjú Terepkutatás Problémák megtalálását elősegítő kérdések Mi a legnagyobb problémája az adott témával kapcsolatban? Mondja el a 3 legidegesítőbb dolgot a témával kapcsolatban? Mi okozza a legtöbb fejfájást a témával kapcsolatban?

22 Interjú Perszónák Interjú Terepkutatás Problémák priorizálása Mivel tölti a legtöbb időt? Mire a legbüszkébb a témával kapcsolatban? Mi fontos számára a témával kapcsolatban?...

23 Interjú Perszónák Interjú Terepkutatás A megoldás megtalálását segítő kérdések Mesélje el a legutóbbi konkrét esetet amikor a probléma előfordult Hogyan oldja meg jelenleg a problémát? Mennyi pénzt/időt/erőforrást vesz igénybe a jelenlegi megoldás?...

24 Interjú Perszónák Interjú Terepkutatás TILTOTT kérdések Használnád-e? Tetszik-e? Szükséged van-e rá? Fizetnél-e érte?...

25 Terepkutatás Perszónák Interjú A terepkutatás lényege, hogy a felhasználót saját környezetében figyeljük meg. Így sok olyan dolgot vehetünk észre amire interjúzás közben nem gondoltunk (se mi, sem az interjú alanya). Terepkutatás

26 Harmadik téma A felhasználók útjai

27 User journey User journey Experience map Először a legfontosabb célokhoz vezető utakat kell megtervezni Nem technikai oldalról kell megtervezni (nem oldalak és képernyők) A motivációk alapján a legfontosabb 2-3 cél meghatározása, amit az alkalmazással el szeretnénk érni. Onboarding Hooked-modell

28 User journey User journey Experience map PÉLDA: Webshop vásárlás Onboarding Hooked-modell Rákerestem a cipőre Kiválasztom ami tetszik Megnézem az árát és a méretét Leadom a rendelést

29 Experience map User journey Experience map Onboarding Hooked-modell

31

33 Experience map User journey Experience map Az élmény térkép alapvető elemei Onboarding Hooked-modell A felhasználói igények A hangulat A kiváltott érzések A perszóna Érintkezési pontok (touchpoints), Interakciók, fájdalom pontok Az útvonal

34 Onboarding User journey Experience map Mi az az onboarding? Onboarding Hooked-modell Az onboarding az a folyamat amikor az új felhasználó először találkozik a felhasználói felülettel, először érkezik meg a weboldalra, használja az alkalmazást.

35 Onboarding User journey Experience map Onboarding Hooked-modell

36 Onboarding User journey Experience map Kulcspontok Onboarding Hooked-modell Előzetes tudás Tutoriál Üres képerenyők Az igazság pillanata

39 Hooked-modell User journey Experience map Mi az a hooked-modell? Onboarding Hooked-modell Nir Eyal által felismert pszichológiai modell, mely azt vázolja fel, hogyan tehetjük függővé az alkalmazásunk felhasználóit.

40 Hooked-modell User journey Experience map Onboarding Hooked-modell

41 Negyedik téma A felhasználói felület (UI)

42 7 alap szabály 7 alap szabály A megfelelő design A képernyők tervezésének 7 alapszabálya Drótváz Look & feel 1. 3 kérdés, amit mindig meg kell válaszolni 2. A vizuális hierarchia 3. A szöveg a design része 4. A konvenciók 5. A mobil 6. Hasznos területek aránya 7. Egyszerűség és átláthatóság

43 7 alap szabály 7 alap szabály A megfelelő design 1. 3 kérdés, amit mindig meg kell válaszolni Drótváz Look & feel Hol vagyunk? Mit lehet itt csinálni? Hogyan léphetek tovább?

44 7 alap szabály 7 alap szabály A megfelelő design Drótváz Look & feel

45 7 alap szabály 7 alap szabály A megfelelő design Drótváz Look & feel

46 7 alap szabály 7 alap szabály A megfelelő design 2. A vizuális hierarchia Drótváz Look & feel Lényege, hogy a felhasználói felület elemeit rangsorolni tudjuk az alapján, hogy mennyire feltűnőek, milyen hangsúlyosak, milyen hamar vesszük észre őket.

47 7 alap szabály 7 alap szabály A megfelelő design 2. A vizuális hierarchia Drótváz Look & feel

48 7 alap szabály 7 alap szabály A megfelelő design 2. A vizuális hierarchia Drótváz Look & feel

49 7 alap szabály 7 alap szabály A megfelelő design 3. A szöveg a design része Drótváz Look & feel NE feledkezzünk meg róla Kerüljük a túlságosan szakmai szövegeket Gondolkodjunk a perszónánk fejével

50 7 alap szabály 7 alap szabály A megfelelő design 4. A konvenciók Drótváz Look & feel Használjuk őket bátran Sokat segítenek a felületen való eligazodásban Segít elkerülni a bizonytalanságot

51 7 alap szabály 7 alap szabály A megfelelő design 5. A mobil (a kezünknek is tervezünk) Drótváz Look & feel Kerüljük a túl apró kattintási felületeket ( optimálisan egy sorban 4 darab) Figyeljünk az elérhetőségre

52 7 alap szabály 7 alap szabály A megfelelő design 5. A mobil (a kezünknek is tervezünk) Drótváz Look & feel

53 7 alap szabály 7 alap szabály A megfelelő design 6. Hasznos területek aránya Drótváz Look & feel

54 7 alap szabály 7 alap szabály A megfelelő design 7. Egyszerűség és átláthatóság Drótváz Look & feel Az üzleti célokat tartsuk mindig magunk előtt és az alapján válasszunk a designok tervek közül, ez alapján módosítsuk őket.

55 A megfelelő design 7 alap szabály A megfelelő design Próbáljunk ki több tervet! Ne ragaszkodjunk makacsul az első elképzelésünkhöz. Ne csak egy tervet módosítsunk amíg úgy nem gondoljuk, hogy már így jó lesz, mert akkor könnyen elmehetünk a legjobb vagy akár az igazi megoldás mellett. Drótváz Look & feel

56 Drótváz 7 alap szabály A megfelelő design Papíron Drótváz Look & feel

57 Drótváz 7 alap szabály A megfelelő design Alacsony és magas kidolgozottságú drótváz Drótváz Look & feel

58 Look & Feel 7 alap szabály A megfelelő design Mi az a Look & Feel? Drótváz Look & feel A Look & Feel maga az oldal hangulata, az igazi megjelenés a színekkel és formákkal. Ez adja meg az oldal stílusát.

59 Ötödik téma Kutatás és elemzés

60 Kutatás és elemzés Kutatás nélkül nincs design A kutatás elengedhetetlen része a jó designnak. Ha nem elemezzük ki az elkészült designt, akkor csak a saját elképzeléseinket látjuk magunk előtt nem pedig a felhasználók által validált designt. A kutatás lehet: kvantitatív (eredménye számmal mérhető) kvalitatív (eredménye szubjektív)

61 Kutatás és elemzés Néhány kutatási eszközök User teszt 5 másodperces teszt Analitika AARRRR modell Visszatérő látogatók aránya A/B tesztelés Fake Door tesztelés (Interjú, terepkutatás)

62 User teszt User teszt 5 másodperces teszt Mire figyeljünk, miket csináljunk Analitika AARRR modell Olyanokkal teszteljünk, akik még nem használták az alkalmazást Adjunk feladatokat, amiket el kell végezniük Figyeljük meg, hogyan boldogulnak az adott feladattal (hol akadtak, hol lepődtek meg, hol kérdeztek, hol értettek félre valamit,...) Kvalitatív teszt (A miértekre ad választ) Leszűrhetjük mit ért meg az új felhasználó és mit nem Visszatérő látogatók aránya A/B tesztelés Fake Door tesztelés

63 User teszt User teszt 5 másodperces teszt Feladattípusok Analitika AARRR modell Átfogó feladatok: Pl.: Próbáld ki az alkalmazást! Feladatok célok alapján: Pl.: Regisztrálj be!, Módosítsd a lakcímed! UI feladatok: Hogyan csinálnád meg ezen a felületen ezt vagy azt? Visszatérő látogatók aránya A/B tesztelés Fake Door tesztelés

64 5 másodperces teszt User teszt 5 másodperces teszt Mire figyeljünk, miket csináljunk Analitika AARRR modell Célja az első benyomás kiértékelése emberrel érdemes elvégezni a tesztet a megfelelő eredményért Tegyünk fel néhány kérdést a teszt után. Pl.: Mit forgalmaz a weboldal? Mit lehet a weboldalon csinálni? Kvalitatív teszt Hasznos eszköz: Visszatérő látogatók aránya A/B tesztelés Fake Door tesztelés

65 Analitika User teszt 5 másodperces teszt Típusai Analitika AARRR modell Oldal betöltésen alapuló eszközök (Pl.: Google Analytics) Felhasználónkénti elemzések (Mixpanel) Hőtérképek, kurzor követő eszközök (MouseFlow) Visszatérő látogatók aránya A/B tesztelés Fake Door tesztelés

66 AARRR modell User teszt 5 másodperces teszt A: Acquisition (Ügyfélszerzés): Hányan próbálják ki az alkalmazást? Hányan érkeznek az oldalra? Analitika AARRR modell A: Activation (Aktiválás): Hányak kezdik el ténylegesen használni az alkamazást/látogatják az oldalt rendszeresen R: Retention (Megtartás): Visszatérő felhasználók aránya R: Revenue (Vásárlás): Hány százaléka fizet a felhasználóknak? R: Referral (Ajánlás): A felhasználók hány százaléka ajánlja az alkalmazást/weboldalt ismerőseinek? Visszatérő látogatók aránya A/B tesztelés Fake Door tesztelés

67 AARRR modell User teszt 5 másodperces teszt Analitika AARRR modell Visszatérő látogatók aránya A/B tesztelés Fake Door tesztelés

68 Visszatérő látogatók aránya (Retention) User teszt 5 másodperces teszt Analitika AARRR modell Visszatérő látogatók aránya A/B tesztelés Fake Door tesztelés

69 A/B tesztelés User teszt 5 másodperces teszt Mire figyeljünk Analitika AARRR modell Mindig egy időben fussanak a különböző verziók, mert így elkerülhetőek a külső Visszatérő látogatók aránya befolyásoló tényezők (Egyik nap van egy sportesemény, ami miatt kevesebben használják az alkalmazásunkat) Egyszerre csak egy különbség legyen a változatok között Sok emberrel teszteljük (minimum 1000+) Figyeljünk a mérés céljára (Pl.: Egy webshop rendelés 2. lépésén módosítunk, akkor nem azt figyeljük, hogy hányan léptek a 3. lépésre, hanem azt, hogy többen vásároltak-e) A/B tesztelés Fake Door tesztelés

70 Fake door tesztelés User teszt 5 másodperces teszt Lényege Analitika AARRR modell Nem fejlesztjük le előre az adott funkciót, hanem csak elhelyezünk egy design elemet Visszatérő látogatók aránya (csalit) és a korábban tárgyalt eszközökkel megfigyeljük, hogy hányan klikkelnek rá. Ha sokan, akkor ez azt jelentheti, hogy érdekli őket a funkció, így érdemes a fejlesztésbe energiát és pénzt fektetni. FONTOS: miután rá klikkel a felhasználó tudassuk vele, hogy ez egy felmérés nem pedig hibás működés, nehogy ellentétes hatást érjünk el vele. A/B tesztelés Fake Door tesztelés

71 Hatodik téma Agilis tervezés

72 A UX tervezés folyamata A UX tervezés folyamata Agilis kiáltvány UX beépítése az agilis elvekbe

73 Agilis kiáltvány A UX tervezés folyamata Agilis kiáltvány Vízesés modell vs Agilis módszerek UX beépítése az agilis elvekbe

74 UX beépítése az agilis elvekbe A UX tervezés folyamata Agilis kiáltvány A legfontosabb: A design nem egy első lépés a fejlesztés előtt, hanem UX beépítése az agilis végigkíséri azt. Sprintekben megosztva dolgozik egyszerre programozó és designer. (DE nem ugyanazon a funkción) Alapos tervezéssel időt és pénzt spórolunk ( Rajzolni gyorsabb mint programozni ) A design összekötő szerep (Üzlet, Technológia, Felhasználók) elvekbe