Uvod u korisničko iskustvo

Uvod u korisničko iskustvo - CodeCamp Osijek

  1. darkoche
    Uvod u korisničko iskustvo - CodeCamp Osijek
    Transcript Header:
    Uvod u korisničko iskustvo
    Transcript Body:
    • 1. UVOD U KORISNIČKO ISKUSTVO CODECAMP OSIJEK 8/12/2015 1 DARKO ČENGIJA USABILITY SPECIALIST, UX PASSION darko@uxpassion.com - @darkoche
    • 2. #CodeCAMPos
    • 3. 8/12/2015 3 Zašto biste ovo slušali?
    • 4. 8/12/2015 4 • Shvatit ćete osnove najvažnijih User Experience tehnika • Shvatit ćete kontekst u kojem se primjenjuju i zašto
    • 5. 8/12/2015 5 Tko sam ja?
    • 6. 8/12/2015 6 2009 2010 2011 2012 2013 2014 Usability specialist Information Architect Interaction Designer 2015
    • 7. 8/12/2015 7 Korisničko iskustvo?
    • 8. 8/12/2015 10 • Shvatit ćete osnove najvažnijih User Experience tehnika • Shvatit ćete kontekst u kojem se primjenjuju i zašto
    • 9. 8/12/2015 14 “Focus on the user and everything else will follow” - Google
    • 10. 8/12/2015 15 Persone
    • 11. 8/12/2015 17 There’s no such thing as an ‘average’ user
    • 12. 8/12/2015 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
    • 13. 8/12/2015 19 Primjer
    • 14. 8/12/2015 20 Koje persone bi mogla imati aplikacija koja služi za hodanje u prirodi?
    • 15. 8/12/2015 21 1. korak - intervjui
    • 16. 8/12/2015 22 2. korak – ključne karakteristike
    • 17. 8/12/2015 23 3. korak – grupiranje
    • 18. 8/12/2015 24 4. korak – personalizacija
    • 19. 8/12/2015 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?”
    • 20. 8/12/2015 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...?”
    • 21. 8/12/2015 27 Persona 3 – Andrea Andrea Izlazi 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?”
    • 22. 8/12/2015 28 Persona 4 – Marko Marko Napustio 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?”
    • 23. 8/12/2015 29
    • 24. 8/12/2015 30
    • 25. 8/12/2015 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
    • 26. 8/12/2015 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
    • 27. 8/12/2015 33
    • 28. 8/12/2015 34 Vježba
    • 29. 8/12/2015 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
    • 30. 8/12/2015 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
    • 31. 8/12/2015 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)
    • 32. 8/12/2015 38 • Persone Koje smo tehnike do sada prošli
    • 33. 8/12/2015 39 Red routes
    • 34. 8/12/2015 40
    • 35. 8/12/2015 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
    • 36. 8/12/2015 46 Primjer
    • 37. 8/12/2015 47 Koje bi bile red routes za web site (aplikaciju) koja vam pomaže u vođenju evidencije o kućnim financijama?
    • 38. 8/12/2015 51 Vježba
    • 39. 8/12/2015 52 Twitter red routes • pogledaj timeline • napiši novi tweet • pronađi diskusiju (tweetove) po temi ili korisniku • pronađi korisnike vrijedne praćenja
    • 40. 8/12/2015 53 • Persone • Red routes Koje smo tehnike do sada prošli
    • 41. 8/12/2015 54 Kontekst uporabe
    • 42. 8/12/2015 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
    • 43. 8/12/2015 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
    • 44. 8/12/2015 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
    • 45. 8/12/2015 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?
    • 46. 8/12/2015 62 Razlika između onoga što vam korisnici kažu i onoga što stvarno rade je prilika za vaš proizvod.
    • 47. 8/12/2015 63 Vježba
    • 48. 8/12/2015 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
    • 49. 8/12/2015 65 • Persone • Red routes • Kontekst uporabe Koje smo tehnike do sada prošli
    • 50. 8/12/2015 66 User stories
    • 51. 8/12/2015 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 želim kako bih ”.
    • 52. 8/12/2015 68 Kako pisati dobre user stories?
    • 53. 8/12/2015 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
    • 54. 8/12/2015 70 http://www.romanpichler.com/blog/10-tips-writing- good-user-stories/
    • 55. 8/12/2015 71 Primjer
    • 56. 8/12/2015 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”
    • 57. 8/12/2015 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”
    • 58. 8/12/2015 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”
    • 59. 8/12/2015 75 Vježba
    • 60. 8/12/2015 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“
    • 61. 8/12/2015 77 • Persone • Red routes • Kontekst uporabe • User stories Koje smo tehnike do sada prošli
    • 62. 8/12/2015 78 Card sorting
    • 63. 8/12/2015 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
    • 64. 8/12/2015 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.
    • 65. 8/12/2015 84 Card sorting
    • 66. 8/12/2015 85 Card sorting
    • 67. 8/12/2015 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.
    • 68. 8/12/2015 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
    • 69. 8/12/2015 89 Vježba
    • 70. 8/12/2015 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
    • 71. 8/12/2015 91 • Persone • Red routes • Kontekst uporabe • User stories • Card sorting Koje smo tehnike do sada prošli
    • 72. 8/12/2015 92 Informacijska arhitektura
    • 73. 8/12/2015 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
    • 74. 8/12/2015 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
    • 75. 8/12/2015 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
    • 76. 8/12/2015 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...
    • 77. 8/12/2015 99 • Persone • Red routes • Kontekst uporabe • User stories • Card sorting • Informacijska arhitektura Koje smo tehnike do sada prošli
    • 78. 8/12/2015 100 Mentalni modeli (vs. implementacijski modeli)
    • 79. 8/12/2015 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.
    • 80. 8/12/2015 102 Mentalni modeli • Matematičko razmišljanje vodi do implementacijskih modela • Booleanova logika ne odgovara većini korisnika
    • 81. 647228131 Social security number The correct format for the Social security number is XXX-XX-XXXX
    • 82. 8/12/2015 105 Vježba
    • 83. 8/12/2015 106 • Persone • Red routes • Kontekst uporabe • User stories • Card sorting • Informacijska arhitektura Koje smo tehnike do sada prošli • Mentalni modeli
    • 84. 8/12/2015 107 Odbacivi prototipovi
    • 85. 8/12/2015 109 https://medium.com/the-year-of-the-looking-glass/junior- designers-vs-senior-designers-fbe483d3b51e
    • 86. 8/12/2015 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
    • 87. 8/12/2015 114 Koristite prototipove kako bi testirali • Ideje, koncepte i osnovnu terminologiju • Navigaciju, workflow • Sadržaj i njegov raspored • Layout stranice • Funkcionalnosti
    • 88. 8/12/2015 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
    • 89. 8/12/2015 116 Vježba
    • 90. 8/12/2015 117 • Persone • Red routes • Kontekst uporabe • User stories • Card sorting • Informacijska arhitektura Koje smo tehnike do sada prošli • Mentalni modeli • Odbacivi prototipovi
    • 91. 8/12/2015 118 Jednostavni i razumljivi web siteovi
    • 92. 8/12/2015 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
    • 93. 8/12/2015 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
    • 94. 8/12/2015 135 UX fail
    • 95. 8/12/2015 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
    • 96. 8/12/2015 150 Usability
    • 97. 8/12/2015 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ć
    • 98. 8/12/2015 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
    • 99. 8/12/2015 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
    • 100. 8/12/2015 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/system-usability-scale.html
    • 101. 8/12/2015 156 A great UI is invisible to the user!
    • 102. 8/12/2015 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
    • 103. 8/12/2015 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
    • 104. 8/12/2015 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
    • 105. 8/12/2015 160 Heuristike (by Jakob Nielsen) ili Ekspertna analiza
    • 106. 1. Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
    • 107. 2. Match between system and the real world The 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.
    • 108. 3. User control and freedom Users 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.
    • 109. 4. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
    • 110. 5. Error prevention Even 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.
    • 111. 6. Recognition rather than recall Minimize 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.
    • 112. 7. Flexibility and efficiency of use Accelerators -- 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.
    • 113. 8. Aesthetic and minimalist design Dialogues 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.
    • 114. 9. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
    • 115. 10. Help and documentation Even 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.
    • 116. 8/12/2015 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
    • 117. 8/12/2015 172 User testing
    • 118. 8/12/2015 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
    • 119. 8/12/2015 180 Q&A
    • 120. 8/12/2015 181 HVALA!
    • 121. UX Passion Horvatovac 23 HR – 10000 Zagreb www.uxpassion.com zagreb@uxpassion.com +385 99 338 9941
    View More