05/03/2023 1

UVOD U KORISNIČKO ISKUSTVO

CODECAMP OSIJEKDARKO ČENGIJAUSABILITY SPECIALIST, UX PASSION

darko@uxpassion.com - @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!

UX PassionHorvatovac 23HR – 10000 Zagreb

www.uxpassion.comzagreb@uxpassion.com+385 99 338 9941