Zjistěte, co je to onboarding, proč byste mu měli věnovat pozornost a jak jej můžete využít pro svou aplikaci.

1. @agilek
Jak na onboarding
RealUX Camp, 12. 8. 2017
Michal Acler, @agilek

2. 1. Co je a co není onboarding
2. Jak na dobrý onboarding
3. Stádia produktového onboardingu
4. Rady a doporučení
Co nás dnes čeká?

3. @agilek
Co je to
onboarding?
Klienti, ale i designeři vlastně pořádně neví, co je onboarding a jak ho definovat. Existuje řada mýtů.

4. @agilek
“Typický” onboarding
Mylná představa je, že onboarding je jen feature nebo vrstva nad produktem - že ji kdykoliv můžete
přidat. (I kdyby to byla jen feature, nezapomeňte, že to je jediná věc v app, kterou uvidí všichni -
věnujte jí dostatek pozornosti!)

5. Příklad “typického” onboardingu
Mýtus: Onboarding jsou přece takové ty obrazovky, které člověku zobrazíme, než ho pustíme do aplikace.

6. Uživatelům nezáleží na
vaší aplikaci, ale na jejich
problému.
Chtějí jej co nejdřív vyřešit a
vše ostatní ignorují.
Člověk chce vaši aplikaci rovnou vyzkoušet a sám zjistit, jestli mu může pomoci v řešení jeho problému.

7. @agilek
Správný onboarding
Správný onboarding je neoddělitelná součást produktu. Jde o krátkodobý či dlouhodobý proces
a z povahy věci se nedá do aplikace jen tak přidat po dokonční jejího vývoje. Ačkoliv dokážete
definovat jeho začátek, konec přirozeně přechází do sebevědomého používání produktu.

8. @agilek
Co se stane,
když onboarding
nebudeme řešit?
Odpověď znáte – přijdeme o peníze, resp. se připravujeme o možný zisk, protože uživatel či váš
potenciální zákazník ztratí motivaci vaši aplikaci prozkoumávat.

9. – Andrew Chen,
https://www.linkedin.com/pulse/losing-80-mobile-users-normal-why-
best-apps-do-better-andrew-chen
“The average app loses
77% of its daily active
users within the first 3
days post-install”
Realita je, že průměrná mobilní aplikace ztratí po 3 dnech od instalace 77 % svých uživatelů.
To by měla být setsakra velká motivace, proč se onboardingu věnovat…

10. Akvizice
Aktivace
Retence
Referral
Revenue
– Dave McClure,
Startup Metrics for Pirates
Když ztratíte člověka
ve fázi aktivace,
nečekejte, že o vás
bude hezky mluvit
nebo vám dá své
peníze.
Životní cyklus uživatele má několik fází. Pokud se vám ho po akvizici nepovede aktivovat, veškeré
vynaložené prostředky na jeho získání, resp. spojené s vývojem aplikace, byly zbytečné.

11. Čím snadněji se člověk do
aplikace dostane, tím je větší
šance, že ji bude používat.

12. @agilek
Jak na dobrý
onboarding?
A teď si pojďme říct, co s tím vlastně můžeme dělat…

13. Vždy začněte aplikaci
designovat tam, kde ji
začne člověk používat.
Pokud jste u aplikace od začátku, máte podstatně lepší startovní pozici, než když za vámi přijde
klient a řekne, že by do existující app chtěl přidat “nějaký ten onboarding”.

14. Edukujte klienty (kolegy, ostatní
stkeholdery,…) v tom, jak o
onboardingu u svých produktů
přemýšlejí: že to není o jeho
přidání do aplikace, ale o
důmyslném návrhu celého
životního cyklu jejího uživatele.

15. Spousta designerů se zamýšlí pouze nad
ideálními stavy aplikace, protože s nimi uživatelé
budou nejčastěji přicházet do styku. Kdybyste
stejně uvažovali při návrhu letadla, tak by vaše
letadlo ani nevzlétlo: nemělo by podvozek, dveře
nebo rampu pro nástup cestujících – proč taky,
když je 95 % času ve vzduchu?
Je potřeba vždy uvažovat nad celou cestou
uživatele od začátku do konce.

16. Designeři milují ideální stavy aplikací – dávají jim totiž možnost se ukázat a ohromit klienta - můžete
tam totiž naznačit vše, co v aplikaci bude – grafíky, barvičky, tabulky plné dat atp. Průser ale je, když
se ten návrh v ideálním stavu stane jediný podkladem pro další vývoj.

17. Nemáte žádná data
Když už se tak stane (a většinou to takto je, když mezi grafikem a programátorem neprobíhá další
komunikace), stará se o úvodní onboarding programátor. Ten tam sice zobrazí nějakou fakticky
správnou hlášku, ale vás jako potenciálního uživatele to zrovna neláká k tomu tuto app použít…

18. @agilek
Nezapomeňte, že cílem onboardingu je pomoci člověku co nejjednodušším způsobem začít používat
aplikaci tak, aby si nevšiml, že ho to učíte. Z vystrašeného začátečníka, který se bojí klikat na tlačítka
– aby něco nerozbil – musíte postupně udělat specialistu, který bude mít pocit, že o vaší app ví vše.

19. 1. Určete priority
(uživatelské & byznys potřeby)
2. Definujte scénář
(na základě potřeb určete, co se má kdy dít)
3. Implementujte, měřte a testujte
(abyste věděli, jak jste úspěšní)
Jak postupovat?

20. @agilek
Vždy mějte
záložní plán
B (C, D,..)
Nikdy se nespoléhejte na to, že lidé onboardingem projdou jako po másle. Připravte si i alternativní
scénáře, jak budete postupovat, když se to nebude vyvíjet tak, jak jste zamýšleli.

21. @agilek
3 stádia
produktového
onboardingu
Aplikace můžeme rozdělit do tří kategorií z hlediska vyspělosti jejich onboardingu.

22. 1. Žádný onboarding
2. Onboarding jako feature
3. Onboarding jako součást aplikace
3 stádia produktového onboardingu

23. @agilek
😔
Žádný
onboarding
Jsou aplikace, které ho nepotřebují (pokud si myslíte, že je to ta vaše, otestujte si to!), ale většinou
sem spadají ty, jejichž autoři onboarding prostě neřeší, protože je nenapadne, že by ho potřebovali.

24. S onboardingem je to podobné
jako s designem: není nic jako
žádný onboarding, je pouze
neúmyslný onboarding.
I když vlastně každá aplikace má nějaký onboarding, ať už ho někdo promýšlel nebo ne…

25. @agilek
😐
Onboarding
jako feature
Není to úplně ideální, není to ani průser, je to něco mezi. Většinou jde o onboarding, který je přidaný
do aplikace až zpětně a je to na něm poznat. Pozor, je to fix = vždy se to dá udělat lépe.

26. 1. Intro obrazovky
2. Coachmarky
3. Tooltipy
4. Videa, notifikace a ostatní
Když je onboarding jako feature
Když je onboarding jen jako feature, můžeme vypozorovat několik populárních patternů…

27. Intro obrazovky
“Aplikace, která nemá intro obrazovky, jakoby nebyla!” Teď vážně – lidé jsou dnes na intra zvyklí,
nečtou je a většinou přeskakují – chtějí co nejrychleji do app. Intro je navíc mimo kontext a není
personalizované = nezajímá mě to. Pokud chcete něco důležitého říct, nedávejte to do intra.

28. Poměrně netradiční přístup k intru zvolila iOS aplikace Zoho Notebook – v jeho rámci si můžete
vyzkoušet, jak se aplikace ovládá. Zajímavý nápad, ale ve finále si řeknete, jaký to má smysl, protože
ty samé věci si můžete vyzkoušet “naostro” přímo v app, když intro přeskočíte…
Přehrát video

29. Interaktivní intro, v němž si můžete s aplikací hrát, by dávalo mnohem větší smysl ve chvíli, když
uživatel musí na něco čekat, např. pokud by se něco stahovalo na pozadí, instalovalo nebo nahrávalo.

30. Coachmarky
UI v aplikaci můžete překrýt průhlednout vrstvou, která popíše všechny důležité prvky a funkce pod
ním. Bohužel tento vzor převzatý z amerického fotbalu taky moc nefunguje – uživatele to zahltí, neví
kde začít a často se k tomu nedá vrátit. Na druhou stranu se to dá relativně snadno implementovat.

31. Tooltipy
Když jsou udělané správně, představují nejmenší zlo, protože jsou kontextové. Tipy: v jednu chvíli
zobrazujte jen jeden tooltip; nikdy jimi nepopisujte zřejmé věci; nevynucujte jejich použití.
Nevýhodou je, že stejně uživatele zdržují a většinou se k nim nedá vrátit, když se jimi projde.

32. Tooltipy - nástroje
• Appcues – www.appcues.com
• Pointzi – www.pointzi.com
• Inline Manual – www.inlinemanual.com
• WalkMe – www.walkme.com
Nástrojů na návrh “tooltipových onboardingů” jsou na trhu desítky. Implementace většinou probíhá
přes SDK třetí strany, skrze které je potom možné tooltipy administrovat a sledovat jejich využití.

33. Videa, notifikace a ostatní
Dalších, implementačně nenáročných způsobů onboardingu je spousta: videa, notifikace, e-maily,
telefonáty, nápovědy, manuály… Namixujte je tak, aby to dávalo největší smysl v kontextu životního
cyklu uživatele a typu vaší aplikace.

34. @agilek
😊
Onboarding jako
součást aplikace
Tohle je úplně nejlepší možnost, jak do aplikace onboardovat nové uživatele. Ti většinou díky
důmyslnému designu často ani nepostřehnou, že jim nějak pomáháte – onboarding je přirozenou
součástí aplikace. Nevýhodou jsou větší nároky na design + vývoj, ale vyplatí se to.

35. @agilek
Ta samá stránka jako ta, kde byla “žádná data”, ale s použitím tzv. progresívního onboardingu – člověk
na začátku vidí pár tipů na to, co může udělat, pod tím dostane náznak stavu s daty (graf), ale tempo
a způsob prozkoumávání si určuje sám – nikdo ho do ničeho nenutí.

36. @agilek
Jednotlivé kroky uživatel nemusí procházet za sebou. Může je dokonce ignorovat a začít aplikaci
prozkoumávat jinde. Pokud však jakýkoliv krok splní, vidí svůj postup. Když splní všechny kroky,
začnou se mu generovat data a z onboardingu přechází rovnou do používání app.

37. @agilek
V rámci onboardingu by nemělo být nic, co by bránilo používání aplikace. Všechna pošťouchnutí
uživatele tím správným směrem k požadovaným akcím by měla být přirozeným rozšířením UI. A klidně
je zobrazujte tak dlouho, dokud člověk danou akci neprovede.

38. @agilek
Nebojte se využívat indikátory postupu a číselně znázornit, jak je uživatel v rámci scénáře daleko –
navádí to k dalším akcím a prozkoumávání aplikace. Dejte možnost pokročilejším uživatelům je
přeskočit. Tip: nikdy nezačínejte na 0 % (viz článek The Psychology Behind Loayalty Cards)

39. @agilek
Onboarding u Trella může vypadat jako znouzecnost, ale věřím, že to mají promyšlené – ostatně co
lepšího může být, než když vás samo rozhraní aplikace učí to, jak ho máte používat?

40. @agilek
Inspirujte se u her!
Přehrát video
Hry mohou být vaší velkou inspirací pro návrh funkčních onboardingů. Herní designeři mají
onboardovací techniky mnohem více zmáknuté, protože učící křivka musí být natolik pozvolná, aby se
do hry dostal úplně každý. Jo a snad žádná lepší hra nemá tooltipy, overlaye ani jiné “hotfixy”.

41. 1. Vydefinujte priority na základě průniku byznys požadavků a
uživatelských potřeb.
2. Navrhněte prvotní průchod aplikací tak, aby vše bylo přirozené a
abyste využili maximum z rozhraní aplikace.
3. Nezapomeňte člověku od prvního okamžiku ukazovat hodnotu,
kterou mu vaše aplikace nabízí.
4. Nebojte se člověka pošťouchnout do míst, která by měl prozkoumat.
5. Vždy mějte plán B (C, D,…)
6. Testujte. Testujte. Testujte.
Závěrečné rady a doporučení

42. • Detailní rozbory onboardingu známých aplikací
http://www.useronboard.com
• Blog AppCues
https://www.appcues.com/blog
• Blog Onboarding.Pro
https://medium.com/@romanzadyrako
• Kniha Intercom on Onboarding
https://www.intercom.com/books/onboarding
Užitečné zdroje:

43. Dík za pozornost
@agilek
www.linkedin.com/in/acler
www.acler.cz
Rád si vás přidám, i když jsme zatím neměli možnost se potkat.
Tady najdete něco málo o mně a o tom, co dělám.
Tweetuju rád, hlavně o designu, procesech a nástrojích.