Uživatelské toky: Co jsou a proč na nich záleží v designu UX17 min read

Skvělý UX nezačíná s pixely. Začíná pochopením toho, co se uživatelé snaží dělat, kde vstupují do produktu, jaká rozhodnutí musí učinit a jaká cesta je vede k úspěšnému výsledku.

Tato cesta se nazývá a uživatelský tok.

Tok uživatelů je vizuální mapa kroků, které člověk provádí prostřednictvím aplikace, webu nebo konkrétního úkolu. Může ukazovat kompletní zážitek z produktu, jako je registrace do aplikace SaaS, nebo menší tok, jako je registrace, rezervace ukázky, přihlášení k odběru newsletteru nebo dokončení pokladny.

Pro návrháře, produktové týmy a zakladatele UX jsou uživatelské toky jedním z nejjednodušších způsobů, jak navrhnout lepší rozhraní, než se pustí do podrobných obrazovek. Pomohou vám zjistit, kde se uživatelé mohou zmást, kde má tok příliš mnoho kroků a které obrazovky vlastně potřebujete navrhnout.

V této příručce vysvětlíme, co jsou uživatelské toky, jak je číst, kdy je vytvářet a jak podporují lepší design UX.

Zkuste navrhnout uživatelské toky pomocí AI

Popište uživatelský tok, který chcete navrhnout, a nechte jej Anima přeměnit na UX, obrazovky a kód.

Co je tok uživatelů?

A uživatelský tok je diagram, který ukazuje cestu, kterou se uživatel ubírá k dokončení cíle uvnitř produktu. V designu UX je tímto produktem obvykle aplikace, webová stránka, webová aplikace nebo digitální služba.

Tok uživatele začíná vstupním bodem, jako je domovská stránka, vstupní stránka, výsledek vyhledávání, e-mailový odkaz, přihlašovací obrazovka nebo nákupní košík. Končí poslední interakcí, jako je vytvoření účtu, dokončení nákupu, odeslání formuláře, zveřejnění projektu nebo dosažení potvrzovací stránky.

Uživatelský tok může představovat:

• Celá cesta k produktu, jako je objevování, registrace a používání nové aplikace
• Jediný úkol, jako je resetování hesla nebo upgrade plánu
• Tok funkcí, jako je vytvoření projektu, pozvání spoluhráče nebo export návrhu
• Tok uživatelského rozhraní, který ukazuje, jak se obrazovky propojují uvnitř produktu

Cíl je jednoduchý: vyjasněte cestu uživatele, než podrobně navrhnete rozhraní.

Příklad základní struktury toku uživatelů

Tok uživatelů vs tok uživatelského rozhraní

Podmínky uživatelský tok a tok uživatelského rozhraní úzce souvisí.

Tok uživatelů se zaměřuje na cestu uživatele k cíli. Odpovídá na otázky jako:

• Kde uživatel začíná?
• Jakou akci se snaží dokončit?
• Jaká rozhodnutí na své cestě dělají?
• Co se stane, když uspějí, neuspějí nebo se vydají jinou cestou?

Tok uživatelského rozhraní se konkrétněji zaměřuje na způsob propojení obrazovek, stavů, tlačítek, formulářů a prvků rozhraní. Odpovídá na otázky jako:

• Která obrazovka následuje po této?
• Co se stane, když uživatel klikne na toto tlačítko?
• Kam tento chybový stav vede?
• Co vidí uživatel po odeslání formuláře?

V praxi týmy UX často používají obě dohromady. Uživatelský tok definuje cestu. Tok uživatelského rozhraní činí tuto cestu konkrétní uvnitř produktu UI.

Jak číst uživatelský tok

Uživatelský tok popisuje kroky, které uživatel podnikne od vstupního bodu po konečnou interakci. Každý krok je obvykle reprezentován tvarem, nazývaným také uzel. Uzly jsou spojeny šipkami, které ukazují směr pohybu.

Většina uživatelských vývojových diagramů používá jednoduchý vizuální jazyk:

• Kruh nebo ovál: Počáteční nebo koncový bod
• Obdélník: Obrazovka, stránka nebo akce
• Diamant: Rozhodovací bod, například ano/ne, úspěch/neúspěch nebo výběr cesty
• Šipka: Směr pohybu mezi kroky

Vysvětlení komponent uživatelského toku

Jednoduchý postup registrace uživatele může vypadat například takto:

1. Uživatel se dostane na domovskou stránku
2. Uživatel klikne na „Začít zdarma“
3. Uživatel zadá email a heslo
4. Systém zkontroluje, zda je e-mail platný
5. Uživatel potvrdí účet
6. Uživatel se dostane na vstupní obrazovku
7. Uživatel dokončí nastavení
8. Uživatel přistane na řídicím panelu

Tento druh příkladu uživatelského toku pomáhá týmu porozumět zkušenostem před návrhem každé obrazovky.

Příklady uživatelského toku

Uživatelské toky budou snáze pochopitelné, když je propojíte se skutečnými produktovými úkoly. Zde je několik běžných příkladů toku uživatelů, které týmy UX vytvářejí během plánování produktu.

Postup registrace uživatele

Tok uživatelů při registraci mapuje, jak se nový návštěvník stane registrovaným uživatelem.

1. Navštivte vstupní stránku
2. Klikněte na CTA registrace
3. Vyberte způsob přihlášení
4. Zadejte podrobnosti o účtu
5. Ověřte e-mail
6. Kompletní onboarding
7. Informační panel produktu

Tento tok pomáhá týmům snížit tření při prvních zkušenostech. Pokud registrace obsahuje příliš mnoho kroků, nejasná pole formuláře nebo matoucí stavy ověření, uživatelé mohou odejít dříve, než produkt uvidí.

Tok uživatelů pokladny

Uživatelský tok pokladny mapuje, jak uživatel přechází od zájmu o produkt k nákupu.

1. Zobrazit stránku s produktem nebo cenou
2. Přidejte položku nebo vyberte plán
3. Zkontrolujte podrobnosti košíku nebo plánu
4. Zadejte platební údaje
5. Potvrďte nákup
6. Dosáhněte úspěšné stránky nebo účtenky

Tento tok je zvláště důležitý pro elektronický obchod, SaaS a předplatné, protože každý další krok může ovlivnit konverzi.

Uživatelský postup pro přihlášení a resetování hesla

Přihlašovací tok mapuje, jak vracející se uživatelé přistupují ke svému účtu, včetně okrajových případů.

1. Otevřete přihlašovací stránku
2. Zadejte přihlašovací údaje
3. Systém ověřuje vstup
4. Uživatel se úspěšně přihlásí nebo se zobrazí chyba
5. V případě potřeby uživatel spustí resetování hesla
6. Uživatel potvrdí email
7. Uživatel nastaví nové heslo
8. Uživatel se vrátí k produktu

Příklad uživatelského toku pro proces přihlášení (tok úkolů)

Postup registrace uživatele

Tok uživatelů mapuje, jak noví uživatelé dosáhnou svého prvního úspěšného produktového okamžiku.

1. Vytvořit účet
2. Odpovězte na otázky týkající se nastavení
3. Vyberte šablonu nebo výchozí bod
4. Dokončete první akci
5. Viz stav úspěchu
6. Pokračujte do produktu

U produktů s umělou inteligencí, návrhářských nástrojů a aplikací pro zvýšení produktivity jsou procesy zařazování kritické, protože uživatelé potřebují rychle pochopit, co dělat dál.

Kdy vytvořit uživatelský tok

Vytvořte uživatelské toky na začátku procesu návrhu, ideálně po počátečním uživatelském průzkumu a před vysoce věrným návrhem UI.

V této fázi vám uživatelský tok pomůže:

• Rozhodněte, které obrazovky musí existovat
• Odstraňte zbytečné kroky
• Identifikujte matoucí rozhodnutí
• Srovnejte tým kolem struktury produktu
• Plán prototypy rychlejší
• Vyhněte se navrhování leštěných obrazovek pro rozbitou cestu

Uživatelské toky jsou také užitečné později v životním cyklu produktu. Pokud má stávající rozhraní nedostatečnou výkonnost, může vám tok uživatelů pomoci diagnostikovat, kde lidé odpadávají, zacyklují se nebo neplní klíčové úkoly.

Jinými slovy, toky uživatelů se netýkají pouze nových produktů. Jsou také užitečné pro vylepšení stávajících produktů.

Role uživatelských toků v designu UX

Uživatelské toky jsou základní součástí návrhu UX, protože propojují uživatelské cíle se strukturou produktu. Než si budete dělat starosti s mezerami, typografií, vizuální hierarchií nebo komponentami, musíte vědět, čeho se uživatel snaží dosáhnout a jak mu produkt pomáhá se tam dostat.

Uživatelské toky pomáhají týmům UX dělat tři důležité věci.

1. Vytvořte intuitivnější rozhraní

Jasný uživatelský tok usnadňuje pochopení konečného rozhraní.

Když zmapujete tok před návrhem, můžete brzy zjistit tření. Možná se uživatel musí rozhodnout, než bude mít dostatek informací. Možná se formulář objeví příliš brzy. Možná chybí krok potvrzení. Možná jsou tři obrazovky, kde by stačila jedna.

Pokud je tok matoucí, bude pravděpodobně matoucí i rozhraní.

2. Vyhodnoťte stávající rozhraní

Toky uživatelů jsou skvělým způsobem, jak optimalizovat stávající produkty, které se nemusí konvertovat nebo udržet podle očekávání. Pokud uživatelé nekonvertují, neaktivují nebo nedokončují důležitý úkol, zmapujte aktuální tok.

Můžete zjistit, že uživatelé jsou posíláni na nesprávnou obrazovku, žádají o příliš mnoho informací nebo jsou nuceni projít cestou, která neodpovídá jejich záměru.

3. Sdělte svou strategii členům týmu a zainteresovaným stranám

Uživatelské toky jsou skvělé pro spolupráci. Dávají návrhářům, vývojářům, PM, osobám s rozhodovací pravomocí a zúčastněným stranám sdílenou mapu zkušeností.

Návrháři mohou tok použít k plánování obrazovek. Vývojáři jej mohou použít k pochopení stavů a ​​okrajových případů. PM jej mohou použít k vyjasnění požadavků. Zúčastněné strany jej mohou použít k přezkoumání logiky zkušeností, než tým investuje do podrobného návrhu nebo implementace.

Uživatelské toky mohou také pomoci vývojářům porozumět celku struktura za vaším konečným prototypem, což dělá předání efektivnější.

Cesta uživatele vs tok uživatele

Cesty uživatelů a toky uživatelů jsou často zmatené, ale není to totéž.

A cesta uživatele vypráví širší příběh o vztahu uživatele k produktu. Obvykle zahrnuje uživatelské cíle, emoce, motivace, bolestivé body a kontaktní body před, během a po použití produktu.

A uživatelský tok se zaměřuje na cestu, kterou uživatel prochází uvnitř produktu, aby dokončil konkrétní cíl.

Klíčové rozdíly

Obojí je užitečné. Cesta vám pomůže pochopit kontext uživatele. Tok vám pomůže navrhnout skutečnou cestu rozhraním.

Jak vytvořit uživatelský tok

Uživatelský tok můžete vytvořit pomocí tabule, nástroje pro návrh, nástroje pro vytváření diagramů nebo nástroje pro návrh AI. Na formátu záleží méně než na srozumitelnosti cesty.

1. Definujte cíl uživatele

Začněte akcí, kterou chce uživatel dokončit.

• Vytvořte si účet
• Koupit produkt
• Zarezervujte si demo
• Publikovat webovou stránku
• Pozvěte spoluhráče
• Export návrhu do kódu

Tok uživatelů by měl být postaven na konkrétním cíli, nikoli na vágní oblasti produktu.

2. Vyberte vstupní bod

Rozhodněte, kde uživatel začne. Příklady zahrnují domovskou stránku, stránku s cenami, výsledek vyhledávání, e-mailovou kampaň, panel aplikace, oznámení nebo sdílený odkaz.

Různé vstupní body mohou vytvářet různé toky. Vracející se uživatel a první návštěvník nemusí potřebovat stejnou cestu.

3. Zmapujte šťastnou cestu

Šťastná cesta je nejjednodušší úspěšná cesta od začátku do konce.

1. Uživatel otevře stránku s cenami
2. Uživatel vybere plán
3. Uživatel vytvoří účet
4. Uživatel zadá platební údaje
5. Uživatel potvrdí nákup
6. Uživatel se dostane na stránku úspěchu

Získáte tak základní zkušenost.

4. Přidejte rozhodnutí a okrajové případy

Skuteční uživatelé ne vždy následují dokonalou cestu. Přidejte rozhodovací body, jako jsou:

• Má uživatel již účet?
• Je formulář platný?
• Platba proběhla úspěšně?
• Zvolil uživatel měsíční nebo roční vyúčtování?
• Má uživatel oprávnění pokračovat?
• Co se stane, když uživatel zruší?

Tyto větve promění jednoduchou cestu ve skutečný uživatelský tok návrhu UX.

5. Zjednodušte tok

Jakmile je tok zmapován, hledejte tření.

• Můžeme odstranit krok?
• Můžeme obrazovky kombinovat?
• Žádáme o informace příliš brzy?
• Je další postup jasný?
• Existuje slepá ulička?
• Jsou chybové stavy jasné?
• Ví uživatel vždy, co se stalo?

Nejlepší uživatelské toky jsou zřejmé, protože složitost již byla vyřešena v zákulisí.

Uživatelské toky v kostce

Uživatelské toky jsou strukturální mapy pro návrh produktu. Ukazují, jak uživatelé procházejí aplikací, webem nebo úkolem od vstupního bodu ke konečné interakci.

Silný tok uživatelů:

• Začíná s jasným cílem uživatele
• Zobrazuje vstupní bod uživatele
• Mapuje kroky, obrazovky a rozhodnutí na cestě
• Zahrnuje důležitá pouzdra na hrany
• Pomáhá týmům identifikovat tření před detailním návrhem UI
• Usnadňuje předávání návrhářům, vývojářům, PM a zainteresovaným stranám

Pro týmy UX jsou uživatelské toky jedním z nejpraktičtějších nástrojů pro přeměnu uživatelského výzkumu na strukturu rozhraní. Pomohou vám navrhovat se záměrem místo hádání obrazovku po obrazovce.

FAQ: Uživatelské toky

Co jsou toky uživatelů?

Uživatelské toky jsou diagramy, které ukazují cestu, kterou uživatel prochází úlohou aplikace, webu nebo produktu. Obvykle začínají ve vstupním bodě, jako je domovská stránka nebo přihlašovací obrazovka, a končí, když uživatel dokončí cíl, jako je registrace, nákup nebo odeslání formuláře.

Co je uživatelský tok v designu UX?

V návrhu UX tok uživatelů mapuje kroky, obrazovky, rozhodnutí a akce, které uživatel podnikne k dokončení cíle. Týmy UX používají uživatelské toky k plánování struktury produktu, snížení tření a navrhování jasnějších rozhraní před vytvořením vysoce věrných obrazovek.

Jaký je rozdíl mezi tokem uživatele a cestou uživatele?

Cesta uživatele ukazuje širší zážitek, včetně motivace uživatelů, emocí, bolestivých bodů a kontaktních bodů. Uživatelský tok se zaměřuje na konkrétní cestu, kterou uživatel prochází uvnitř produktu, aby dokončil úkol.

Co je tok uživatelského rozhraní?

Tok uživatelského rozhraní ukazuje, jak se obrazovky, stavy UI, tlačítka, formuláře a interakce propojují uvnitř produktu. Úzce souvisí s uživatelským tokem, ale zaměřuje se konkrétněji na cestu na úrovni rozhraní.

Kdy byste měli vytvořit uživatelský tok?

Vytvořte uživatelský tok po počátečním uživatelském průzkumu a před podrobným návrhem UI. Můžete také vytvořit uživatelské toky později za účelem auditu existujícího produktu, diagnostiky opuštění nebo zlepšení konverze.

Jaké jsou příklady uživatelských toků?

Mezi běžné příklady uživatelského toku patří postupy registrace, postupy placení, postupy registrace, postupy přihlášení, postupy pro resetování hesla, postupy rezervací, postupy upgradu a postupy pro pozvání spoluhráče.

Proč jsou uživatelské toky důležité?

Uživatelské toky pomáhají týmům pochopit, jak uživatelé procházejí produktem, než investují do podrobného návrhu nebo vývoje. Odhalují tření, chybějící kroky, matoucí rozhodnutí a zbytečnou složitost na začátku procesu.

Jak zajistíte tok uživatelů?

Začněte s uživatelským cílem, vyberte vstupní bod, zmapujte šťastnou cestu, přidejte rozhodnutí a okrajové případy a poté cestu zjednodušte. Použijte kruhy nebo ovály pro počáteční a koncové body, obdélníky pro obrazovky nebo akce, kosočtverce pro rozhodnutí a šipky pro zobrazení směru.

Vyzkoušejte Anima Playground pro uživatelské toky a design UX

Anima Playground umožňuje přejít od nápadu na produkt k toku, designu a pracovnímu kódu UX v prohlížeči. Popište zážitek, který chcete vytvořit, vylepšete jej pomocí AI a přeměňte výsledek ve skutečný interaktivní produkt.

Začněte navrhovat pomocí Anima Playground.