User experience v praxi
description
Transcript of User experience v praxi
![Page 1: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/1.jpg)
User Experience v praxi
5.6. 2012
User Experience v praxi
Jiří Komár
![Page 2: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/2.jpg)
Co je to vlastně UX?
User Experience v praxi 5.6.2012
![Page 3: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/3.jpg)
UX je všechno
User Experience v praxi 5.6.2012
![Page 4: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/4.jpg)
User Experience v praxi
• Nalezitelnost• Užitečnost• Důvěryhodnost• Použitelnost• Potřebnost• Přístupnost
5.6.2012
![Page 5: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/5.jpg)
User Experience v praxi
flow
5.6.2012
![Page 6: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/6.jpg)
User Experience v praxi
O „Flow“ můžeme rychle přijít
5.6.2012
![Page 7: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/7.jpg)
User Experience v praxi
Pokud už najdete odkaz na košík, asi na něj nekliknete electroworld.cz
5.6.2012
![Page 8: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/8.jpg)
User Experience v praxi
Přihlášení a hledání bylo dokonale zamaskovánomegastreet.cz
5.6.2012
![Page 9: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/9.jpg)
User Experience v praxi
Určitě tam ty peníze pošlublackcomb.cz
5.6.2012
![Page 10: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/10.jpg)
User Experience v praxi
Jak vložit do košíku?zoohit.cz
5.6.2012
![Page 11: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/11.jpg)
User Experience v praxi
I pěkné věci můžou být špatně ceskasporitelna.cz
5.6.2012
![Page 12: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/12.jpg)
User Experience v praxi
Co tedy dělat a co ne?
• Uživatelské rozhraní tvoříme dle znalostí našich uživatelů• Neopisujeme staré řešení, děláme nové a lepší• Učíme se z chyb jiných• Soustředíme se na kritické místa aplikace - 20%• Pojmy: pozitivní stereotypy, návrhový vzory, mentální modely
5.6.2012
![Page 13: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/13.jpg)
User Experience v praxi
Poznáváme svého uživatele
5.6.2012
![Page 14: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/14.jpg)
User Experience v praxi
Analýza webu a potřeb uživatelů
• Kvantitativní průzkum• Kvalitativní průzkum
Poznáváme svého uživatele
5.6.2012
![Page 15: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/15.jpg)
User Experience v praxi
Kvalitativní průzkum
• Etnografické rozhovory• Hloubkové rozhovory a focus group
• Vytvoříme si personu/y
Poznáváme svého uživatele
5.6.2012
![Page 16: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/16.jpg)
User Experience v praxi 5.6.2012
![Page 17: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/17.jpg)
User Experience v praxi 5.6.2012
![Page 18: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/18.jpg)
User Experience v praxi 5.6.2012
![Page 19: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/19.jpg)
User Experience v praxi 5.6.2012
![Page 20: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/20.jpg)
User Experience v praxi 5.6.2012
![Page 21: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/21.jpg)
User Experience v praxi
Kvantitativní průzkum
• Webová analytika• Ankety• Dotazníky• Hodnocení
Poznáváme svého uživatele
5.6.2012
![Page 22: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/22.jpg)
User Experience v praxi
Navrhujte web správně
5.6.2012
![Page 23: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/23.jpg)
User Experience v praxi
Card sorting (třídění kartiček)
• Tvoříme strukturu (celého webu, určitého prvku)• Uživatel, zadavatel, designer• Uvědomujeme si potřeby a priority uživatele• Nástroje: tužka, malé papírky, tabule
5.6.2012
![Page 24: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/24.jpg)
User Experience v praxi
Sketching (skicování)
• Rychlý návrh obrazovek a nabídek • Vhodné v rané fázi projektu• Skicy nám pomůžou vytvořit wireframe• Nástroje: tužka a hodně papíru
5.6.2012
![Page 25: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/25.jpg)
User Experience v praxi
Wireframe (drátěné kostry webu)
• Ušetří nám velké starosti (čas, peníze)• Popisuje rozmístění prvků na webu• Nechte to raději na profesionálech • Nástroje: Axure RP, Balsamiq, Cacoo
5.6.2012
![Page 26: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/26.jpg)
User Experience v praxi 5.6.2012
![Page 27: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/27.jpg)
User Experience v praxi 5.6.2012
![Page 28: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/28.jpg)
User Experience v praxi
Tvorba interaktivních prototypů
• Pokud je wireframe málo• Můžeme otestovat na uživatelích nebo provést A/B testování• Lze použít místo psané specifikace• Lze vytvořit funkční aplikaci 1:1• Nástroje: Axure RP, Balsamiq, HTML a CSS
5.6.2012
![Page 29: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/29.jpg)
User Experience v praxi
Testování webu
• Testujeme pravidelně (wireframe, prototyp, design, web)• Typy testování
- Teplotní mapy, nahrávání obrazovky, A/B testování, MVT- Vzdálené testování- Moderované uživatelské testování
5.6.2012
![Page 30: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/30.jpg)
User Experience v praxi
Nástroje: mYx, CrazyEgg, userfly, ClickTale
Teplotní mapy (heatmap)
5.6.2012
![Page 31: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/31.jpg)
User Experience v praxi
Nástroje: Google Website Optimizer
A/B testování
5.6.2012
![Page 32: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/32.jpg)
User Experience v praxi
Moderované uživatelské testování
• Do testu vybíráme obyčejné uživatele, ne pracovníky firmy• Testujeme na 3-6 uživatelích• Před testem sestavíme scénář uživatelského testování• Při testu nutíme uživatele uvažovat nahlas• Testování nahráváme nebo si děláme poznámky• Z poznámek vypracujeme výstupní analýzu, tu předáme k
dalšímu zpracování• Hledáme chyby v použitelnosti a ne v aplikaci, ani v uživatelích• Každý uživatel je jiná osobnost
5.6.2012
![Page 33: User experience v praxi](https://reader035.fdocuments.net/reader035/viewer/2022062710/559523ca1a28abcf318b465c/html5/thumbnails/33.jpg)
User Experience v praxi
5 nejčastějších chyb internetových obchodů
• Velké množství produktů• Malé fotky a špatný popis produktů• Špatná navigační architektura webu• Zbytečně složitý objednávkový proces• Špatná práce s marketingovými nástroji
(E-mail marketing, Google Analytics, Sociální sítě, Cross-selling, Up-selling)
5.6.2012