1. Uživatel nechce přemýšlet
Bc. Jiří Komár
UX designer a webový analytik
komar@netdevelo.cz
+420 774 729 300
Twitter: @jirikomar
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 1

2. Seznámení se základními pojmy
● UX – uživatelský prožitek
● UI – uživatelské rozhraní
● Usability – použitelnost (neplést s přístupností - Accessibility)
● User testing – uživatelské testování
● Web analytics – webová analytika
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 2

3. UX – uživatelský prožitek
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 3

4. UI – uživatelské rozhraní
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 4

5. Usability – použitelnost
Accessibility - přístupnost
● Jak poznat, že je stránka použitelná?
– Měření Google Analytics, Google Website Optimizer
– Uživatel Vám to rád poví
– Dokonalý web neexistuje
● Weby dělejme pro lidi, ne pro stroje
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 5

6. User testing – uživatelské testování
● Kdy by se mělo testovat?
– wireframe, interaktivní prototypy, design, funkční řešení
● Jak by testování mělo probíhat?
● Co od něj máme očekávat?
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 6

7. Web analytics – webová analytika
● Proč sledujeme webová data?
– Co se na webu děje (sběr, sledodávání, vyhodnocování dat)
– Navrhujeme změny (design stránek, reklamní cílení atd.)
● Nástroje
– Google Analytics, Webtrends, SiteCatalyst atd.
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 7

8. Fáze navrhování webu
● Analýza webu
– Kvalitativní průzkum
– Kvantitativní průzkum
● Štítkování
● Skicování
● Tvorba wireframe
● Tvorba interaktivních prototypů
● Uživatelské testování
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 8

9. Fáze navrhování webu
Analýza webu a potřeb uživatelů
● Kvalitativní průzkum
● Kvantitativní průzkum
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 9

10. Fáze navrhování webu
Kvalitativní průzkum
● Etnografický rozhovor
● Hloubkové rozhovory a focus groups
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 10

11. Fáze navrhování webu
Kvantitativní průzkum
● Ankety
● Dotazníky
● Hodnocení
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 11

12. Fáze navrhování webu
Štítkování
● Co to je?
● Proč to děláme?
● Nástroje: tužka, malé papírky, nůžky, tabule
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 12

13. Fáze navrhování webu
Skicování
● Skicy jsou levné
● Skicy jsou rychlé
● Skicy jsou dobrý základ pro wireframe
● Nástroje: tužka a dostatek papíru
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 13

14. Fáze navrhování webu
Tvorba wireframe
● Šetří čas zadavateli a vývojářům
● Popisuje prvky a chování webu
● Nástroje: Axure RP, WireframeSketcher,
Online nástroje: Balsamiq, Iplotz, Cacoo
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 14

15. Fáze navrhování webu
Tvorba interaktivních prototypů
● Pokud je wireframe málo
● Můžeme zapojit uživatele nebo A/B testování
● Nástroje: Axure RP, Balsamiq
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 15

16. Stránka: 16

17. Fáze navrhování webu
Uživatelské testování
● Testujme pravidelně
● Typy testování
– Teplotní mapy, nahrávání obrazovky, A/B testování
– Vzdálené testování
– Moderované uživatelské testování
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 17

18. Teplotní mapy (heatmap)
Nástroje: mYx, Crazyegg, Clicktale
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 18

19. A/B testování
Nástroje: Google Website Optimizer
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 19

20. 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í
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 20

21. Ukázka 1
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 21

22. Ukázka 2
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 22

23. Ukázka 3
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 23

24. Ukázka 4
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 24

25. Ukázka 5
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 25

26. Čas na dotazy
@jirikomar
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 26