Prezentace ze semináře z 29. 4. 2013 v pražském HUBu konaného Unií Grafického Designu – http://unie-grafickeho-designu.cz/seminar/userexperience/ Videozáznam celého semináře bude dostupný na začátku září.

1. pro grafické
designery
UX
Úvod do
@jakubkrcmar

2. 1. Obory zásadní pro UX
2. Co je to User Experience?
3. Proč řešit UX?
4. Aplikujeme UX strategii
5. Persony, cíle a metriky
6. Prototypování a testování
7. Další UX metody
8. Kdo je to UX designer?

3. 1. Obory zásadní pro UX

4. • User-centered Design (UCD)
• Interaction Design (IxD)
• Information Architecture (IA)
• User Interface Design (UID)
• Usability (Použitelnost)

5. • Obrat od technologií systémů k uživateli.
• Design s ohledem na limity, potřeby,
preference a přístupy konečného uživatele.
• Nechce, aby uživatel musel upravit svůj
přístup a své chování.
User-centered Design (UCD)

6. „UCD by měl co nejvíce fungovat bez instrukcí
či popisků. Jakákoliv nutné instrukce
či tréningu by mělo být třeba pouze jednou.
Pokud vysvětlení vede k reakci uživatele ‚Jak
si to ale vše zapamatuji?‘, design selhal.“
– Donald Norman, Nielsen Norman Group

7. • Design komplexních systémů s cílem
uspokojení uživatelských cílů.
• Interakce = dialog.
• IxD řeší design formy i chování. Designuje
produkt jako celek.
Interaction Design (IxD)

8. – Behance.net/fei-design

9. • Řeší přístup k informacím, jejich relevanci a
užitečnost ve vztahu k cílovému publiku.
• Cílem je zefektivnit proces komunikace.
• Card-sorting, site-mapy, diagramy, aj.
Information Architecture (IA)

10. – Bitstrategist.com

11. • Design statické formy.
• Má vycházet z designu interakce a
informační architektury.
• Nejméně důležitý (?).
User Interface Design (UID)

12. – ČSFD App design, Jakub Krčmář

13. • Zabývá se snadností používání (ergonomics).
• Zahrnuje přístupnost.
• „Může uživatel efektivně dosáhnout, či
dosahovat, svého cíle?“
• Základem je uživatelské testování.
• Použitelnost ≠ UX
Usability (Použitelnost)

14. – Alexpoole.info

15. • UCD → design se zaměřením na uživatele.
• IxD → design dialogu systému s uživatelem.
• IA → design obsahu dialogu.
• UID → design vizuální formy dialogu.
• Usability → analyzuje ergonomii dialogu.

16. 2. Co je to User Experience?

17. UX = suma přímých
i nepřímých interakcí
uživatele
s produktem, službou,
systémem či zařízením.

18. UX
CX
Ekosystém
produktů
a touchpointů
společnosti

19. Počkat... Customer
Experience?

20. CX = suma přímých i
nepřímých interakcí
zákazníka
se společností

21. Uživatelská zkušenost se stane,
ať už někdo designoval
elementy ovlivňující prožitek
uživatele úmyslně či náhodou.
– Realita

22. „Opravdová UX jde dále, než je
pouhé vyhovění potřeb uživatele.”
– Donald Norman, Nielsen Norman Group

23. UXD? UX (zatím) nelze
designovat, pouze ovlivnit.
– Realita

24. • Uživatelské cíle.
• Mentální modely (předsudky, předpoklady).
• Použitelnost.
• Emoce.
Očekávání + realita = UX

25. • Lidé mají vlastní mentální modely objektů
a úkolů, dle kterých jednají.
• Pro vytvoření pozitivního UX je tak třeba
buďto spojit konceptuální modely produktu
či webu s mentálním modelem uživatele, či
přijít na způsob, jak uživatele naučit novému
mentálnímu modelu.
• Užitečné jsou metafory, např.„Je to jako číst
knihu”.

26. 3. Proč řešit UX?

27. Marketing vznikl jako reakce
na nadprodukci.

28. UX vzniklo jako reakce na shodnou
technickou vyspělost produktů.

33. BRAND = MARKETING + CX/UX
Očekávání
Zkušenost

34. • ochotu znovu nakoupit (či použít),
• neochotu použít alternativu,
• pravděpodobnost doporučení.
CX/UX ovlivňuje
The State of Customer Experience 2010,
Forrest Research

35. 80 %
90 %
The State of Customer Experience 2010,
Forrest Research

36. „Za sledované období lídři v oblasti CX (Apple,
Starbucks, Amazon, ...), rostly více než celkový trh.
V době recese byl jejich pokles nižší, než pokles
celého trhu a s ochabnutím recese jejich růst
téměř dvojnásobně vyšší, než-li růst celého trhu.“
The State of Customer Experience 2010,
Forrest Research

37. Orientace na UX je v době
technicky shodně vyspělých
substitutů kritická, ale...

38. Hezké UI ≠ Pozitivní UX

39. 4. Aplikujeme UX strategii

40. • UX designer = hlavně grafik.
• Nízká možnost něco změnit.
• Grafik často dělá i markeťáka.
• UX nelze komplexně obsáhnout.
Realita
Zkušenosti vlastní, kolegů i pozorované.

41. „Vaše konkurence nabízí to samé řešení problému,
vaši konkurenční výhodu eventuálně kdokoliv
zkopíruje. V dnešní době rozhoduje uživatelský
komfort a prožitek. Je tedy třeba začít od
uživatelů, od jejich potřeb a cílů.
Je třeba aplikovat UX strategii.“
Má argumentace s klientem

42. UX strategie určuje, jakým
způsobem dosáhnout
uživatelských cílů
Marketingová strategie určuje, jakým
způsobem dosáhnout obchodních cílů.

43. • ochoty znovu nakoupit (či použít),
• neochoty použít alternativu,
• pravděpodobnosti doporučení.
Cílem UX strategie je zvýšení:

44. Spokojený uživatel
je když...

45. • má pocit kontroly,
• má pocit neustálého postupu, pokroku, vývoje,
• má pocit propojenosti na lidské úrovni,
• vše pro něj dává jasný smysl,
• uspokojil své cíle a potřeby,
• stalo se mu něco pozitivního, co neočekával.

46. Chcete řešit UX? Znalost
uživatele je kritická.

47. Jak začít?

48. 1. Poznat firmu
Aneb udělejte si domácí úkol.

49. • Jaké jsou obchodní cíle?
• Jaké jsou uživatelské cíle?
• Jaká nabízíte řešení a komu?
• Jaké další alternativy existují?
• Jaká je vaše konkurenční výhoda?
• Co vše víte o svém zákazníkovi?

50. 2. Vytvořit persony
Reálné reprezentace typického uživatele.

51. 3. Sestavit cíle a metriky
Metriky vychází ze signálů cílů.

52. 4. Testovat a analyzovat
Wireframes, prototypy, uživatelské testování, ...

53. 5. Definovat a řešit problémy
Kdo je schopný problém nejlépe popsat,
je schopný jej i vyřešit.

54. 1. Poznat firmu (analýza situace).
2. Persony (reální uživatelé).
3. Cíle a metriky (dle obch. a uživ. cílů).
4. Testování a analýza (s uživateli).
5. Iterace (řešíme problém).

55. 5. Persony, cíle a metriky

56. Tvorba persony

57. • Uvěřitelné reprezentace skupin uživatelů.
• Vycházejí z cílových zákazníků.
• Mají svůj příběh, své cíle a své potřeby.
• Čím více informací, tím lépe.
• Obvykle 3-5 person.

58. • Zákl. údaje – Jméno, věk, zaměstnání, příjem
• Statement – shrnující charakteristika persony
v podobě jejího výroku.
• Popis – rysy, zvyky, koníčky, schopnost práce
s PC/SW, prof. pozadí a jiné relevantní detaily.
• Scénář – popis situace, kdy přichází do styku.
• Cíle – hlavní a vedlejší, vč. motivace.

59. • End goals – co chce uživatel udělat. Klíčové
cíle, motivace a důvody pro vykonání úkolu a
vynaložení námahy (např. nakoupit šperk).
• Life goals – čím chce uživatel být. Cíle, jež
vysvětlují proč se uživatel snaží dosáhnout
end goals (např. být krásná).
• Experience goals – jak se uživatel chce cítit.
Jednoduché, univerzální a osobní cíle (např.
mít kontrolu, bavit se).

60. Jana, 52 let
Podnikatelka v B2B,
vysoký příjem
„Chci, aby bylo vidět, že do sebe investuji.”
P: Jana dává ráda najevo, že má vkus a že do sebe investuje.
Očekává individuální přístup, je systematická a přesně ví, co chce.
(...) S počítačem pracuje denně a na internetu nakupuje pravidelně.
S: Jana si chce zakoupit luxusní sadu šperků dle představy.
C: Jana si chce výběr užít a mít pocit, že nakoupila od kvalitní a
uznávané značky. Jejím cílem je koupit si sadu luxusních šperků dle
představy, protože chce být krásná a ukazovat ostatním svůj vkus.

61. Persony nám pomáhají
zaměřit se na uživatele.
Neptáme se co chtějí uživatelé, ale co chce Jana.

62. Rozlišujeme persony
provizorní a ověřené.
Cílem person je reprezentovat reálné myšlenkové
modely uživatelů. Reálnost person je kritická.

63. Persony jsou dynamické a je
třeba je neustále ověřovat.
Ideálně pravidelným výzkumem, alespoň spojeným
s uživatelským testováním.

64. Sestavení cílů a metrik

65. V oboru UX je nejdůležitější
měřit spokojenost uživatele.
Spokojený uživatel se vrací a doporučuje.

66. Spokojenost uživatele ale
nelze měřit přímo snadno...
Nikdo neodpoví upřímně a nepopíše své
podvědomé procesy.

67. • Metriky jsou signály důležitých cílů.
• Rozlišujeme obchodní a uživatelské cíle.
• Data-driven design závisí na volbě metrik.
• Cíle by měly být specifické, měřitelné,
dosažitelné, realistické, časově ukotvené.

68. 1. Spokojenost (pocit).
2. Míru zapojení (chování).
3. Konverzi (či adopci).
4. Retenci (loajalitu).
5. Úspěšnost úkolů (výkon, efektivitu, chyby).
Kerry Rodden, UX researcher, YouTube
Co měřit?

70. 6. Prototypování a testování

71. User stories

72. • Z pohledu uživatelů (person).
• Jako [role] mohu [funkce] abych [důvod].
• „Jako zákazník mohu číst recenze vybrané knihy,
abych se mohl lépe rozhodnout zda ji koupit.“
• Co user story, to jeden cíl či akce.
• Možno implementovat a testovat v 1 iteraci.
• Řadit dle kontextu a priority.

73. A co use case a scénáře?
V 98 % případů stačí persony a user stories.

74. Prototypování

75. • Skica – rychlá čmáranice pro sebe.
• Nákres – náčrt prvků a rozložení k diskuzi.
• Detailní nákres – k diskuzi nad detaily.
• Wireframe – respektuje poměry prvků.
• Prototyp –interaktivní wireframe.

84. Barvy, detail a obsah přidávejte
ve správnou chvíli.
Míra detailu závisí na obecenstvu – každý chce vidět něco
jiného. Uživatelé, ale i klienti, se mohou snadno rozptýlit.

85. • Prioritizace prvků a informací.
• Obsah a multimédia.
• Funkce a ovládací prvky.
• Stavy (přihlášen, nepřihlášen, chyby).
• Chování (popř. i emoce)

86. • UX patterns a inspirace.
• Vlastní knihovna.

87. Uživatelské testování

88. • Klasické uživatelské testování
• Heatmapy
• Oční kamery
• Další (Lean UX, RITE)

89. 1. Stanovení objektu testování.
2. Sestavení otázek, hypotéz a scénářů.
3. Rozhodnutí o typu a počtu uživatelů.
4. Příprava testovací místnosti a SW/HW.
5. Přivedení uživatele a představení.
6. Zjištění zákl. informací o uživateli.

90. 7. Představení domovské stránky webu/app.
8. Představení scénáře s úkoly.
9. Provedení úkolů dle scénáře.
10. Závěrečné dotazování a optání.
11. Analýza a vyhodnocení nahrávky.
12.Prezentace výsledků, náprava.

91. • Lépe testovat dříve, než-li později.
• I jeden uživatel je lepší, než žádný.
• Obecně 4-5 testování v jednom kole
odhalí nejzásadnější problémy.

92. 7. Další UX metody

95. Heuristická analýza

96. • Lidskost webu
• Shovívavost webu
• Přístupnost webu
• Zřejmost webu
• Předvídatelnost webu
• Efektivita webu
• Důvěryhodnost webu

97. • Heatmapy (ClickTale).
• Oční kamera
• Task Flow analýza.
• Skupinové rozhovory a focus groups
(nevhodné k testování).
• Trigger word analysis.
• A/B testování (Optimizely).
• RITE, LEAN UX.

98. 8. Kdo je to UX designer?

99. @jakubkrcmar