netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 1
Uživatel nechce přemýšlet
Bc. Jiří KomárUX designer a webový analytik
[email protected]+420 774 729 300
Twitter: @jirikomar
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 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: 3
UX – uživatelský prožitek
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 4
UI – uživatelské rozhraní
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 5
Usability – použitelnostAccessibility - 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: 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: 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: 8
● Analýza webu
– Kvalitativní průzkum
– Kvantitativní průzkum
● Štítkování● Skicování● Tvorba wireframe● Tvorba interaktivních prototypů● Uživatelské testování
Fáze navrhování webu
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 9
Analýza webu a potřeb uživatelů● Kvalitativní průzkum● Kvantitativní průzkum
Fáze navrhování webu
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 10
Kvalitativní průzkum● Etnografický rozhovor● Hloubkové rozhovory a focus groups
Fáze navrhování webu
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 11
Kvantitativní průzkum● Ankety● Dotazníky● Hodnocení
Fáze navrhování webu
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 12
Štítkování● Co to je?● Proč to děláme?● Nástroje: tužka, malé papírky, nůžky, tabule
Fáze navrhování webu
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 13
Skicování● Skicy jsou levné● Skicy jsou rychlé● Skicy jsou dobrý základ pro wireframe● Nástroje: tužka a dostatek papíru
Fáze navrhování webu
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 14
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
Fáze navrhování webu
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 15
Tvorba interaktivních prototypů● Pokud je wireframe málo● Můžeme zapojit uživatele nebo A/B testování● Nástroje: Axure RP, Balsamiq
Fáze navrhování webu
Stránka: 16
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 17
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í
Fáze navrhování webu
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 18
Teplotní mapy (heatmap)
Nástroje: mYx, Crazyegg, Clicktale
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 19
A/B testování
Nástroje: Google Website Optimizer
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 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: 21
Ukázka 1
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 22
Ukázka 2
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 23
Ukázka 3
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 24
Ukázka 4
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 25
Ukázka 5
netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy Stránka: 26
Čas na dotazy
@jirikomar