Prezentace User eXitus - Nenechte své návštěvníky odcházet z akce BarCamp 2011 Ostrava

1. USER EXITUS
USER EXITUS
USER EXITUS
Nenechte své návštěvníky odcházet
Jiří Komár
21.5.2011 BarCamp Ostrava Twitter: @jirikomar

2. Proč nám uživatelé odcházejí?

3. Protože to po nich „sami“ chceme :)
Pokud už najdete odkaz na přechod do košíku. Pojmenování odkazu vás určitě zaskočí.
electroworld.cz

4. Zastrašit uživatele je strašně jednoduché.
pejsek-in.cz

5. Kde se stala chyba?
● Myslíme za klienta
– Zadání je často naprosto špatně
– Neopisujeme staré řešení, děláme nové a lepší
● Učíme se z chyb jiných
● Nespoleháme se na grafické cítění programátora (někdy ani grafika)
● Snažíme se dělat věci UX

6. Základní pojmy
● UX (user experience) – uživatelský prožitek
● UI (user interface) – uživatelské rozhraní
● IxD (Interaction design) – interakční design
● Usability – použitelnost, neplést s přístupností - Accessibility
● User testing – uživatelské testování

7. UX je vše a zároveň nic
● Myslíme na potřeby uživatele
● Soustředíme se na měřitelné i neměřitelné faktory
● Detaily rozhodují o úspěchu nebo zatracení
● Design bez funkčnosti je na nic
Pojmy: flow

8. UI a interakční design
● Uživatelské rozhraní tvoříme dle znalostí uživatele
● Uživatel musí vždy vědět co příjde
● Čím hlouběji rozhraní rozpracujeme, tím lepší bude prožitek
● 80-20 platí i zde
Pojmy: pozitivní stereotypy, návrhový vzory, mentalní modely

9. Poznáváme svého uživatele

10. Poznáváme svého uživatele
Analýza webu a potřeb uživatelů
● Kvalitativní průzkum
● Kvantitativní průzkum
● Vytvoříme si personu/y daného projektu

11. Poznáváme svého uživatele
Kvalitativní průzkum
● Etnografický rozhovor
● Hloubkové rozhovory a focus group

12. Poznáváme svého uživatele
Kvantitativní průzkum
● Ankety
● Dotazníky
● Hodnocení

13. Fáze navrhování webu

14. Fáze navrhování webu
Card sorting (třídění kartiček)
● Tvoříme strukturu (celého webu, určitého prvku)
● Uživatel, zadavatel, designer
● Uvědomíme si potřeby a priority uživatele
● Nástroje: tužka, malé papírky, nůžky, tabule

15. Fáze navrhování webu
Sketching (skicování)
● Rychlá tvorba přímo s klientem
● V úvodní fázi projektu dostačující
● Skicy nám pomůžou vytvořit wireframe
● Nástroje: tužka a dostatek papíru

16. Fáze navrhování webu
Wireframe (drátěná kostry webu)
● Ušetří nám velké starosti
● Udělá radost: grafikovi, programátorům
● Popisuje rozmístění prvků na webu
● Nástroje: Axure RP, WireframeSketcher,
Online nástroje: Balsamiq, Iplotz, Cacoo

19. Fáze navrhování webu
Tvorba interaktivních prototypů
● Pokud je wireframe málo
● Můžeme otestovat na uživatích nebo provést A/B testování
● Lze použít místo psané specifikace
● Lze vytvořit skutečnou aplikaci
● Nástroje: Axure RP, Balsamiq, HTML a CSS

20. Stránka: 20

21. Fáze navrhování webu
Testování webu
● Testujme pravidelně (wireframes, prototypy, grafické návrhy, web)
● Typy testování
– Teplotní mapy, nahrávání obrazovky, A/B testování, MVT
– Vzdálené testování
– Moderované uživatelské testování

22. Teplotní mapy (heatmap)
Nástroje: mYx, CrazyEgg, userfly, ClickTale

23. A/B testování
Nástroje: Google Website Optimizer

24. 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
● Každý uživatel je jiná osobnost

28. Zajímavé odkazy
● Jakob Nielsen web http://www.useit.com/
● Blog s UX, UI tématikou http://www.uxbooth.com/
● Knihy s UX, UI tématikou http://www.rosenfeldmedia.com/
● Česká UX komunita http://www.sigchi.cz/
● Aplikace pro tvorbu wireframes a prototypů http://www.axure.com/
● UX magazín http://www.uxmag.com/

29. Děkuji za pozornost
Čas na dotazy
@jirikomar
komar.jiri@gmail.com