Tomáš Slavíček @tomasslavicek
Jul 02, 2015
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
http://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/
zaměřenína technologiezaměření
na lidi
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
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
Cílová skupina
č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)
Rešerše: lidé nad 60 let
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
Kvalitativní část
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
testování u uživatelů doma (50-80 let, 10 lidí)
3 prototypy
Uživatelské testová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
Empirické porovnání
53
nastavitbudí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
Co nabízíme za produkt?
Jeho hlavní výhoda?
- a Skype like product
- something for phones
- a new phone
- it‘s modern...
5s test – usabilityhub.com
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íč[email protected]
@tomasslavicek