User flow i badania UX - persona, customer journey, wywiady i przykłady

User flow (przepływ użytkownika) to diagram przedstawiający kolejne ekrany, decyzje i działania, przez które przechodzi osoba korzystająca ze strony internetowej lub aplikacji, zanim zrealizuje swój cel. Żeby taki diagram miał sens, trzeba wcześniej wiedzieć, kim jest ta osoba, czego szuka i co ją powstrzymuje - i właśnie tę wiedzę dostarczają badania z odbiorcami oraz persony.

W tym artykule opisujemy trzy narzędzia, które w dobrym procesie projektowym występują razem: rozmowy i obserwacje użytkowników (w tym wywiady), persony i user flow, a także ich rozszerzenie w postaci mapy podróży klienta. Pokazujemy, jak przygotować każde z nich krok po kroku, jakich błędów unikać i kiedy warto zlecić tę pracę agencji. Jeśli dopiero zaczynasz przygodę z tematem, najpierw przeczytaj, czym jest UX i dlaczego jest ważny.

Czym są badania UX i po co się je robi?

Badania UX (user research) to zestaw metod pozwalających poznać potrzeby, zachowania, motywacje i problemy użytkowników produktu cyfrowego. Robi się je po to, żeby decyzje projektowe - co umieścić na stronie, w jakiej kolejności i jakim językiem - wynikały z wiedzy o odbiorcach, a nie z opinii najgłośniejszej osoby w zespole.

Research odpowiada na pytania, na które nie odpowie żaden szablon: dlaczego klient wybiera konkurencję, jakich informacji szuka przed kontaktem, czego się obawia, jakimi słowami opisuje swój problem. Bez tej wiedzy nawet dopracowany wizualnie projekt strony internetowej opiera się na założeniach, które mogą okazać się nietrafione dopiero po starcie - kiedy poprawki są najdroższe.

Research a audyt UX - czym się różnią?

Research prowadzi się przede wszystkim przed projektem, żeby zrozumieć ludzi i ich potrzeby. Audyt UX to ocena istniejącej strony - sprawdza, gdzie obecny serwis traci klientów. Oba działania się uzupełniają: audyt wskazuje problemy na działającej witrynie, a research pomaga zaprojektować rozwiązania, które te problemy usuną.

Najważniejsze metody badawcze

Metody dzieli się na jakościowe i ilościowe. Metody jakościowe (wywiady, obserwacja, testy z kilkoma osobami) odpowiadają na pytanie "dlaczego". Metody ilościowe (ankiety, analityka, mapy cieplne) odpowiadają na pytania "ile" i "gdzie". Najlepsze wyniki daje połączenie obu podejść.

• Wywiady pogłębione (IDI): rozmowy jeden na jeden z obecnymi lub potencjalnymi klientami.
• Ankiety: szybkie potwierdzenie hipotez na większej grupie odbiorców.
• Analiza danych: zachowania na obecnej stronie - wejścia, wyjścia, wyszukiwane frazy, urządzenia.
• Wywiady z zespołem sprzedaży i obsługi: najczęstsze pytania i obiekcje klientów.
• Analiza konkurencji: jak inne firmy prowadzą odbiorcę do decyzji.
• Testy użyteczności: obserwacja, jak ludzie wykonują zadania na prototypie lub stronie.
• Sortowanie kart: sprawdzenie, jak odbiorcy grupują treści - pomaga zaplanować menu.

Jak przeprowadzić wywiady z użytkownikami?

Wywiad z użytkownikiem to rozmowa trwająca zwykle 30-60 minut, w której badacz zadaje otwarte pytania o doświadczenia, potrzeby i sposób podejmowania decyzji przez rozmówcę. Do zidentyfikowania głównych wzorców wystarcza zazwyczaj 5-8 rozmów z każdą ważną grupą odbiorców.

Wywiady są najcenniejszym źródłem wiedzy do tworzenia person i diagramów przepływu, bo pokazują język klientów, ich obawy i realny przebieg decyzji. Dobrze przeprowadzone rozmowy często ujawniają rzeczy, o których firma nie miała pojęcia - na przykład, że klienci wcale nie porównują cen, tylko szukają dowodu, że wykonawca zna ich branżę.

Kogo zaprosić do rozmowy

• Obecnych klientów: pamiętają, dlaczego wybrali firmę i co prawie ich zniechęciło.
• Osoby, które nie kupiły: wiedzą, co przeważyło na korzyść konkurencji.
• Potencjalnych odbiorców: ludzi z grupy docelowej, którzy jeszcze nie znają marki.
• Pracowników pierwszej linii: handlowców i obsługę klienta, którzy słyszą pytania codziennie.

Jakie pytania zadawać

Zasada jest prosta: pytaj o przeszłe zachowania, a nie o hipotetyczne opinie. Pytanie "czy skorzystałbyś z takiej funkcji?" daje odpowiedzi życzeniowe. Pytanie "opowiedz, jak ostatnio szukałeś wykonawcy" pokazuje prawdziwy proces.

1. Opowiedz, w jakiej sytuacji zaczął się problem, który chciałeś rozwiązać.
2. Gdzie szukałeś informacji i od czego zacząłeś?
3. Jakie firmy lub rozwiązania brałeś pod uwagę?
4. Co sprawiło, że jedne odrzuciłeś, a inne zostawiłeś na liście?
5. Czego się obawiałeś przed podjęciem decyzji?
6. Jakiej informacji najbardziej brakowało na stronach, które odwiedzałeś?
7. Co ostatecznie przekonało cię do wyboru?

Najczęstsze błędy w wywiadach

• Pytania sugerujące: "Prawda, że ta strona jest przejrzysta?" - rozmówca przytaknie z grzeczności.
• Prezentowanie zamiast słuchania: badacz mówi więcej niż rozmówca.
• Rozmowy tylko z zadowolonymi klientami: najwięcej uczą ci, którzy zrezygnowali.
• Brak notatek i nagrań: po trzech rozmowach wszystko zlewa się w jedno.
• Wnioski z jednej rozmowy: wzorzec to coś, co powtarza się u kilku osób.

Czym jest persona UX i jak ją stworzyć?

Persona UX to opis fikcyjnej, ale realistycznej postaci reprezentującej ważną grupę odbiorców - z jej celami, potrzebami, obawami, kontekstem i sposobem podejmowania decyzji. Taki opis powstaje na podstawie danych z badań, dzięki czemu zespół projektowy może zadawać sobie pytanie "czy to pomoże Annie?" zamiast "czy nam się to podoba?".

Dobry opis odbiorcy nie jest segmentem marketingowym opisanym wiekiem i dochodem. Jej sercem są cele i bariery: co ta osoba chce osiągnąć, co ją frustruje, czego potrzebuje, żeby zaufać firmie. Wiek czy zdjęcie to tylko dodatki, które pomagają zespołowi "zobaczyć" człowieka.

Co powinien zawierać opis persony

Jak stworzyć personę krok po kroku

1. Zbierz dane: wywiady, ankiety, analityka, rozmowy z działem sprzedaży.
2. Znajdź wzorce: pogrupuj powtarzające się cele, obawy i zachowania.
3. Wyodrębnij grupy: zwykle 2-4 persony wystarczą dla strony firmowej.
4. Opisz każdą personę: kontekst, cel, bariery, kryteria wyboru, cytaty z wywiadów.
5. Ustal personę główną: tę, dla której projekt musi działać najlepiej.
6. Zweryfikuj z zespołem: czy sprzedawcy rozpoznają w opisie prawdziwych klientów?
7. Używaj w projekcie: ten opis ma być punktem odniesienia przy każdej decyzji.

Persony z danych a persony z wyobraźni

Najczęstszym błędem jest tworzenie person na warsztacie bez żadnych danych - zespół opisuje wtedy klientów takich, jakich chciałby mieć, a nie takich, jacy są. Taki opis potwierdza tylko istniejące założenia. Druga pułapka to zbyt wiele person: przy siedmiu opisach nikt nie pamięta żadnego, a projekt próbuje zadowolić wszystkich naraz.

Po kilku wywiadach niemal zawsze okazuje się, że klient szuka na stronie czegoś innego, niż zakładał zespół. Firma chwali się technologią, a klienci chcą wiedzieć, ile to kosztuje, jak długo trwa i czy ktoś odbierze telefon, gdy coś przestanie działać. Persony i ścieżki zbudowane na takich rozmowach od razu przestawiają priorytety na stronie.

Krzysztof Domiński, Smartwww

Czym jest user flow i jak go zaprojektować?

User flow to wizualne przedstawienie ścieżki, którą użytkownik przechodzi przez stronę lub aplikację, żeby wykonać jedno konkretne zadanie - na przykład wysłać zapytanie ofertowe, zapisać się na wizytę albo kupić produkt. Diagram pokazuje punkt wejścia, kolejne ekrany, decyzje (rozgałęzienia) oraz punkt końcowy.

Przepływ użytkownika pozwala zobaczyć całą drogę naraz, zanim powstanie choćby jedna makieta. Dzięki temu łatwo wychwycić zbędne kroki, ślepe zaułki i miejsca, w których brakuje informacji potrzebnej do podjęcia decyzji. To także wspólny język dla projektanta, programisty i klienta - każdy widzi, jak ma działać serwis.

W anglojęzycznych materiałach ten sam dokument nazywa się user flow diagram albo flow chart, poszczególne kroki to user actions, a możliwe trasy przez serwis - user paths. Zbiory gotowych przykładów (user flow examples) pomagają zacząć, ale ścieżka zawsze powinna wynikać z celów konkretnych odbiorców, a nie z szablonu.

Z czego składa się diagram user flow

• Punkt wejścia: skąd przychodzi użytkownik - wyszukiwarka, reklama, newsletter, link polecający.
• Ekrany (prostokąty): konkretne podstrony lub widoki, które odwiedza.
• Decyzje (romby): momenty wyboru, na przykład "zalogowany czy nie?".
• Działania (strzałki): kliknięcia i przejścia pomiędzy ekranami.
• Punkt końcowy: cel - wysłany formularz, zakup, rezerwacja.
• Ścieżki alternatywne: co się dzieje, gdy coś pójdzie nie tak, na przykład błąd płatności.

Jak zaprojektować user flow krok po kroku

1. Wybierz personę i cel: jeden flow opisuje jedno zadanie jednej grupy odbiorców.
2. Określ punkty wejścia: osoba z reklamy trafia na inną podstronę niż osoba z bloga.
3. Wypisz informacje potrzebne do decyzji: cena, termin, opinie, przykłady realizacji.
4. Rozrysuj kroki: ekrany, decyzje i działania od wejścia do celu.
5. Skróć ścieżkę: usuń kroki, które nie przybliżają do celu.
6. Dodaj ścieżki alternatywne: błędy, powroty, rezygnacje.
7. Sprawdź na prototypie: przetestuj przepływ z kilkoma osobami z grupy docelowej.

Przykład user flow dla strony usługowej

Weźmy firmę remontową. Odbiorca: właściciel mieszkania, który szuka wykonawcy łazienki i przegląda strony wieczorem na telefonie. Cel: wysłanie zapytania z opisem prac. Prosta ścieżka wygląda tak: wyniki wyszukiwania -> podstrona "Remont łazienki" -> decyzja "czy cena mieści się w budżecie?" -> galeria realizacji -> opinie klientów -> krótki formularz (4 pola + zdjęcia) -> strona podziękowania z informacją, kiedy nastąpi kontakt.

Już ten szkic pokazuje wymagania dla projektu: podstrona usługi musi zawierać widełki cenowe, galeria musi być dostępna bez wychodzenia z tej podstrony, a formularz musi działać wygodnie na telefonie i pozwalać dołączyć zdjęcia. Tak diagram przepływu przekłada się bezpośrednio na wireframe, makietę i prototyp.

Rodzaje diagramów przepływu

Angielskie pojęcia, które spotkasz w materiałach o UX design

Większość poradników i narzędzi do projektowania jest anglojęzyczna, dlatego warto znać podstawowe określenia. Typowa definicja brzmi: "a user flow is the series of steps a user takes to complete a task in a website or app" - czyli seria kroków, które użytkownik wykonuje, żeby zrealizować zadanie na stronie lub w aplikacji. Inne sformułowania, na które trafisz w szablonach narzędzi: "user flows are simple diagrams of the user journey", "create a user flow for each user goal" albo "the user flow diagram shows where the user might leave".

• User flow diagram (flow diagram): diagram przepływu - graficzny zapis kroków i decyzji.
• User flow examples: przykłady gotowych diagramów, na przykład rejestracji, zakupu czy onboardingu w aplikacji (the app).
• User paths: rzeczywiste trasy, którymi ludzie przechodzą przez serwis - widoczne w analityce.
• User actions i user interactions: kliknięcia, przewijanie, wypełnianie pól - pojedyncze działania na ścieżce.
• User goals: cele użytkownika, od których zaczyna się każdy dobry user flow.
• The user journey: podróż użytkownika - szerszy kontekst, w którym osadzony jest flow.
• UX designers i product design: projektanci doświadczeń i projektowanie produktów cyfrowych, dla których user flows are podstawowym narzędziem pracy.

Czym różni się user flow od user journey i customer journey?

User flow opisuje ścieżkę użytkownika w obrębie strony lub aplikacji (website or app) do jednego celu, krok po kroku. User journey i mapa podróży klienta opisują szerszą drogę - od momentu, gdy klient uświadamia sobie potrzebę, przez porównywanie ofert w różnych kanałach, aż po zakup, obsługę posprzedażową i polecenie marki innym.

Najprościej: customer journey odpowiada na pytanie "jak klient trafia do nas i dlaczego zostaje", a user flow - "jak konkretnie przechodzi przez stronę do wysłania zapytania". Mapa podróży klienta pokazuje emocje, punkty styku i kanały (telefon, wyszukiwarka, media społecznościowe, sklep stacjonarny). Diagram przepływu pokazuje ekrany, przyciski i decyzje. W praktyce najpierw powstaje mapa podróży, a potem - dla najważniejszych etapów, które dzieją się online - szczegółowe diagramy ścieżek.

Jak zbudować mapę podróży klienta

1. Wybierz personę: mapa opisuje podróż jednej grupy klientów.
2. Określ etapy: na przykład potrzeba, poszukiwanie, porównanie, decyzja, zakup, obsługa, polecenie.
3. Wypisz punkty styku: gdzie na każdym etapie klient spotyka markę.
4. Dodaj działania i myśli: co robi i co myśli klient - najlepiej cytatami z wywiadów.
5. Zaznacz emocje: momenty frustracji i satysfakcji.
6. Znajdź szanse: gdzie strona internetowa może usunąć wątpliwość lub przyspieszyć decyzję.

Jakie narzędzia służą do tworzenia user flow i person?

Do tworzenia diagramów przepływu, person i map podróży klienta wystarczy tablica z kartkami, ale w pracy zespołowej sprawdzają się narzędzia online. Wybór narzędzia ma drugorzędne znaczenie - liczy się jakość danych, na których opiera się diagram.

• FigJam i Figma: diagramy, wireflow i prototypy w jednym miejscu - to standard w UX design.
• Miro: tablice do warsztatów, gotowe szablony person i map podróży klienta.
• Whimsical i Lucidchart: szybkie schematy z gotowymi symbolami.
• Narzędzia analityczne: raporty ścieżek pokazują rzeczywiste user paths na istniejącej stronie.
• Nagrania sesji i mapy cieplne: pokazują user interactions - kliknięcia, przewijanie, wahanie.
• Narzędzia do wywiadów zdalnych: wideorozmowy z nagrywaniem i automatyczną transkrypcją.

Jak research, persony i user flow wpływają na projekt strony?

Research, persony i diagramy przepływu są fundamentem etapu discovery - pierwszej fazy procesu projektowego (UX design process), która poprzedza architekturę informacji, makiety i projekt graficzny. To, co zostanie ustalone na tym etapie, decyduje o strukturze menu, kolejności sekcji, treściach i funkcjach całego serwisu.

W dobrze prowadzonym procesie projektowania stron internetowych wyniki badań przekładają się bezpośrednio na konkretne decyzje. Opis odbiorcy mówi, dla kogo projektujemy i jakim językiem piszemy. Mapa podróży pokazuje, na którym etapie decyzji jest odbiorca, gdy wchodzi na stronę. User flow wyznacza ścieżki, które muszą działać bez zarzutu. Dopiero potem powstają makiety, a projektant UI nadaje im wygląd - różnicę między tymi rolami opisujemy w tekście o tym, czym UX różni się od UI.

Co zyskuje firma

• Mniej poprawek po starcie: błędne założenia wychodzą na etapie diagramu, a nie gotowej strony.
• Krótsze ścieżki do konwersji: dobry diagram usuwa zbędne kroki i ślepe zaułki.
• Lepsze treści: teksty pisane językiem klientów, odpowiadające na ich realne obawy.
• Spójność zespołu: marketing, sprzedaż i programiści pracują na tym samym obrazie klienta.
• Lepsze doświadczenie użytkownika (user experience): strona prowadzi odbiorcę do celu, zamiast zmuszać go do szukania.
• Łatwiejsze skalowanie: persony i flow przydają się przy kampaniach, rozbudowie i design systemie.

Jakich błędów unikać przy personach i diagramach przepływu?

Najczęstsze błędy przy opisach odbiorców i user flow wynikają z pomijania badań i próby opisania wszystkich możliwych scenariuszy naraz. Dobry diagram przepływu jest prosty, opiera się na danych i skupia na celach użytkownika (user goals), a nie na strukturze firmy.

• Persony bez badań: opis wymarzonego klienta zamiast prawdziwego.
• Za dużo person: projekt dla wszystkich jest projektem dla nikogo.
• User flow od strony głównej: większość osób wchodzi na podstrony z wyszukiwarki, a nie przez stronę główną.
• Jeden flow na wszystko: każde ważne zadanie wymaga osobnego diagramu.
• Brak ścieżek alternatywnych: błędy, rezygnacje i powroty też muszą być zaprojektowane.
• Dokumenty do szuflady: persony i diagramy powstają, ale nikt z nich nie korzysta przy projektowaniu.
• Brak aktualizacji: klienci i rynek się zmieniają - persony warto przeglądać co rok.

Ile kosztują badania UX i kiedy warto je zlecić agencji?

Koszt researchu zależy od liczby wywiadów, person i ścieżek do rozrysowania. W przypadku stron firmowych i sklepów internetowych ceny zaczynają się od około 1500 zł netto za warsztat discovery, a pełny pakiet z wywiadami, opisami person, mapą podróży klienta i diagramami przepływu kosztuje zwykle od 5000 do 15 000 zł netto.

Ceny mają charakter orientacyjny i zależą od branży, liczby grup odbiorców oraz tego, czy rozmówców rekrutuje firma, czy agencja. Pełne widełki cenowe projektów opisujemy w artykule o tym, ile kosztuje strona internetowa.

Kiedy warto zlecić research

• Przed budową nowej strony: gdy nie wiesz dokładnie, czego szukają klienci ani jak podejmują decyzję.
• Przed redesignem: gdy obecna strona ma ruch, ale nie generuje zapytań.
• Przy wejściu na nowy rynek lub z nową usługą: gdy dotychczasowa wiedza o klientach nie wystarcza.
• Przy sklepie internetowym: gdy klienci porzucają koszyk, a nie wiadomo dlaczego.
• Gdy zespół się spiera: dane z badań kończą dyskusje oparte na gustach.

Jak pracujemy w Smartwww

W Smartwww etap discovery jest stałym elementem każdego projektu - od prostych stron firmowych po rozbudowane sklepy internetowe. Zaczynamy od rozmowy o celach i danych, przeprowadzamy wywiady z klientami lub zespołem sprzedaży, tworzymy persony i diagramy przepływu dla najważniejszych ścieżek, a dopiero potem przechodzimy do makiet i projektu graficznego. Dzięki temu strona od pierwszego dnia prowadzi odbiorców do kontaktu lub zakupu.

Jeśli planujesz nowy serwis, sprawdź naszą ofertę tworzenia stron internetowych. Gdy zależy ci także na ruchu z wyszukiwarki, połączymy research z analizą fraz, którymi klienci szukają twoich usług, w ramach usługi pozycjonowania SEO. Wstępną wycenę przygotujemy po krótkiej rozmowie - wystarczy formularz kontaktowy.

Słownik pojęć

• Badania UX (user research): metody poznawania potrzeb i zachowań użytkowników.
• Persona: archetyp odbiorcy opisany na podstawie danych z badań.
• Protopersona: wstępny opis odbiorcy oparty na wiedzy zespołu, do weryfikacji w badaniach.
• User flow: diagram ścieżki użytkownika do jednego celu na stronie lub w aplikacji.
• Task flow: uproszczony, liniowy przepływ jednego zadania bez rozgałęzień.
• Wireflow: diagram przepływu z miniaturami ekranów.
• Customer journey: mapa całej podróży klienta z marką, także poza stroną.
• Punkt styku: każde miejsce kontaktu klienta z firmą.
• Discovery: pierwsza faza projektu, w której zbiera się wiedzę przed projektowaniem.
• IDI: indywidualny wywiad pogłębiony.

Najczęstsze pytania

Co to jest user flow?

User flow to diagram pokazujący kroki, które użytkownik wykonuje na stronie lub w aplikacji, żeby osiągnąć konkretny cel - na przykład wysłać formularz, zarezerwować termin albo kupić produkt. Zawiera punkt wejścia, ekrany, decyzje i punkt końcowy.

Czym różni się user flow od user journey?

User flow opisuje jedną ścieżkę na stronie, krok po kroku. User journey obejmuje całą relację klienta z marką - od pojawienia się potrzeby, przez porównywanie ofert w różnych kanałach, po zakup i obsługę posprzedażową.

Ile person potrzebuje strona firmowa?

Zwykle 2-4. Jedna główna, dla której strona musi działać najlepiej, i jedna do trzech drugorzędnych. Większa liczba rozmywa priorytety projektu.

Ile wywiadów trzeba przeprowadzić?

Dla każdej ważnej grupy odbiorców wystarcza zazwyczaj 5-8 rozmów. Po takiej liczbie odpowiedzi zaczynają się powtarzać, a kolejne wywiady wnoszą niewiele nowego.

Czy mała firma potrzebuje researchu?

Tak, ale w mniejszej skali. Nawet kilka rozmów z klientami i jeden warsztat pozwalają uniknąć najdroższych błędów. Pełny pakiet badań ma sens przy większych serwisach i sklepach.

W jakim programie narysować user flow?

Najczęściej w FigJam, Miro, Whimsical lub Lucidchart. Na początek wystarczy kartka i długopis - ważniejsze od narzędzia są dane o użytkownikach i jasno określony cel ścieżki.

Czy persony można stworzyć bez badań?

Można przygotować protopersony na podstawie wiedzy zespołu, ale trzeba je potem zweryfikować w rozmowach z klientami. Persony oparte wyłącznie na przypuszczeniach często utrwalają błędne założenia.

Jak długo trwa research przed projektem strony?

Warsztat discovery zajmuje jeden dzień plus opracowanie. Pakiet z wywiadami, opisami odbiorców i diagramami przepływu to zwykle 2-4 tygodnie, zależnie od dostępności rozmówców.