Lekce 7 - User Flow v UX – Mapování cesty zákazníka

V předchozím kvízu, Kvíz - Historie oboru UX, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

V této lekci si ukážeme, jak připravit tzv. User Flow – cesty zákazníka webem za určitým cílem a proč je potřebujeme.

User Flow – mapování cesty zákazníka

Když připravujeme webové stránky či aplikace, potřebujeme je designovat tak, aby byly pro uživatele jasné a uživatel snadno dosáhl cíle, jaký má, když na stránky přichází. Naším účelem je, aby prošel stránkami či aplikací jednoduše, rychle a bez zbytečných zádrhelů.

Často se při tvorbě stránek tato metoda neaplikuje. Programátor vytvoří stránky dle obsahu, prolinkuje odkazy a je hotovo. Na takových stránkách ale často může docházek k odlivu uživatelů z toho důvodu, že nemohou nalézt, co potřebují, nebo je cesta k cíli příliš složitá. Proto přichází na řadu tzv. User Flow neboli mapování cesty zákazníka, aby se uživateli jeho cesta po webu či v aplikaci zpříjemnila. Ideální je, pokud je metoda User Flow zahrnuta již v samotné tvorbě projektu.

User Flow (jinak nazýváno také user journey, uživatelský scénář, cesta zákazníka) je cesta člověka po webové stránce či v aplikaci, která vede k určitému cíli nebo splnění úkolu. Většinou graficky ztvárněná navazujícími obrazovkami jednotlivých stránek od počátku po cíl.

Kdy User Flow použít

Na User Flow musíme myslet již v návrhu projektu. Bývá dalším krokem po vytvoření wireframu a obsahu. S ohledem na záměr projektu je pak čas na vytvoření návrhu navazujících kroků, které uživatel musí projít, aby uspokojil své potřeby či cíle. Zaměříme se tedy na celou cestu od vstupního bodu až po cíl. Je důležité myslet na to, že vstupním bodem pro určitou činnost mohou být různé stránky, není to vždy homepage. Stejně tak je důležité myslet na to, že cílů budeme mít v projektu jistě více.

Jaké dotazy si je nutné zodpovědět na začátku plánování User Flow

Nyní se podíváme na to, jaké dotazy si je nutné zodpovědět na začátku plánování User Flow:

• Jakou cestu uživatele si chceme konkrétně znázornit? Nebo budeme mapovat celé užívání webu či aplikace?

Pak pro každou cestu si zodpovíme následující:

• Co je cílem uživatele, ke kterému spěje?
• Kde konkrétně může začít s daným úkolem?
• Vede jeho cesta přes homepage, či je možné, aby na landing page přišel například z vyhledávání či reklamy? Promyslet musíme všechny varianty, většinou jich bývá více.

Landing page je vstupní stránka, na kterou uživatel přijde s nějakým cílem z jiného webu (odkazu, reklam či vyhledávače), na kterou nás chce tvůrce webu cílové landing page směřovat. Česky se používá také obrat cílová stránka. Tato stránka má většinou obsah, který vede k nějaké konverzní akci (koupě, registrace, objednávka atd.).

• Jaké kroky má uživatel udělat a z jakého důvodu? Je třeba počet těchto kroků eliminovat na nezbytně nutné - čím méně, tím lépe.
• Jaké rozhodnutí bude uživatel na své cestě muset učinit?
• Jaké podmínky musí uživatel splňovat?
• Jaké varianty cest mohou nastat? Jsou všechny srozumitelné a nezavádějící?

Tyto otázky nám pomohou zamyslet se nad celou cestou uživatele. Po jejich zodpovězení si můžeme začít vytvářet grafické cesty tak, aby bylo vidět, kde všude se mohou uživatelé ve všech variantách cest vyskytnout.

Možnosti vizualizace User Flow

Pokud již máme naplánované, jaké všechny cesty chceme mapovat a kam všude může náš uživatel zavítat, je na místě začít s plánováním cest. Cestu uživatele si můžeme vizualizovat dvěma způsoby – tzv. Task Flow a Screen Flow.

Task Flow

Task Flow je diagram, který znázorňuje cestu uživatele nějakým úkolem. Může to být odeslání objednávky či registrace, ale i odeslání kontaktního formuláře. Naším cílem je zamyslet se, jak to uživatel potřebuje udělat, aby dospěl do svého cíle. Jde o jednodušší zobrazení než Screen Flow. V podstatě jde o lineární cestu bez dalších odboček. Standardní User Flow ale využívá spíše druhou metodu výstupu, a to Screen Flow.

Příklad:

Cíl: Uživatel chce doplnit informace o svých koníčcích do profilové stránky webu.

Uživatel jde na domovskou stránku, kde se přihlásí. → Na své profilové stránce jde do Nastavení, kde vyhledá záložku Koníčky. → Doplní potřebné informace a uloží je.

Screen Flow

Screen Flow přímo vizualizuje všechny stavy webové stránky či aplikace pomocí propojených obrazů obrazovek (nyní zobrazováno hlavně jako náhledy responzivního zobrazení na mobilních zařízeních). Jde o zobrazení toho, jak přesně budou lidé interagovat s prvky na stránce, jak je budou ovládat a kam jejich akce povedou dále. Diagram může ukazovat buď jednu cestu k zvolenému cíli, nebo popisuje větvení možností při rozhodování na jednom diagramu.

Příklad:

Cíl: Uživatel chce za pomoci aplikace na posílání zpráv poslat zprávu svému kontaktu, kterého nemá v uložených konverzacích, které se zobrazují hned po načtení aplikace.

Uživatel vyhledá aplikaci a spustí ji kliknutím na její ikonu. → Klikne na ikonu seznamu přátel pod hlavní obrazovkou. → Rozbalí se mu seznam přátel, ze kterého si vybere a klikne na jméno dotyčného. → Otevře se okno pro psaní zpráv. → Uživatel začne psát do prázdného pole pro psaní zpráv a po napsaní zprávy klikne na ikonu odeslat. → Zpráva se zobrazí na hlavní obrazovce konverzace spolu s ikonou odesílatele a časovým údajem odeslání.

Nyní je čas uchopit myšlenky prakticky a začít vizualizovat.

Vizualizace

Na první náčrty nám může stačit pouze tužka a papír. V této fázi si ještě ladíme průchod webem a snažíme se vytřídit všechny zbytečné kroky a záludnosti, se kterými by se uživatel mohl potkat. Pro prezentaci je však třeba již vzít do rukou program pro grafické znázornění. Některé z nich si tu představíme.

Programy pro tvorbu User Flow

Abychom si usnadnili práci při navrhování nejen User Flow, hodí se nám třeba některý z následujících programů:

• Sketch – jde o program, který je již nějaký pátek k dispozici a nemusí již úplně stačit, bývá však oblíbený. Svým rozhraním se podobá Adobe Illustratoru. Poslouží nám pro jednoduchou úpravu vektorových souborů a prototypování aplikací, chybí zde však varianty animací.
• Adobe XD – je velmi rychle se rozvíjející program, ale často se tak mění i jeho rozhraní. Je však výhodou pro ty, kteří pracují s jinými programy Adobe, jelikož je vzájemně kompatibilní. Na ovládání je ale složitější než Sketch, dobře se zorientují ti, co pracují s Adobe Illustratorem či Photoshopem.
• InVision Studio – vyhrává v možnostech práce s animací a s časovou osou. Je zdarma.
• Figma – jde o cloud-based kolaborační nástroj, který funguje v reálném čase, takže na projektu může současně pracovat několik lidí (tedy až 100). Figma se velmi rychle vyvíjí, a co ještě nemá přímo integrované, doplňuje nespočet pluginů. Je ideální i na wireframy, prototypy i persony. A hlavně, Figma se dá dobře využívat i ve free režimu.

Jakmile máme User Flow graficky vizualizovaný a nezapomněli jsme na žádnou z variant uživatelských cest, můžeme nejlépe přejít k jejich otestování. To teprve potvrdí správnost našich návrhů, či nám odhalí případné problémy.

V příští lekci, Cílové skupiny a analýza zákazníků v UX, si vysvětlíme, proč je důležité poznat ty, pro něž tvoříme. Ukážeme si, jak definovat cílové skupiny a jak vytvořit analýzu zákazníků.