Jaký je váš postup při návrhu webu? Jak do procesu zapojujete uživatele? Právě o tom mluvil Tomáš Ludvík z Dobrého webu na českobudějovické komunitním setkání UX čtvrtkon.

1. Zapojte uživatele
do návrhu webu
Tomáš Ludvík

2. Představení
● Webdesigner
• Webové aplikace
• Mobilní aplikace
● UX specialista

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. A co vy?

5. Obsah
● Co je UX?
● Uživatelský výzkum
● Metody

6. Co je UX?
● Česky “uživatelský prožitek”
● Vjemy a výsledné reakce vznikající na základě
použití produktu, systému nebo služby.

7. Co je User Experience Design?

8. Proces návrhu webu (UXD)

9. Uživatelský výzkum

10. Kdy jste naposledy dělali výzkum?

11. 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

12. Kvalitativní vs. kvantitativní

13. Proces UXD a metody výzkumu
Discover Define Design (IA, UI, ID) Evaluate/Evolve
• Dotazníky
• Rozhovory
• Focus group
• Uživatelské testování
použitelnosti webu
• Webová analytika
• Persony
• Customer
journey
• Card sorting
• Treejack
• Design Workshop
• Uživatelské testování
použitelnosti prototypu
• A/B testování
• Eyetracking
• Webová analytika

14. Kontinuální proces UXD

15. Rozhovory
Jak jste si vybírala svoji
ledničku?

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

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

18. 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

19. Výstup
● Sledování v pozorovací místnosti
● Poznatky ke každé cílové skupině
● Profily uživatelů nebo persony

20. 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

21. Focus group
Jaký by měl být ideální parfém?

22. 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

23. 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

24. 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

25. Výstup
● Odpovědi respondentů na otázky

26. Nevýhody
● Nelze poznat jednoho člověka do hloubky
● Nelze sledovat, jak pracuje se systémem
● Chybí kontext
● Pro uživatelský výzkum nevhodné

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

28. Jaký problém klientovi vyřeší
● Chci zlepšit použitelnost systému

29. 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/

30. Jak to probíhá?
● Hypotézy
● Nábor respondentů
● Scénář
● Moderované uživatelské testování
● Výsledná zpráva a prezentace výsledků

31. 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

32. Výstup
● Sledování v pozorovací místnosti
● Report se soupisem odhalených chyb v
použitelnosti a doporučením řešení
● Prezentace reportu u klienta
● Záznamy sezení

33. Pozorování v přímém přenosu

34. Respondenti

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

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

37. 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í

38. 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

39. 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

40. 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

41. Testování struktury - Treejack

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

43. 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

44. 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

45. Výstup
● Vizualizace cest respondentů strukturou
● Identifikace matoucích míst ve struktuře
● Demo výsledky

46. Design Studio - workshop

47. 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

48. Co získáme
● Díky kolaborativnímu sezení vytvořit solidní
návrhy

49. 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)

50. Výstup
● Velké množství nápadů a jejich postup
zlepšování
● Dobrý podklad pro návrh uživatelského rozhraní

51. Otázky?

52. Děkuji za pozornost
Tomáš Ludvík
Head of User Experience