Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Uživatelský výzkum
v návrhu webu
Tomáš Ludvík
Představení
● User Experience designer
• Webové stránky
• Webové aplikace
• Mobilní aplikace
● 11 let v oboru
● Head of UX...
• Tvorba obchodně úspěšných webů
• Uživatelský výzkum
• Internetový marketing
• Vzdělávací činnost
• UX divize Dobrého web...
Obsah
● Co je UX a UCD proces?
● Metody uživatelského výzkumu
● Případová studie MFF UK
Co je User Experience?
● Česky “uživatelský prožitek”
● Soubor technik a způsobů, jak řízeně
ovlivňovat, jaký dojem návště...
Co je User Experience Design?
User Centric Design proces
Jak nejlépe poznáte své uživatele?
• Pomocí dotazníků a rozhovorů
• Skrze výstupy analytických nástrojů
• Testováním návrh...
Zapojte se do výzkumu webových
stránek a získejte finanční i věcné
odměny. Řekněte nám, co si myslíte.
Druhy uživatelského výzkumu
Kvalitativní Kvantitativní
Kvalitativní výzkum – počet
respondentů
Proces UCD a metody uživatelského
výzkumu
Uživatelské testování
použitelnosti webu
Dotazníky
Rozhovory
Focus group
Webová ...
Vybrané metody uživatelského
výzkumu
● Rozhovor
● Focus Group
● Workshop - Design Studio
● Testování struktury
• Card Sort...
Rozhovor
Jak jste si vybírala svoji
ledničku?
Jaký problém klientovi vyřeší
● Potřebuji poznat své uživatele
● Odpověď na otázku „jací jsou“
Co zjistíme
● Motivace
● Potřeby
● Očekávání
● Zkušenosti
● Názory
Jak to probíhá?
● Individuální moderované sezení v labu
● Moderátor rozvíjí hlavní témata
● 8—10 lidí za každou cílovku
Výstup
● Sledování v pozorovací místnosti
● Poznatky ke každé cílové skupině
● Profily uživatelů nebo persony
● Uživatelsk...
Kontextové šetření
● Individuální moderované sezení v přirozeném
prostředí uživatele – doma, v kanceláři
● Chci vědět, jak...
Focus group
Jaký by měl být ideální parfém?
Jaký problém klientovi vyřeší
● Chci získat názor uživatelů na nějaký můj nápad
● Potřebuji získat nápady, jak řešit nějak...
Co zjistíme
● Co si lidé myslí o nějakém tématu či nápadu
● Jaké mají nápady na řešení nějakého problému
Realizace
● Hromadné moderované sezení v labu
● Moderátor postupně přednáší témata a
respondenti se k nim vyjadřují
● Velk...
Výstup
● Odpovědi respondentů na otázky
● Nápady na realizaci
Workshop – Design Studio
Jaký problém klientovi vyřeší
● Vygenerovat velké množství nápadů v rychlém
sledu, ne za méně než 3 hodiny a ne více než 1...
Co získáme
● Díky kolaborativnímu sezení vytvořit solidní
návrhy
Jak to probíhá?
● Hromadné moderované sezení
● Moderátor představí metodu, cíle workshopu a
cílovou skupinu
● Respondent k...
Výstup
● Velké množství nápadů a jejich postup
zlepšování
● Dobrý podklad pro návrh uživatelského rozhraní
Card sorting
Kam by to tak mohlo patřit?
Jaký problém klientovi vyřeší
● Chci vědět, jak by lidé uspořádali obsah webu,
který chystám
Co zjistíme
● Do jakých skupin by lidé obsah roztřídili
● Zda lidé rozumí názvům a co pod nimi očekávají
Jak to probíhá?
● Individuální moderované sezení v labu
● Otevřené – lidé vytváří libovolné kategorie
● Uzavřené – lidé tř...
Výstup
● Seznam skupin, do kterých lidé obsah třídili
nejčastěji
● Komentář k tomu, co pod skupinami lidé
očekávali
● Pozn...
Kvantitativní Card sorting
● Online přes nástroj Optimalsort
● Otevřené – lidé vytváří libovolné kategorie
● Uzavřené – li...
Kvantitativní Card sorting
Online testování struktury
Jaký problém klientovi vyřeší
● Chci ověřit, zda se lidé vyznají ve struktuře
mého webu
Co zjistíme
● Ověříme, zda lidé najdou správnou cestu k
vyřešení definovaných problémů
● Zjistíme, které položky struktury...
Jak to probíhá?
● Definujeme otázky, které chceme testem ověřit
● Sestavíme testovací otázky
● Vytvoříme v Treejacku test
...
Výstup
● Vizualizace cest respondentů strukturou
● Identifikace matoucích míst ve struktuře
● Demo výsledky
Uživatelské testování použitelnosti
Ukažte nám, jak
si vybíráte a
objednáváte
školení
Jaký problém klientovi vyřeší
● Chci zlepšit použitelnost systému
● Chci otestovat nový návrh
Co zjistíme
● Odhalíme chyby v použitelnosti systému
● Zjistíme, jak uživatelé postupují při řešení
problémů
● Vhodné i pr...
Jak to probíhá?
● Hypotézy
● Nábor respondentů
● Vytvoření scénáře
● Moderované uživatelské testování
● Výsledná zpráva a ...
Jak probíhá testování?
● Individuální moderované sezení v labu
● Moderátor dává respondentovi úkoly a sleduje,
jak je plní...
Výstup
● Sledování v pozorovací místnosti
● Debrief po testování
● Report se soupisem odhalených chyb v
použitelnosti a do...
Pozorování v přímém přenosu
Případová studie:
Návrh nového webu MFF UK
Postup
Analýza
návštěvnosti
Workshop
Návrh
struktury
Online
testování
struktury
Návrh
interaktivního
prototypu
Uživatelské...
Workshop s cílovými skupinami
(studenti/profesoři)
● Uživatelské scénáře
● Chybějící / zbytečné prvky na webu
● Návrh home...
Uživatelské scénáře
Návrh homepage
Card Sorting
Kontext na různých zařízeních
Návrh struktury
Návrh struktury
Online testování struktury
● Počet úkolů – 35
● Test spustilo – 1044 účastníků
● Dokončilo – 618 (59%) účastníků
● Úspěšno...
Online testování struktury
Návrh interaktivního prototypu
Návrh interaktivního prototypu
Uživatelské testování prototypu webu
v UX laboratoři
● Rozhovor
● Pětisekundový test
● Klik-test obrazovky
● Cíl: otestová...
Uživatelské testování prototypu webu
v UX laboratoři
Pětisekundový test
Klik-test obrazovky
Výsledky uživatelského testování
prototypu webu
● Přehledný
● Prvky dobře viditelné
● Snadná navigace
● Chyba:
• Události ...
Finalizace interaktivního prototypu – responsive design
Výstupy a přínosy
● Informační struktura webu
• Vytvořená cílovou skupinou
• Otestovaná kvantitativně
• Otestovaná kvalita...
Grafika webu
Otázky?
Zapojte se do výzkumu webových
stránek a získejte finanční i věcné
odměny. Řekněte nám, co si myslíte.
Děkuji za pozornost
Tomáš Ludvík
Head of User Experience
Upcoming SlideShare
Loading in …5
×

Tomáš Ludvík: Uživatelský výzkum v návrhu webu #blokexpertu

1,328 views

Published on

Slajdy k přednášce pro předmět Blok expertů na KISKu (kisk.cz/blok-expertu).

Tomáš Ludvík v Dobrém webu vede UX tým a jako designer pomáhá společnostem definovat a navrhovat úspěšné digitální produkty a služby. Na Bloku expertů vystoupí s přednáškou na téma "User experience", objasní základní termíny z této oblasti, uvede metody uživatelského výzkumu a jejich zapojení do procesu návrhu webu. Přínosy "User-centered designu" budou demonstrovány na reálných příkladech z praxe, zejména na práci při redesignu webu MFF Univezity Karlovy.

Published in: Internet
  • Be the first to comment

Tomáš Ludvík: Uživatelský výzkum v návrhu webu #blokexpertu

  1. 1. Uživatelský výzkum v návrhu webu Tomáš Ludvík
  2. 2. Představení ● User Experience designer • Webové stránky • Webové aplikace • Mobilní aplikace ● 11 let v oboru ● Head of UX – Dobrý web
  3. 3. • Tvorba obchodně úspěšných webů • Uživatelský výzkum • Internetový marketing • Vzdělávací činnost • UX divize Dobrého webu • Člen mezinárodní aliance UX agentur • Přes 500 specialistů ve 30 zemích světa • Sdílíme a využíváme know-how
  4. 4. Obsah ● Co je UX a UCD proces? ● Metody uživatelského výzkumu ● Případová studie MFF UK
  5. 5. Co je User Experience? ● Česky “uživatelský prožitek” ● Soubor technik a způsobů, jak řízeně ovlivňovat, jaký dojem návštěva vašeho webu v lidech zanechá. ● Vjemy a výsledné reakce vznikající na základě použití produktu, systému nebo služby.
  6. 6. Co je User Experience Design?
  7. 7. User Centric Design proces
  8. 8. Jak nejlépe poznáte své uživatele? • Pomocí dotazníků a rozhovorů • Skrze výstupy analytických nástrojů • Testováním návrhů • Nezávislým pozorováním
  9. 9. Zapojte se do výzkumu webových stránek a získejte finanční i věcné odměny. Řekněte nám, co si myslíte.
  10. 10. Druhy uživatelského výzkumu Kvalitativní Kvantitativní
  11. 11. Kvalitativní výzkum – počet respondentů
  12. 12. Proces UCD a metody uživatelského výzkumu Uživatelské testování použitelnosti webu Dotazníky Rozhovory Focus group Webová analytika Persony Customer journey Card sorting Treejack Design Studio Uživatelské testování použitelnosti prototypu A/B testování Eyetracking Webová analytika Discover Define Design Evaluate
  13. 13. Vybrané metody uživatelského výzkumu ● Rozhovor ● Focus Group ● Workshop - Design Studio ● Testování struktury • Card Sorting • Online nástroj Treejack ● Uživatelské testování použitelnosti
  14. 14. Rozhovor Jak jste si vybírala svoji ledničku?
  15. 15. Jaký problém klientovi vyřeší ● Potřebuji poznat své uživatele ● Odpověď na otázku „jací jsou“
  16. 16. Co zjistíme ● Motivace ● Potřeby ● Očekávání ● Zkušenosti ● Názory
  17. 17. Jak to probíhá? ● Individuální moderované sezení v labu ● Moderátor rozvíjí hlavní témata ● 8—10 lidí za každou cílovku
  18. 18. Výstup ● Sledování v pozorovací místnosti ● Poznatky ke každé cílové skupině ● Profily uživatelů nebo persony ● Uživatelské příběhy
  19. 19. Kontextové šetření ● Individuální moderované sezení v přirozeném prostředí uživatele – doma, v kanceláři ● Chci vědět, jak a proč lidé pracují s mým systémem ● Výstup • Scénáře užití (use-casy) • Poznatky o chování uživatelů • Fotky prostředí • Profily uživatelů nebo persony
  20. 20. Focus group Jaký by měl být ideální parfém?
  21. 21. Jaký problém klientovi vyřeší ● Chci získat názor uživatelů na nějaký můj nápad ● Potřebuji získat nápady, jak řešit nějaký problém
  22. 22. Co zjistíme ● Co si lidé myslí o nějakém tématu či nápadu ● Jaké mají nápady na řešení nějakého problému
  23. 23. Realizace ● Hromadné moderované sezení v labu ● Moderátor postupně přednáší témata a respondenti se k nim vyjadřují ● Velkou roli hraje skupinová dynamika ● 4—10 uživatelů za cílovou skupinu
  24. 24. Výstup ● Odpovědi respondentů na otázky ● Nápady na realizaci
  25. 25. Workshop – Design Studio
  26. 26. Jaký problém klientovi vyřeší ● Vygenerovat velké množství nápadů v rychlém sledu, ne za méně než 3 hodiny a ne více než 10 hodin. ● Dát myšlenkám a nápadům jasnou formu, nad kterou je možné diskutovat ● Porozumět základním věcem, příležitostem a vyjasnit si problematická místa
  27. 27. Co získáme ● Díky kolaborativnímu sezení vytvořit solidní návrhy
  28. 28. Jak to probíhá? ● Hromadné moderované sezení ● Moderátor představí metodu, cíle workshopu a cílovou skupinu ● Respondent kreslí 8 minut sám, ● Pak proběhne týmová prezentace (každý 3 minuty) ● Opakuje se 2x ● Poté 2 týmové iterace a prezentace všech ýmů ● Alespoň 15 účastníků (skupinky po 4)
  29. 29. Výstup ● Velké množství nápadů a jejich postup zlepšování ● Dobrý podklad pro návrh uživatelského rozhraní
  30. 30. Card sorting Kam by to tak mohlo patřit?
  31. 31. Jaký problém klientovi vyřeší ● Chci vědět, jak by lidé uspořádali obsah webu, který chystám
  32. 32. Co zjistíme ● Do jakých skupin by lidé obsah roztřídili ● Zda lidé rozumí názvům a co pod nimi očekávají
  33. 33. Jak to probíhá? ● Individuální moderované sezení v labu ● Otevřené – lidé vytváří libovolné kategorie ● Uzavřené – lidé třídí obsah do daných kategorií ● 6—8 respondentů za cílovou skupinu
  34. 34. Výstup ● Seznam skupin, do kterých lidé obsah třídili nejčastěji ● Komentář k tomu, co pod skupinami lidé očekávali ● Poznatky o tom, kterým pojmům lidé nerozuměli
  35. 35. Kvantitativní Card sorting ● Online přes nástroj Optimalsort ● Otevřené – lidé vytváří libovolné kategorie ● Uzavřené – lidé třídí obsah do daných kategorií ● Cca 50 respondentů na cílovku ● Výstup • Seznam skupin, do kterých lidé obsah třídili nejčastěji • Demo
  36. 36. Kvantitativní Card sorting
  37. 37. Online testování struktury
  38. 38. Jaký problém klientovi vyřeší ● Chci ověřit, zda se lidé vyznají ve struktuře mého webu
  39. 39. Co zjistíme ● Ověříme, zda lidé najdou správnou cestu k vyřešení definovaných problémů ● Zjistíme, které položky struktury lidi odvádějí na špatnou cestu
  40. 40. Jak to probíhá? ● Definujeme otázky, které chceme testem ověřit ● Sestavíme testovací otázky ● Vytvoříme v Treejacku test ● Přes Webvýzkum test pošleme respondentům ● Cca 50 respondentů na cílovku ● Demo respondent
  41. 41. Výstup ● Vizualizace cest respondentů strukturou ● Identifikace matoucích míst ve struktuře ● Demo výsledky
  42. 42. Uživatelské testování použitelnosti Ukažte nám, jak si vybíráte a objednáváte školení
  43. 43. Jaký problém klientovi vyřeší ● Chci zlepšit použitelnost systému ● Chci otestovat nový návrh
  44. 44. Co zjistíme ● Odhalíme chyby v použitelnosti systému ● Zjistíme, jak uživatelé postupují při řešení problémů ● Vhodné i pro testování interaktivních prototypů ● http://www.lupa.cz/clanky/uzivatelske- testovani-navrhu-webu/
  45. 45. Jak to probíhá? ● Hypotézy ● Nábor respondentů ● Vytvoření scénáře ● Moderované uživatelské testování ● Výsledná zpráva a prezentace výsledků
  46. 46. Jak probíhá testování? ● Individuální moderované sezení v labu ● Moderátor dává respondentovi úkoly a sleduje, jak je plní ● Během plnění úkolů klade doplňující dotazy a získává tak vhled do chápání respondenta ● Respondent nahlas přemýšlí ● 6 lidí za cílovou skupinu
  47. 47. Výstup ● Sledování v pozorovací místnosti ● Debrief po testování ● Report se soupisem odhalených chyb v použitelnosti a doporučením řešení ● Prezentace reportu u klienta ● Záznamy sezení
  48. 48. Pozorování v přímém přenosu
  49. 49. Případová studie: Návrh nového webu MFF UK
  50. 50. Postup Analýza návštěvnosti Workshop Návrh struktury Online testování struktury Návrh interaktivního prototypu Uživatelské testování prototypu Finalizace Interaktivního prototypu
  51. 51. Workshop s cílovými skupinami (studenti/profesoři) ● Uživatelské scénáře ● Chybějící / zbytečné prvky na webu ● Návrh homepage (Design studio) ● Card sorting (samostatný a týmový) ● Kontext na různých zařízeních ● Cíl: získat nápady a podklady pro strukturu webu
  52. 52. Uživatelské scénáře
  53. 53. Návrh homepage
  54. 54. Card Sorting
  55. 55. Kontext na různých zařízeních
  56. 56. Návrh struktury
  57. 57. Návrh struktury
  58. 58. Online testování struktury ● Počet úkolů – 35 ● Test spustilo – 1044 účastníků ● Dokončilo – 618 (59%) účastníků ● Úspěšnost splněných úkolů – 75 %
  59. 59. Online testování struktury
  60. 60. Návrh interaktivního prototypu
  61. 61. Návrh interaktivního prototypu
  62. 62. Uživatelské testování prototypu webu v UX laboratoři ● Rozhovor ● Pětisekundový test ● Klik-test obrazovky ● Cíl: otestování struktury a navigace na webu ● Výsledek • Přehledný • Prvky dobře viditelné • Snadná navigace • Chyba: prvky dobře srozumitelné NE • Události a akce nejsou zřejmé.
  63. 63. Uživatelské testování prototypu webu v UX laboratoři
  64. 64. Pětisekundový test
  65. 65. Klik-test obrazovky
  66. 66. Výsledky uživatelského testování prototypu webu ● Přehledný ● Prvky dobře viditelné ● Snadná navigace ● Chyba: • Události a akce nejsou zřejmé, málo srozumitelné
  67. 67. Finalizace interaktivního prototypu – responsive design
  68. 68. Výstupy a přínosy ● Informační struktura webu • Vytvořená cílovou skupinou • Otestovaná kvantitativně • Otestovaná kvalitativně v UX Labu ● Návrh webu • Otestovaný na cílové skupině • Upravený podle zjištěných chyb
  69. 69. Grafika webu
  70. 70. Otázky?
  71. 71. Zapojte se do výzkumu webových stránek a získejte finanční i věcné odměny. Řekněte nám, co si myslíte.
  72. 72. Děkuji za pozornost Tomáš Ludvík Head of User Experience

×