UX / UI - inputprogram.com · UX / UI 2018.04.18 Vona Márton. Mi az a UX? (UX szemlélet)Első téma. A felhasználók feltérképezéseMásodik téma. A felhasználók Harmadik

UX / UI2018.04.18

Vona Márton

Mi az a UX?(UX szemlélet)

Első téma

A felhasználókfeltérképezése

Második téma

A felhasználókútjai

Harmadik téma

A felhasználói felület(UI)

Negyedik téma

Kutatás éselemzés

Ötödik téma

Agilistervezés

Hatodik téma

Mi az a UX?(UX szemlélet)

Első téma

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 jéghegy csúcsa


A jéghegy csúcsa

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

A jéghegy csúcsa

A felhasználókfeltérképezése

Második téma

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

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ú

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

A felhasználókútjai

Harmadik téma

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 User journey

Experience map

Onboarding

Hooked-modell


Experience map

Onboarding

Hooked-modell


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 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


Experience map

Onboarding

Hooked-modell


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

Hooked-modell User journey

Experience map

Onboarding

Hooked-modell

A felhasználói felület(UI)

Negyedik téma

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 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


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


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

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

6. Hasznos területek aránya

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

Papíron

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 éselemzés

Ötödik téma

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


Analitika

AARRR modell


aránya

A/B 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


Analitika

AARRR modell


aránya

A/B 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


Analitika

AARRR modell


aránya

A/B 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


Analitika

AARRR modell


aránya

A/B 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


Analitika

AARRR modell


aránya

A/B tesztelés


Visszatérő látogatók aránya (Retention) User teszt


Analitika

AARRR modell


aránya

A/B tesztelés


A/B tesztelés User teszt


Analitika

AARRR modell


aránya

A/B 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


Analitika

AARRR modell


aránya

A/B 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.

Agilistervezés

Hatodik téma

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

Vízesés modell vs Agilis módszerek

A UX tervezés

folyamata

Agilis kiáltvány


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


elvekbe

UX beépítése az agilis elvekbe A UX tervezés

folyamata

Agilis kiáltvány


elvekbe

UX beépítése az agilis elvekbe A UX tervezés

folyamata

Agilis kiáltvány


elvekbe

Ajánlott irodalom

Köszönöm szépen a figyelmet

UX / UI - inputprogram.com · UX / UI 2018.04.18 Vona Márton. Mi az a UX? (UX szemlélet)Első téma. A felhasználók feltérképezéseMásodik téma. A felhasználók Harmadik

Documents