Úvod do ux designu
DESCRIPTION
Cílem User eXperience designu je navrhovat software, který lidé rádi používají. Jejich potřeby a zvyklosti jsou mnohdy úplně jiné, než si myslíme :-) Přednáška představuje základní nástroje UX designu včetně praktických ukázek: uživatelský výzkum, persony, skicování, wireframy, detailní návrhy a testování použitelnosti.TRANSCRIPT
![Page 2: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/2.jpg)
Software pro malé a
střední firmy
Kerio Connect
mailserver
Kerio Control
síťový firewall
Kerio Operator
telefonní ústředna
Kerio Workspace
sdílení dokumentů
![Page 3: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/3.jpg)
Přidejte se :-)
Developer
- Javascript/ExtJS
- Java
- C/C++
Tester
20% času na inovace
jobs.kerio.cz
![Page 4: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/4.jpg)
CO JE USER
EXPERIENCE(UŽIVATELSKÝ PROŽITEK)
![Page 5: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/5.jpg)
![Page 6: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/6.jpg)
![Page 7: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/7.jpg)
![Page 8: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/8.jpg)
![Page 9: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/9.jpg)
Cíl UX designu
Navrhovat produkty, které lidé rádi
používají
![Page 10: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/10.jpg)
Vstupy UX designu
- Potřeby a zvyklosti uživatelů
- Technické možnosti
- Obchodní cíle firmy
![Page 11: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/11.jpg)
Potřeby uživatelů
![Page 12: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/12.jpg)
Zvyklosti uživatelů
![Page 13: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/13.jpg)
Technické možnosti
![Page 14: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/14.jpg)
Obchodní cíle firmy
„Online kalendář pro manažery"
„3 inovace, které půjdou prodat“
„Vylepšit UX jen v detailech, větší změny až v příští verzi.“
![Page 15: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/15.jpg)
Postup a nástroje UX designu
Uživatelský výzkum
Design
- Tužka a papír
- Wireframy
- Detailní návrhy
Vývoj
Testování
použitelnosti
![Page 16: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/16.jpg)
UŽIVATELSKÝ VÝZKUM
![Page 17: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/17.jpg)
Cíl
Poznat potřeby a zvyklosti
uživatelů.
![Page 18: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/18.jpg)
Sběr dat
(výzkum pro Kerio Mailserver, 2009)
Návštěvy u zákazníků
záměrně různí: rádio, vydavatelství, agentura...
Rozhovory s uživateli
různé pozice ve firmě -> různé potřeby
cca 1 hodina, moderátor a zapisovatel
“Jak používáte e-mail?”
otevřené otázky -> zjistit co ještě NEvíme
![Page 19: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/19.jpg)
Zpracování
Výběr fakt ze zápisů
„45 mailů denně“
„každý den vyčistí Inbox“
Shlukování
Skeletony
„Manažer, 40-60 let, 50-100 mailů denně“
Persony
„Marten, 48 let, 80 mailů denně“
![Page 20: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/20.jpg)
Shlukování
![Page 21: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/21.jpg)
Persony
![Page 22: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/22.jpg)
TUŽKA
A PAPÍR :-)
![Page 23: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/23.jpg)
Tužka a papír
Bleskově rychlé iterace a feedback
![Page 24: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/24.jpg)
Sketchboard
![Page 25: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/25.jpg)
Kreslit umí každý :-)
![Page 26: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/26.jpg)
WIREFRAME
![Page 27: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/27.jpg)
Wireframe
Hotový během minut
Bez rozptylujících detailů
Záměrně „nedodělaný“ vzhled podporuje feedback
Vytvořit, ukázat lidem, odstranit chyby, opakovat
Nástroj:
balsamiq.com
![Page 28: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/28.jpg)
DETAILNÍ NÁVRH
![Page 29: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/29.jpg)
Detailní návrh
Pomalejší než wireframe (zabere hodiny)
ale mnohem rychlejší než programování (týdny)
Ladění detailů a zpětná vazba
Nástroje:
Firebug
Photoshop
Powerpoint
![Page 30: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/30.jpg)
To nejlepší nakonec...
![Page 31: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/31.jpg)
TESTOVÁNÍ POUŽITELNOSTI
![Page 32: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/32.jpg)
Testování použitelnosti
Cíl: najít chyby použitelnosti
Plný test 1 den, bleskový pár minut
Často opakovat
Testové úkoly „z běžného dne“1. vytvoř událost „oběd“ od 12:00 do 13:00
2. přesuň “oběd” na 13:30 - 15:00
3. změň název události na “pozdní oběd”
![Page 33: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/33.jpg)
Co testovat
Všechno :-)
Hotový produkt – vlastní či konkurenční
Rozpracovaný produkt
Nákres, wireframe, detailní návrh
klidně na papíře
![Page 34: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/34.jpg)
Kdo testuje
Moderátor
Pozorovatel(é)
Nejlépe ti, kdo na produktu pracují
Na místě či v pozorovatelně
Účastníci
Kdokoliv, kdo nezná produkt zevnitř
Kolegové, zákazníci, známí...
![Page 35: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/35.jpg)
„Myslete nahlas“
Uživatel říká co dělá,
co vidí, čemu nerozumí
Tak získáme pohled
jeho očima – empatii
![Page 36: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/36.jpg)
Ukázkový test
http://webexpo.cz/prednaska/testovani-pouzitelnosti-live/
![Page 37: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/37.jpg)
SHRNUTÍ
![Page 38: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/38.jpg)
30% design
70% komunikace
![Page 39: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/39.jpg)
Iterovat,
iterovat,
iterovat
![Page 40: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/40.jpg)
Uživatel není hloupý
![Page 41: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/41.jpg)
Zdroje informací
Česká UX komunita
sigchi.cz
Berlin 11.-12.6.2011
uxcampeurope.org
![Page 42: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/42.jpg)
![Page 43: Úvod do UX designu](https://reader033.vdocuments.net/reader033/viewer/2022060201/5599b2851a28abd80b8b4598/html5/thumbnails/43.jpg)
Dotazy?Petr Douša
Twitter.com/PetrDousa
Volné pozice:
Developer-Javascript/ExtJS-Java-C/C++Tester
jobs.kerio.cz
Slides z této přednášky:
www.userexperience.cz