Embed Size (px)
Citation preview
05/03/2023 1
UVOD U KORISNIČKO ISKUSTVO
CODECAMP OSIJEKDARKO ČENGIJAUSABILITY SPECIALIST, UX PASSION
[email protected] - @darkoche
#CodeCAMPos
05/03/2023 3
Zašto biste ovo slušali?
05/03/2023 4
• Shvatit ćete osnove najvažnijih User Experience tehnika
• Shvatit ćete kontekst u kojem se primjenjuju i zašto
05/03/2023 5
Tko sam ja?
05/03/2023 6
2009 2010 2011 2012 2013 2014
Usability specialistInformation Architect Interaction Designer
2015
05/03/2023 7
Korisničko iskustvo?
05/03/2023 10
• Shvatit ćete osnove najvažnijih User Experience tehnika
• Shvatit ćete kontekst u kojem se primjenjuju i zašto
05/03/2023 14
“Focus on the user and everything else will follow”- Google
05/03/2023 15
Persone
05/03/2023 17
There’s no such thing as an ‘average’ user
05/03/2023 18
Što je persona?• Kratak sažetak neke ključne grupe korisnika• Persona ne opisuje stvarnog pojedinačnog korisnika,
niti prosječnog korisnika• Persona opisuje stereotip grupe korisnika• Formatirana je kao stvarna osoba
05/03/2023 19
Primjer
05/03/2023 20
Koje persone bi mogla imati aplikacija koja služi za hodanje u prirodi?
05/03/2023 21
1. korak - intervjui
05/03/2023 22
2. korak – ključne karakteristike
05/03/2023 23
3. korak – grupiranje
05/03/2023 24
4. korak – personalizacija
05/03/2023 25
Persona 1 – Sebastian
SebastianŽeli često hodati prirodom, ne treba mu high-tech podrška
- Želi otkriti nepoznata mjesta
- Voli fotografirati ono što mu se svidi
- Motivacija: “Postoji li neka zanimljiva priča vezana uz ovu lokaciju?”
05/03/2023 26
Persona 2 – Vanesa
VanesaČesto se kreće na otvorenom, a tehnologiju koristi za bogatiji doživljaj izlaska
- Koristi GPS za kretanje u prirodi
- Želi se povezati s prijateljima i izlazak pretvoriti u igru
- Motivacija: “Koja je najzanimljivija ruta odavde do...?”
05/03/2023 27
Persona 3 – Andrea
AndreaIzlazi u prirodu kada ima vremena, preferira druženje s prijateljima
- Voli piknik u prirodi i tada gasi mobitel
- Želi se družiti s prijateljima i igrati društvene igre
- Motivacija: “Kako da se odavde vratim do svog auta?”
05/03/2023 28
Persona 4 – Marko
MarkoNapustio je posao u IT tvrtki i želi se posvetiti fotografiji
- Koristi tehnologiju kako bi planirao ili preuzeo rutu
- Želi fotografije dijeliti s prijateljima
- Motivacija: “Gdje se nalaze zanimljiva mjesta za fotografiranje?”
05/03/2023 29
05/03/2023 30
05/03/2023 31
Što sve može biti relevantno kod opisa persone?• Dob• Lokacija• Jezik i kultura• Informatičko iskustvo• Poznavanje domene• Edukacija i intelekt• Tjelesna ograničenja• Spol
• Organizacijska kultura• Spremnost na promjene• Okruženje u kojem radi• Stil učenja• Stavovi i očekivanja• Motivacija (prisila ili želja)• Zadaci koje obavlja• Konačni ciljevi
05/03/2023 32
Nekoliko savjeta• Razlike među personama trebaju biti one koje su
relevantne za proizvod• Nemojte imati više od sedam persona• Persone trebaju biti zasnovane na stvarnom
istraživanju, ne na vašem nagađanju; međutim: http://uxmag.com/articles/using-proto-personas-for-executive-alignment
• Trebaju biti formatirane kao stvarna osoba
05/03/2023 33
05/03/2023 34
Vježba
05/03/2023 35
Koje karakteristike bi bile relevantne za Twitter persone?• Dob• Lokacija• Jezik i kultura• Informatičko iskustvo• Poznavanje domene• Edukacija i intelekt• Tjelesna ograničenja• Spol
• Organizacijska kultura• Spremnost na promjene• Okruženje u kojem radi• Stil učenja• Stavovi i očekivanja• Motivacija (prisila ili želja)• Zadaci koje obavlja• Konačni ciljevi
05/03/2023 36
Koje karakteristike bi bile relevantne za Twitter persone?• Dob• Lokacija• Jezik i kultura• Informatičko iskustvo• Poznavanje domene• Edukacija i intelekt• Tjelesna ograničenja• Spol
• Organizacijska kultura• Spremnost na promjene• Okruženje u kojem radi• Stil učenja• Stavovi i očekivanja• Motivacija (prisila ili želja)• Zadaci koje obavlja• Konačni ciljevi
05/03/2023 37
Dob• 0 – 18• > 18
Informatičko iskustvo• srednje do dobro• ispodprosječno
Motivacija• microblogging
(broadcasting)• komunikacija s ljudima s
istim interesima (hobi)• poslovno tweetanje,
razvoj branda• sekundarno preko
drugih aplikacija (foursquare, instagram)
05/03/2023 38
• Persone
Koje smo tehnike do sada prošli
05/03/2023 39
Red routes
05/03/2023 40
05/03/2023 43
Što su red routes?• Svaki web site ima mali skup funkcionalnosti koje
donose korisniku ogromnu vrijednost• Svaki web site ima i mnoge ostale funkcionalnosti.
One staju na put važnim funkcionalnostima i uništavaju vrijednost web sitea
• Fokusiranjem na ono što je korisniku zaista važno spašavamo vrijednost
05/03/2023 46
Primjer
05/03/2023 47
Koje bi bile red routes za web site (aplikaciju) koja vam pomaže u vođenju
evidencije o kućnim financijama?
05/03/2023 51
Vježba
05/03/2023 52
Twitter red routes• pogledaj timeline• napiši novi tweet• pronađi diskusiju (tweetove) po temi ili korisniku• pronađi korisnike vrijedne praćenja
05/03/2023 53
• Persone• Red routes
Koje smo tehnike do sada prošli
05/03/2023 54
Kontekst uporabe
05/03/2023 58
Kontekst• Otiđite u prostor u kojem korisnik obavlja zadatke
(relevantne za vaš proizvod)• Potrudite se shvatiti kontekst i razloge pojedinih radnji
koje korisnik obavlja• Sami out-of-context intervjui nisu dovoljni da potpuno
shvatite cjelokupnu realnost
05/03/2023 59
Partnerstvo• Primijenite model učitelj-učenik: zamolite korisnika da
vas “nauči” posao kao da ste se tek zaposlili• Na ovaj način korisnik neće vas doživjeti kao
“eksperta” te se neće morati ustručavati reći što stvarno misli
05/03/2023 60
Interpretacija• Vodite bilješke svega što ste vidjeli ili naučili• Ako je moguće, snimite session• Svakako provjerite s korisnikom (nakon sessiona)
jeste li dobro interpretirali neke njegove poteze
05/03/2023 61
Neka od pitanja koja vas zanimaju• Je li ovo tipičan dan? Što bi ga učinilo boljim/lošijim?• Koje aktivnosti vam uzalud troše vrijeme?• Kako inače zaobilazite ovaj problem? • Što biste rado promijenili? Što nikako ne bi mijenjali?• Što vam pomaže kod donošenja odluke? Kako?
05/03/2023 62
Razlika između onoga što vam korisnici kažu i onoga što stvarno rade je prilika za vaš proizvod.
05/03/2023 63
Vježba
05/03/2023 64
Twitter kontekst uporabe• desktop
– aktivno u poslovnom okruženju– pasivno (u pozadini), poslovno okruženje
• mobile– opušteno pregledavanje (laid back)– u pokretu, direktna komunikacija
05/03/2023 65
• Persone• Red routes• Kontekst uporabe
Koje smo tehnike do sada prošli
05/03/2023 66
User stories
05/03/2023 67
User stories• Jedan od osnovnih stupova Scrum metodologije• User story je “high-level requirement” koji sadržava
dovoljno informacija da razvojni tim može planirati prioritet i vrijeme potrebno za implementaciju
• Pišu se u formatu “Ja kao <tip korisnika> želim <neki cilj> kako bih <razlog>”.
05/03/2023 68
Kako pisati dobre user stories?
05/03/2023 69
User stories• User story se piše iz perspektive korisnika• Ciljevi persona će vam pomoći otkriti user stories• User story nije specifikacijski, nego komunikacijski
alat – pišite ih u suradnji s timovima• User story je sažet i jasan• Definirajte “acceptance criteria” za završenost user
storyja
05/03/2023 70
http://www.romanpichler.com/blog/10-tips-writing-good-user-stories/
05/03/2023 71
Primjer
05/03/2023 72
Red route“Prikaži utrošene sate po zadacima”
User stories - primjer
User story“Kao voditelj odjela želim imati pregled nad satima utrošenim na pojedine zadatke kako bih razumio što nas najviše usporava”
05/03/2023 73
Red route“Unesi namirnice i potraži recept”
User stories - primjer
User story“Kao gurman (s malo slobodnog vremena) želim dobiti razne recepte za hranu koju mogu brzo pripremiti s onim što imam u frižideru kako ne bih stalno jeo isto”
05/03/2023 74
Red route“Dodaj ‘tag’ na fotografiju”
User stories - primjer
User story“Kao korisnik želim na svoje fotografije dodati imena ljudi kako bi se fotografije pojavile u njihovom libraryju”
05/03/2023 75
Vježba
05/03/2023 76
User story“Kao tenisačica u usponu želim neprestano biti u kontaktu sa svojim fanovima, čuti što misle i komunicirati s njima“
Twitter user stories
User story“Kao ljubitelj automobila, želim pronaći što više izvora informacija kako bih uvijek bio upućen u najnovije događaje“
05/03/2023 77
• Persone• Red routes• Kontekst uporabe• User stories
Koje smo tehnike do sada prošli
05/03/2023 78
Card sorting
05/03/2023 82
Card sorting• Napišite na funkcionalnosti koje vaš proizvod treba
imati na kartice (jedna funkcija na jednu karticu).• Rasporedite kartice u grupe kako smatrate da je
najlogičnije• Možete raditi samo interno ili pozvati korisnike da
odrade to s vama
05/03/2023 83
Card sorting• Grupe u koje stavljate mogu biti preddefinirane (npr.
Prodaja, Marketing, Nabava…), a možete si i dati potpuno slobodu u grupiranju
• Kada radi više ljudi, bit će preklapanja i bit će razlika. Shvatite razlike i odlučite kako je najpametnije. Ovo nije čista matematika, niti demokracija.
• Pazite koje riječi stavljate na kartice.
05/03/2023 84
Card sorting
05/03/2023 85
Card sorting
05/03/2023 86
Card sorting• Trigger words ili okidači su one riječi koje navedu ljude
da kliknu link, vjerujući da će ih odvesti tamo gdje žele• Ako uključite korisnike u card sorting možete saznati
koji su njihovi okidači te čak zamijeniti svoje riječi s njihovima
• Uspješnost pretraživanja i navigiranja se može udvostručiti ako su riječi koje korisnici imaju na umu iste kao riječi na siteu.
05/03/2023 88
Card sorting alati na webu• Donna Spencer, Excel based analysis tool (besplatan)
– http://bit.ly/dkizjd • Windows-based card sorting and analysis tool
– http://bit.ly/cDcF7A • Web-based card sorting and analysis tools
– www.optimalsort.com – www.websort.net
05/03/2023 89
Vježba
05/03/2023 90
• about me• my feed• notifications• search twitter• followers
Twitter card sorting
• who to follow• mentions• trending• my account• trending
• popular accounts
• find friends• create lists• following
05/03/2023 91
• Persone• Red routes• Kontekst uporabe• User stories• Card sorting
Koje smo tehnike do sada prošli
05/03/2023 92
Informacijska arhitektura
05/03/2023 95
IA povezuje ljude i sadržaj koji traže uvođenjem reda u:• Klasifikaciju i hijerarhiju sadržaja• Labele i tagove• Navigaciju i snalaženje po web siteu• Pretraživanje
05/03/2023 96
IA nam pomaže ustanoviti:• Na kojem sam siteu trenutno• Gdje sam na tom siteu• Što mogu raditi ovdje• Gdje mogu ići odavde• Gdje je informacija koju tražim
05/03/2023 97
Četiri vrste navigacije (1/2)• Globalna
– Prisutna kroz cijeli site, omogućuje brz pristup velikim dijelovima sitea
• Lokalna– Omogućuje kretanje po dijelu sitea u kojem se nalazite
05/03/2023 98
Četiri vrste navigacije (2/2)• Kontekstualna navigacija
– Spaja međusobno povezane stranice– Posebno je vezana uz element na koji se odnosi
• Dodatna navigacija– Razni navigacijski alati poput site mapa, indeksa...
05/03/2023 99
• Persone• Red routes• Kontekst uporabe• User stories• Card sorting• Informacijska arhitektura
Koje smo tehnike do sada prošli
05/03/2023 100
Mentalni modeli(vs. implementacijski modeli)
05/03/2023 101
Mentalni modeli• Primjer implementacijskog modela je gotovo svaki
home theater system, gdje korisnik mora sam znati kako su komponente spojene, koji source te koji daljinski treba za gledanje TV-a
• Premještanje filea iz jednog foldera u drugi je MOVE, ali s C: diska na D: je COPY.
05/03/2023 102
Mentalni modeli• Matematičko razmišljanje vodi do implementacijskih
modela• Booleanova logika ne odgovara većini korisnika
05/03/2023 105
Vježba
05/03/2023 106
• Persone• Red routes• Kontekst uporabe• User stories• Card sorting• Informacijska arhitektura
Koje smo tehnike do sada prošli
• Mentalni modeli
05/03/2023 107
Odbacivi prototipovi
05/03/2023 109
https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e
05/03/2023 110
Odbacivi prototipovi• Potiču kreativnost zbog psihološkog efekta odbacivosti• Olakšavaju razumijevanje ideja među članovima tima• Ne zahtijevaju kodiranje te omogućuju provjeru
koncepta prije pisanja koda• Umanjuje cjepidlačenje (“pedantic comments”)• Omogućuje da radite brže
05/03/2023 114
Koristite prototipove kako bi testirali• Ideje, koncepte i osnovnu terminologiju• Navigaciju, workflow• Sadržaj i njegov raspored• Layout stranice• Funkcionalnosti
05/03/2023 115
Nemojte koristiti prototipove kako bi testirali• Tehničku izvedivost• Response ili Download time• Scrolling, swiping i ostale geste• Vizualni dizajn (boje, fontove, ikone)• Neuobičajene interakcije s websiteom
05/03/2023 116
Vježba
05/03/2023 117
• Persone• Red routes• Kontekst uporabe• User stories• Card sorting• Informacijska arhitektura
Koje smo tehnike do sada prošli
• Mentalni modeli• Odbacivi prototipovi
05/03/2023 118
Jednostavni i razumljivi web siteovi
05/03/2023 124
Hick’s law• Nazvan po britanskom psihologu Williamu Edmundu
Hicksu, opisuje vrijeme potrebno osobi da donese odluku kao funkciju broja mogućih opcija (izbora), odnosno, povećanjem broja opcija se vrijeme potrebno da se donese odluka povećava logaritamski
05/03/2023 127
Čitanje web stranice• Najvažnije informacije navedite u prva dva paragrafa• Kritične informacije držite “iznad folda”• Započnite paragrafe i bullete s trigger riječima kako bih
ih korisnici lakše uočili prilikom skeniranja• Nemojte stavljati važne informacije na desnu stranu
05/03/2023 135
UX fail
05/03/2023 149
• Persone• Red routes• Kontekst uporabe• User stories• Card sorting• Informacijska arhitektura
Koje smo tehnike do sada prošli
• Mentalni modeli• Odbacivi prototipovi• Jednostavni websiteovi
05/03/2023 150
Usability
05/03/2023 152
Usability: effectiveness• Postotak korisnika koji ispravno i potpuno ostvare
zadani cilj bez vanjske pomoći• Disaster rate: postotak korisnika koji misle da su
uspješni, a zapravo nisu• Broj grešaka po jedinici vremena• Postotak zadataka uspješno odrađenih iz prvog
pokušaja• Koliko puta su korisnici zatražili pomoć
05/03/2023 153
Usability: efficiency• Prosječno vrijeme potrebno za izvršenje zadatka• Vrijeme potrebno u prvom pokušaju• Vrijeme potrebno korisniku u usporedbi s ekspertom• Vrijeme potrebno za ponovno učenje funkcionalnosti• Vrijeme potrebno da korisnik dosegne razinu eksperta• Broj koraka potrebnih da se izvrši zadatak
05/03/2023 154
Usability: satisfaction• Srednji rezultat ostvaren u upitniku• Odnos pozitivnih i negativnih pridjeva u opisu proizvoda• Postotak korisnika koji bi preporučili proizvod drugima• Korisnikova subjektivna ocjena kvalitete outputa• Postotak korisnika koji smatraju da je proizvod
jednostavniji od konkurentskog
05/03/2023 155
SUS: System Usability Scale• Najprihvaćeniji upitnik za mjerenje zadovoljstva
korisnika• http://www.measuringusability.com/sus.php • http://www.usability.gov/how-to-and-tools/methods/syste
m-usability-scale.html
05/03/2023 156
A great UI is invisible to the user!
05/03/2023 157
Povećanje prihoda kroz usability• Korisnici lakše mogu pronaći proizvod koji traže• Korisnici lakše rješavaju prodajne nedoumice
(način dostave, opcije povrata, jamstvo...)• Spremniji su preći na premium opciju ako vide da
će im to dodatno olakšati život
05/03/2023 158
Smanjenje troškova kroz usability• Ulažete vrijeme i resurse u razvoj točno onih
funkcija koje korisnici žele/trebaju• Pronalazite i rješavate probleme rano u
razvojnom procesu• Korisnici trebaju manje pomoći i korisničke
podrške
05/03/2023 159
• Persone• Red routes• Kontekst uporabe• User stories• Card sorting• Informacijska arhitektura
Koje smo tehnike do sada prošli
• Mentalni modeli• Odbacivi prototipovi• Jednostavni websiteovi• Usability
05/03/2023 160
Heuristike (by Jakob Nielsen)
ili Ekspertna analiza
1. Visibility of system statusThe system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
2. Match between system and the real worldThe system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
3. User control and freedomUsers often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
4. Consistency and standardsUsers should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
5. Error preventionEven better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
6. Recognition rather than recallMinimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
7. Flexibility and efficiency of useAccelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
8. Aesthetic and minimalist designDialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
9. Help users recognize, diagnose, and recover from errorsError messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
10. Help and documentationEven though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
05/03/2023 171
• Persone• Red routes• Kontekst uporabe• User stories• Card sorting• Informacijska arhitektura
Koje smo tehnike do sada prošli
• Mentalni modeli• Odbacivi prototipovi• Jednostavni websiteovi• Usability• Ekspertna analiza
05/03/2023 172
User testing
05/03/2023 179
• Persone• Red routes• Kontekst uporabe• User stories• Card sorting• Informacijska arhitektura
Koje smo tehnike do sada prošli
• Mentalni modeli• Odbacivi prototipovi• Jednostavni websiteovi• Usability• Ekspertna analiza• User testing
05/03/2023 180
Q&A
05/03/2023 181
HVALA!
