User flow, po polsku przepływ użytkownika, to schemat kroków, które użytkownik wykonuje w produkcie, żeby osiągnąć konkretny cel, na przykład założyć konto albo opłacić zamówienie. Rysuje się go przed ekranami, bo pokazuje brakujące kroki, ślepe zaułki i obsługę błędów wtedy, gdy ich poprawienie kosztuje godzinę, a nie sprint.

User flow: co to jest

User flow opisuje kroki podejmowane przez użytkownika w celu wykonania zadania w aplikacji. Każde kliknięcie, dotknięcie i przeciągnięcie jest częścią przepływu. Nie ma znaczenia, czy chodzi o stronę internetową, aplikację mobilną czy system bankowy: każdy produkt, który pozwala na interakcję, ma własne ścieżki.

Wielu zespołom początek nowego projektu wydaje się na tyle atrakcyjny, że mniej efektowne kroki są pomijane. User flow bywa wtedy uznawany za narzędzie, które nie wnosi nic odkrywczego, albo po prostu brakuje na niego czasu, tak jak na research. Pominięcie architektury informacji prawie zawsze wraca w projekcie jako dług projektowy: niedopracowane funkcje, niezakończone procesy, luki w obsłudze błędów i poprawki na etapie wdrożenia, które kosztują więcej niż narysowanie schematu.

User flow to mapa, która prowadzi do celu

Wyobraźmy sobie planowanie wyprawy na odległy kontynent. Jest załoga, gotowy statek i cel. Potrzebna jest jeszcze mapa, dzięki której statek dotrze na miejsce, a załoga zawczasu przewidzi prądy morskie, mielizny i statki piratów w pobliżu trasy. Im więcej niebezpieczeństw zostanie przewidzianych przed wypłynięciem, tym mniejsze ryzyko, że wyprawa skończy się na dnie.

User flow pełni rolę takiej mapy. Dzięki niemu każda osoba w zespole wie, gdzie w produkcie się znajduje i dokąd prowadzi dany krok. Projektowanie aplikacji to równoważenie funkcji i użyteczności. Z jednej strony użytkownik ma dotrzeć do najważniejszych funkcji przy możliwie małej liczbie interakcji. Z drugiej produkt zawiera wiele treści i sytuacji wyjątkowych, takich jak błędy, brak danych czy brak uprawnień, które trzeba obsłużyć, żeby całość działała. Schemat przepływu jest też dobrym szkieletem do mapy podróży użytkownika (customer journey map). Kolejność kroków porównuje się z tym, czego spodziewa się użytkownik, a to opisuje model mentalny użytkownika.

Rodzaje user flow

Schemat blokowy. Sekwencja kroków i decyzji zapisana zestawem umownych symboli: prostokąt oznacza krok, romb decyzję, strzałka kierunek. Symbole schematów blokowych opisuje norma ISO 5807:1985. Ten typ powstaje najwcześniej, zanim istnieją jakiekolwiek ekrany.
Wireflow. Połączenie schematu blokowego z makietami. Nielsen Norman Group definiuje wireflow jako format specyfikacji, który łączy układy ekranów w stylu makiet z uproszczonym, schematycznym zapisem interakcji. Sprawdza się w aplikacjach, w których ekran zmienia zawartość bez przejścia na nową stronę.

Jak wygląda przykładowy user flow

Przykład dla rejestracji konta w aplikacji webowej, zapisany jako schemat blokowy w formie listy:

Wejście: strona główna albo link z zaproszenia.
Krok: formularz rejestracji (adres e-mail, hasło).
Decyzja: czy dane są poprawne? Jeśli nie, komunikat przy polu i powrót do formularza.
Decyzja: czy konto z tym adresem już istnieje? Jeśli tak, przejście do logowania albo odzyskiwania hasła.
Krok: wysłanie wiadomości z linkiem potwierdzającym i ekran z informacją, co dalej.
Decyzja: czy link został kliknięty w czasie ważności? Jeśli nie, ekran z możliwością ponownego wysłania.
Krok: pierwsze logowanie i ekran powitalny.
Wyjście: pulpit aplikacji.

W tym krótkim schemacie widać trzy ścieżki alternatywne. Każda z nich to ekran albo komunikat, który trzeba zaprojektować i zaprogramować. Bez schematu wychodzą na jaw dopiero w testach. Na tym samym schemacie planuje się zabezpieczenia formularza, które zestawia wpis ochrona formularzy przed spamem.

Analiza procesu na wczesnym etapie projektu

User flow koncentruje się na ścieżce użytkownika. Składa się z prostych figur i strzałek i nie musi być liniowy: może mieć ścieżki alternatywne i pętle. Jego podstawowy cel to sprawdzenie, czy każdy proces, od wejścia do aplikacji po założony cel, ma początek, koniec i obsługę odstępstw. Kto tę ścieżkę przechodzi, opisują persony i proto-persony.

Schemat pozwala całemu zespołowi zobaczyć złożony projekt w jednym miejscu. Cele i funkcje stają się zrozumiałe dla managerów, programistów, analityków i projektantów. W Squares rysujemy user flow na początku projektu i aktualizujemy go przez cały czas jego trwania, razem ze zmieniającym się zakresem. Rozmowa nad konkretną ścieżką już na wczesnym etapie ujawnia elementy trudne albo niemożliwe do wdrożenia, zanim ktokolwiek zacznie je projektować. Gdy sam proces biznesowy nie jest jeszcze znany, przed schematem pomaga warsztat Event Storming.

Dlaczego warto utrzymywać user flow przez cały projekt

Mniejsze ryzyko luk w ścieżce użytkownika i niezakończonych procesów.
Jeden widok pełnej ścieżki, od wejścia do celu.
Podstawa do stawiania hipotez: w których miejscach korzystanie z aplikacji może być trudne i gdzie użytkownicy mogą rezygnować.
Możliwość porównania alternatywnych rozwiązań, zanim powstaną ekrany.
Łatwiejsze wprowadzanie zmian i zarządzanie zakresem, co ogranicza poprawki na etapie wdrożenia.
Podstawa do prototypu: gdy ścieżka jest ustalona, projektant skupia się na konkretnych ekranach, a nie na tym, co ma nastąpić po nich.
Wspólne źródło wiedzy dla programistów, analityków biznesowych, Product Ownerów i projektantów.
Punkt odniesienia dla analityki: zdarzenia mierzone w produkcie odpowiadają krokom na schemacie, więc łatwo sprawdzić, która ścieżka działa.

Narzędzia do rysowania user flow

Narzędzie	Do czego się nadaje
Kartka albo tablica	We wczesnej fazie nic nie zastąpi białej tablicy i wspólnej pracy zespołu. Brudnopis pozwala szybko sprawdzić koncepcję ścieżki, zanim ktokolwiek otworzy program.
FigJam	Tablica online z kształtami i łącznikami do schematów blokowych. Dobra do pracy z osobami spoza zespołu projektowego, a schemat zostaje obok plików projektowych w Figmie.
Figma	Wireflow na gotowych makietach albo ekranach. Naturalny wybór, gdy projekt interfejsu powstaje w tym samym narzędziu.
Miro	Tablica do warsztatów: mapy myśli, user story mapping i proste przepływy rysowane wspólnie z interesariuszami.
Whimsical	Szybkie schematy blokowe z gotowymi kształtami, także generowane z opisu tekstowego.
Overflow	Diagramy przepływu i prezentacje projektu budowane na ekranach zsynchronizowanych z Figmy lub Sketcha.

Narzędzie ma mniejsze znaczenie niż nawyk aktualizacji. Schemat, który przestał odpowiadać produktowi, wprowadza w błąd skuteczniej niż jego brak.

User flow w projektach Squares

Schemat przepływu jest u nas stałym elementem projektowania UX/UI: powstaje przed makietami i służy potem jako spis ekranów do zaprojektowania i wdrożenia. Gdy produkt już działa, ten sam schemat porządkuje audyt UX/UI, bo pokazuje, które ścieżki sprawdzić w pierwszej kolejności.

Najczęstsze pytania

Czym user flow różni się od mapy podróży klienta?

User flow to schemat kroków, które użytkownik wykonuje w samym produkcie, żeby osiągnąć konkretny cel, razem z decyzjami, ścieżkami alternatywnymi i obsługą błędów. Mapa podróży klienta (customer journey map) ma szerszy zakres i obejmuje także to, co dzieje się poza produktem. Schemat przepływu jest dobrym szkieletem do takiej mapy.

W czym narysować user flow?

We wczesnej fazie wystarcza kartka albo tablica. Do schematów blokowych nadają się FigJam i Whimsical, do wireflow na gotowych ekranach Figma, do warsztatów z interesariuszami Miro, a do prezentacji przepływu na ekranach z Figmy lub Sketcha Overflow. Narzędzie ma mniejsze znaczenie niż nawyk aktualizowania schematu razem z produktem.

User flow: co to jest i jak go narysować