Tomáš Slavíček @tomasslavicek

Jak navrhovat pro lidi,
ne pro sebe

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

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

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

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

Uživatelská rozhraní
NUR course ČVUT

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/

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

Š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

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

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

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

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

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

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

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

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

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/

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

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

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)

3. Implementace
- prostě to naprogramovat :)

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...

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

S kolika uživateli testovat?
credit useit.com

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

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

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

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

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

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

Praktická ukázka
projekt Easy Phone / KoalaPhone

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

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

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)

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)

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

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

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

50-59 let 60-69 let 70+ let

Co používají lidé 60+

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í

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

49
Prototypy

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

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
nastavit
budík...

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

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

Easy Phone  KoalaPhone

5s test – usabilityhub.com

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...

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í :)

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