SlideShare une entreprise Scribd logo
1  sur  26
Télécharger pour lire hors ligne
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
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
UX – uživatelský prožitek




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




netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy   Stránka: 4
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
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
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
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
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
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
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
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
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
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
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
Stránka: 16
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
Teplotní mapy (heatmap)




   Nástroje: mYx, Crazyegg, Clicktale

netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy   Stránka: 18
A/B testování




   Nástroje: Google Website Optimizer

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




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




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




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




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




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

                                                       @jirikomar



netdeveo s.r.o. - profesionální iternetové aplikace a e-shopy       Stránka: 26

Contenu connexe

En vedette

Victoriamolinatp1 110601071455-phpapp01
Victoriamolinatp1 110601071455-phpapp01Victoriamolinatp1 110601071455-phpapp01
Victoriamolinatp1 110601071455-phpapp01Pilii Ise Gelsi
 
Salem Area Market Statistics Q1 2011
Salem Area Market Statistics Q1 2011Salem Area Market Statistics Q1 2011
Salem Area Market Statistics Q1 2011Christopher Polak
 
What do We Know about Drag Kings?
What do We Know about Drag Kings?What do We Know about Drag Kings?
What do We Know about Drag Kings?Teila123
 
How to get sh*t done or, Practical advice—not vague bullshit—about pursuing y...
How to get sh*t done or, Practical advice—not vague bullshit—about pursuing y...How to get sh*t done or, Practical advice—not vague bullshit—about pursuing y...
How to get sh*t done or, Practical advice—not vague bullshit—about pursuing y...J+E Creative
 
Prsentation eng 101
Prsentation  eng 101Prsentation  eng 101
Prsentation eng 101sopno100
 
Microbes and technology f.1.
Microbes and technology f.1.Microbes and technology f.1.
Microbes and technology f.1.linamontero
 
Real Estate Impacts of Alternative Energy Technology
Real Estate Impacts of Alternative Energy TechnologyReal Estate Impacts of Alternative Energy Technology
Real Estate Impacts of Alternative Energy TechnologyZeroNet-Energy-Solutions
 
independent group
independent groupindependent group
independent groupcartonmo
 
Carlos lenin estrada
Carlos lenin estradaCarlos lenin estrada
Carlos lenin estradacarloslenin19
 
28th Social Work Day at the United Nations 2011
28th Social Work Day at the  United Nations 201128th Social Work Day at the  United Nations 2011
28th Social Work Day at the United Nations 2011IFSW
 
Financial terms
Financial terms Financial terms
Financial terms Tanu Bansal
 
PhD Thesis presentation
PhD Thesis presentationPhD Thesis presentation
PhD Thesis presentationJavier Ortega
 

En vedette (17)

Victoriamolinatp1 110601071455-phpapp01
Victoriamolinatp1 110601071455-phpapp01Victoriamolinatp1 110601071455-phpapp01
Victoriamolinatp1 110601071455-phpapp01
 
Salem Area Market Statistics Q1 2011
Salem Area Market Statistics Q1 2011Salem Area Market Statistics Q1 2011
Salem Area Market Statistics Q1 2011
 
What do We Know about Drag Kings?
What do We Know about Drag Kings?What do We Know about Drag Kings?
What do We Know about Drag Kings?
 
How to get sh*t done or, Practical advice—not vague bullshit—about pursuing y...
How to get sh*t done or, Practical advice—not vague bullshit—about pursuing y...How to get sh*t done or, Practical advice—not vague bullshit—about pursuing y...
How to get sh*t done or, Practical advice—not vague bullshit—about pursuing y...
 
Prsentation eng 101
Prsentation  eng 101Prsentation  eng 101
Prsentation eng 101
 
Microbes and technology f.1.
Microbes and technology f.1.Microbes and technology f.1.
Microbes and technology f.1.
 
Real Estate Impacts of Alternative Energy Technology
Real Estate Impacts of Alternative Energy TechnologyReal Estate Impacts of Alternative Energy Technology
Real Estate Impacts of Alternative Energy Technology
 
independent group
independent groupindependent group
independent group
 
TP 13
TP 13TP 13
TP 13
 
UI Prototype
UI PrototypeUI Prototype
UI Prototype
 
Carlos lenin estrada
Carlos lenin estradaCarlos lenin estrada
Carlos lenin estrada
 
28th Social Work Day at the United Nations 2011
28th Social Work Day at the  United Nations 201128th Social Work Day at the  United Nations 2011
28th Social Work Day at the United Nations 2011
 
Khalid
KhalidKhalid
Khalid
 
Financial terms
Financial terms Financial terms
Financial terms
 
Slide
SlideSlide
Slide
 
PhD Thesis presentation
PhD Thesis presentationPhD Thesis presentation
PhD Thesis presentation
 
rolce roy
rolce royrolce roy
rolce roy
 

Similaire à Úživatel nechce přemýšlet

Webexpo2008 Pleteme Socialni Sit
Webexpo2008 Pleteme Socialni SitWebexpo2008 Pleteme Socialni Sit
Webexpo2008 Pleteme Socialni SitJosef Holy
 
Pragmatický návrh webu aneb co dělá UX špatně
Pragmatický návrh webu aneb co dělá UX špatněPragmatický návrh webu aneb co dělá UX špatně
Pragmatický návrh webu aneb co dělá UX špatněOptimics s.r.o.
 
Stav českého UX
Stav českého UXStav českého UX
Stav českého UXExperienceU
 
Jak na Smartlook, nejen pro Shoptet
Jak na Smartlook, nejen pro ShoptetJak na Smartlook, nejen pro Shoptet
Jak na Smartlook, nejen pro ShoptetMarek Čech
 
Design webů v prohlížeči
Design webů v prohlížečiDesign webů v prohlížeči
Design webů v prohlížečiMartin Michálek
 
Ochutnávka studie WebTop100: Srovnání kvality českých webů a dalších digitáln...
Ochutnávka studie WebTop100: Srovnání kvality českých webů a dalších digitáln...Ochutnávka studie WebTop100: Srovnání kvality českých webů a dalších digitáln...
Ochutnávka studie WebTop100: Srovnání kvality českých webů a dalších digitáln...Sherpas
 
Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012
Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012
Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012Sherpas
 
Tvorba úspěšných webových stránek
Tvorba úspěšných webových stránekTvorba úspěšných webových stránek
Tvorba úspěšných webových stránekAvito
 
Proč UX? Ergonomie pro weby a e-shopy
Proč UX? Ergonomie pro weby a e-shopyProč UX? Ergonomie pro weby a e-shopy
Proč UX? Ergonomie pro weby a e-shopyIvo Kylián
 
Hobby Developer 3.0: Tipy a triky pro web
Hobby Developer 3.0: Tipy a triky pro webHobby Developer 3.0: Tipy a triky pro web
Hobby Developer 3.0: Tipy a triky pro webTomáš Muchka
 
Pro koho děláme web
Pro koho děláme webPro koho děláme web
Pro koho děláme webSherpas
 
Jak se dělá webdesign
Jak se dělá webdesignJak se dělá webdesign
Jak se dělá webdesignJan Valuštík
 
Webová prezentace - case study - Ibis interiér
Webová prezentace - case study - Ibis interiérWebová prezentace - case study - Ibis interiér
Webová prezentace - case study - Ibis interiérSun Marketing
 
Daniel Steigerwald: Jak psát mobilní webové aplikace
Daniel Steigerwald: Jak psát mobilní webové aplikaceDaniel Steigerwald: Jak psát mobilní webové aplikace
Daniel Steigerwald: Jak psát mobilní webové aplikaceDevelcz
 
Pohled na mobilní bankovní aplikace shora
Pohled na mobilní bankovní aplikace shoraPohled na mobilní bankovní aplikace shora
Pohled na mobilní bankovní aplikace shoraPetr Dvorak
 
Testujem.cz - uživatelské testování stránek
Testujem.cz - uživatelské testování stránekTestujem.cz - uživatelské testování stránek
Testujem.cz - uživatelské testování stránekMarek Gach
 
Webová analytika (ČZU - Webdesign, 11. 12. 2013)
Webová analytika (ČZU - Webdesign, 11. 12. 2013)Webová analytika (ČZU - Webdesign, 11. 12. 2013)
Webová analytika (ČZU - Webdesign, 11. 12. 2013)Sherpas
 
Web jako součást obchodního procesu
Web jako součást obchodního procesuWeb jako součást obchodního procesu
Web jako součást obchodního procesuAITOM Digital s.r.o.
 
Měříte ptákoviny?
Měříte ptákoviny?Měříte ptákoviny?
Měříte ptákoviny?Lukáš Čech
 
Přehled metod UX výzkumu
Přehled metod UX výzkumuPřehled metod UX výzkumu
Přehled metod UX výzkumuExperienceU
 

Similaire à Úživatel nechce přemýšlet (20)

Webexpo2008 Pleteme Socialni Sit
Webexpo2008 Pleteme Socialni SitWebexpo2008 Pleteme Socialni Sit
Webexpo2008 Pleteme Socialni Sit
 
Pragmatický návrh webu aneb co dělá UX špatně
Pragmatický návrh webu aneb co dělá UX špatněPragmatický návrh webu aneb co dělá UX špatně
Pragmatický návrh webu aneb co dělá UX špatně
 
Stav českého UX
Stav českého UXStav českého UX
Stav českého UX
 
Jak na Smartlook, nejen pro Shoptet
Jak na Smartlook, nejen pro ShoptetJak na Smartlook, nejen pro Shoptet
Jak na Smartlook, nejen pro Shoptet
 
Design webů v prohlížeči
Design webů v prohlížečiDesign webů v prohlížeči
Design webů v prohlížeči
 
Ochutnávka studie WebTop100: Srovnání kvality českých webů a dalších digitáln...
Ochutnávka studie WebTop100: Srovnání kvality českých webů a dalších digitáln...Ochutnávka studie WebTop100: Srovnání kvality českých webů a dalších digitáln...
Ochutnávka studie WebTop100: Srovnání kvality českých webů a dalších digitáln...
 
Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012
Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012
Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012
 
Tvorba úspěšných webových stránek
Tvorba úspěšných webových stránekTvorba úspěšných webových stránek
Tvorba úspěšných webových stránek
 
Proč UX? Ergonomie pro weby a e-shopy
Proč UX? Ergonomie pro weby a e-shopyProč UX? Ergonomie pro weby a e-shopy
Proč UX? Ergonomie pro weby a e-shopy
 
Hobby Developer 3.0: Tipy a triky pro web
Hobby Developer 3.0: Tipy a triky pro webHobby Developer 3.0: Tipy a triky pro web
Hobby Developer 3.0: Tipy a triky pro web
 
Pro koho děláme web
Pro koho děláme webPro koho děláme web
Pro koho děláme web
 
Jak se dělá webdesign
Jak se dělá webdesignJak se dělá webdesign
Jak se dělá webdesign
 
Webová prezentace - case study - Ibis interiér
Webová prezentace - case study - Ibis interiérWebová prezentace - case study - Ibis interiér
Webová prezentace - case study - Ibis interiér
 
Daniel Steigerwald: Jak psát mobilní webové aplikace
Daniel Steigerwald: Jak psát mobilní webové aplikaceDaniel Steigerwald: Jak psát mobilní webové aplikace
Daniel Steigerwald: Jak psát mobilní webové aplikace
 
Pohled na mobilní bankovní aplikace shora
Pohled na mobilní bankovní aplikace shoraPohled na mobilní bankovní aplikace shora
Pohled na mobilní bankovní aplikace shora
 
Testujem.cz - uživatelské testování stránek
Testujem.cz - uživatelské testování stránekTestujem.cz - uživatelské testování stránek
Testujem.cz - uživatelské testování stránek
 
Webová analytika (ČZU - Webdesign, 11. 12. 2013)
Webová analytika (ČZU - Webdesign, 11. 12. 2013)Webová analytika (ČZU - Webdesign, 11. 12. 2013)
Webová analytika (ČZU - Webdesign, 11. 12. 2013)
 
Web jako součást obchodního procesu
Web jako součást obchodního procesuWeb jako součást obchodního procesu
Web jako součást obchodního procesu
 
Měříte ptákoviny?
Měříte ptákoviny?Měříte ptákoviny?
Měříte ptákoviny?
 
Přehled metod UX výzkumu
Přehled metod UX výzkumuPřehled metod UX výzkumu
Přehled metod UX výzkumu
 

Úživatel nechce přemýšlet

  • 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
  • 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