Používateľské toky: Čo sú a prečo sú dôležité v dizajne UX17 min read

Skvelý UX nezačína pixelmi. Začína to pochopením toho, čo sa používatelia snažia robiť, kde vstupujú do produktu, aké rozhodnutia musia urobiť a aká cesta ich vedie k úspešnému výsledku.

Táto cesta sa nazýva a používateľský tok.

Tok používateľa je vizuálna mapa krokov, ktoré osoba vykoná prostredníctvom aplikácie, webovej lokality alebo konkrétnej úlohy. Môže zobrazovať úplnú skúsenosť s produktom, ako je registrácia do aplikácie SaaS, alebo menší postup, ako je registrácia, rezervácia ukážky, prihlásenie na odber bulletinu alebo dokončenie platby.

Pre dizajnérov, produktové tímy a zakladateľov UX sú toky používateľov jedným z najjednoduchších spôsobov, ako navrhnúť lepšie rozhrania predtým, ako sa pustíte do podrobných obrazoviek. Pomôžu vám zistiť, kde môžu byť používatelia zmätení, kde má tok príliš veľa krokov a ktoré obrazovky skutočne potrebujete navrhnúť.

V tejto príručke vysvetlíme, čo sú toky používateľov, ako ich čítať, kedy ich vytvárať a ako podporujú lepší dizajn UX.

Skúste navrhnúť používateľské toky pomocou AI

Popíšte tok používateľov, ktorý chcete navrhnúť, a potom nechajte Anima, aby ho premenil na UX, obrazovky a kód.

Čo je tok používateľov?

A používateľský tok je diagram, ktorý ukazuje cestu, ktorou sa používateľ vyberie na splnenie cieľa v rámci produktu. V dizajne UX je týmto produktom zvyčajne aplikácia, webová lokalita, webová aplikácia alebo digitálna služba.

Tok používateľa začína vstupným bodom, ako je napríklad domovská stránka, vstupná stránka, výsledok vyhľadávania, e-mailový odkaz, prihlasovacia obrazovka alebo nákupný košík. Končí sa poslednou interakciou, ako je vytvorenie účtu, dokončenie nákupu, odoslanie formulára, zverejnenie projektu alebo prechod na stránku s potvrdením.

Tok používateľa môže predstavovať:

• Celá cesta k produktu, ako je objavovanie, registrácia a používanie novej aplikácie
• Jedna úloha, napríklad obnovenie hesla alebo inovácia plánu
• Tok funkcií, ako je vytvorenie projektu, pozvanie spoluhráča alebo exportovanie návrhu
• Tok používateľského rozhrania, ktorý ukazuje, ako sa obrazovky spájajú vo vnútri produktu

Cieľ je jednoduchý: objasnite cestu používateľovi skôr, ako podrobne navrhnete rozhranie.

Príklad základnej štruktúry toku používateľov

Tok používateľa verzus tok používateľského rozhrania

Podmienky používateľský tok a tok používateľského rozhrania úzko súvisia.

Tok používateľa sa zameriava na cestu používateľa k cieľu. Odpovedá na otázky ako:

• Kde začína používateľ?
• Akú akciu sa snažia dokončiť?
• Aké rozhodnutia robia na svojej ceste?
• Čo sa stane, ak uspejú, zlyhajú alebo sa vydajú inou cestou?

Tok používateľského rozhrania sa konkrétnejšie zameriava na to, ako sa spájajú obrazovky, stavy, tlačidlá, formuláre a prvky rozhrania. Odpovedá na otázky ako:

• Ktorá obrazovka nasleduje po tejto?
• Čo sa stane, keď používateľ klikne na toto tlačidlo?
• Kam vedie tento chybový stav?
• Čo vidí používateľ po odoslaní formulára?

V praxi tímy UX často používajú obe spolu. Používateľský tok definuje cestu. Tok používateľského rozhrania robí túto cestu konkrétnou vo vnútri produktu UI.

Ako čítať tok používateľa

Tok používateľa stanovuje kroky, ktoré používateľ vykoná od vstupného bodu po konečnú interakciu. Každý krok je zvyčajne reprezentovaný tvarom, ktorý sa nazýva aj uzol. Uzly sú spojené šípkami, ktoré ukazujú smer pohybu.

Väčšina používateľských vývojových diagramov používa jednoduchý vizuálny jazyk:

• Kruh alebo ovál: Počiatočný alebo koncový bod
• Obdĺžnik: Obrazovka, stránka alebo akcia
• Diamant: Rozhodovací bod, napríklad áno/nie, úspech/neúspech alebo výber cesty
• šípka: Smer pohybu medzi krokmi

Vysvetlenie komponentov používateľského toku

Jednoduchý postup registrácie používateľa môže vyzerať napríklad takto:

1. Používateľ sa dostane na domovskú stránku
2. Používateľ klikne na „Začať zadarmo“
3. Používateľ zadá e-mail a heslo
4. Systém skontroluje, či je e-mail platný
5. Používateľ potvrdí účet
6. Používateľ sa dostane na úvodnú obrazovku
7. Používateľ dokončí nastavenie
8. Používateľ sa dostane na palubnú dosku

Tento druh príkladu používateľského toku pomáha tímu porozumieť skúsenostiam pred návrhom každej obrazovky.

Príklady toku používateľov

Používateľské toky budú ľahšie pochopiteľné, keď ich prepojíte so skutočnými produktovými úlohami. Tu je niekoľko bežných príkladov toku používateľov, ktoré tímy UX vytvárajú počas plánovania produktu.

Postup registrácie používateľa

Tok registrácie používateľov mapuje, ako sa nový návštevník stane registrovaným používateľom.

1. Navštívte vstupnú stránku
2. Kliknite na CTA na registráciu
3. Vyberte spôsob registrácie
4. Zadajte podrobnosti o účte
5. Overte e-mail
6. Dokončite registráciu
7. Informačný panel produktu

Tento tok pomáha tímom znížiť trenie pri prvej skúsenosti. Ak registrácia obsahuje príliš veľa krokov, nejasné polia formulára alebo mätúce stavy overenia, používatelia môžu opustiť produkt ešte predtým, ako uvidia produkt.

Tok používateľov v pokladni

Tok používateľov pri pokladni mapuje, ako používateľ prechádza od záujmu o produkt k nákupu.

1. Pozrite si stránku produktu alebo ceny
2. Pridajte položku alebo vyberte plán
3. Skontrolujte podrobnosti košíka alebo plánu
4. Zadajte informácie o platbe
5. Potvrďte nákup
6. Dosiahnite úspešnú stránku alebo potvrdenie

Tento tok je obzvlášť dôležitý pre elektronický obchod, SaaS a predplatné, pretože každý ďalší krok môže ovplyvniť konverziu.

Používateľský tok na obnovenie prihlásenia a hesla

Prihlasovací tok mapuje, ako vracajúci sa používatelia pristupujú k svojmu účtu, vrátane okrajových prípadov.

1. Otvorte prihlasovaciu stránku
2. Zadajte poverenia
3. Systém overí zadanie
4. Používateľ sa úspešne prihlásil alebo sa mu zobrazila chyba
5. V prípade potreby používateľ spustí obnovenie hesla
6. Používateľ potvrdí e-mail
7. Používateľ nastaví nové heslo
8. Používateľ sa vráti k produktu

Príklad toku používateľa pre proces prihlásenia (tok úloh)

Postup registrácie používateľov

Tok nových používateľov mapuje, ako noví používatelia dosiahnu svoj prvý úspešný produktový moment.

1. Vytvoriť účet
2. Odpovedzte na otázky týkajúce sa nastavenia
3. Vyberte šablónu alebo východiskový bod
4. Dokončite prvú akciu
5. Pozrite si stav úspechu
6. Pokračujte do produktu

V prípade produktov AI, návrhárskych nástrojov a aplikácií na zvýšenie produktivity sú vstupné postupy kritické, pretože používatelia musia rýchlo pochopiť, čo robiť ďalej.

Kedy vytvoriť tok používateľov

Vytvorte používateľské toky na začiatku procesu návrhu, ideálne po počiatočnom používateľskom prieskume a pred verným návrhom UI.

V tejto fáze vám používateľský tok pomôže:

• Rozhodnite sa, ktoré obrazovky musia existovať
• Odstráňte nepotrebné kroky
• Identifikujte mätúce rozhodovacie body
• Zosúlaďte tím okolo štruktúry produktu
• Plán prototypy rýchlejšie
• Vyhnite sa navrhovaniu leštených obrazoviek pre rozbitú cestu

Používateľské toky sú užitočné aj neskôr v životnom cykle produktu. Ak má existujúce rozhranie nízku výkonnosť, používateľský tok vám môže pomôcť diagnostikovať, kde ľudia odpadávajú, zacyklia sa alebo zlyhávajú pri vykonávaní kľúčových úloh.

Inými slovami, toky používateľov sa netýkajú len nových produktov. Sú tiež užitočné na zlepšenie existujúcich produktov.

Úloha užívateľských tokov v dizajne UX

Používateľské toky sú základnou súčasťou dizajnu UX, pretože spájajú ciele používateľov so štruktúrou produktu. Predtým, ako sa budete starať o medzery, typografiu, vizuálnu hierarchiu alebo komponenty, musíte vedieť, čo sa používateľ snaží dosiahnuť a ako mu produkt pomáha dostať sa tam.

Používateľské toky pomáhajú tímom UX robiť tri dôležité veci.

1. Vytvorte intuitívnejšie rozhranie

Jasný používateľský tok uľahčuje pochopenie konečného rozhrania.

Keď zmapujete tok pred navrhovaním, môžete si včas všimnúť trenie. Možno sa používateľ musí rozhodnúť skôr, ako bude mať dostatok informácií. Možno sa formulár objaví príliš skoro. Možno chýba krok potvrdenia. Možno sú tri obrazovky, kde by stačil jeden.

Ak je tok mätúci, rozhranie bude pravdepodobne tiež mätúce.

2. Vyhodnoťte existujúce rozhranie

Toky používateľov sú skvelým spôsobom, ako optimalizovať existujúce produkty, ktoré sa nemusia konvertovať alebo si udržať podľa očakávania. Ak používatelia nekonvertujú, neaktivujú alebo nedokončujú dôležitú úlohu, zmapujte aktuálny tok.

Môžete zistiť, že používatelia sú posielaní na nesprávnu obrazovku, žiadajú príliš veľa informácií alebo sú nútení prejsť cestou, ktorá nezodpovedá ich zámeru.

3. Oznámte svoju stratégiu členom tímu a zainteresovaným stranám

Používateľské toky sú skvelé na spoluprácu. Poskytujú dizajnérom, vývojárom, PM, osobám s rozhodovacou právomocou a zainteresovaným stranám spoločnú mapu skúseností.

Dizajnéri môžu použiť tok na plánovanie obrazoviek. Vývojári ho môžu použiť na pochopenie stavov a okrajových prípadov. PM ho môžu použiť na objasnenie požiadaviek. Zainteresované strany ho môžu použiť na preskúmanie logiky skúseností predtým, ako tím investuje do podrobného návrhu alebo implementácie.

Používateľské toky môžu tiež pomôcť vývojárom pochopiť súhrn štruktúru vášho konečného prototypu, čo robí odovzdanie efektívnejšie.

Cesta používateľa verzus tok používateľa

Cesty používateľov a toky používateľov sú často zmätené, ale nie sú to isté.

A cesta užívateľa rozpráva širší príbeh o vzťahu používateľa s produktom. Zvyčajne zahŕňa ciele používateľa, emócie, motiváciu, bolestivé body a body kontaktu pred, počas a po použití produktu.

A používateľský tok sa zameriava na cestu, ktorú používateľ prejde vo vnútri produktu, aby dosiahol konkrétny cieľ.

Kľúčové rozdiely

Obe sú užitočné. Cesta vám pomôže pochopiť kontext používateľa. Tok vám pomôže navrhnúť skutočnú cestu cez rozhranie.

Ako vytvoriť tok používateľov

Používateľský tok môžete vytvoriť pomocou tabule, nástroja na návrh, nástroja na vytváranie diagramov alebo nástroja na návrh AI. Na formáte záleží menej ako na prehľadnosti cesty.

1. Definujte cieľ používateľa

Začnite s akciou, ktorú chce používateľ dokončiť.

• Vytvorte si účet
• Kúpte si produkt
• Objednajte si demo
• Zverejnite webovú stránku
• Pozvite spoluhráča
• Exportujte dizajn do kódu

Tok používateľov by mal byť založený na konkrétnom cieli, nie na vágnej oblasti produktu.

2. Vyberte vstupný bod

Rozhodnite sa, kde používateľ začne. Príklady zahŕňajú domovskú stránku, stránku s cenami, výsledok vyhľadávania, e-mailovú kampaň, informačný panel aplikácie, upozornenie alebo zdieľaný odkaz.

Rôzne vstupné body môžu vytvárať rôzne toky. Vracajúci sa používateľ a prvý návštevník nemusia potrebovať rovnakú cestu.

3. Zmapujte šťastnú cestu

Šťastná cesta je najjednoduchšia úspešná cesta od začiatku do konca.

1. Používateľ otvorí stránku s cenami
2. Používateľ si vyberie plán
3. Používateľ vytvorí účet
4. Užívateľ zadá platobné údaje
5. Užívateľ potvrdí nákup
6. Používateľ sa dostane na stránku úspechu

Získate tak základnú skúsenosť.

4. Pridajte rozhodnutia a okrajové prípady

Skutoční používatelia nie vždy kráčajú po ideálnej ceste. Pridajte body rozhodnutia, ako napríklad:

• Má už používateľ účet?
• Je formulár platný?
• Podarilo sa zaplatiť?
• Vybral si používateľ mesačnú alebo ročnú fakturáciu?
• Má používateľ povolenie pokračovať?
• Čo sa stane, ak používateľ zruší?

Tieto vetvy premenia jednoduchú cestu na skutočný tok používateľov dizajnu UX.

5. Zjednodušte tok

Keď je tok zmapovaný, hľadajte trenie.

• Môžeme odstrániť krok?
• Môžeme kombinovať obrazovky?
• Žiadame o informácie príliš skoro?
• Je ďalší postup jasný?
• Je tam slepá ulička?
• Sú chybové stavy jasné?
• Vie používateľ vždy, čo sa stalo?

Najlepšie toky používateľov sú zrejmé, pretože zložitosť už bola vyriešená v zákulisí.

Užívateľské toky v skratke

Používateľské toky sú štrukturálne mapy pre návrh produktu. Ukazujú, ako používatelia prechádzajú aplikáciou, webom alebo úlohou od vstupného bodu po konečnú interakciu.

Silný tok používateľov:

• Začína sa jasným cieľom používateľa
• Zobrazuje vstupný bod používateľa
• Mapuje kroky, obrazovky a rozhodnutia na ceste
• Zahŕňa dôležité okrajové puzdrá
• Pomáha tímom identifikovať trenie pred podrobným návrhom UI
• Uľahčuje odovzdávanie pre dizajnérov, vývojárov, PM a zainteresované strany

Pre tímy UX sú toky používateľov jedným z najpraktickejších nástrojov na premenu používateľského výskumu na štruktúru rozhrania. Pomáhajú vám navrhovať so zámerom namiesto hádania obrazovku po obrazovke.

FAQ: Používateľské toky

Čo sú toky používateľov?

Používateľské toky sú diagramy, ktoré zobrazujú cestu, ktorou používateľ prechádza cez aplikáciu, webovú lokalitu alebo úlohu produktu. Zvyčajne začínajú na vstupnom bode, ako je domovská stránka alebo prihlasovacia obrazovka, a končia, keď používateľ dokončí cieľ, ako je registrácia, nákup alebo odoslanie formulára.

Čo je to používateľský tok v dizajne UX?

V dizajne UX používateľský tok mapuje kroky, obrazovky, rozhodnutia a akcie, ktoré používateľ vykoná na splnenie cieľa. Tímy UX používajú používateľské toky na plánovanie štruktúry produktu, zníženie trenia a navrhovanie jasnejších rozhraní pred vytvorením obrazoviek s vysokou vernosťou.

Aký je rozdiel medzi tokom používateľa a cestou používateľa?

Cesta používateľa ukazuje širšiu skúsenosť vrátane motivácií používateľov, emócií, bolestivých bodov a kontaktných bodov. Tok používateľa sa zameriava na konkrétnu cestu, ktorú používateľ prejde vo vnútri produktu, aby dokončil úlohu.

Čo je tok používateľského rozhrania?

Tok používateľského rozhrania ukazuje, ako sa obrazovky, stavy UI, tlačidlá, formuláre a interakcie spájajú vo vnútri produktu. Úzko súvisí s tokom používateľa, ale zameriava sa konkrétnejšie na cestu na úrovni rozhrania.

Kedy by ste mali vytvoriť tok používateľov?

Vytvorte tok používateľov po počiatočnom prieskume používateľov a pred podrobným návrhom UI. Môžete tiež vytvoriť používateľské toky neskôr na audit existujúceho produktu, diagnostikovať výpadky alebo zlepšiť konverziu.

Aké sú príklady používateľských tokov?

Bežné príklady používateľských postupov zahŕňajú prihlasovacie postupy, platobné postupy, registračné postupy, prihlasovacie postupy, postupy obnovenia hesla, postupy rezervácie, postupy inovácie a postupy pozývania spoluhráčov.

Prečo sú toky používateľov dôležité?

Používateľské toky pomáhajú tímom pochopiť, ako sa používatelia pohybujú cez produkt predtým, ako investujú do podrobného návrhu alebo vývoja. Odhaľujú nezrovnalosti, chýbajúce kroky, mätúce rozhodnutia a zbytočnú zložitosť na začiatku procesu.

Ako vytvoríte tok používateľov?

Začnite s cieľom používateľa, vyberte vstupný bod, zmapujte šťastnú cestu, pridajte rozhodnutia a okrajové prípady a potom cestu zjednodušte. Použite kruhy alebo ovály na začiatočné a koncové body, obdĺžniky na obrazovky alebo akcie, kosoštvorce na rozhodnutia a šípky na zobrazenie smeru.

Vyskúšajte Anima Playground pre používateľské toky a dizajn UX

Anima Playground vám umožňuje prejsť od nápadu na produkt k toku, dizajnu a pracovnému kódu UX v prehliadači. Popíšte zážitok, ktorý chcete vytvoriť, vylepšite ho pomocou AI a premeňte výsledok na skutočný interaktívny produkt.

Začnite navrhovať pomocou Anima Playground.