UX / UI 2018.04.18 Vona Márton
Első téma Mi az a UX? (UX szemlélet)
Második téma A felhasználók feltérképezése
Harmadik téma A felhasználók útjai
Negyedik téma A felhasználói felület (UI)
Ötödik téma Kutatás és elemzés
Hatodik téma Agilis tervezés
Első téma Mi az a UX? (UX szemlélet)
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
A varázs szó A varázs szó A jéghegy csúcsa
A varázs szó A varázs szó A jéghegy csúcsa
A jéghegy csúcsa A varázs szó A jéghegy csúcsa
Második téma A felhasználók feltérképezése
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
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
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
Ki a célcsoportunk? Hogyan elemezzük őket? Perszónák Interjú Terepkutatás
Ki a célcsoportunk? Hogyan elemezzük őket? Perszónák Interjú Terepkutatás
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
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?
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?...
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?...
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?...
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
Harmadik téma A felhasználók útjai
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
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
Experience map User journey Experience map Onboarding Hooked-modell
Experience map User journey Experience map Onboarding Hooked-modell
Experience map User journey Experience map Onboarding Hooked-modell
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
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.
Onboarding User journey Experience map Onboarding Hooked-modell
Onboarding User journey Experience map Kulcspontok Onboarding Hooked-modell Előzetes tudás Tutoriál Üres képerenyők Az igazság pillanata
Onboarding User journey Experience map Onboarding Hooked-modell
Onboarding User journey Experience map Onboarding Hooked-modell
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.
Hooked-modell User journey Experience map Onboarding Hooked-modell
Negyedik téma A felhasználói felület (UI)
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
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?
7 alap szabály 7 alap szabály A megfelelő design Drótváz Look & feel
7 alap szabály 7 alap szabály A megfelelő design Drótváz Look & feel
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.
7 alap szabály 7 alap szabály A megfelelő design 2. A vizuális hierarchia Drótváz Look & feel
7 alap szabály 7 alap szabály A megfelelő design 2. A vizuális hierarchia Drótváz Look & feel
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
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
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
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
7 alap szabály 7 alap szabály A megfelelő design 6. Hasznos területek aránya Drótváz Look & feel
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.
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
Drótváz 7 alap szabály A megfelelő design Papíron Drótváz Look & feel
Drótváz 7 alap szabály A megfelelő design Alacsony és magas kidolgozottságú drótváz Drótváz Look & feel
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.
Ötödik téma Kutatás és elemzés
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)
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)
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
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
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 15-30 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: https://fivesecondtest.com/ Visszatérő látogatók aránya A/B tesztelés Fake Door tesztelés
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
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
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
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
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
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
Hatodik téma Agilis tervezés
A UX tervezés folyamata A UX tervezés folyamata Agilis kiáltvány UX beépítése az agilis elvekbe
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
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
UX beépítése az agilis elvekbe A UX tervezés folyamata Agilis kiáltvány UX beépítése az agilis elvekbe
UX beépítése az agilis elvekbe A UX tervezés folyamata Agilis kiáltvány UX beépítése az agilis elvekbe
Ajánlott irodalom
Köszönöm szépen a figyelmet