User Experience - MS Fest 2014, Brno 19.10.2014 Navrhujeme aplikace pro lidi, ne pro sebe Tomáš Slavíček, @tomasslavicek http://koalaphone.com

1. Tomáš Slavíček @tomasslavicek

2. Jak navrhovat pro lidi,
ne pro sebe

3. Agenda
Jak poznat, co lidé chtějí?
Jak navrhnout lepší produkt?
Jak ho otestovat s uživateli?
Konkrétní ukázka: KoalaPhone

4. zaměření
zaměření na technologie
na lidi
http://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/

5. https://twitter.com/_kud/status/506740100689297409

6. Uživatelská rozhraní
mobilní aplikace, ovladač k televizi, pračka...
http://ao.com/product/IWDE126-Indesit-Washer-Dryer-White-20059.aspx

7. Uživatelská rozhraní
NUR course ČVUT

8. Uživatelská rozhraní
lidé je musí používat...
špatně navržené rozhraní  lidé viní sami sebe
http://luckylarry.co.uk/arduino-projects/arduino-redefining-the-tv-remote/

9. http://gajitz.com/the-mother-of-couch-potatoes-worlds-first-tv-remote/

10. Špatný návrh = finanční ztráty!
firma musí vyškolit zaměstnance
pomalé reakce, ukliknutí v aplikaci  ztráta času
http://nur.felk.cvut.cz/system/mems/4873/original/lect0.pdf

11. Příklad
prezidentské volby v USA (Florida 2000)
http://nur.felk.cvut.cz/system/mems/4873/original/lect0.pdf

12. http://dcgi.felk.cvut.cz/courses/viz

13. Špatný návrh
http://nur.felk.cvut.cz/system/mems/4873/original/lect0.pdf

14. Konkurence
když je produkt špatný, lidé si najdou jiný...
http://www.1800pocketpc.com/capsure-111-pocket-pc-screenshot-utility/

15. Jak se vypne počítač? Jak zpět na plochu?
http://windows8-problems.com/wp-content/uploads/2014/06/windows8.jpg

16. http://www.uxbooth.com/articles/using-lies-in-research/

17. Jak navrhnout aplikaci?
sami podle sebe ji NIKDY nenavrhneme dobře!

18. Cílová skupina...
...chtěla něco jiného
...byla úplně jiná
lidé naší aplikaci nerozumí
nechtějí ji používat
ovládají ji jinak
řešení: zeptat se těch lidí
sestavit prototyp
otestovat ho

19. Metoda User centered design
návrh produktu podle potřeb uživatele
v každé fázi testujeme
http://www.inqbation.com/best-practices-usability-user-centered-design-ux/

20. 1. Analýza
- zmapovat konkurenční aplikace
- odborné články
výzkum
- udělat rozhovory  zjistit motivaci, aktuální stav
- ověřit hypotézy kvantitativně = např. dotazníkem
- určit persony (typy uživatelů) / anti-persony
- zjistit typické scénáře

21. 2. Návrh
- návrh struktury aplikace, propojení stránek
- analýza úkolů (HTA diagramy...)
http://www.cs.bilkent.edu.tr/~fundad/CS468/PROJECT2/group6/prjStage2Gr6.htm

22. 2. Návrh
- návrh struktury aplikace, propojení stránek
- analýza úkolů (HTA diagramy...)
návrh aplikace
- nákresy na papír
- wireframy / mockupy (rozmístění obsahu)
- klikatelné prototypy (lo-fi, hi-fi)

23. 3. Implementace
- prostě to naprogramovat :)

24. 4. Ověření
- sledovat uživatele při používání
- znovu jich ptát, dotazníky
- kvantitativní ověření (počty chyb, úspěšnost úloh)
další nástroje
- A/B testování
- sledování očí
- 5 sekundový test...

25. Jeden produkt pro všechny?
?
http://www.sapdesignguild.org/editions/philosophy_articles/cooper.asp

26. S kolika uživateli testovat?
credit useit.com

27. Testování aplikace v usability labu
via Zdeněk Mikovec, kurz NUR ČVUT

29. Pozorování uživatelů :)
Credits: reelingreviews.com

30. Papírový prototyp
NUR course ČVUT, David Vávra

31. Papírový prototyp :))
PDA course ČVUT,

32. Balsamiq Mockup
http://www.superfiction.net/blog/index.php?2008/10/08/318-les-outils-online-de-conception-de-wireframes-3-5-utiliser-balsamiq-mockups

33. Sledování očí
credit useit.com, 4.bp.blogspot.com

34. Praktická ukázka
projekt Easy Phone / KoalaPhone

35. Telefony
starším lidem se špatně ovládají,
malé písmo
http://www.yenzde.cz/porovnani-dislpleju-telefonu-aligator-a300-a-a500.html

36. Cílová skupina
lidé 50-65 let
aktivní, necítí se staří; hůř vidí, nechtějí složité věci
senioři
chtějí hlavně volat; jednoduchost, velká písmena
? ostatní lidé ?
dosluhuje jim starý mobil, chtějí mapy / FB;
bojí se ale změny

37. Rešerše: lidé nad 60 let
čočka je zažloutlá, propustí jen 1/3 světla
nerozliší odstíny modré a červené/purpurové
pomalejší reakce na změnu jasu (svítící displej)
horší ostrost (nevidí jemné čáry)

38. Rešerše: lidé nad 60 let
na úlohu potřebují o 50-100% více času, než mladí
přemýšlí nad tím déle; samotný pohyb obdobně rychlý!
problém s dvojklikem, přesnými pohyby...
zvuky alespoň 90 dB (běžný člověk 70 dB)

39. Kvalitativní část
5 lidí: 90 min rozhovory (56-76 let, 3 ženy, 2 muži)
 formulace hypotéz
kontakt jen s pár lidmi
naučí se i složitější úkol, ale musí vidět motivaci
nejdou „pokus omyl“, ale chtějí se to pomalu naučit
chtějí pouze několik vybraných funkcí, ostatní je ruší
nerozumí názvům
berou si na telefon brýle

40. 118 lidí: webový dotazník, z toho 7 lidí: osobně
rozdělen na 3 skupiny lidí
(50 lidí 50-59 let, 35 lidí 60-69 let, 33 lidí starších 70 let; 54% ženy )
50-59 let 60-69 let 70+ let
Kvantitativní část

41. 74% lidí má dioptrické brýle, 6% naslouchátko,
5% problémy s jemnou motorikou, 4% částečná barvoslepost
50-59 let 60-69 let 70+ let
Kvantitativní část

42. 50-59 let 60-69 let 70+ let

43. Co používají lidé 60+

44. Pravidla návrhu
- velká tlačítka, všechna viditelná
- textové popisky
- pouze 1-klik nebo posun, ne gesta
obrazovky
- navzájem odlišitelné!
- konzistentní navigace (tlačítka se nesmí měnit!)
- co nejméně zanoření

45. Současná řešení
BIG Launcher, EqualEyes Accessibility, Phonotto Simple Phone

49. 49
Prototypy

51. Uživatelské testování
testování u uživatelů doma (50-80 let, 10 lidí)
3 prototypy

52. Empirické porovnání
prototyp vs. Android 4.4
- napsat SMS, vložit kontakt, spustit mapy...
14 lidí (od 19 do 62 let, průměr 38 let)
meřen počet chyb, úspěšnost, čas
20 lidí (od 60 let, používají internet, nemají Android)
meřena úspěšnost, subjektivní pocity

53. 53
nastavit
budík...

54. celkový čas úloh (sekundy) vs. věk lidí
(prototyp / Android)

55. průměrný čas úlohy (s)
(prototyp / Android)
průměrný počet chyb
(prototyp / Android)

56. Easy Phone  KoalaPhone

57. 5s test – usabilityhub.com

58. 5s test – usabilityhub.com
Co nabízíme za produkt?
Jeho hlavní výhoda?
- a Skype like product
- something for phones
- a new phone
- it‘s modern...

61. Aplikace musí...
- plnit konkrétní motivaci lidí
- přinést řešení na jejich problémy
- komunikovat lidským jazykem
- akce musí být jednoduché, zřejmé
aplikace, co potřebuje tutoriál,
je jako vtip, co potřebuje vysvětlení :)

62. A ještě jednou :)
- nebát se jít za lidmi, ptát se jich...
- upravit to a znovu ukázat...
- získat zpětnou vazbu...
Tomáš Slavíček
mail@tomasslavicek.cz
@tomasslavicek