uvod u ux dizajn
TRANSCRIPT
![Page 1: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/1.jpg)
uvod u ux dizajnNovi Milenković · UX evangelist · novi.xyz · yskra.com
![Page 2: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/2.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/3.jpg)
šta je doživljaj korisnika?
![Page 4: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/4.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/5.jpg)
UX≠UI
![Page 6: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/6.jpg)
korisnik u fokusu
![Page 7: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/7.jpg)
![Page 8: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/8.jpg)
![Page 9: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/9.jpg)
![Page 10: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/10.jpg)
![Page 11: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/11.jpg)
![Page 12: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/12.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/13.jpg)
I don't care about being right, I care about successSteve Jobs, Lost Interview 2005
![Page 14: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/14.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/15.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/16.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/17.jpg)
emocije i dizajn
![Page 18: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/18.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/19.jpg)
![Page 20: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/20.jpg)
![Page 21: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/21.jpg)
![Page 22: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/22.jpg)
HCI
![Page 23: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/23.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/24.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/25.jpg)
![Page 26: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/26.jpg)
![Page 27: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/27.jpg)
![Page 28: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/28.jpg)
![Page 29: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/29.jpg)
mentalni model
![Page 30: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/30.jpg)
![Page 31: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/31.jpg)
conceptual model
system image
user model
![Page 32: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/32.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/33.jpg)
![Page 34: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/34.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/35.jpg)
![Page 36: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/36.jpg)
law of pragnanzLjudi preferiraju stimulanse, stvari i doživljaje koji su uređeni,
pravilni, simetrični i jednostavni
![Page 37: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/37.jpg)
![Page 38: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/38.jpg)
![Page 39: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/39.jpg)
![Page 40: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/40.jpg)
![Page 41: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/41.jpg)
istraživanje
![Page 42: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/42.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/43.jpg)
quantitative
vs
qualitative
behavioral
vs
attitudinal
![Page 44: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/44.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/45.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/46.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/47.jpg)
fokusna grupa
+ Različite perspektive na jednom mestu
- Različite perspektive na jednom mestu
![Page 48: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/48.jpg)
kontekstualni upitPoseti korisnika na poslu, posmatraj dok radi, razgovaraj sa
korisnikom o poslu
Contextual Design, Beyer and Holtzblatt
![Page 49: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/49.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/50.jpg)
hawthorne effectOsobe modifikuju ili popravljaju aspekte ponašanja kada su
svesne da ih posmatraju
Hawthorne_effect
![Page 51: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/51.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/52.jpg)
crossed hands, fingers, legs…
head & shoulders low…
![Page 53: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/53.jpg)
repeating the same movement…
![Page 54: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/54.jpg)
touching face, hair, body…
quickly moving hands, changing facial
expressions…
![Page 55: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/55.jpg)
open arms, hands, palms…
chin high, legs apart with feet outwards…
![Page 56: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/56.jpg)
shaping with hands…
![Page 57: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/57.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/58.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/59.jpg)
visibility of system status
![Page 60: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/60.jpg)
match between system & the real
world
amazon.co.uk
amazon.com
![Page 61: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/61.jpg)
user control & freedom
![Page 62: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/62.jpg)
consistency & standards
![Page 63: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/63.jpg)
error prevention
![Page 64: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/64.jpg)
recognition rather than recall
![Page 65: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/65.jpg)
flexibility & efficiency of use
![Page 66: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/66.jpg)
aesthetic
![Page 67: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/67.jpg)
help users recognize, diagnose, & recover
from errors
![Page 68: Uvod u UX dizajn](https://reader036.vdocuments.pub/reader036/viewer/2022062310/587234521a28ab102f8b46cb/html5/thumbnails/68.jpg)
help & documentation