Korisnički tokovi: Što su oni i zašto su važni u UX dizajnu14 min read

Sjajni UX ne počinje s pikselima. Počinje s razumijevanjem što korisnici pokušavaju učiniti, gdje unose proizvod, koje odluke trebaju donijeti i koji ih put vodi do uspješnog ishoda.

Taj se put zove a protok korisnika.

Korisnički tijek je vizualna karta koraka koje osoba poduzima kroz aplikaciju, web mjesto ili određeni zadatak. Može prikazati potpuno iskustvo proizvoda, poput uključivanja u aplikaciju SaaS, ili manji tijek, poput prijave, rezerviranja demo, pretplate na bilten ili dovršetka naplate.

Za UX dizajnere, proizvodne timove i osnivače, korisnički tokovi su jedan od najjednostavnijih načina za dizajniranje boljih sučelja prije nego što se posvete detaljnim ekranima. Pomažu vam vidjeti gdje bi se korisnici mogli zbuniti, gdje tijek ima previše koraka i koje zaslone zapravo trebate dizajnirati.

U ovom ćemo vodiču objasniti što su tokovi korisnika, kako ih čitati, kada ih izraditi i kako podržavaju bolji UX dizajn.

Pokušajte dizajnirati korisničke tokove pomoću umjetne inteligencije

Opišite korisnički tijek koji želite dizajnirati, a zatim pustite Anima da ga pretvori u UX, zaslone i kod.

Što je protok korisnika?

A protok korisnika je dijagram koji prikazuje put kojim korisnik prolazi da postigne cilj unutar proizvoda. U UX dizajnu, taj proizvod je obično aplikacija, web stranica, web aplikacija ili digitalna usluga.

Korisnički tijek počinje s ulaznom točkom, kao što je početna stranica, odredišna stranica, rezultat pretraživanja, veza e-pošte, zaslon za prijavu ili košarica za kupnju. Završava konačnom interakcijom, kao što je stvaranje računa, dovršavanje kupnje, slanje obrasca, objavljivanje projekta ili dolazak na stranicu za potvrdu.

Korisnički tijek može predstavljati:

• Potpuni proizvodni put, poput otkrivanja, prijave i upotrebe nove aplikacije
• Jedan zadatak, poput ponovnog postavljanja lozinke ili nadogradnje plana
• Tijek značajki, poput stvaranja projekta, pozivanja suigrača ili izvoza dizajna
• Tijek korisničkog sučelja, koji pokazuje kako se zasloni povezuju unutar proizvoda

Cilj je jednostavan: razjasnite korisnikov put prije nego što detaljno dizajnirate sučelje.

Primjer osnovne strukture protoka korisnika

Korisnički tok vs tok korisničkog sučelja

Uvjeti protok korisnika i protok korisničkog sučelja blisko su povezani.

Korisnički tijek fokusiran je na korisnikov put prema cilju. Odgovara na pitanja poput:

• Gdje korisnik počinje?
• Koju akciju pokušavaju dovršiti?
• Koje odluke donose usput?
• Što se događa ako uspiju, ne uspiju ili krenu drugim putem?

Tijek korisničkog sučelja se preciznije fokusira na način povezivanja ekrana, stanja, gumba, obrazaca i elemenata sučelja. Odgovara na pitanja poput:

• Koji ekran dolazi nakon ovog?
• Što se događa kada korisnik klikne ovaj gumb?
• Gdje vodi ovo stanje pogreške?
• Što korisnik vidi nakon slanja obrasca?

U praksi, UX timovi često koriste oboje zajedno. Korisnički tok definira put. Tijek korisničkog sučelja čini taj put konkretnim unutar proizvoda UI.

Kako čitati korisnički tok

Korisnički tok prikazuje korake koje korisnik poduzima od ulazne točke do konačne interakcije. Svaki je korak obično predstavljen oblikom, koji se naziva i čvor. Čvorovi su povezani strelicama koje pokazuju smjer kretanja.

Većina korisničkih dijagrama toka koristi jednostavan vizualni jezik:

• Krug ili oval: Početna ili krajnja točka
• Pravokutnik: Zaslon, stranica ili radnja
• Dijamant: Točka odluke, kao što je da/ne, uspjeh/neuspjeh ili odabir puta
• strelica: Smjer kretanja između koraka

Objašnjene komponente korisničkog toka

Na primjer, jednostavni tijek prijave korisnika može izgledati ovako:

1. Korisnik dolazi na početnu stranicu
2. Korisnik klikne “Počni besplatno”
3. Korisnik upisuje email i lozinku
4. Sustav provjerava je li email ispravan
5. Korisnik potvrđuje račun
6. Korisnik dolazi do ulaznog zaslona
7. Korisnik dovršava postavljanje
8. Korisnik dolazi na nadzornu ploču

Ova vrsta primjera korisničkog toka pomaže timu da razumije iskustvo prije dizajniranja svakog zaslona.

Primjeri protoka korisnika

Korisničke tokove postaje lakše razumjeti kada ih povežete sa stvarnim zadacima proizvoda. Evo nekoliko uobičajenih primjera protoka korisnika koje UX timovi stvaraju tijekom planiranja proizvoda.

Tijek registracije korisnika

Tijek registracije korisnika prikazuje kako novi posjetitelj postaje registrirani korisnik.

1. Posjetite odredišnu stranicu
2. Kliknite CTA za prijavu
3. Odaberite način prijave
4. Unesite podatke o računu
5. Potvrdite e-poštu
6. Potpuna integracija
7. Dosegnite nadzornu ploču proizvoda

Ovaj tok pomaže timovima u smanjenju trenja u prvom iskustvu. Ako prijava ima previše koraka, nejasna polja obrasca ili zbunjujuća stanja potvrde, korisnici mogu odustati prije nego što uopće vide proizvod.

Tijek korisnika naplate

Tijek korisnika naplate prikazuje kako se korisnik kreće od interesa za proizvod do kupnje.

1. Pogledajte stranicu proizvoda ili cijene
2. Dodajte stavku ili odaberite plan
3. Pregledajte detalje košarice ili plana
4. Unesite podatke o plaćanju
5. Potvrdite kupnju
6. Dođite do stranice uspjeha ili računa

Ovaj tijek je posebno važan za e-trgovinu, SaaS i pretplatničke proizvode jer svaki dodatni korak može utjecati na konverziju.

Tijek korisnika za prijavu i poništavanje lozinke

Tijek prijave prikazuje kako ponovni korisnici pristupaju svom računu, uključujući rubne slučajeve.

1. Otvorite stranicu za prijavu
2. Unesite vjerodajnice
3. Sustav potvrđuje unos
4. Korisnik se uspješno prijavljuje ili vidi pogrešku
5. Ako je potrebno, korisnik pokreće poništavanje lozinke
6. Korisnik potvrđuje email
7. Korisnik postavlja novu lozinku
8. Korisnik se vraća proizvodu

Primjer tijeka korisnika za proces prijave (tijek zadatka)

Pristup korisniku

Tijek integracije korisnika prikazuje kako novi korisnici dolaze do svog prvog trenutka uspješnog proizvoda.

1. Napravi račun
2. Odgovorite na pitanja o postavljanju
3. Odaberite predložak ili početnu točku
4. Dovršite prvu radnju
5. Pogledajte stanje uspjeha
6. Nastavite u proizvod

Za proizvode umjetne inteligencije, alate za dizajn i aplikacije za produktivnost, tijekovi integracije su ključni jer korisnici moraju brzo razumjeti što im je sljedeće činiti.

Kada izraditi korisnički tok

Kreirajte korisničke tokove rano u procesu dizajna, idealno nakon početnog istraživanja korisnika i prije UI dizajna visoke vjernosti.

U ovoj fazi tijek korisnika pomaže vam:

• Odlučite koji ekrani moraju postojati
• Uklonite nepotrebne korake
• Identificirajte zbunjujuće točke odlučivanja
• Uskladite tim oko strukture proizvoda
• Planirajte prototipovi brže
• Izbjegavajte dizajn poliranih zaslona za isprekidanu putanju

Korisnički tokovi također su korisni kasnije u životnom ciklusu proizvoda. Ako postojeće sučelje nema dovoljno performansi, korisnički tijek može vam pomoći da dijagnosticirate gdje ljudi odustaju, ponavljaju se ili ne uspijevaju izvršiti ključne zadatke.

Drugim riječima, tokovi korisnika nisu samo za nove proizvode. Također su korisni za poboljšanje postojećih proizvoda.

Uloga korisničkih tokova u UX dizajnu

Korisnički tokovi ključni su dio UX dizajna jer povezuju korisničke ciljeve sa strukturom proizvoda. Prije nego što se brinete o razmacima, tipografiji, vizualnoj hijerarhiji ili komponentama, morate znati što korisnik pokušava postići i kako im proizvod pomaže da to postigne.

Tijek korisnika pomaže timovima UX učiniti tri važne stvari.

1. Stvorite intuitivnije sučelje

Jasan korisnički tijek čini konačno sučelje lakšim za razumijevanje.

Kada mapirate tok prije projektiranja, možete rano uočiti trenje. Možda korisnik mora donijeti odluku prije nego što dobije dovoljno informacija. Možda se obrazac pojavi prerano. Možda nedostaje korak potvrde. Možda postoje tri ekrana gdje bi jedan bio dovoljan.

Ako je tijek zbunjujući, vjerojatno će i sučelje biti zbunjujuće.

2. Procijenite postojeće sučelje

Korisnički tokovi izvrstan su način za optimizaciju postojećih proizvoda koji se možda ne pretvaraju ili zadržavaju prema očekivanjima. Ako korisnici ne pretvaraju, ne aktiviraju ili dovršavaju važan zadatak, mapirajte trenutni tijek.

Možda ćete otkriti da su korisnici poslani na pogrešan zaslon, da se od njih traži previše informacija ili da su prisiljeni na put koji ne odgovara njihovoj namjeri.

3. Prenesite svoju strategiju članovima tima i dionicima

Korisnički tokovi izvrsni su za suradnju. Dizajnerima, programerima, voditeljima projekata, donositeljima odluka i dionicima daju zajedničku kartu iskustva.

Dizajneri mogu koristiti tijek za planiranje zaslona. Programeri ga mogu koristiti za razumijevanje stanja i rubnih slučajeva. PM-ovi ga mogu koristiti za razjašnjavanje zahtjeva. Dionici ga mogu koristiti za pregled logike iskustva prije nego što tim investira u detaljan dizajn ili implementaciju.

Korisnički tokovi također mogu pomoći programerima da razumiju sveukupno strukturu koja stoji iza vašeg konačnog prototipa, što čini primopredaja učinkovitije.

Putovanje korisnika nasuprot tijeku korisnika

Korisnička putovanja i korisnički tokovi često se brkaju, ali nisu ista stvar.

A korisničko putovanje govori širu priču o odnosu korisnika s proizvodom. Obično uključuje korisničke ciljeve, emocije, motivacije, bolne točke i dodirne točke prije, tijekom i nakon upotrebe proizvoda.

A protok korisnika usredotočuje se na put kojim korisnik prolazi unutar proizvoda kako bi postigao određeni cilj.

Ključne razlike

Oba su korisna. Putovanje vam pomaže razumjeti kontekst korisnika. Tok vam pomaže u dizajniranju stvarnog puta kroz sučelje.

Kako stvoriti protok korisnika

Možete stvoriti korisnički tijek s pametnom pločom, alatom za dizajn, alatom za dijagrame ili alatom za dizajn AI. Format je manje važan od jasnoće puta.

1. Definirajte cilj korisnika

Započnite radnjom koju korisnik želi dovršiti.

• Napravi račun
• Kupite proizvod
• Rezervirajte demo
• Objavite web stranicu
• Pozovi suigrača
• Izvezite dizajn u kod

Tijek korisnika trebao bi se graditi oko određenog cilja, a ne nejasnog područja proizvoda.

2. Odaberite ulaznu točku

Odlučite gdje korisnik počinje. Primjeri uključuju početnu stranicu, stranicu s cijenama, rezultat pretraživanja, kampanju e-poštom, nadzornu ploču aplikacije, obavijest ili dijeljenu vezu.

Različite ulazne točke mogu stvoriti različite tokove. Ponovni korisnik i prvi posjetitelj možda neće trebati isti put.

3. Kartirajte sretan put

Sretan put je najjednostavniji uspješni put od početka do kraja.

1. Korisnik otvara stranicu s cijenama
2. Korisnik odabire plan
3. Korisnik kreira račun
4. Korisnik unosi podatke o plaćanju
5. Korisnik potvrđuje kupnju
6. Korisnik dolazi na stranicu uspjeha

To vam daje osnovno iskustvo.

4. Dodajte odluke i rubne slučajeve

Pravi korisnici ne slijede uvijek savršen put. Dodajte točke odluke kao što su:

• Da li korisnik već ima račun?
• Je li obrazac valjan?
• Je li uplata uspjela?
• Je li korisnik odabrao mjesečnu ili godišnju naplatu?
• Ima li korisnik dopuštenje za nastavak?
• Što se događa ako korisnik odustane?

Ove grane pretvaraju jednostavnu stazu u pravi UX dizajn korisnički tijek.

5. Pojednostavite tijek

Nakon što je protok mapiran, potražite trenje.

• Možemo li ukloniti korak?
• Možemo li kombinirati ekrane?
• Tražimo li informacije prerano?
• Je li sljedeća radnja očita?
• Postoji li slijepa ulica?
• Jesu li stanja grešaka jasna?
• Zna li korisnik uvijek što se dogodilo?

Najbolji protok korisnika čini se očitim jer je složenost već riješena iza kulisa.

Tokovi korisnika ukratko

Korisnički tokovi su strukturne mape za dizajn proizvoda. Oni pokazuju kako se korisnici kreću kroz aplikaciju, web mjesto ili zadatak od ulazne točke do konačne interakcije.

Snažan protok korisnika:

• Počinje s jasnim korisničkim ciljem
• Prikazuje ulaznu točku korisnika
• Kartira korake, zaslone i odluke na putu
• Uključuje važne rubne slučajeve
• Pomaže timovima u prepoznavanju trenja prije detaljnog dizajna UI
• Olakšava primopredaju za dizajnere, programere, PM-ove i dionike

Za UX timove, korisnički tokovi su jedan od najpraktičnijih alata za pretvaranje korisničkog istraživanja u strukturu sučelja. Pomažu vam da dizajnirate s namjerom umjesto da pogađate ekran po ekran.

FAQ: Korisnički tokovi

Što su tokovi korisnika?

Korisnički tokovi su dijagrami koji pokazuju put kojim korisnik prolazi kroz aplikaciju, web mjesto ili zadatak proizvoda. Obično počinju na ulaznoj točki, kao što je početna stranica ili zaslon za prijavu, a završavaju kada korisnik ispuni cilj, kao što je prijava, kupnja ili slanje obrasca.

Što je tok korisnika u UX dizajnu?

U UX dizajnu, korisnički tijek mapira korake, zaslone, odluke i radnje koje korisnik poduzima kako bi postigao cilj. UX timovi koriste korisničke tijekove za planiranje strukture proizvoda, smanjenje trenja i dizajn jasnijih sučelja prije stvaranja zaslona visoke vjernosti.

Koja je razlika između protoka korisnika i puta korisnika?

Putovanje korisnika pokazuje šire iskustvo, uključujući korisničke motivacije, emocije, bolne točke i dodirne točke. Korisnički tijek usredotočen je na određeni put kojim korisnik prolazi unutar proizvoda kako bi dovršio zadatak.

Što je tok korisničkog sučelja?

Tijek korisničkog sučelja pokazuje kako se ekrani, UI stanja, gumbi, obrasci i interakcije povezuju unutar proizvoda. Usko je povezan s korisničkim tokom, ali se više fokusira na put na razini sučelja.

Kada biste trebali izraditi korisnički tok?

Stvorite korisnički tijek nakon početnog istraživanja korisnika i prije detaljnog UI dizajna. Također možete kasnije stvoriti korisničke tokove za reviziju postojećeg proizvoda, dijagnosticiranje prekida ili poboljšanje konverzije.

Koji su primjeri protoka korisnika?

Primjeri uobičajenih korisničkih tokova uključuju tokove prijava, tokove odjave, tokove ukrcavanja, tokove prijave, tokove poništavanja lozinke, tokove rezervacija, tokove nadogradnje i tokove pozivanja suigrača.

Zašto su korisnički tokovi važni?

Korisnički tokovi pomažu timovima da razumiju kako se korisnici kreću kroz proizvod prije ulaganja u detaljan dizajn ili razvoj. Oni otkrivaju trvenja, korake koji nedostaju, zbunjujuće odluke i nepotrebnu složenost rano u procesu.

Kako postići protok korisnika?

Započnite s korisničkim ciljem, odaberite ulaznu točku, mapirajte sretan put, dodajte odluke i rubne slučajeve, zatim pojednostavnite put. Koristite krugove ili ovale za početne i krajnje točke, pravokutnike za zaslone ili akcije, dijamante za odluke i strelice za prikaz smjera.

Isprobajte Anima Playground za korisničke tokove i UX dizajn

Anima Playground omogućuje vam prijelaz od ideje proizvoda do UX tijeka, dizajna i radnog koda u pregledniku. Opišite iskustvo koje želite izgraditi, doradite ga umjetnom inteligencijom i pretvorite rezultat u pravi interaktivni proizvod.

Počnite dizajnirati sa Anima Playground.