Jak zrobić diagram przepływu użytkownika

Opublikowany: 2020-02-27

Diagramy przepływu użytkownika są niezbędne do opanowania doświadczenia użytkownika. Pozwalają zrozumieć, w jaki sposób użytkownicy wchodzą w interakcję z Twoją aplikacją lub witryną, jakie kroki podejmują, aby wykonać zadanie lub osiągnąć cel w Twojej witrynie. Pomoże to stworzyć lepsze wrażenia użytkownika dla użytkownika i skuteczniej zaspokoić jego potrzeby.

W tym przewodniku przyjrzymy się ważnej roli, jaką diagramy przepływu użytkownika odgrywają w projektowaniu UX, sposobowi tworzenia diagramu przepływu użytkownika oraz najlepszym praktykom, o których należy pamiętać. Przygotowaliśmy również kilka przydatnych szablonów, których możesz używać podczas projektowania przepływu użytkowników.

1. Co to jest diagram przepływu użytkownika
1.1. Symbole schematu przepływu użytkownika są następujące
1.2. Znaczenie diagramu przepływu użytkownika
1.3. Jak zrobić diagram przepływu użytkownika
1.3.1. Krok 1: Zrozum podróż klienta
1.3.2. Krok 2: Zidentyfikuj swoje cele i cele użytkownika
1.3.3. Krok 3: Określ, skąd pochodzą Twoi użytkownicy
1.3.4. Krok 4: Określ informacje, których potrzebuje odwiedzający
1.3.5. Krok 5: Wizualizuj swoje przepływy użytkowników
1.3.6. Krok 6: Prototypuj swój przepływ
1.3.7. Krok 7: Przejrzyj, udoskonal i przetestuj
1.4. Najlepsze praktyki, o których warto pamiętać
1.5. Szablony diagramów przepływu użytkownika
1.6. Gotowy do stworzenia własnego diagramu przepływu użytkownika?

Co to jest schemat przepływu użytkownika

Przepływ użytkownika można interpretować na wiele sposobów. Można go traktować jako przegląd opisujący, gdzie użytkownicy mogą poruszać się po Twoim produkcie. Może to również oznaczać rzeczywistą jakość i doświadczenie na drodze, jaką użytkownicy podążają, aby wykonać zadanie.

Lub może oznaczać rzeczywistą sekwencję kroków, które użytkownik wykonuje, aby wykonać zadanie. Schematy blokowe mogą być przydatne w wizualizacji tych tras, którymi pokonują użytkownicy, gdy korzystają z Twojego rozwiązania (np. witryny internetowej lub aplikacji).

Takie narzędzia, które pomagają w wizualnym śledzeniu etapów interakcji między czynnościami użytkownika a interfejsami programu, nazywane są diagramami przepływu użytkownika lub mapami przepływu użytkownika .

Pomagają w opracowaniu logicznej ścieżki, jaką użytkownik powinien obrać podczas interakcji z systemem, i przedstawiają relacje między funkcjonalnością systemu, potencjalnymi działaniami użytkownika i związanymi z tym konsekwencjami.

Diagramy przepływu użytkownika mogą mieć różny wygląd w zależności od etapu procesu projektowania, na którym się znajdujesz. Jeśli masz już gotowe szkielety aplikacji lub witryny, możesz ich użyć do utworzenia schematu blokowego. Takie schematy blokowe wireframe są nazywane Wireflows.

Diagramy przepływu użytkownika są również określane jako przepływ interakcji, przepływ działań, przepływ interfejsu użytkownika, przepływ nawigacji lub diagramy przepływu zadań .

Symbole schematu przepływu użytkownika są następujące

Symbole schematu przepływu użytkownika
Symbole schematu przepływu użytkownika

Zapoznaj się z tym zasobem, aby poznać więcej symboli schematów blokowych, które mogą być przydatne podczas tworzenia diagramów przepływów użytkownika.

Znaczenie diagramu przepływu użytkownika

  • Diagramy przepływu użytkowników przydają się, gdy chcesz zrozumieć swoje projekty na podstawie celów użytkowników.
  • Mogą być używane do komunikowania zamierzonego przepływu użytkowników podczas przeglądania stron Twojej witryny lub działań w Twojej aplikacji
  • Inżynierowie, projektanci i architekci mogą z nich korzystać, aby zrozumieć złożoność, zakres i ścieżki projektowania systemu, a także identyfikować w nim luki, zależności i braki.

Jak zrobić diagram przepływu użytkownika

Bez dalszych ceregieli omówmy, jak zrobić diagram przepływu użytkownika.

Krok 1: Zrozum podróż klienta
Krok 2: Zidentyfikuj swoje cele i cele użytkownika
Krok 3: Określ, skąd pochodzą Twoi użytkownicy
Krok 4: Określ informacje, których potrzebuje odwiedzający
Krok 5: Wizualizuj swoje przepływy użytkowników
Krok 6: Prototypuj swój przepływ
Krok 7: Przejrzyj, udoskonal i przetestuj

Krok 1: Zrozum podróż klienta

Przepływ użytkownika opiera się na tym, co robi użytkownik – dlatego zrozumienie tego, kim jest, jego motywacji, potrzeb i zachowań ma kluczowe znaczenie dla stworzenia skutecznego diagramu przepływu użytkownika.

Może się to wydawać dodatkowym krokiem, ale przeprowadzenie odpowiednich badań użytkowników i zaprojektowanie ich person pomoże Ci stworzyć płynniejszy przepływ użytkowników.

O tym, jak tworzyć persony użytkownika, omówiliśmy już we wcześniejszym poście, zapoznaj się z nim, aby dowiedzieć się, jak w kilku prostych krokach utworzyć personę kupującego. Lub jeśli znasz już ten proces, oto szablon na początek.

Szablon persony użytkownika
Szablon Persona użytkownika (Kliknij szablon, aby edytować go online)

Po utworzeniu profilu klienta jesteś o krok bliżej zrozumienia swojej podróży użytkownika.

Możesz użyć mapy podróży klienta, aby właściwie przeanalizować, co robią, czują i oczekują Twoi klienci, gdy wchodzą w interakcję z Twoją firmą (tj. odwiedzają Twoją witrynę), różne punkty styku i punkty bólu.

Omówiliśmy również proces tworzenia mapy podróży klienta w 6 prostych krokach. Sprawdź to.

Reszta etapu tworzenia przepływu użytkownika będzie łatwiejsza, gdy poznasz podróż swojego użytkownika.

Krok 2: Zidentyfikuj swoje cele i cele użytkownika

Następnym krokiem jest uzyskanie wyobrażenia o celach Twojej firmy, a także użytkowników.

Być może już znasz cele swojej firmy; np. w celu zwiększenia konwersji na Twojej stronie, zwiększenia sprzedaży Twojego produktu itp. Zwykle jest to ostateczny efekt działań, które chcesz, aby podjęli Twoi użytkownicy.

Z drugiej strony cele Twoich użytkowników obejmują pragnienia i potrzeby, które chcą zaspokoić. Różni użytkownicy również mogą mieć różne cele. W tym miejscu stworzone wcześniej persony użytkowników i mapy podróży klientów pomogą Ci dowiedzieć się, czym one są.

Krok 3: Zidentyfikuj, skąd pochodzą Twoi użytkownicy

Jeśli projektujesz witrynę internetową, możesz chcieć wiedzieć, skąd pochodzą Twoi klienci lub innymi słowy, jakie są punkty wejścia. Obejmują one zwykle:

  • Ruch bezpośredni
  • Bezpłatne wyszukiwanie
  • Media społecznościowe
  • Płatna reklama
  • E-mail
  • Witryny polecające
  • Informacje prasowe lub wiadomości

Możesz użyć Google Analytics, aby uzyskać wartości procentowe dla tych punktów wejścia. Mogą również wskazywać na różne zachowania użytkowników.

Na przykład, bezpośredni użytkownik przeszukałby nazwę Twojej marki, podczas gdy odwiedzający wyniki organiczne najpierw wyszukałby w wyszukiwarce produkt, który chce, zanim odkryje Cię jako odpowiedniego sprzedawcę.

I ważne jest, aby odwzorować te różne przepływy użytkowników na podstawie różnych punktów wejścia. To klucz do lepszego doświadczenia dla użytkowników.

Krok 4: Określ informacje, których potrzebuje odwiedzający

Aby zaprojektować najlepszy możliwy przepływ użytkowników, musisz wejść w buty swoich klientów.

Oznacza to zrozumienie na pamięć ich potrzeb i motywacji. Musisz więc wiedzieć, jakie mają problemy, jakie mają wątpliwości, wahania, jakie mają pytania dotyczące produktu i jakich odpowiedzi szukają.

Ponieważ masz już utworzone persony kupujących i mapę podróży, ten krok jest łatwiejszy do wykonania.

Krok 5: Wizualizuj swoje przepływy użytkowników

Do tej pory jesteś świadomy użytkowników, dla których tworzysz przepływ użytkowników, jakie są ich cele i skąd pochodzą. Następnym krokiem jest stworzenie przepływu użytkownika.

Zastanów się, co robią Twoi użytkownicy przed i po odwiedzeniu określonej strony w Twojej witrynie. Co widzą, jakie podejmują działania, aby osiągnąć swój cel. Pomoże Ci to zidentyfikować strony, które musisz utworzyć, jakie informacje/treści musisz podać i jak powinny być ze sobą połączone.

Zwróć uwagę na początek i koniec każdego zadania. Może się to zmienić w zależności od celu różnych użytkowników.

Po odfiltrowaniu niezbędnych informacji zwizualizuj je za pomocą diagramu przepływu użytkownika.

Schemat przepływu użytkownika
Diagram przepływu użytkownika (kliknij szablon, aby edytować go online)

Krok 6: Prototypuj swój przepływ

Możesz użyć prototypów o niskiej wierności (makiety lub makiety interfejsu użytkownika), aby przetestować przepływ użytkownika opisany w poprzednim kroku. Prototyp pomaga dodać więcej szczegółów do przepływu i pomóc w zrozumieniu przepływu między działaniami użytkownika a treścią.

Pomoże Ci również sprawdzić, czy Twój produkt został zaprojektowany zgodnie z celami Twoimi i Twoich użytkowników.

Krok 7: Przejrzyj, udoskonal i przetestuj

Możesz udostępniać diagramy przepływu użytkowników zainteresowanym stronom i omawiać, gdzie należy wprowadzić poprawki.

A kiedy prototyp wysokiej jakości jest gotowy, możesz go również przetestować z rzeczywistymi użytkownikami.

W ten sposób możesz zbierać dane na każdym etapie przepływu użytkownika i zrozumieć, w jaki sposób użytkownicy poruszają się po Twoim produkcie. Następnie możesz zidentyfikować obszary wymagające poprawy i zastosować rozwiązania przed wydaniem produktu końcowego.

Lepiej zrozum ścieżki podróży klientów i stwórz doskonałe doświadczenia użytkowników dzięki Creately.

Utwórz przepływ użytkownika

Najlepsze praktyki, o których warto pamiętać

Postępuj zgodnie z poniższymi najlepszymi praktykami, aby upewnić się, że tworzone przez Ciebie diagramy przepływu użytkowników rzeczywiście skutecznie Ci pomagają.

  • Zawsze nadaj diagramowi przepływu użytkownika nazwę opisującą jego przeznaczenie. Pomoże to każdemu, kto się do niego odniesie, zrozumie jego podstawę.
  • Trzymaj się jednego kierunku podczas rysowania schematu blokowego. Ponieważ wykres przedstawia historię, pomaga lepiej ją przeczytać i zrozumieć, gdy mapa płynie w jednym kierunku.
  • Ogranicz liczbę punktów decyzyjnych, aby nie było bałaganu / mniej skomplikowane.
  • Upewnij się, że zakres diagramu przepływu użytkownika obejmuje pojedyncze zadanie lub jeden cel użytkownika. Jeśli przepływ użytkownika obejmuje tylko połowę zadania lub mapuje kroki, aby objąć więcej niż jeden cel użytkownika, nie spełni swojego celu.
  • Pamiętaj, aby dodać tylko niezbędne informacje i unikać wszelkich innych szczegółów, które nie pomagają opisać przepływu i działań użytkownika.
  • Użyj narzędzia cyfrowego schematu blokowego, takiego jak Creately, aby przyspieszyć proces. Dodatkowo pozwoli Ci uzyskać wkład innych i zachować swoją pracę zapisaną w jednym miejscu i w chmurze, co umożliwi Ci odwoływanie się do niej i pracę nad nią z dowolnego miejsca. Co więcej, pomoże Ci zaoszczędzić miejsce dzięki nieskończonemu obszarowi płótna; w przeciwnym razie może zająć kilka ścian sali konferencyjnej!

Szablony diagramów przepływu użytkownika

Schemat procesu rejestracji użytkownika
Schemat procesu rejestracji użytkownika (kliknij szablon, aby edytować go online)
Przykład schematu przepływu
Przykładowy diagram przepływu (kliknij szablon, aby edytować go online)
Przepływ użytkownika
Szablon Wireflow (Kliknij szablon, aby edytować go online)

Gotowy do stworzenia własnego diagramu przepływu użytkownika?

Przepływy użytkownika to potężne narzędzie w zestawie narzędzi projektanta. Ułatwiają projektantom zobaczenie całości – jakie strony muszą stworzyć i jak powinny być połączone. Omówiliśmy prawie wszystko, co musisz wiedzieć, aby stworzyć diagram przepływu użytkownika — w tym szablony, których możesz użyć, aby zacząć od razu.

Teraz chcielibyśmy poznać Twoją opinię na temat diagramów przepływu użytkowników? Wpisz w sekcji komentarzy poniżej.