+ All Categories
Home > Education > Úvod do User Experience pro grafické designery

Úvod do User Experience pro grafické designery

Date post: 13-May-2015
Category:
Upload: jakub-krcmar
View: 1,203 times
Download: 1 times
Share this document with a friend
Description:
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áří.
99
pro grafické designery UX Úvod do @jakubkrcmar
Transcript
Page 1: Úvod do User Experience pro grafické designery

pro grafické designery

UXÚvod do

@jakubkrcmar

Page 2: Úvod do User Experience pro grafické designery

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?

Page 3: Úvod do User Experience pro grafické designery

1. Obory zásadní pro UX

Page 4: Úvod do User Experience pro grafické designery

• User-centered Design (UCD)

• Interaction Design (IxD)

• Information Architecture (IA)

• User Interface Design (UID)

• Usability (Použitelnost)

Page 5: Úvod do User Experience pro grafické designery

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

Page 6: Úvod do User Experience pro grafické designery

„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

Page 7: Úvod do User Experience pro grafické designery

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

Page 8: Úvod do User Experience pro grafické designery

– Behance.net/fei-design

Page 9: Úvod do User Experience pro grafické designery

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

Page 10: Úvod do User Experience pro grafické designery

– Bitstrategist.com

Page 11: Úvod do User Experience pro grafické designery

• Design statické formy.

• Má vycházet z designu interakce a informační architektury.

• Nejméně důležitý (?).

User Interface Design (UID)

Page 12: Úvod do User Experience pro grafické designery

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

Page 13: Úvod do User Experience pro grafické designery

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

Page 14: Úvod do User Experience pro grafické designery

– Alexpoole.info

Page 15: Úvod do User Experience pro grafické designery

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

Page 16: Úvod do User Experience pro grafické designery

2. Co je to User Experience?

Page 17: Úvod do User Experience pro grafické designery

UX = suma přímých i nepřímých interakcí

uživatele s produktem, službou, systémem či zařízením.

Page 18: Úvod do User Experience pro grafické designery

UX

CXEkosystémproduktů

a touchpointůspolečnosti

Page 19: Úvod do User Experience pro grafické designery

Počkat... Customer Experience?

Page 20: Úvod do User Experience pro grafické designery

CX = suma přímých i nepřímých interakcí

zákazníka se společností

Page 21: Úvod do User Experience pro grafické designery

Uživatelská zkušenost se stane, ať už někdo designoval

elementy ovlivňující prožitek uživatele úmyslně či náhodou.

– Realita

Page 22: Úvod do User Experience pro grafické designery

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

– Donald Norman, Nielsen Norman Group

Page 23: Úvod do User Experience pro grafické designery

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

– Realita

Page 24: Úvod do User Experience pro grafické designery

• Uživatelské cíle.

• Mentální modely (předsudky, předpoklady).

• Použitelnost.

• Emoce.

Očekávání + realita = UX

Page 25: Úvod do User Experience pro grafické designery

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

Page 26: Úvod do User Experience pro grafické designery

3. Proč řešit UX?

Page 27: Úvod do User Experience pro grafické designery

Marketing vznikl jako reakce na nadprodukci.

Page 28: Úvod do User Experience pro grafické designery

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

Page 29: Úvod do User Experience pro grafické designery
Page 30: Úvod do User Experience pro grafické designery
Page 31: Úvod do User Experience pro grafické designery
Page 32: Úvod do User Experience pro grafické designery
Page 33: Úvod do User Experience pro grafické designery

BRAND = MARKETING + CX/UXOčekávání

Zkušenost

Page 34: Úvod do User Experience pro grafické designery

• 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

Page 35: Úvod do User Experience pro grafické designery

80 %90 %

The State of Customer Experience 2010, Forrest Research

Page 36: Úvod do User Experience pro grafické designery

„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

Page 37: Úvod do User Experience pro grafické designery

Orientace na UX je v době technicky shodně vyspělých

substitutů kritická, ale...

Page 38: Úvod do User Experience pro grafické designery

Hezké UI ≠ Pozitivní UX

Page 39: Úvod do User Experience pro grafické designery

4. Aplikujeme UX strategii

Page 40: Úvod do User Experience pro grafické designery

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

Page 41: Úvod do User Experience pro grafické designery

„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

Page 42: Úvod do User Experience pro grafické designery

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

Page 43: Úvod do User Experience pro grafické designery

• ochoty znovu nakoupit (či použít),

• neochoty použít alternativu,

• pravděpodobnosti doporučení.

Cílem UX strategie je zvýšení:

Page 44: Úvod do User Experience pro grafické designery

Spokojený uživatelje když...

Page 45: Úvod do User Experience pro grafické designery

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

Page 46: Úvod do User Experience pro grafické designery

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

Page 47: Úvod do User Experience pro grafické designery

Jak začít?

Page 48: Úvod do User Experience pro grafické designery

1. Poznat firmu

Aneb udělejte si domácí úkol.

Page 49: Úvod do User Experience pro grafické designery

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

Page 50: Úvod do User Experience pro grafické designery

2. Vytvořit persony

Reálné reprezentace typického uživatele.

Page 51: Úvod do User Experience pro grafické designery

3. Sestavit cíle a metriky

Metriky vychází ze signálů cílů.

Page 52: Úvod do User Experience pro grafické designery

4. Testovat a analyzovat

Wireframes, prototypy, uživatelské testování, ...

Page 53: Úvod do User Experience pro grafické designery

5. Definovat a řešit problémy

Kdo je schopný problém nejlépe popsat, je schopný jej i vyřešit.

Page 54: Úvod do User Experience pro grafické designery

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

Page 55: Úvod do User Experience pro grafické designery

5. Persony, cíle a metriky

Page 56: Úvod do User Experience pro grafické designery

Tvorba persony

Page 57: Úvod do User Experience pro grafické designery

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

Page 58: Úvod do User Experience pro grafické designery

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

Page 59: Úvod do User Experience pro grafické designery

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

Page 60: Úvod do User Experience pro grafické designery

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.

Page 61: Úvod do User Experience pro grafické designery

Persony nám pomáhají zaměřit se na uživatele.

Neptáme se co chtějí uživatelé, ale co chce Jana.

Page 62: Úvod do User Experience pro grafické designery

Rozlišujeme persony provizorní a ověřené.

Cílem person je reprezentovat reálné myšlenkové modely uživatelů. Reálnost person je kritická.

Page 63: Úvod do User Experience pro grafické designery

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.

Page 64: Úvod do User Experience pro grafické designery

Sestavení cílů a metrik

Page 65: Úvod do User Experience pro grafické designery

V oboru UX je nejdůležitějšíměřit spokojenost uživatele.

Spokojený uživatel se vrací a doporučuje.

Page 66: Úvod do User Experience pro grafické designery

Spokojenost uživatele ale nelze měřit přímo snadno...

Nikdo neodpoví upřímně a nepopíše své podvědomé procesy.

Page 67: Úvod do User Experience pro grafické designery

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

Page 68: Úvod do User Experience pro grafické designery

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?

Page 69: Úvod do User Experience pro grafické designery
Page 70: Úvod do User Experience pro grafické designery

6. Prototypování a testování

Page 71: Úvod do User Experience pro grafické designery

User stories

Page 72: Úvod do User Experience pro grafické designery

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

Page 73: Úvod do User Experience pro grafické designery

A co use case a scénáře?

V 98 % případů stačí persony a user stories.

Page 74: Úvod do User Experience pro grafické designery

Prototypování

Page 75: Úvod do User Experience pro grafické designery

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

Page 76: Úvod do User Experience pro grafické designery
Page 77: Úvod do User Experience pro grafické designery
Page 78: Úvod do User Experience pro grafické designery
Page 79: Úvod do User Experience pro grafické designery
Page 80: Úvod do User Experience pro grafické designery
Page 81: Úvod do User Experience pro grafické designery
Page 82: Úvod do User Experience pro grafické designery
Page 83: Úvod do User Experience pro grafické designery
Page 84: Úvod do User Experience pro grafické designery

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.

Page 85: Úvod do User Experience pro grafické designery

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

Page 86: Úvod do User Experience pro grafické designery

• UX patterns a inspirace.

• Vlastní knihovna.

Page 87: Úvod do User Experience pro grafické designery

Uživatelské testování

Page 88: Úvod do User Experience pro grafické designery

• Klasické uživatelské testování

• Heatmapy

• Oční kamery

• Další (Lean UX, RITE)

Page 89: Úvod do User Experience pro grafické designery

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.

Page 90: Úvod do User Experience pro grafické designery

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.

Page 91: Úvod do User Experience pro grafické designery

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

Page 92: Úvod do User Experience pro grafické designery

7. Další UX metody

Page 93: Úvod do User Experience pro grafické designery
Page 94: Úvod do User Experience pro grafické designery
Page 95: Úvod do User Experience pro grafické designery

Heuristická analýza

Page 96: Úvod do User Experience pro grafické designery

• Lidskost webu

• Shovívavost webu

• Přístupnost webu

• Zřejmost webu

• Předvídatelnost webu

• Efektivita webu

• Důvěryhodnost webu

Page 97: Úvod do User Experience pro grafické designery

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

Page 98: Úvod do User Experience pro grafické designery

8. Kdo je to UX designer?

Page 99: Úvod do User Experience pro grafické designery

@jakubkrcmar


Recommended