Jak pracovat s UX v procesu tvorby online produktů

Střílejte na cíl,
který jasně vidíte
Jak pracovat s UX v procesu
tvorby online produktů
ACTUM+ Academy 22.11.2017
Sandra Tejnecká

Co náš čeká
1. Co je to UX
2. Strategie
3. UX Design a jeho místo v tvorbě produktu
4. Příklad ideálního procesu tvorby webu
Less typical scenario

Mylné představy, co je UX
Zavádějící (avšak běžný) výklad:
→UX jsou wireframy a grafika
→UX můžeme vytvořit podle best practices
→UX můžeme přidat do hotového produktu
→UX je “jak” - přichází na řadu, když je vymyšleno, co se bude dělat

UX vs. UX Design
User Experience
→ Jsou to veškeré interakce,
dojmy, emoce, pozitivní i
negativní, které uživatel /
zákazník provádí s
produktem / službou.
→ Probíhá VŽDY bez ohledu
na to, jestli a jak jsme
navrhli design.
vs.
User Experience Design
→ Fokus na uživatele & zákazníky
→ Byznysové potřeby & strategie
→ Výkonnost
→ Optimalizace
→ Design = řešení problémů (Problem
solving)
→ Aplikace psychologie v technologii
→ Design ≠ grafika

Jak je produkt / web / služba užitečný a jak zapadá do
každodenních potřeb / návyků

Human-computer Interaction: jedinec,
počítač a způsob, jakým spolupracují

Návyky, obavy, životní zkušenosti,
životní situace, názory, kulturní
rozdíly...

rozdíly...
Jak se produkt / web
používá, jak odpovídá
pohybovým návykům a
možnostem

rozdíly...
možnostem
Jak styl produktu zapadá
do životních hodnot
jedince

rozdíly...
možnostem
jedince
Odpovídá produkt / služba / web
dostatečně nárokům uživatelů?
Rychlost, výkon...

rozdíly...
možnostem
jedince
Rychlost, výkon...
Důvěra v názor blízkých lidí / odborníků

rozdíly...
možnostem
jedince
Rychlost, výkon...
Informace zprostředkovávané médii, reklama, tón a
způsob, jakým se nám kdo snaží co prodat apod.

rozdíly...
možnostem
jedince
Rychlost, výkon...
Jak je na tom konkurence? V čem je
lepší / horší a jak ovlivňuje vnímání naší
značky / produktu

rozdíly...
možnostem
jedince
Rychlost, výkon...
Jaká je míra důveryhodnosti, věří
lidé tomu, co říkáme?
značky / produktu

rozdíly...
možnostem
jedince
Rychlost, výkon...
Přístupnost pro lidi s
omezeními
značky / produktu

rozdíly...
možnostem
jedince
Rychlost, výkon...
Jak složité je produkt /
službu / web najít? Je obsah
konzistentní online i offline?
omezeními
značky / produktu

rozdíly...
možnostem
jedince
Rychlost, výkon...
Jaké emoce vyvolává celkový
vzhled, i dílčí elementy (obrázky,
texty...), je to atraktivní?
omezeními
značky / produktu

rozdíly...
možnostem
jedince
Rychlost, výkon...
Jak snadné je produkt / službu / web
používat, nároky na ovládání
Jaké emoce vyvolává celkový
vzhled, i dílčí elementy (obrázky,
texty...), je to atraktivní?
omezeními
značky / produktu

každodenních potřeb / návyků; v jakém stavu je daný trh

Uživatelské testování, hodnocení, jak
produkt / web odpovídá uživatelským
cílům, jak se uživatelům používá, zda
splňuje jejich očekávání a potřeby

Struktura obsahu, nalezitelnost
informací, obsahové stránky
odpovídající marketingové strategii

Tvorba rozhraní na základě
pochopení, jak budou
uživatelé reagovat.

Jak se potenciální zákazníci
cítí, co dělají při práci s
produktem , kdy přichází do
styku s touchpointy.

Converstion Rate Optimization -
optimalizace za účelem zvyšování
konverzního poměru

Cesta zákazníka od prvního oslovení až k
loajalitě. Co oslovuje zákazníky na
začátku a co při opakovaných nákupech.

Dlouhodobý plán, jak pracovat s obsahem a přes jaké kanály
ho distribuovat. Prioritizace a efektivní alokace prostředků k
dosahování cílů.

Kvantitativní data o používání webu,
průchodu webem; klíčová slova;
nalezitelnost

Pochopení návyků, obav, modelů
chování
nalezitelnost

Zvyšování zájmu
uživatelů, prohlubování
vztahu se zákazníky
chování
nalezitelnost

Return On Investment –
poměr vydělaných a
investovaných peněz. 45 %
firem vůbec ROI neměří
Zvyšování zájmu
chování
nalezitelnost

Analytické uvažování, kladení
dotazů, daty podložená
prioritizace úkolů
Zvyšování zájmu
chování
nalezitelnost

Výsledná tvář, hierarchie barev,
typografie, grafické prvky
Analytické uvažování, kladení
dotazů, daty podložená
prioritizace úkolů
Zvyšování zájmu
chování
nalezitelnost

Dopady promyšleného UX Designu
Vyšší vnímaná
hodnota
webu / produktu / brandu
Lepší
zapamatovatelnost
Vyšší
konverze
Lepší
byznys

Naplněná
očekávání
Vyšší vnímaná
hodnota
Lepší
zapamatovatelnost
Vyšší
konverze
Lepší
byznys
Důvěryhodnost,
autenticita
Jednoduchost,
elegance
Naplněné
potřeby

Naplněná
očekávání
Vyšší vnímaná
hodnota
Lepší
zapamatovatelnost
Vyšší
konverze
Lepší
byznys
Důvěryhodnost,
autenticita
Jednoduchost,
elegance
Naplněné
potřeby
Online + offline

Další zdroje
https://www.usability.gov/what-and-why/user-experience.html
https://www.nngroup.com/articles/definition-user-experience/
https://www.smashingmagazine.com/2010/10/what-is-user-experience-design-overview-
tools-and-resources/
https://youtu.be/9BdtGjoIN4E

Poptávka
Klienti zpravidla nevědí, co požadovat, tak naformulují poptávku
třeba takto:
1. Požadujeme migraci webu na nové řešení. Máme zakoupenou
licenci systému XY. Zde je feature list, co požadujeme.
2. Poptáváme tvorbu mobilní aplikace XY. Spolu s nabídkou
prosíme o dodání návrhu konceptu.
3. Migrujeme lokální web do schválených šablon mateřské
zahraniční firmy. Chtěli bychom od vás vytvořit web, který bude
atraktivní a prozákaznicky orientovaný. Kolik bude stát migrace?

Dobrá poptávka
→Náš současný web již nevyhovuje tempu rozvoje naší firmy.
Chceme zvýšit obrat díky navýšení sortimentu a investici do
reklamy.
Rovněž chceme zvýšit počet objednávek za den a chceme
expandovat na zahraniční trh.
Nový web bychom rádi spustili v Q3 2018.

Cíle webového projektu
1. Zvýšit zisk
2. Zvýšit obrat
3. Vyhrát
Zdroj: Jan Kvasnička & Jan Řezáč

Musíme vždy vědět:
1. Jak to budeme měřit
2. Co chceme dosáhnout, v jakém časovém horizontu
3. Jak toho dosáhneme
Pozor: Neorientovat se jen na jednu metriku. Výsledky v té jedné
metrice mohou negativně ovlivnit další.
Cíle webového projektu

Zdroj: https://work.co/virgin-america

• lístek za méně než 60sec
• Během 2 hodin #1 featured
app na App Store i Google Play
• 3x větší nárůst v mobilním
konverzním poměru
Mobilní aplikace

→Tým byl schopen definovat, že klientova KPI závisí na několika málo
důležitých use cases, ne dvaceti
→Zaměřili pozornost na méně věcí
→Intenzivní práce v týmu – rychlý feedback – krátká doba dodání
Jak toho dosáhli

Jak toho dosáhli
Zdroj: https://work.co/virgin-america

Akce návštěvníka webu, která indikuje splnění cíle webu.
Makrokonverze konverze:
→hlavní cíl webu, generuje zisk – objednávka, poptávka, rezervace, ...
Mikrokoverze konverze:
→ukazuje, že návštěvník je na dobré cestě k dokončení makrokonverze –
registrace do newsletteru, stažení demo verze, ...
Hlavní vs. dílčí konverze

→Konverze / konverzní poměr je něco jiného než v e-commerce transakce /
transkční poměr
→Konverze / konverzní poměr pouze měří, kolikrát se něco stalo - kolik
produktů, za kolik bylo v košíku apod.
→GA sčítají konverzní poměry všech cílů (např. zobrazení košíku a odeslání
objednávky je ale obvykle tentýž uživatel, nikoliv dva splněné cíle)
Analytika vs. realita

Potřebujeme strategii, abychom věděli:
→ co chceme docílit
→ jak to budeme měřit
→ jak toho docílíme

Co je strategie
Wikipedie:
→Dlouhodobý plán činností zaměřený na dosažení nějakého cíle
ManagementMania:
→Strategie je jedním z výstupů strategického řízení.
→Zpravidla zpracováno jako dokument zahrnující popis strategického cyklu, popis
mise organizace, vize, strategických cílů a harmonogramu jejich realizace.
Hlavní obchodní strategie určuje celkové směřování organizace.
Dílčí strategie: finanční, informační, marketingová, výrobní...

Kontext webu
→Web může sloužit jako nástroj pro sebeuvědomění klienta
→ přiklad: nastartuje interní debaty k nejasným tématům
→Web je součástí širšího kontextu
→ příklad: Segway – „revoluce v osobní dopravě“, dnešní prostředí na to však není připravené
→Web většinou nefunguje izolovaně
→ příklad: firma změní komunikační strategii > musí se projevit online i offline

Jak firmy (ne)plánují
1. Zatímco 81% firem tvrdí, že strategické plánování hraje v jejich
byznysu alespoň trochu významnou roli, jen 26% z nich činí
strategická rozhodnutí pomocí nějakého plánovacího procesu.
2. Téměř 2/3 říká, že strategická rozhodnutí dělá CEO nebo malá
skupina lidí bez plánovacího procesu.
Zdroj: Forrest Consulting, 2012 Strategic Leader Survey

Jak firmy (ne)plánují
Identifikují a přiznávají oblasti, v nichž potřebují větší kompetence,
dovednosti a znalosti, případně partnera:
→ Identifikace marketingových příležitostí
→ Formulace strategických rozhodnutí
→ Komunikování vize a strategie
→ Měření výkonnosti
→ Analýza trhu
Zdroj: Forrest Consulting, 2012 Strategic Leader Survey

Jak na tyto výzvy odpovídáme
Taktika
→ Děláme to, co klient poptá
→ Soustředíme se na to, jak to
udělat
→ Řešíme jednoduché
problémy
→ V krátkodobém výhledu
Výsledky
→ Neodhalíme skryté příležitosti
→ Přehlížíme, proč to děláme, a
zda to dává smysl
→ Nevidíme možná rizika
→ Neřešíme, co bude pak, až
dodáme, co klient chtěl

Nepřehlížejme příležitosti
Příležitosti
→ Identifikace marketingových
příležitostí
→ Formulace strategických
rozhodnutí
→ Komunikování vize a strategie
→ Měření výkonnosti
→ Analýza trhu
Strategie
→ Plánování
→ Proč
→ Složité problémy
→ Dlouhodobý výhled

Taktika vs. Strategie
Taktika
→ Dělat
→ Jak
→ Jednoduché problémy
→ Krátkodobý výhled
Zdroj: Nancy Dickenson, Nielsen Norman Group
vs.
Strategie
→ Plánovat
→ Proč
→ Složité problémy
→ Dlouhodobý výhled

Důsledky v praxi
Důsledky nevhodného zadání, nebo zadání s chybějící analýzou:
→náklady můžou být vyšší o stovky tisíc i miliony
→čas dodání se může i významně prodloužit

Příklad 1:
→ Nejmenovaný projekt:
→ zcela chybějící analýza
→ začaly se tvořit rovnou wireframy na základě briefu od klienta
→ klient zaslal briefů asi 20, bylo těžké se v nich vyznat
→ Problémy:
→ nestihnutých několik termínů
→ několikrát navyšovaný rozpočet
→ ztráta x milionů

Příklad 2:
→ Nejmenovaný projekt:
→ ¾ roku tvorba specifikace a wireframů
→ nepohlídali jsme širší kontext mateřské zahraniční firmy
→ Problémy:
→ do projektu vstoupil generální ředitel z Itálie
→ celý koncept shodil ze stolu
→ dalšího ¾ roku práce -> návrat k původnímu konceptu
→ 2x delší čas + navýšení rozpočtu

3. UX Design a jeho místo
v tvorbě produktu

Nestrategický scénář
→Klient přijde s požadavkem
→Rozpadneme jeho požadavky na více či méně
nacenitelné celky
→Vytvoříme estimace ceny & času
→Vytvoříme wireframy & grafiku
→Development & doručení
Client inquiry
Estimation
WF & Design
Dev & Deliver

Příklad:
→Nejmenovaný projekt:
→tvorba bez analýzy a plánu
→až v průběhu vývoje se začalo řešit copy a SEO
→problémy u vývoje – nedostatečně pochopená logika zadání

Výsledky:
→Může vzniknout pěkný visuální design a funkčnosti
→Produkt dokonce možná bude fungovat
ALE
→Celý výsledek je založen na domněnkách
→Možná jsme přišli o příležitosti, o nichž jsme se vůbec nedozvěděli

Nestrategický scénář s testováním
→Klient přijde s požadavkem
→Rozpadneme jeho požadavky na více či
méně nacenitelné celky
→Vytvoříme estimace ceny & času
→Většinou od stolu vytvoříme persony
& journeys
→Vytvoříme wireframy & grafiku
→Otestujeme prototyp
→Development & doručení
Client inquiry
UserTestingWF & Design +
Estimation
Dev & DeliverDesign corrections +

Výsledky:
→Alespoň nějaké propojení s reálnými uživateli
→Domněnky se částečně ověřily
ALE
→Obvykle málo prostoru pro zapracování poznatků z testování
→Stále velké riziko, že nevidíme hodnotné příležitosti

Jak vypadá strategický
scénář

Byznys analýza /
Strategie / UX design

Úspěch se dostaví
Příklad 1: Ebay
→9 mil. USD / měsíc platby za obrázky u produktů
→Research: odhad 10x vyšších zisků, pokud všechny produkty budou s
obrázkem zdarma
→Pokus v UK: 60 mil. USD / měsíc

Úspěch se dostaví
Příklad 2: SYNAPSE
→Redesign interního vyhledávání zaměstnanců
→2012: 0,95 hod x 10 000 zaměstnanců x $50 / hod = $475 000
→2015: 0,03 hod x 10 000 zaměstnanců x $50 / hod = $15 000
ROI: $460 000

Hledání správné cesty
v praxi

Double diamond
Discover Define Develop Deliver
?

Double diamond
Create
concept
Research
Interpret
Test &
Measure
Prototype
Test &
Measure
Develop
User experience Usability
Client
analysis

Zdroj: Erika Hall, ResearchTogether

Na otázkách záleží
Jak se vám používá tato vývrtka?
Která z těchto vývrtek je lepší a
proč?
vs.
Co vás nejvíce trápí, když si koupíte s
přáteli lahev vína, a chcete ji hned
vypít?
Otázky určují výsledky
→Testování použitelnosti různých vývrtek -> navrhneme lepší vývrtku
Soustřeďme se spíše na interpretaci problému:

Na otázkách záleží
Možná zjistíte, že lidé nemají zájem o další lepší vývrtku.
Chtějí zkrátka otevřít lahev ve chvíli, kdy ji mají v ruce.
Možná navrhnete lahev se šroubovacím uzávěrem.
Správný
problém

4. Příklad ideálního procesu
tvorby webu

Úvodní workshop
1
Poznání klienta
2
Poznání zákazníků a
konkurence
3
Ověření současného řešení
4
Syntéza poznatků a dat
5
Tvorba strategií
6
Ideace
7
Informační architektura
8
Visuální koncept
9
Wireframe, User Flow
Prototyp
10
Rozpis zadání pro
development
11
Finalizace designu
12

1. Úvodní workshop
Cíl / jaké informace potřebujeme:
1. Historie, příběh, vize, obchodní cíle, směřování
2. O jaký web / weby se jedná a co se na nich nabízí
3. Práce s uživateli a zákazníky, měření a data
4. Konkurence
5. Hlavní jádro byznysu + dílčí konverze
6. Největší slabiny a silné stránky současného řešení
7. Další otázky a požadavky

Příklad obchodního cíle:
Otázka:
→Čeho chcete dosáhnout, v jakém časovém horizontu a jaké marketingové
kanály k tomu dosud používáte?
Odpověď:
→Chceme mít nejširší sortiment potravinových doplňků v ČR a Německu
do 3 let. Chceme docílit tržby alespoň XY Euro denně. Prozatím
využíváme PPC a facebookové kampaně.

Výstup:
Přechod do další fáze – Poznání klienta:
→Návrh aktivit (může se ještě později změnit) – dokument s popisem
aktivit a důvody, proč jsou potřeba
→Odhad náročnosti fáze Poznání klienta – dokument s nabídkou
→Definice potřebných rolí v týmu (dodavatel i klient) – popis rolí
→Předběžná alokace zdrojů a lidí – předběžný odhad délky alokace lidí
(rolí)

2. Poznání klienta
Cíl:
→Pochopit podrobně klientův byznys a uvažování
→Definovat očekávání, konkretizovat obchodní cíle a metriky
→Role webu v celkové strategii společnosti
→Klientovy hypotézy / data o uživatelských cílových skupinách
→Plány dalšího rozvoje webu / optimalizace
→Nastavit všechny zúčastněné stakeholdery na stejnou vlnu
→Rozpoznat případná rizika a limity

Proces
→Workshopy se stakeholdery
→Definice hypotéz o zákaznících
→Další potřebné aktivity (analýza konkurence, marketingová / obsahová
strategie apod. viz dále)

Stakeholder interviews
→Rozhovory s klíčovými stakeholdery
→Zjistíme jejich pohled na problém, potřeby a možnosti řešení
→Odhalíme možná rizika v rozdílném vnímání

Stakeholders workshop
→Hypotézy o uživatelích / zákaznících – Value Proposition Canvas
→Zmapování služby / organizace – Business Model Canvas
→Definice klíčových metrik a obchodních cílů – SMART framework

Proč hypotézy:
→Většinou se jedná o předpoklady klienta (myslí si, že ví)
→Málokdy potvrzené reálnými daty a vhledy
→Často odlišné od reality
→Všichni podléháme subjektivnímu zkreslování

S
Specific
___________
Co, kdo, kde, proč?
Příklad:
Zvýšit obrat díky
navýšení sortimentu a
investici do reklamy
M
Measurable
___________
Kolik?
Příklad:
Minimálně
o 200 000Kč / měs.
A
Achievable
___________
Je to zvládnutelné?
Příklad:
Investice do navýšení
sortimentu 1mil Kč.
Investujeme do
reklamy 30tis. Kč /
měs.
R
Realistic
___________
Relevantní ke
konkrétnímu
byznysu?
Příklad:
Musíme vzít v potaz
aktuální obrat a
časové období od teď
do požadovaného
data splnění cíle.
T
Time based
___________
Kdy?
Příklad:
22.11.2018

Výstupy z workshopů se stakeholdery
1. Identifikace klíčových problémů produktu – Maslowova pyramida
webu
2. Identifikace třídy obtížnosti projektu – Cynefin framework
3. Stanovení obchodních cílů a metrik – SMART framework
4. Konkrétní roadmapa dalších aktivit

→ Čím výše na pyramidě míříme, tím větší
jsou nároky na tvorbu webu a tím větší je
také poskytovaná hodnota.

Cynefin framework – třídy obtížnosti

Simple
___________
Charakteristika:
Opakující se vzorce,
konzistentnost
Existují správné odpovědi
Fact-based management
Úkoly:
Zajistit vhodné procesy
Kategorizovat rozhodnutí
Best practises
Řešení:
Nespoléhat slepě na best
practices i při změně kontextu
Nepředpokládat, že věci jsou
jednoduché
Rozpoznat hodnotu i omezení
best practices
Complicated
___________
Charakteristika:
Potřeba expertní analýza
Více možných správných
odpovědí
Známé neznámé
Fact-based management
Úkoly:
Sestavit tým specialistů napříč
obory
Řešení:
Nespoléhat pouze na expertní
posouzení nebo zkušenosti z
předešlých projektů
Zahrnout pohled laiků
(uživatelů)
Využívat experimenty
Complex
___________
Charakteristika:
Nepředvídatelnost
Neexistence správných
odpovědí
Neznámé neznámé
Mnoho nápadů
Úkoly:
Využít experimenty pro
odhalení vzorců
Zvýšit komunikaci
Použít metody pro generování
správných nápadů
Řešení:
Trpělivost, reflexe
Metody pro odhalování vzorců
Chaotic
___________
Charakteristika:
Vysoká míra turbulence
Mnoho potřebných rozhodnutí
a nedostatečný čas
Úkoly:
Hledat, co funguje místo
hledání správných odpovědí
Okamžité akce pro navození
pořádku
Řešení:
Neaplikovat ”navození
pořádku” všude bez rozmyslu
– promarněné příležitosti k
inovaci
Nastavit mechanismy pro
využití výhod chaotického
prostředí

K čemu je dobré znát třídu obtížnosti?
1. Nastavení vhodného procesu
2. Odhad velikosti týmu
3. Relevantní odhad finanční a časové náročnosti

Roadmapa https://www.draw.io/ - zdarma

Roadmapa https://craft.io/ - zdarma i placené

Roadmapa https://roadmunk.com/ - placené

Další zdroje
Value Proposition Canvas:
https://strategyzer.com/canvas/value-proposition-canvas
Business Model Canvas:
https://strategyzer.com/canvas/business-model-canvas
https://www.alexandercowan.com/business-model-canvas-
templates/#Whatrsquos_the_Business_Model_Canvas
Maslowova pyramida webu:
https://www.slideshare.net/janrezac/vod-do-webdesignu-pro-zadavatele
Cynefin:
https://hbr.org/2007/11/a-leaders-framework-for-decision-making
https://www.frontrowagile.com/blog/posts/82-navigating-complexity-aka-cynefin-for-dummies
https://www.agile42.com/en/training/cynefin-lego-game/

3. Poznání zákazníků a konkurence
Cíl:
→Ověřit naše hypotézy
→Poskytnout relevantní informace a vhledy pro plánování strategií
→Poznat konkurenci
→Navrhnout kroky ke správnému řešení

Jak
→Hypotézy o uživatelských cílových skupinách (máme z workshopu)
→Návrh metod uživatelského výzkumu pro ověření hypotéz
→Provedení výzkumu
→Analýza klíčových slov
→Analýza konkurence

Proč je potřeba poznat reálné uživatele a ověřit
hypotézy?
Efektivita, šetření zdrojů, odhalení příležitostí
→Informovaná rozhodnutí = méně revizí při vývoji
→Výzkum je levnější než oprava špatně zvoleného řešení (řešíme
nesprávný problém, nebo ho řešíme nesprávně)
→Zjistíme, co nevíme
→Cílíme na reálné lidi
→Uživatelský výzkum integrální součástí tvorby řešení (změny v čase,
změny ve strategii či produktu – chceme vědět, zda je to stále aktuální)

Běžné metody výzkumu
→Online dotazník
→Rozhovory
→Pop-up výzkum
→Focus groups
→Pozorování
→...

1. Online dotazník
→Obsah dle toho, v jaké fází rozhodování / konzumace
obsahu se návštěvník nachází
Nástroje:
https://www.hotjar.com/
Metody výzkumu
1. Online dotazník
2. Rozhovory
3. Pop-up výzkum
4. Focus groups
5. Pozorování
6. Sekundární výzkum

2. Rozhovory
→Nejběžnější kvalitativní metoda
Kroky:
→Nábor a výběr respondentů
→Tvorba scénáře
→Realizace
Metody výzkumu
1. Online dotazník
2. Rozhovory
3. Pop-up výzkum
4. Focus groups
5. Pozorování

3. Pop-up výzkum
→Krátké cca 10 minutové nahodilé rozhovory
→Například ve frontě na úřadě – dle řešeného tématu
Metody výzkumu
1. Online dotazník
2. Rozhovory
3. Pop-up výzkum
4. Focus groups
5. Pozorování

4. Focus groups
→Smyslem je z hromadné diskuse získat tipy, co dále
prověřovat
→Velmi náročné na moderování
→Hodí se málokdy
Metody výzkumu
1. Online dotazník
2. Rozhovory
3. Pop-up výzkum
4. Focus groups
5. Pozorování

5. Pozorování
→Sledování lidí v jejich přirozeném prostředí
→Jejich orientace
→Co dělají
→Jak komunikují
→S čím odcházejí
Metody výzkumu
1. Online dotazník
2. Rozhovory
3. Pop-up výzkum
4. Focus groups
5. Pozorování

→Diskusní fóra
→Tématické weby
→Online poradny
→Média
→...
Metody výzkumu
1. Online dotazník
2. Rozhovory
3. Pop-up výzkum
4. Focus groups
5. Pozorování

Modely chování
Potenciální zákazník
→ Hledač
→ Porovnávač
→ Nakupující
→ Zákazník
+
Role vstupující do nákupu
→ Iniciátor
→ Ovlivňovatel
→ Rozhodovatel
→ Kupující
→ Uživatel

See-Think-Do-Care framework
→Fáze zákaznického cyklu – propojení s marketingem, obsahem,
metrikami
→Jak se lidé chovají v jednotlivých fázích, co je zajímá, jaké funkce
používají?
→Jaké zdroje přivádí jaké uživatele v jaké fázi a co v dané fázi řeší:
→vstupy na blog s obecnými tématy – See
→vstupy na články „Jak vybrat...“ – Think
→Zbožové vyhledávače – Do
→...

See-Think-Do-Care framework
→Některé uživatelské cíle však překrývají více fází:
→aktivní hledání konkrétního produktu
→chci ho koupit
→chci si jen o něm zjistit více informací
→Potřeba sledovat další signály (přidání do košíku, procházení více
produktů atd.)

Typické chyby
→Lidi z fází před nákupem (Do) považujeme pouze za čumily
→Neřešíme Proč. Komu a jak pomůže to, co děláme?
→Nezajímáme se, kde jinde ještě můžeme pomoci
→Staráme se málo o lidi před tím, než se rozhnodnou něco nakoupit
→Používáme data ke zjištění, co se děje, zapomínáme zjišťovat, proč se to
děje

Minimal Viable Research
→MVP – soustředit se jako první na to, co nejvíce vydělává
→MVR – validujeme, proč to nejvíce vydělává a jak to zlepšit (nebo
minimálně nepokazit)

→ Výzkum je obvykle jednodušší a levnější, než
vytvořit prototyp a následně zjistit, že nefunguje
(v horším případě to ani nezjistit).

Analýza klíčových slov
→Definuje, pro jaké hledané fráze máte / nemáte vstupní
stránky
→Definuje relevanci vstupních stránek
→Pochopíme přemýšlení potenciálních zákazníků nad produkty
/ službami
→Nutný SEO specialista

Zdroj: http://www.pavelungr.cz/

Analýza klíčových slov – k čemu je
→Kde jsou slabiny webu s velkým potenciálem
→Vliv na strukturu webu nebo její dílčí části
→Odhalí, zda je potřeba nějaké stránky přejmenovat
→nebo postavit na jiných slovech
→Která místa webu je potřeba udělat oblíbenější (skrze linkbuilding – interní
odkazy, sociální sítě...)
→Víme, kam, kolik a proč budeme investovat peněz
Zdroj: http://www.lukaspitra.cz/co-chtit-od-analyzy-klicovych-slov/

Analýza konkurence
→Definice cílů analýzy
→Podíl hráčů na trhu
→Nalezení příležitostí
→Ověření vlastní strategie
→...
→Identifikace konkurence
→Přímá & nepřímá

Na co se dále zaměřit
→Konkurenční výhody
→Kvalita služeb
→Analýza webu
→Důvěryhodnost webu / společnosti
→Aktivní ověření komunikace se zákazníkem
→Marketingové aktivity
→Cenotvorba
→...

Nástroje
https://www.ghostery.com/

Nástroje
https://www.similarweb.com/

Nástroje
https://visualping.io/

Výstup celé fáze
→Vhledy reálných lidí
→Ověřené hypotézy
→Analýza klíčových slov
→Kde jsou na trhu příležitosti
→Kde se naopak nepouštět do boje s konkurencí
→Jaké marketingové nástroje a kanály můžeme zapojit
→Co bychom mohli zlepšit

4. Ověření současného řešení (pokud je)
Cíl:
→Odhalit, co funguje / nefunguje
→Neopakovat stejné chyby
→Validovat výkon webu oproti nastaveným cílům
→Nalézt možné příležitosti ke zlepšení

Jak:
→Návrh metod uživatelského testování / evaluace
→Provedení testování / evaluace
→Analýza kvantitativních dat (Google Analytics, Hotjar apod.)

Nejběžnější metody testování
→Analýza kvantitativních dat z webové analytiky
→Online dotazníky
→Kartičkové metody
→Uživatelské testování
→Kano model pro prioritizaci

1. Analýza kvantitativních dat
→Zdroje návštěvnosti
→Landing / Exit pages
→Odhalení potenciálních problémových míst webu
→Události (formuláře, vyhledávání...)
→Prioritizace oblastí webu, které potřebují vylepšit
Metody testování
1. Analýza kvantitativních
dat z webové analytiky
2. Online dotazníky
3. Kartičkové metody
4. Uživatelské testování

→Rychlá a levná metoda pro získání zpětné vazby
→Distribuce:
→Email
→Web
→Sociální sítě
Metody testování
z webové analytiky

→Pomáhají s návrhem informační architektury
→Lze testovat online i offline
→Vyšší počet účastníků (50+)
Online nástroje:
https://www.optimalworkshop.com/treejack
https://www.optimalworkshop.com/optimalsort
Metody testování
z webové analytiky

→Okamžitá reakce na wireframe, prototyp, živý web,
grafiku
→Pochopíme, jak lidé na webu (ne)naplňují své potřeby
→Pochopíme, proč dělají, co dělají
→Zjistíme míru použitelnosti webu / návrhu
→Stačí 4-6 lidí na jedno testování
→Testování opakujte ve více iteracích
Metody testování
z webové analytiky

Výstup celé fáze
→Kvantitativní data (stovky-tisíce uživatelů) – souhrn, co
funguje, co nefunguje
→Doporučení na změny
→Kvalitativní data (jednotky uživatelů s přímými reakcemi) –
vhledy a nápady

5. Syntéza poznatků a dat
Cíl:
→Shodnout se na tom, které problémy má smysl řešit
→Formulace problémů / příležitostí
→Persony & Journeys
→Prioritizace funkcionalit

Jak:
→Zpracování výstupů z:
→uživatelského výzkumu
→uživatelských testování / evaluace
→kvantitativních dat z webové analytiky
→Nalezení společných jmenovatelů
→POZOR: Syntéza není ideace

Týmový workshop – syntéza a validace
1. část
→Shromáždění dat
→Roztřídění dat dle témat
→Formulace, co ještě
potřebujeme doplnit
+
2. část
→Setkaly se hypotézy se skutečností?
→Jsou naplňovány nastavené cíle?
→Příležitosti, nedostatky
→Prioritizace funkcionalit (Kano model)
→Persony & Journey mapping

Kano model pro prioritizaci
→Pomůže prioritizovat funkcionality, úkoly, změny
→Pochopíme důležitost jednotlivých funkcionalit z pohledu zákazníků
→Pomůže porovnat náročnost s přínosem
→Model není v čase statický – co dnes uživatelé považují za atraktivní
se časem může změnit na standard
Podrobný průvodce:
https://foldingburritos.com/kano-model/

Persony:
→Pomohou definovat, co je pro
zákazníka důležité
→Co chce a potřebuje
→Čeho se obává
→Po čem touží

Empathy Mapping:
→Co víme o konkrétním typu uživatele
→Pomáhá při tvorbě rozhodnutí
→Ukazuje pohled uživatele na produkt,
nebo úkoly spojené s produktem
Zdroj: Nielsen Norman Group

Customer Journey
Mapping:
→Specifická interakce zákazníka s
produktem / službou
→Proces, kterým člověk prochází, aby
dosáhl svého cíle spojeného s naším
produktem / službou
→Pochopení zákazníkových obav a
potřeb
→Série uživatelských cílů a akcí na
časové ose

Customer Journey
Mapping s STDC

Experience Mapping:
→Generalizuje koncept Customer
Journey napříč všemi typy uživatelů
a produktů
→Visualizace obecného zážitku,
kterým prochází jakákoliv osoba,
aby dosáhla cíle

Rozhodovací proces před tvorbou map
→Současnost vs. budoucnost:
→Současnost – pokud chceme identifikovat existující problémy
→Budoucnost – mapování založeno na „ideálním“ stavu; používá se
pro nastavení benchmarku pro ideální formu produktu / služby
→Hypotézy vs. research:
→Mapování hypotéz - kumulace existujícího porozumění, vhodné
pro tvorbu plánu researche
→Research mapping – založeno na specifických datech, mělo by být
iterativní (updatované s novými poznatky)

Výstupy z celé této fáze
→Persony
→Journey mappings
→Seznam prioritizovaných funkcionalit

6. Tvorba strategií
Cíle:
→Nastavit vhodné dílčí strategie
→Přizpůsobit tvorbu webu procesům ve firmě (nebo procesy
optimalizovat)
→Pojmenovat konkurenční výhody a pozici na trhu

Proces
1. Rozbor procesů ve firmě
2. Marketingová strategie
3. Obsahová strategie
4. Komunikační strategie
5. Branding
6. Konkurenční výhody
7. Pozice na trhu

→Pomáhá pochopit, jak firma interně funguje
→Jak se co dělá, jaký je tok práce mezi lidmi
→Může sloužit ke zlepšení výkonnosti
→Odkrývá rizika a příležitosti pro rozvoj
Tvorba strategií
5. Branding
7. Pozice na trhu

→Kdo co dělá (odspoda nahoru nebo naopak)
→Jaká data vznikají, jak a kdo s nimi pracuje
→Jaké technologie se používají
→Analýza konkurence součástí procesů
→...
Tvorba strategií
5. Branding
7. Pozice na trhu

Výstup
→Záleží na zjištění 
Tvorba strategií
5. Branding
7. Pozice na trhu

→Dlouhodobé i dílčí marketingové cíle
→Cílové trhy, positioning
→Způsob propagace
→SWOT analýza
→Stanovení rozpočtu
→Vyhodnocování výsledků prodeje
Tvorba strategií
5. Branding
7. Pozice na trhu

→V čem je produkt / služba / značka jiná, než ostatní
→Segmentace zákazníků
→Plán marketingových činností
→Nástroje a kanály pro komunikaci se zákazníky
→...
Tvorba strategií
5. Branding
7. Pozice na trhu

Výstup
→Definice marketingových kanálů
→Email marketing
→Sociální sítě
→Kontinuální SEO konzultace
→PPC
→Srovnávače zboží
→...
Tvorba strategií
5. Branding
7. Pozice na trhu

→Základní otázky před tvorbou:
→Kdo jsou potenciální zákazníci / cílová skupina a
konkurenti?
→Co zajímá vaše zákazníky ohledně vašeho produktu /
služby?
→Jaký bude účel obsahu?
→Kdo bude mít na starost copywriting - tvorbu obsahu?
→Jakým způsobem budete váš obsah distribuovat?
→Jaký je cíl vaší obsahové strategie? A jak ji budete
měřit?
→...
Tvorba strategií
5. Branding
7. Pozice na trhu

→Musí být k dispozici analýza klíčových slov
→Nastavení cílů, například:
→Každý měsíc jeden článek na téma XY
→Přivádět skrze články alespoň 30% návštěvnosti
→Každé tři měsíce jedno návodné video k produktu XY
→Zvýšit zisk o 10%
Tvorba strategií
5. Branding
7. Pozice na trhu

Výstup
→Nastavení procesů tvorby obsahu
→Sestavení týmu pro tvorbu obsahu
→Stanovení druhu obsahu (texty, infografiky, fotky...)
→Plán, o čem se konkrétně bude obsah tvořit
→Nové texty, revize textů
Tvorba strategií
5. Branding
7. Pozice na trhu

→Stanovit komunikační cíle:
→Čeho chceme komunikací dosáhnout?
→Povědomí o značce
→Formování postoje ke značce
→Nastavení marketingové komunikace
Tvorba strategií
5. Branding
7. Pozice na trhu

→Strategické marketingové cíle
→Jaké informace chceme poskytovat
→Odlišení od konkurence
→Zdůraznění hodnoty produktu
→Tonalita značky
Tvorba strategií
5. Branding
7. Pozice na trhu

Výstup
→Cíle komunikace pro dané skupiny zákazníků, např.:
→Co chceme, aby tato skupina věděla?
→Co chceme u této skupiny změnit?
→Co chceme, aby udělali?
→Definice nástrojů komunikace
Tvorba strategií
5. Branding
7. Pozice na trhu

5. Branding
→Utváření pozitivního postoje zákazníků ke značce
→Název, logo, claim, vizuální design
→Definice požadovaných asociací
→Vizuální a psaná komunikace
→Příběh
→Hodnoty a vlastnosti značky
Tvorba strategií
5. Branding
7. Pozice na trhu

→Posilování známosti značky (musí být vidět a slyšet)
→Význam pro zákazníky
→Archetypy značky
→Mise, vize, poslání
→Emoční význam
→...
Tvorba strategií
5. Branding
7. Pozice na trhu

Výstup
→Brand positioning
→Definice mise značky
→Tone of Voice
→Elevator pitch
→Pilíře značky
→Brand Identity
→Style Guide
→...
Tvorba strategií
5. Branding
7. Pozice na trhu

→Strategické zdroje – atributy byznysu, které je těžké nebo
drahé okopírovat
→Inovace značky a jejích konkurentů
→Síla značky
→Typ konkurenční výhody – nižší náklady vs. diferenciace
Tvorba strategií
5. Branding
7. Pozice na trhu

→Kvalita produktu / služby
→Zákaznická podpora
→Cena
→Distribuce
→Technologie
→Informace
→Postavení na trhu
→...
Tvorba strategií
5. Branding
7. Pozice na trhu

Výstup
→Definice strategických zdrojů
→Máme je nebo je vytvoříme?
→Definice & úkoly, na čem zapracovat
→Seznam oblastí, kam investovat zdroje
Tvorba strategií
5. Branding
7. Pozice na trhu

7. Pozice na trhu
→Vnímání produktu / služby zákazníkem oproti konkurenci
→Povědomí o produktu / značce v cílovém segmentu
→Porovnávání s konkurenčními produkty / službami /
značkami
→Vlastnosti produktu / služby / značky
→Znalost dlouhodobě udržitelných konkurečních výhod
Tvorba strategií
5. Branding
7. Pozice na trhu

→Pozice:
→ke konkurenci
→podle vlastností a kvality výrobku
→podle ceny
→ve vztahu k cílovému trhu
→v konkrétním odvětví
Tvorba strategií
5. Branding
7. Pozice na trhu

Výstup
→Vymezení vůči konkurenci
→Dlouhodobý plán směřování
→Odstřižení aktivit, které nefungují
Tvorba strategií
5. Branding
7. Pozice na trhu

Výstup celé fáze
→Úkoly a hmatatelné podklady pro tvorbu správného řešení,
které jsou:
→Specifické
→Měřitelné
→Dosažitelné
→Relevantní / realistické
→Časově ohraničené

7. Ideace
Cíl:
→Nalézt možná řešení identifikovaných problémů
→Vymyslet nápady, jak zohlednit prioritizované potřeby byznysu a
zákazníků

Ideační workshop
1. část
→Nastavení rámce, v němž se
budeme držet (co budeme řešit)
→Brainstorming k nápadům a
konceptům
→Tvorba konceptů
+
2. část
→Základní skicy
→Rychlé interní otestování
→Nastavení dalšího směřování
konceptů

Přínos:
→Designerský tým i stakeholdeři jsou na jedné vlně
→Rychlé rozpoznání problémových míst či nesmyslných nápadů
→Společné nalezení možných řešení

Výstup
→Konkrétní skicy, které se budou dále
rozvíjet
→Seznam věcí, které je potřeba ještě
dořešit
→Znalost řešení, která jsme zavrhli
(nebudeme v budoucnu opakovat
stejné chyby)

8. Informační architektura
Cíl:
→Jasná struktura obsahu
→Nastavení rozsahu obsahu
→Jednoduše otestovatelný model

Jak:
→Návrh struktury obsahu webu
→Forma: strom, mindmapa
→Rozsah:
→může být jen struktura stránek
→může obsahovat i filtrace, tagy, kategorie produktů...
→může obsahovat základní průchod webem (rozhodovací alternativy)

Výstup
→Identifikace & tvorba chybějícího obsahu
→Rámec hloubky struktury pro tvorbu wireframe

9. Visuální koncept
Cíl:
→Jak pracovat s emocemi, barevností
→Jaký dojem chceme v uživateli vyvolat
→Práce s fotkami / obrázky

Jak
→Tvorba tzv. moodboardu:
→barevnost
→typografie
→tonalita obrázků
→grafický styl
→emoce

Výstup
→Nastavený visuální styl
→Plán focení / nákupu fotografií

10. Wireframe, User Flow & Prototyp
Cíl:
→Detailní layout stránek
→Pokryté maximum stavů průchodu uživatele webem
→Klikatelný prototyp
→Otestovaný návrh nového webu

Jak
→Low-fi:
→jednoduché, spíše skicy, klidně na papíře
→vhodné u malých, jednoduchých řešení bez složitější logiky
→spíše proto-wireframe (bez reálného textu)
→High-fi:
→detailní zpracování s reálným obsahem
→interaktivitní
→prototyp (demo webu)

User flow
→Průchod uživatele webem
→pomáhá pochopit návaznosti stránek / elementů
→pomáhá odkrýt možné rozhodovací alternativy
→identifikuje další prvky / stránky, které je potřeba navrhnout

Use cases (stavy)
→Rozpracování všech (nebo všech potřebných) stavů komponent /
elementů, které mají různé stavy
→Různé stavy zpravidla mají vliv na zobrazení
→Pokryjeme zároveň logiku funkcionalit

Kontrola realizovatelnosti řešení
→Tvorba wireframů a průchodu webem by měla být konzultována se
Solution Architektem
→Včas tak mohou být odhaleny nesrovnalosti z pohledu technického
řešení (např. zbytečně navržený custom kalendář – technologická
platforma má vlastní a dostačující apod.)

Uživatelské testování
→Wireframy je potřeba nejlépe iterativně uživatelsky testovat
→po větší změně (nebo zanesení změn z předešlého testování)
otestovat znovu
→testovat i dílčí sekce
→i jeden feedback je lepší než žádný
→není potřeba každé testování provádět v labu (mnohdy to ani není
vhodné), stačí kavárna
→testovat hned od začátku, ne až když je vše hotovo

Výstup
→Konkrétní podklady pro tvorbu grafického návrhu
→Pokrytá logika funkcionalit
→Testováním ověřený návrh

11. Rozpis zadání pro development
Cíl:
→Analýza proveditelnosti z pohledu technického řešení
→Specifikace pro vývoj
→User Stories

Výstup
→Dokumentace s podrobným popisem funkcionalit / průchodu webem
→Procesní a stavové diagramy (záleží na kvalitách architekta a náročnosti
návrhu)
→User Stories pro vývoj

12. Finalizace designu
Cíl:
→Kompletní vizuální design (ověřený testem)

Výstup
→UI Kit
→Grafické zpracování všech vydefinovaných stránek, elementů

Děkuji za pozornost 
Sandra Tejnecká
ACTUM+ Academy 22.11.2017

Jak pracovat s UX v procesu tvorby online produktů

Recommended

Recommended

More Related Content

Similar to Jak pracovat s UX v procesu tvorby online produktů

Similar to Jak pracovat s UX v procesu tvorby online produktů (20)

Jak pracovat s UX v procesu tvorby online produktů