Przepływy użytkowników: czym są i dlaczego mają znaczenie w projektowaniu UX17 min read

Świetny UX nie zaczyna się od pikseli. Zaczyna się od zrozumienia, co użytkownicy próbują zrobić, gdzie wchodzą do produktu, jakie decyzje muszą podjąć i jaka ścieżka prowadzi ich do pomyślnego wyniku.

Ścieżka ta nazywa się a przepływ użytkowników.

Przepływ użytkownika to wizualna mapa kroków, jakie osoba wykonuje w aplikacji, witrynie internetowej lub konkretnym zadaniu. Może pokazywać pełne doświadczenie produktu, np. wprowadzenie do aplikacji SaaS, lub mniejszy przepływ, np. rejestrację, rezerwację wersji demonstracyjnej, subskrypcję biuletynu lub dokończenie transakcji.

Dla projektantów, zespołów produktowych i założycieli UX przepływ użytkowników jest jednym z najprostszych sposobów projektowania lepszych interfejsów przed przystąpieniem do tworzenia szczegółowych ekranów. Pomagają Ci zobaczyć, gdzie użytkownicy mogą się zdezorientować, gdzie przepływ ma zbyt wiele kroków i które ekrany faktycznie musisz zaprojektować.

W tym przewodniku wyjaśnimy, czym są przepływy użytkowników, jak je czytać, kiedy je tworzyć i w jaki sposób wspierają lepszy projekt UX.

Spróbuj zaprojektować przepływy użytkowników za pomocą sztucznej inteligencji

Opisz przepływ użytkownika, który chcesz zaprojektować, a następnie pozwól Anima przekształcić go w UX, ekrany i kod.

Co to jest przepływ użytkowników?

A przepływ użytkowników to diagram przedstawiający ścieżkę, jaką podąża użytkownik, aby osiągnąć cel w produkcie. W projekcie UX produktem tym jest zwykle aplikacja, witryna internetowa, aplikacja internetowa lub usługa cyfrowa.

Przepływ użytkownika rozpoczyna się od punktu wejścia, takiego jak strona główna, strona docelowa, wynik wyszukiwania, link e-mail, ekran logowania lub koszyk. Kończy się końcową interakcją, taką jak utworzenie konta, sfinalizowanie zakupu, przesłanie formularza, opublikowanie projektu lub dotarcie do strony z potwierdzeniem.

Przepływ użytkownika może reprezentować:

• Pełna podróż po produkcie, obejmująca odkrywanie, rejestrowanie się i używanie nowej aplikacji
• Pojedyncze zadanie, np. resetowanie hasła lub aktualizacja planu
• Przepływ funkcji, taki jak tworzenie projektu, zapraszanie członka zespołu lub eksportowanie projektu
• Schemat interfejsu użytkownika pokazujący sposób łączenia ekranów wewnątrz produktu

Cel jest prosty: oczyścić ścieżkę użytkownika, zanim szczegółowo zaprojektujesz interfejs.

Przykład podstawowej struktury przepływu użytkowników

Przepływ użytkownika a przepływ interfejsu użytkownika

Warunki przepływ użytkowników i przepływ interfejsu użytkownika są blisko spokrewnione.

Przepływ użytkownika koncentruje się na ścieżce użytkownika do celu. Odpowiada na pytania takie jak:

• Od czego zaczyna użytkownik?
• Jakie działanie próbują wykonać?
• Jakie decyzje podejmują po drodze?
• Co się stanie, jeśli odniosą sukces, porażkę lub wybiorą inną drogę?

Przepływ interfejsu użytkownika koncentruje się bardziej szczegółowo na sposobie łączenia ekranów, stanów, przycisków, formularzy i elementów interfejsu. Odpowiada na pytania takie jak:

• Który ekran nastąpi po tym?
• Co się stanie, gdy użytkownik kliknie ten przycisk?
• Dokąd prowadzi ten stan błędu?
• Co widzi użytkownik po przesłaniu formularza?

W praktyce zespoły UX często używają obu razem. Przepływ użytkownika definiuje ścieżkę. Przepływ interfejsu użytkownika sprawia, że ​​ta ścieżka jest konkretna wewnątrz produktu UI.

Jak czytać przepływ użytkownika

Przepływ użytkownika określa kroki, które użytkownik wykonuje od punktu wejścia do końcowej interakcji. Każdy krok jest zwykle reprezentowany przez kształt, zwany także węzłem. Węzły są połączone strzałkami wskazującymi kierunek ruchu.

Większość diagramów przepływu użytkownika używa prostego języka wizualnego:

• Okrąg lub owal: Punkt początkowy lub końcowy
• Prostokąt: Ekran, strona lub akcja
• Diament: Punkt decyzji, taki jak tak/nie, sukces/porażka lub wybór ścieżki
• Strzałka: Kierunek ruchu pomiędzy stopniami

Wyjaśnienie komponentów przepływu użytkownika

Na przykład prosty proces rejestracji użytkownika może wyglądać następująco:

1. Użytkownik ląduje na stronie głównej
2. Użytkownik klika „Rozpocznij bezpłatnie”
3. Użytkownik wprowadza adres e-mail i hasło
4. System sprawdza, czy e-mail jest prawidłowy
5. Użytkownik potwierdza konto
6. Użytkownik dociera do ekranu wprowadzania
7. Użytkownik kończy konfigurację
8. Użytkownik ląduje w panelu kontrolnym

Tego rodzaju przykład przepływu użytkowników pomaga zespołowi zrozumieć doświadczenie przed zaprojektowaniem każdego ekranu.

Przykłady przepływu użytkowników

Przepływy użytkowników stają się łatwiejsze do zrozumienia, gdy połączysz je z rzeczywistymi zadaniami produktu. Oto kilka typowych przykładów przepływu użytkowników tworzonych przez zespoły UX podczas planowania produktu.

Przepływ użytkownika rejestracji

Przepływ użytkownika podczas rejestracji odwzorowuje sposób, w jaki nowy użytkownik staje się zarejestrowanym użytkownikiem.

1. Odwiedź stronę docelową
2. Kliknij przycisk wezwania do rejestracji
3. Wybierz metodę rejestracji
4. Wprowadź dane konta
5. Zweryfikuj adres e-mail
6. Zakończ wdrażanie
7. Dotrzyj do panelu produktu

Ten przepływ pomaga zespołom zmniejszyć tarcia podczas pierwszego doświadczenia. Jeśli rejestracja obejmuje zbyt wiele kroków, niejasne pola formularza lub mylące stany weryfikacji, użytkownicy mogą zrezygnować, zanim w ogóle zobaczą produkt.

Sprawdź przepływ użytkowników

Przepływ użytkownika przy kasie odwzorowuje sposób, w jaki użytkownik przechodzi od zainteresowania produktem do zakupu.

1. Wyświetl stronę produktu lub cennika
2. Dodaj element lub wybierz plan
3. Przejrzyj szczegóły koszyka lub planu
4. Wprowadź informacje o płatności
5. Potwierdź zakup
6. Przejdź do strony sukcesu lub potwierdzenia

Ten przepływ jest szczególnie ważny w przypadku e-commerce, SaaS i produktów subskrypcyjnych, ponieważ każdy dodatkowy krok może mieć wpływ na konwersję.

Przepływ użytkownika dotyczący resetowania loginu i hasła

Przepływ logowania odwzorowuje sposób, w jaki powracający użytkownicy uzyskują dostęp do swojego konta, w tym przypadki brzegowe.

1. Otwórz stronę logowania
2. Wprowadź dane uwierzytelniające
3. System sprawdza wprowadzone dane
4. Użytkownik loguje się pomyślnie lub widzi błąd
5. W razie potrzeby użytkownik rozpoczyna resetowanie hasła
6. Użytkownik potwierdza e-mail
7. Użytkownik ustawia nowe hasło
8. Użytkownik wraca do produktu

Przykład przepływu użytkownika dla procesu logowania (przepływ zadań)

Wdrożenie przepływu użytkowników

Przepływ wprowadzających się użytkowników odwzorowuje, w jaki sposób nowi użytkownicy osiągają swój pierwszy udany moment na produkcie.

1. Utwórz konto
2. Odpowiedz na pytania konfiguracyjne
3. Wybierz szablon lub punkt początkowy
4. Ukończ pierwszą akcję
5. Zobacz stan powodzenia
6. Przejdź do produktu

W przypadku produktów AI, narzędzi do projektowania i aplikacji zwiększających produktywność przepływy wdrażania mają kluczowe znaczenie, ponieważ użytkownicy muszą szybko zrozumieć, co robić dalej.

Kiedy utworzyć przepływ użytkownika

Twórz przepływy użytkowników na wczesnym etapie procesu projektowania, najlepiej po wstępnych badaniach użytkowników i przed projektowaniem UI o wysokiej jakości.

Na tym etapie przepływ użytkowników pomaga:

• Zdecyduj, które ekrany muszą istnieć
• Usuń niepotrzebne kroki
• Zidentyfikuj mylące punkty decyzyjne
• Dopasuj zespół wokół struktury produktu
• Planuj prototypy szybciej
• Unikaj projektowania wypolerowanych ekranów dla uszkodzonej ścieżki

Przepływy użytkowników są również przydatne na późniejszym etapie cyklu życia produktu. Jeśli istniejący interfejs działa słabo, przepływ użytkowników może pomóc w zdiagnozowaniu, gdzie ludzie rezygnują, zapętlają się lub nie wykonują kluczowych zadań.

Innymi słowy, przepływy użytkowników nie dotyczą tylko nowych produktów. Są również przydatne do ulepszania istniejących produktów.

Rola przepływów użytkownika w projektowaniu UX

Przepływy użytkowników są kluczową częścią projektu UX, ponieważ łączą cele użytkowników ze strukturą produktu. Zanim zaczniesz martwić się o odstępy, typografię, hierarchię wizualną lub komponenty, musisz wiedzieć, co użytkownik chce osiągnąć i w jaki sposób produkt pomaga mu to osiągnąć.

Przepływy użytkowników pomagają zespołom UX robić trzy ważne rzeczy.

1. Stwórz bardziej intuicyjny interfejs

Przejrzysty przepływ użytkowników sprawia, że ostateczny interfejs jest łatwiejszy do zrozumienia.

Mapując przepływ przed rozpoczęciem projektowania, można wcześnie wykryć tarcie. Być może użytkownik musi podjąć decyzję, zanim będzie miał wystarczającą ilość informacji. Być może formularz pojawia się zbyt szybko. Być może brakuje kroku potwierdzenia. Może są trzy ekrany, gdzie jeden by wystarczył.

Jeśli przepływ jest mylący, interfejs prawdopodobnie również będzie mylący.

2. Oceń istniejący interfejs

Przepływy użytkowników to świetny sposób na optymalizację istniejących produktów, które mogą nie konwertować lub nie utrzymywać zgodnie z oczekiwaniami. Jeśli użytkownicy nie dokonują konwersji, nie aktywują ani nie wykonują ważnego zadania, zamapuj bieżący przepływ.

Może się okazać, że użytkownicy są kierowani na niewłaściwy ekran, proszeni o zbyt wiele informacji lub zmuszani do podążania ścieżką niezgodną z ich intencjami.

3. Przekaż swoją strategię członkom zespołu i interesariuszom

Przepływy użytkowników doskonale nadają się do współpracy. Dają projektantom, programistom, PMom, decydentom i interesariuszom wspólną mapę doświadczeń.

Projektanci mogą wykorzystać ten przepływ do planowania ekranów. Programiści mogą go używać do zrozumienia stanów i przypadków brzegowych. Menedżerowie projektu mogą go używać do wyjaśniania wymagań. Interesariusze mogą go wykorzystać do przeglądu logiki doświadczenia, zanim zespół zainwestuje w szczegółowy projekt lub wdrożenie.

Przepływy użytkowników mogą również pomóc programistom zrozumieć całość strukturę stojącą za ostatecznym prototypem, co sprawia przekazanie bardziej wydajny.

Podróż użytkownika a przepływ użytkownika

Podróże użytkowników i przepływy użytkowników są często mylone, ale nie są tym samym.

A podróż użytkownika opowiada szerszą historię relacji użytkownika z produktem. Zwykle obejmuje cele użytkownika, emocje, motywacje, punkty bólu i punkty styku przed, w trakcie i po użyciu produktu.

A przepływ użytkowników koncentruje się na ścieżce, jaką użytkownik podąża wewnątrz produktu, aby osiągnąć określony cel.

Kluczowe różnice

Obydwa są przydatne. Podróż pomaga zrozumieć kontekst użytkownika. Przepływ pomaga zaprojektować rzeczywistą ścieżkę przez interfejs.

Jak stworzyć przepływ użytkowników

Możesz utworzyć przepływ użytkownika za pomocą tablicy, narzędzia do projektowania, narzędzia do tworzenia diagramów lub narzędzia do projektowania AI. Format ma mniejsze znaczenie niż przejrzystość ścieżki.

1. Zdefiniuj cel użytkownika

Zacznij od akcji, którą użytkownik chce wykonać.

• Utwórz konto
• Kup produkt
• Zarezerwuj demonstrację
• Opublikuj witrynę internetową
• Zaproś członka drużyny
• Eksportuj projekt do kodu

Przepływ użytkowników powinien być zbudowany wokół konkretnego celu, a nie niejasnego obszaru produktów.

2. Wybierz punkt wejścia

Zdecyduj, od czego zacznie użytkownik. Przykładami mogą być strona główna, strona z cenami, wyniki wyszukiwania, kampania e-mailowa, panel aplikacji, powiadomienie lub udostępniony link.

Różne punkty wejścia mogą tworzyć różne przepływy. Powracający użytkownik i odwiedzający po raz pierwszy mogą nie potrzebować tej samej ścieżki.

3. Wyznacz szczęśliwą ścieżkę

Szczęśliwa ścieżka to najprostsza udana trasa od początku do końca.

1. Użytkownik otwiera stronę z cenami
2. Użytkownik wybiera plan
3. Użytkownik tworzy konto
4. Użytkownik wprowadza szczegóły płatności
5. Użytkownik potwierdza zakup
6. Użytkownik trafia na stronę sukcesu

To daje podstawowe doświadczenie.

4. Dodawaj decyzje i przypadki brzegowe

Prawdziwi użytkownicy nie zawsze podążają idealną ścieżką. Dodaj punkty decyzyjne, takie jak:

• Czy użytkownik posiada już konto?
• Czy formularz jest ważny?
• Czy płatność się powiodła?
• Czy użytkownik wybrał rozliczenie miesięczne czy roczne?
• Czy użytkownik ma pozwolenie na kontynuację?
• Co się stanie, jeśli użytkownik anuluje subskrypcję?

Te gałęzie zmieniają prostą ścieżkę w prawdziwy przepływ użytkownika w projekcie UX.

5. Uprość przepływ

Po zmapowaniu przepływu poszukaj tarcia.

• Czy możemy usunąć krok?
• Czy możemy łączyć ekrany?
• Czy nie prosimy o informację zbyt wcześnie?
• Czy następne działanie jest oczywiste?
• Czy istnieje ślepy zaułek?
• Czy stany błędów są jasne?
• Czy użytkownik zawsze wie, co się stało?

Najlepszy przepływ użytkowników wydaje się oczywisty, ponieważ złożoność została już rozwiązana za kulisami.

W skrócie przepływ użytkownika

Przepływy użytkowników to mapy strukturalne służące do projektowania produktu. Pokazują, jak użytkownicy poruszają się po aplikacji, witrynie internetowej lub zadaniu od punktu wejścia do końcowej interakcji.

Silny przepływ użytkowników:

• Zaczyna się od jasnego celu użytkownika
• Pokazuje punkt wejścia użytkownika
• Mapuje kroki, ekrany i decyzje na ścieżce
• Zawiera ważne przypadki Edge
• Pomaga zespołom zidentyfikować tarcie przed szczegółowym projektem UI
• Ułatwia przekazywanie zadań projektantom, programistom, menedżerom i interesariuszom

Dla zespołów UX przepływy użytkowników są jednym z najbardziej praktycznych narzędzi do przekształcania badań użytkowników w strukturę interfejsu. Pomagają Ci projektować świadomie, zamiast zgadywać ekran po ekranie.

Często zadawane pytania: przepływy użytkowników

Czym są przepływy użytkowników?

Przepływy użytkowników to diagramy przedstawiające ścieżkę, którą użytkownik przechodzi przez aplikację, witrynę internetową lub zadanie związane z produktem. Zwykle zaczynają się w punkcie wejścia, takim jak strona główna lub ekran logowania, i kończą, gdy użytkownik osiągnie cel, taki jak rejestracja, zakup lub przesłanie formularza.

Jaki jest przepływ użytkowników w projekcie UX?

W projekcie UX przepływ użytkownika odwzorowuje kroki, ekrany, decyzje i działania, które użytkownik podejmuje, aby osiągnąć cel. Zespoły UX wykorzystują przepływy użytkowników do planowania struktury produktu, zmniejszania tarcia i projektowania jaśniejszych interfejsów przed utworzeniem ekranów o wysokiej jakości.

Jaka jest różnica między przepływem użytkownika a podróżą użytkownika?

Podróż użytkownika pokazuje szersze doświadczenie, w tym motywacje użytkownika, emocje, bolesne punkty i punkty styku. Przepływ użytkownika koncentruje się na określonej ścieżce, którą użytkownik podąża wewnątrz produktu, aby ukończyć zadanie.

Co to jest przepływ interfejsu użytkownika?

Przepływ interfejsu użytkownika pokazuje, jak ekrany, stany UI, przyciski, formularze i interakcje łączą się wewnątrz produktu. Jest ściśle powiązany z przepływem użytkownika, ale koncentruje się bardziej szczegółowo na ścieżce na poziomie interfejsu.

Kiedy należy utworzyć przepływ użytkowników?

Utwórz przepływ użytkownika po wstępnych badaniach użytkowników i przed szczegółowym projektem UI. Możesz także później utworzyć przepływy użytkowników, aby przeprowadzić audyt istniejącego produktu, zdiagnozować porzucenie lub poprawić konwersję.

Jakie są przykłady przepływów użytkowników?

Typowe przykłady przepływów użytkowników obejmują przepływy rejestracji, przepływy realizacji transakcji, przepływy dołączania, przepływy logowania, przepływy resetowania hasła, przepływy rezerwacji, przepływy aktualizacji i przepływy zapraszania członków zespołu.

Dlaczego przepływy użytkowników są ważne?

Przepływy użytkowników pomagają zespołom zrozumieć, w jaki sposób użytkownicy poruszają się po produkcie, zanim zainwestują w szczegółowy projekt lub rozwój. Ujawniają tarcia, brakujące kroki, mylące decyzje i niepotrzebną złożoność na początku procesu.

Jak zapewnić przepływ użytkowników?

Zacznij od celu użytkownika, wybierz punkt wejścia, zamapuj szczęśliwą ścieżkę, dodaj decyzje i przypadki brzegowe, a następnie uprość ścieżkę. Używaj okręgów lub owali jako punktów początkowych i końcowych, prostokątów do oznaczania ekranów lub działań, rombów do podejmowania decyzji i strzałek do wskazywania kierunku.

Wypróbuj Anima Playground dla przepływów użytkowników i projektu UX

Anima Playground pozwala przejść od pomysłu na produkt do przepływu, projektowania i działania UX w przeglądarce. Opisz doświadczenie, które chcesz zbudować, udoskonal je za pomocą sztucznej inteligencji i zamień wynik w prawdziwy interaktywny produkt.

Rozpocznij projektowanie z Anima Playground.