UX / UI - inputprogram.com · UX / UI 2018.04.18 Vona Márton. Mi az a UX? (UX szemlélet)Első...
Transcript of UX / UI - inputprogram.com · UX / UI 2018.04.18 Vona Márton. Mi az a UX? (UX szemlélet)Első...
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
Kik a cél csoportunk? Hogyan elemezzük őket?
● 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?● ...
Mi alapján állítsunk fel perszónát:
Perszónák
Interjú
Terepkutatás
Kik a cél csoportunk? Hogyan elemezzük őket? Perszónák
Interjú
Terepkutatás
● 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?● ...
Mi alapján állítsunk fel perszónát:
MOTIVÁCIÓ
+
KONTEXTUS
Ki a célcsoportunk? Hogyan elemezzük őket?
● 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
Leggyakoribb belső motivációk
Perszónák
Interjú
Terepkutatás
Interjú
Cél
Fájdalom pontok felkutatása
Arany szabály
Csak nyitott kérdéseket tegyünk fel
Perszónák
Interjú
Terepkutatás
Interjú
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?
Perszónák
Interjú
Terepkutatás
Interjú
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?
● ...
Perszónák
Interjú
Terepkutatás
Interjú
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?
● ...
Perszónák
Interjú
Terepkutatás
Interjú
TILTOTT kérdések
● Használnád-e?
● Tetszik-e?
● Szükséged van-e rá?
● Fizetnél-e érte?
● ...
Perszónák
Interjú
Terepkutatás
Terepkutatás
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).
Perszónák
Interjú
Terepkutatás
User journey
● 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.
User journey
Experience map
Onboarding
Hooked-modell
User journey
PÉLDA: Webshop vásárlás
● Rákerestem a cipőre
● Kiválasztom ami tetszik
● Megnézem az árát és a méretét
● Leadom a rendelést
User journey
Experience map
Onboarding
Hooked-modell
Experience map
Az élmény térkép alapvető elemei
● 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
User journey
Experience map
Onboarding
Hooked-modell
Onboarding
Mi az az onboarding?
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.
User journey
Experience map
Onboarding
Hooked-modell
Onboarding
Kulcspontok
● Előzetes tudás
● Tutoriál
● Üres képerenyők
● Az igazság pillanata
User journey
Experience map
Onboarding
Hooked-modell
Hooked-modell
Mi az a 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.
User journey
Experience map
Onboarding
Hooked-modell
7 alap szabály
A képernyők tervezésének 7 alapszabálya
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
A megfelelő design
Drótváz
Look & feel
7 alap szabály
1. 3 kérdés, amit mindig meg kell válaszolni
● Hol vagyunk?
● Mit lehet itt csinálni?
● Hogyan léphetek tovább?
7 alap szabály
A megfelelő design
Drótváz
Look & feel
7 alap szabály
2. A vizuális hierarchia
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
A megfelelő design
Drótváz
Look & feel
7 alap szabály
3. A szöveg a design része
● 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
A megfelelő design
Drótváz
Look & feel
7 alap szabály
4. A konvenciók
● 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
A megfelelő design
Drótváz
Look & feel
7 alap szabály
5. A mobil (a kezünknek is tervezünk)
● 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
A megfelelő design
Drótváz
Look & feel
7 alap szabály
5. A mobil (a kezünknek is tervezünk)
7 alap szabály
A megfelelő design
Drótváz
Look & feel
7 alap szabály
7. Egyszerűség és átláthatóság
● 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.
7 alap szabály
A megfelelő design
Drótváz
Look & feel
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.
7 alap szabály
A megfelelő design
Drótváz
Look & feel
Drótváz 7 alap szabály
A megfelelő design
Drótváz
Look & feel
Alacsony és magas kidolgozottságú drótváz
Look & Feel 7 alap szabály
A megfelelő design
Drótváz
Look & feel
Mi az a 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.
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
Analitika
AARRR modell
Visszatérő látogatók
aránya
A/B tesztelés
Fake Door tesztelés
Mire figyeljünk, miket csináljunk
● 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
User teszt User teszt
5 másodperces teszt
Analitika
AARRR modell
Visszatérő látogatók
aránya
A/B tesztelés
Fake Door tesztelés
Feladattípusok
● Á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?
5 másodperces teszt User teszt
5 másodperces teszt
Analitika
AARRR modell
Visszatérő látogatók
aránya
A/B tesztelés
Fake Door tesztelés
Mire figyeljünk, miket csináljunk
● 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/
Analitika User teszt
5 másodperces teszt
Analitika
AARRR modell
Visszatérő látogatók
aránya
A/B tesztelés
Fake Door tesztelés
Típusai
● 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)
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
● A: Acquisition (Ügyfélszerzés): Hányan próbálják ki az alkalmazást? Hányan
érkeznek az oldalra?
● 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?
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
Analitika
AARRR modell
Visszatérő látogatók
aránya
A/B tesztelés
Fake Door tesztelés
Mire figyeljünk
● Mindig egy időben fussanak a különböző verziók, mert így elkerülhetőek a külső
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)
Fake door tesztelés User teszt
5 másodperces teszt
Analitika
AARRR modell
Visszatérő látogatók
aránya
A/B tesztelés
Fake Door tesztelés
Lényege
Nem fejlesztjük le előre az adott funkciót, hanem csak elhelyezünk egy design elemet
(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.
Agilis kiáltvány
Vízesés modell vs Agilis módszerek
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 legfontosabb: A design nem egy első lépés a fejlesztés előtt, hanem
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)
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
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