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.

1. Uživatelský výzkum
v návrhu webu
Tomáš Ludvík

2. Představení
● User Experience designer
• Webové stránky
• Webové aplikace
• Mobilní aplikace
● 11 let v oboru
● Head of UX – Dobrý web

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. Obsah
● Co je UX a UCD proces?
● Metody uživatelského výzkumu
● Případová studie MFF UK

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. Co je User Experience Design?

7. User Centric Design proces

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. 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. Druhy uživatelského výzkumu
Kvalitativní Kvantitativní

11. Kvalitativní výzkum – počet
respondentů

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. 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. Rozhovor
Jak jste si vybírala svoji
ledničku?

15. Jaký problém klientovi vyřeší
● Potřebuji poznat své uživatele
● Odpověď na otázku „jací jsou“

16. Co zjistíme
● Motivace
● Potřeby
● Očekávání
● Zkušenosti
● Názory

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. 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. 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. Focus group
Jaký by měl být ideální parfém?

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. 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. 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. Výstup
● Odpovědi respondentů na otázky
● Nápady na realizaci

25. Workshop – Design Studio

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. Co získáme
● Díky kolaborativnímu sezení vytvořit solidní
návrhy

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. Výstup
● Velké množství nápadů a jejich postup
zlepšování
● Dobrý podklad pro návrh uživatelského rozhraní

30. Card sorting
Kam by to tak mohlo patřit?

31. Jaký problém klientovi vyřeší
● Chci vědět, jak by lidé uspořádali obsah webu,
který chystám

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. 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. 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. 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. Kvantitativní Card sorting

37. Online testování struktury

38. Jaký problém klientovi vyřeší
● Chci ověřit, zda se lidé vyznají ve struktuře
mého webu

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. 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. Výstup
● Vizualizace cest respondentů strukturou
● Identifikace matoucích míst ve struktuře
● Demo výsledky

42. Uživatelské testování použitelnosti
Ukažte nám, jak
si vybíráte a
objednáváte
školení

43. Jaký problém klientovi vyřeší
● Chci zlepšit použitelnost systému
● Chci otestovat nový návrh

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. 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. 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. 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. Pozorování v přímém přenosu

49. Případová studie:
Návrh nového webu MFF UK

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. 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. Uživatelské scénáře

53. Návrh homepage

54. Card Sorting

55. Kontext na různých zařízeních

56. Návrh struktury

57. Návrh struktury

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. Online testování struktury

60. Návrh interaktivního prototypu

61. Návrh interaktivního prototypu

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. Uživatelské testování prototypu webu
v UX laboratoři

64. Pětisekundový test

65. Klik-test obrazovky

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. Finalizace interaktivního prototypu – responsive design

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. Grafika webu

70. Otázky?

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. Děkuji za pozornost
Tomáš Ludvík
Head of User Experience