UX / UI - ?· UX / UI 2018.04.18 Vona Márton. Mi az a UX? (UX szemlélet)Első téma. A felhasználók…

Download UX / UI - ?· UX / UI 2018.04.18 Vona Márton. Mi az a UX? (UX szemlélet)Első téma. A felhasználók…

Post on 15-Feb-2019

212 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

UX / UI2018.04.18

Vona Mrton

Mi az a UX?(UX szemllet)

Els tma

A felhasznlkfeltrkpezse

Msodik tma

A felhasznlktjai

Harmadik tma

A felhasznli fellet(UI)

Negyedik tma

Kutats selemzs

tdik tma

Agilistervezs

Hatodik tma

Mi az a UX?(UX szemllet)

Els tma

A varzs sz A varzs szA jghegy cscsa

Mit jelent, hogy UX / UI?

UX: user experience - felhasznli lmny

UI: user interface - felhasznli fellet

A varzs sz A varzs szA jghegy cscsa

A varzs sz A varzs szA jghegy cscsa

A jghegy cscsa A varzs szA jghegy cscsa

A felhasznlkfeltrkpezse

Msodik tma

Kik a cl csoportunk? Hogyan elemezzk ket?

Nem, kor, lakhely? Vgzettsg s szakma? Mit tud a termkrl? Milyen mdia fogyasztsi szoksai vannak? Milyen eszkzket hasznl? Mikor s hol hasznlja a termket? Mennyi idt tlt online? Mennyire trend kvet? Mik a motivcii? ...

Mi alapjn lltsunk fel persznt:

Persznk

Interj

Terepkutats

Kik a cl csoportunk? Hogyan elemezzk ket? PersznkInterj

Terepkutats

Nem, kor, lakhely? Vgzettsg s szakma? Mit tud a termkrl? Milyen mdia fogyasztsi szoksai vannak? Milyen eszkzket hasznl? Mikor s hol hasznlja a termket? Mennyi idt tlt online? Mennyire trend kvet? Mik a motivcii? ...

Mi alapjn lltsunk fel persznt:

MOTIVCI

+

KONTEXTUS

Ki a clcsoportunk? Hogyan elemezzk ket?

Versengs msokkal jutalom megszerzse vgy ez elismers utn flelem kontroll utni vgy gyjtgets tartozni akarok valahova

Leggyakoribb bels motivcik

Persznk

Interj

Terepkutats

Ki a clcsoportunk? Hogyan elemezzk ket? PersznkInterj

Terepkutats

Ki a clcsoportunk? Hogyan elemezzk ket? PersznkInterj

Terepkutats

Interj

Cl

Fjdalom pontok felkutatsa

Arany szably

Csak nyitott krdseket tegynk fel

Persznk

Interj

Terepkutats

Interj

Problmk megtallst elsegt krdsek

Mi a legnagyobb problmja az adott tmval kapcsolatban?

Mondja el a 3 legidegestbb dolgot a tmval kapcsolatban?

Mi okozza a legtbb fejfjst a tmval kapcsolatban?

Persznk

Interj

Terepkutats

Interj

Problmk priorizlsa

Mivel tlti a legtbb idt?

Mire a legbszkbb a tmval kapcsolatban?

Mi fontos szmra a tmval kapcsolatban?

...

Persznk

Interj

Terepkutats

Interj

A megolds megtallst segt krdsek

Meslje el a legutbbi konkrt esetet amikor a problma elfordult

Hogyan oldja meg jelenleg a problmt?

Mennyi pnzt/idt/erforrst vesz ignybe a jelenlegi megolds?

...

Persznk

Interj

Terepkutats

Interj

TILTOTT krdsek

Hasznlnd-e?

Tetszik-e?

Szksged van-e r?

Fizetnl-e rte?

...

Persznk

Interj

Terepkutats

Terepkutats

A terepkutats lnyege, hogy a felhasznlt sajt krnyezetben figyeljk meg. gy

sok olyan dolgot vehetnk szre amire interjzs kzben nem gondoltunk (se mi,

sem az interj alanya).

Persznk

Interj

Terepkutats

A felhasznlktjai

Harmadik tma

User journey

Elszr a legfontosabb clokhoz vezet utakat kell megtervezni

Nem technikai oldalrl kell megtervezni (nem oldalak s kpernyk)

A motivcik alapjn a legfontosabb 2-3 cl meghatrozsa, amit az

alkalmazssal el szeretnnk rni.

User journey

Experience map

Onboarding

Hooked-modell

User journey

PLDA: Webshop vsrls

Rkerestem a cipre

Kivlasztom ami tetszik

Megnzem az rt s a mrett

Leadom a rendelst

User journey

Experience map

Onboarding

Hooked-modell

Experience map User journeyExperience map

Onboarding

Hooked-modell

Experience map User journeyExperience map

Onboarding

Hooked-modell

Experience map User journeyExperience map

Onboarding

Hooked-modell

Experience map

Az lmny trkp alapvet elemei

A felhasznli ignyek

A hangulat

A kivltott rzsek

A perszna

rintkezsi pontok (touchpoints), Interakcik, fjdalom pontok

Az tvonal

User journey

Experience map

Onboarding

Hooked-modell

Onboarding

Mi az az onboarding?

Az onboarding az a folyamat amikor az j felhasznl elszr tallkozik a

felhasznli fellettel, elszr rkezik meg a weboldalra, hasznlja az alkalmazst.

User journey

Experience map

Onboarding

Hooked-modell

Onboarding User journeyExperience map

Onboarding

Hooked-modell

Onboarding

Kulcspontok

Elzetes tuds

Tutoril

res kperenyk

Az igazsg pillanata

User journey

Experience map

Onboarding

Hooked-modell

Onboarding User journeyExperience map

Onboarding

Hooked-modell

Onboarding User journeyExperience map

Onboarding

Hooked-modell

Hooked-modell

Mi az a hooked-modell?

Nir Eyal ltal felismert pszicholgiai modell, mely azt vzolja fel, hogyan tehetjk

fggv az alkalmazsunk felhasznlit.

User journey

Experience map

Onboarding

Hooked-modell

Hooked-modell User journeyExperience map

Onboarding

Hooked-modell

A felhasznli fellet(UI)

Negyedik tma

7 alap szably

A kpernyk tervezsnek 7 alapszablya

1. 3 krds, amit mindig meg kell vlaszolni

2. A vizulis hierarchia

3. A szveg a design rsze

4. A konvencik

5. A mobil

6. Hasznos terletek arnya

7. Egyszersg s tlthatsg

7 alap szably

A megfelel design

Drtvz

Look & feel

7 alap szably

1. 3 krds, amit mindig meg kell vlaszolni

Hol vagyunk?

Mit lehet itt csinlni?

Hogyan lphetek tovbb?

7 alap szably

A megfelel design

Drtvz

Look & feel

7 alap szably 7 alap szablyA megfelel design

Drtvz

Look & feel

7 alap szably 7 alap szablyA megfelel design

Drtvz

Look & feel

7 alap szably

2. A vizulis hierarchia

Lnyege, hogy a felhasznli fellet elemeit rangsorolni tudjuk az alapjn, hogy

mennyire feltnek, milyen hangslyosak, milyen hamar vesszk szre ket.

7 alap szably

A megfelel design

Drtvz

Look & feel

7 alap szably

2. A vizulis hierarchia

7 alap szably

A megfelel design

Drtvz

Look & feel

7 alap szably

2. A vizulis hierarchia

7 alap szably

A megfelel design

Drtvz

Look & feel

7 alap szably

3. A szveg a design rsze

NE feledkezznk meg rla

Kerljk a tlsgosan szakmai szvegeket

Gondolkodjunk a persznnk fejvel

7 alap szably

A megfelel design

Drtvz

Look & feel

7 alap szably

4. A konvencik

Hasznljuk ket btran

Sokat segtenek a felleten val eligazodsban

Segt elkerlni a bizonytalansgot

7 alap szably

A megfelel design

Drtvz

Look & feel

7 alap szably

5. A mobil (a keznknek is terveznk)

Kerljk a tl apr kattintsi felleteket ( optimlisan egy sorban 4 darab)

Figyeljnk az elrhetsgre

7 alap szably

A megfelel design

Drtvz

Look & feel

7 alap szably

5. A mobil (a keznknek is terveznk)

7 alap szably

A megfelel design

Drtvz

Look & feel

7 alap szably

6. Hasznos terletek arnya

7 alap szably

A megfelel design

Drtvz

Look & feel

7 alap szably

7. Egyszersg s tlthatsg

Az zleti clokat tartsuk mindig magunk eltt s az alapjn vlasszunk a

designok tervek kzl, ez alapjn mdostsuk ket.

7 alap szably

A megfelel design

Drtvz

Look & feel

A megfelel design

Prbljunk ki tbb tervet!

Ne ragaszkodjunk makacsul az els elkpzelsnkhz.

Ne csak egy tervet mdostsunk amg gy nem gondoljuk, hogy mr gy j lesz, mert

akkor knnyen elmehetnk a legjobb vagy akr az igazi megolds mellett.

7 alap szably

A megfelel design

Drtvz

Look & feel

Drtvz 7 alap szablyA megfelel design

Drtvz

Look & feel

Papron

Drtvz 7 alap szablyA megfelel design

Drtvz

Look & feel

Alacsony s magas kidolgozottsg drtvz

Look & Feel 7 alap szablyA megfelel design

Drtvz

Look & feel

Mi az a Look & Feel?

A Look & Feel maga az oldal hangulata, az igazi megjelens a sznekkel s formkkal.

Ez adja meg az oldal stlust.

Kutats selemzs

tdik tma

Kutats s elemzs

Kutats nlkl nincs design

A kutats elengedhetetlen rsze a j designnak. Ha nem elemezzk ki az elkszlt

designt, akkor csak a sajt elkpzelseinket ltjuk magunk eltt nem pedig a

felhasznlk ltal validlt designt.

A kutats lehet:

kvantitatv (eredmnye szmmal mrhet)

kvalitatv (eredmnye szubjektv)

Kutats s elemzs

Nhny kutatsi eszkzk

User teszt

5 msodperces teszt

Analitika

AARRRR modell

Visszatr ltogatk arnya

A/B tesztels

Fake Door