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íčekmail@tomasslavicek.cz

@tomasslavicek