uvod u ux dizajn

68
uvod u ux dizajn Novi Milenković · UX evangelist · novi.xyz · yskra.com

Upload: novi-milenkovic

Post on 08-Jan-2017

205 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Uvod u UX dizajn

uvod u ux dizajnNovi Milenković · UX evangelist · novi.xyz · yskra.com

Page 2: Uvod u UX dizajn

user-centered dizajn

dizajn i emocije

interakcija čoveka i kompjutera

mentalni model

korisničko istraživanje

intervju

kontekstualni upit

fokus grupa

heuristička procena upotrebljivosti

Page 3: Uvod u UX dizajn

šta je doživljaj korisnika?

Page 4: Uvod u UX dizajn

istraživanje ideje planiranje

competitive audit

data analysis interviews priorities brainstorming prototype storyboard user flow personas

sadržaj izrada interakcije

ia language accessibility gestures ui responsiveness waiting times errorscompleted

actions

dizajn detalji analiza

layout images fonts & colors micro copymicro

interactionstransitions kpi benchmark ux lab

Page 5: Uvod u UX dizajn

UX≠UI

Page 6: Uvod u UX dizajn

korisnik u fokusu

Page 7: Uvod u UX dizajn
Page 8: Uvod u UX dizajn
Page 9: Uvod u UX dizajn
Page 10: Uvod u UX dizajn
Page 11: Uvod u UX dizajn
Page 12: Uvod u UX dizajn

UX dizajnerNije korisnik!

Nema problema sa egom!

Radoznao

Razmišlja kritički

Rešava probleme

Ima jasnu metodu rada

Pozitivan stav

Page 13: Uvod u UX dizajn

I don't care about being right, I care about successSteve Jobs, Lost Interview 2005

Page 14: Uvod u UX dizajn

Ko je korisnik?

Kako koristi proizvod?

Koje probleme ima?

Šta je proizvod?

Koji je cilj proizvoda?

Kako doći do cilja?

Page 15: Uvod u UX dizajn

merenje doživljajaProcenat uspešno završenog zadatka

Vreme potrebno za uspešno završen zadatak

Problemi u upotrebljivosti

Očekivana težina zadatka- Realna težina zadatka

Nenamerne greške

Odnos pregleda i klikova

SUS

Page 16: Uvod u UX dizajn

Conversion

Basket abandonment

Bounce rate

Sales

Leads

Subscribers

Unique visitors

Returning visitors

Page views per visit

Visit to order ratio

Registrations

Time on page

Form abandonment

Failed internal search

Referring links

Click through rate

Impressions

Average order value

Basket value

Profit margin

Average sales price

Cross sell

Gross margin

Page 17: Uvod u UX dizajn

emocije i dizajn

Page 18: Uvod u UX dizajn

46.1% determine how trustworthy site is based on looks http://simson.net/ref/2002/stanfordPTL.pdf

System's aesthetics affects the perceptions of usabilityhttp://www.ise.bgu.ac.il/faculty/noam/papers/00_nt_ask_di_iwc.pdf

Rejected a site as not trustworthy, 83% of comments related to designhttp://dl.acm.org/citation.cfm?id=985776

Testing same functionality with different appearances, users cited more aesthetically pleasing site worked betterhttp://www.sigchi.org/chi95/proceedings/shortppr/mk_bdy.htm

Page 19: Uvod u UX dizajn
Page 20: Uvod u UX dizajn
Page 21: Uvod u UX dizajn
Page 22: Uvod u UX dizajn

HCI

Page 23: Uvod u UX dizajn

scan 79% - read 16%highlighted keywords and hyperlnks

meaningful sub-headings

bulleted lists

one idea per paragraph

the inverted pyramid style

half the word count or less

applying-writing-guidelines-web-pages

Page 24: Uvod u UX dizajn

banner blindnessMost users don’t notice anything that resembles banner

14% of respondents recalled the last display ad they saw

2,8% reported ads were relevant

benway_lane_banner_blindness

Page 25: Uvod u UX dizajn
Page 26: Uvod u UX dizajn
Page 27: Uvod u UX dizajn
Page 28: Uvod u UX dizajn
Page 29: Uvod u UX dizajn

mentalni model

Page 30: Uvod u UX dizajn
Page 31: Uvod u UX dizajn

conceptual model

system image

user model

Page 32: Uvod u UX dizajn

cognitive ergonomics

AFFORDANCE - karakteristika objekta koja nam govori da

možemo da izvršimo određenu akciju

SIGNIFIER - znaci ili obeležja koja opisuju osobine objekta ili

mogući način korišćenja

Page 33: Uvod u UX dizajn
Page 34: Uvod u UX dizajn

flat designKorisnici od 18-25 godina preferiraju flat dizajn

Svi korisnici ne prepoznaju šta je moguće kliknuti

young-adults-flat-design

Page 35: Uvod u UX dizajn
Page 36: Uvod u UX dizajn

law of pragnanzLjudi preferiraju stimulanse, stvari i doživljaje koji su uređeni,

pravilni, simetrični i jednostavni

Page 37: Uvod u UX dizajn
Page 38: Uvod u UX dizajn
Page 39: Uvod u UX dizajn
Page 40: Uvod u UX dizajn
Page 41: Uvod u UX dizajn

istraživanje

Page 42: Uvod u UX dizajn

Who is the user???

How does he use product?

What is the problem?

How to solve problem?

What is success?What are mental models?

Page 43: Uvod u UX dizajn

quantitative

vs

qualitative

behavioral

vs

attitudinal

Page 44: Uvod u UX dizajn

behaviour

attitude

qualitative quantitativeethnographic studies true intent studies

eyetrackingclickstream analysis

surveys

diary studiescustomer feedback

benchmark test

moderated remote usability studies

unmoderated remote panel studies unmoderated ux study

ux lab

A/B testing

concept testing

desirability studies

participatory design

card sorting

focus groups

interviews

contextual inquiry

Natural use Scripted De-contextualized Mixed

Page 45: Uvod u UX dizajn

L=P(1-(1-p)n) L – verovatnoća da korisnik primeti problem (80%)

P – broj problema (1)

p – učestalost pojavljivanja problema (30%)

n – broj korisnika (?)

A mathematical model of the finding of usability problems,

Nielsen, Jakob and Thomas K. Landauer

Page 46: Uvod u UX dizajn

intervjuIntervju nije test

Korisnik nije UX dizajner

Spekulacije nisu korisne

Previše priče škodi

Bez navođenja na odgovore

Poštovanje privatnosti i mišljenja korisnika

Page 47: Uvod u UX dizajn

fokusna grupa

+ Različite perspektive na jednom mestu

- Različite perspektive na jednom mestu

Page 48: Uvod u UX dizajn

kontekstualni upitPoseti korisnika na poslu, posmatraj dok radi, razgovaraj sa

korisnikom o poslu

Contextual Design, Beyer and Holtzblatt

Page 49: Uvod u UX dizajn

kontekstualni upitKorisnik je „ekspert“

Razvoj obostranog razumevanja

Otkrivanje skrivenog aspekta posla, koji je za korisnika

podrazumevan

Identifikacija ograničenja

Page 50: Uvod u UX dizajn

hawthorne effectOsobe modifikuju ili popravljaju aspekte ponašanja kada su

svesne da ih posmatraju

Hawthorne_effect

Page 51: Uvod u UX dizajn

kvalitet odgovoraKorisnik se oseća podređeno

Izbegava kontakt očima

U skupljenom položaju i okreće telo na stranu

Drži predmet između sebe i intervjuera

Brzo menja izraze lica i dodiruje kosu, lice, delove tela

Govori tiho

Izvinjava se

Page 52: Uvod u UX dizajn

crossed hands, fingers, legs…

head & shoulders low…

Page 53: Uvod u UX dizajn

repeating the same movement…

Page 54: Uvod u UX dizajn

touching face, hair, body…

quickly moving hands, changing facial

expressions…

Page 55: Uvod u UX dizajn

open arms, hands, palms…

chin high, legs apart with feet outwards…

Page 56: Uvod u UX dizajn

shaping with hands…

Page 57: Uvod u UX dizajn

opuštanje korisnikaPrirodni osmeh

Blago nagnuto telo ka korisniku

Bez prekrštenih ruku, nogu, prstiju…

Traženje dozvole pre prelaska na novo pitanje/temu

Pozicija sedenja malo niža od stolice korisnika

Dovoljno prostora između korisnika i intervjuera

Bez previše kontakta očima

Intervjuer izgleda kao korisnici

Page 58: Uvod u UX dizajn

Pronalazak ispitanika

Nepouzdani stavovi i sećanje

Hawthorne effect

Vremenski zahtevno

Korisnik može biti stidljiv ili sumnjičav

Korisnik ne želi da ga posmatraju dok greši

Previše podataka

Page 59: Uvod u UX dizajn

visibility of system status

Page 60: Uvod u UX dizajn

match between system & the real

world

amazon.co.uk

amazon.com

Page 61: Uvod u UX dizajn

user control & freedom

Page 62: Uvod u UX dizajn

consistency & standards

Page 63: Uvod u UX dizajn

error prevention

Page 64: Uvod u UX dizajn

recognition rather than recall

Page 65: Uvod u UX dizajn

flexibility & efficiency of use

Page 66: Uvod u UX dizajn

aesthetic

Page 67: Uvod u UX dizajn

help users recognize, diagnose, & recover

from errors

Page 68: Uvod u UX dizajn

help & documentation