Szablon przepływu użytkownika
Pomóż zespołom UX i produktów poprawić wrażenia użytkowników, tworząc warunki do tworzenia kreatywnych rozwiązań.
O szablonie przepływu użytkownika
Diagram przepływu użytkownika (nazywany również diagramem interakcji lub zadań) to wizualny proces mapowania, przedstawiający krok po kroku, co robi użytkownik, aby ukończyć zadanie lub osiągnąć cel za pomocą Twojego produktu lub doświadczenia.
Tworzenie diagramu przepływu użytkownika może pomóc w interpretacji jakości lub doświadczenia drogi wybranej przez użytkownika. Przepływ może również ujawnić, ile kroków wybrali do ukończenia zadania i jakie ścieżki decydują się podjąć, gdy wchodzą w interakcję z Twoim produktem lub usługą, aby rozwiązać problem.
Podczas gdy diagramy przepływu użytkowników koncentrują się na tym, jak użytkownik porusza się po konkretnym produkcie, Szablon przepływu ekranów przedstawia układ strony w stylu wireframe w formie schematu blokowego.
Czym jest diagram przepływu użytkownika?
Diagramy przepływu użytkownika pomagają zespołom UX i produktowym zmapować logikę ścieżki, którą powinien podążać użytkownik podczas interakcji z systemem. Jako narzędzie wizualne, diagram przepływu użytkownika pokazuje relacje pomiędzy funkcjonalnościami strony lub aplikacji, potencjalnymi działaniami, jakie użytkownik może podjąć, oraz ich wynikami.
Główne elementy przepływu użytkownika to:
Punkt startowy lub końcowy: wyraźnie określa, gdzie przepływ się zaczyna lub kończy
Proces lub akcja: pokazuje kroki podejmowane przez użytkownika, takie jak „logowanie” czy „zakup”
Punkty decyzyjne: wskazują, kiedy użytkownik musi dokonać wyboru
Strzałki: pokazują, dokąd użytkownik zmierza na podstawie podjętych decyzji
Spróbuj użyć przepływu użytkownika, jeśli Twój zespół próbuje ocenić lub poprawić, jak obecne doświadczenie użytkownika może prowadzić do lepszych wskaźników konwersji klientów.
Proces ten może pomóc Ci zachować użytkownika na uwadze i określić cel biznesowy, taki jak zakup, zapisanie się na newsletter czy wybór wersji próbnej.
Kiedy używać szablonu przepływu użytkownika
Diagramy przepływu użytkownika mogą pomóc Ci w:
Budowaniu intuicyjnych interfejsów: czy Twój przepływ jest łatwy do przejścia, wydajny w użyciu i intuicyjny dla użytkownika?
Decydowaniu, czy Twój istniejący interfejs spełnia swoje zadanie: co działa, co nie działa lub co wymaga poprawy? Czy przepływ jest płynny i zrozumiały?
Prezentowaniu przepływu produktu zespołom wewnętrznym czy klientom: czy Twój zespół projektowy widzi, co mówi lub robi klient podczas procesu zakupu, rejestracji czy logowania? Czy klienci otrzymują krok po kroku przegląd w celu lepszego zrozumienia Twojej wizji?
Tworząc lub odtwarzając przepływ użytkownika, zapytaj siebie i swój zespół:
Co użytkownik próbuje zrobić?
Co jest ważne dla użytkownika i czego potrzebuje, aby poczuć się pewnie?
Jakie dodatkowe informacje będą potrzebne użytkownikowi, aby odnieść sukces?
Jakie przeszkody lub wątpliwości ma użytkownik w realizacji zadania?
Mapa przepływu użytkownika może pomóc projektantom (oraz ich zespołom lub klientom) pozostać skoncentrowanym na użytkowniku, nawet przy tworzeniu złożonych procesów.
Jako projektant, możesz używać diagramów przepływu użytkownika, aby zdecydować, jak zaprojektować strony, ekrany lub powierzchnie na swojej stronie internetowej lub w aplikacji i przeorganizować, jakie treści i zadania nawigacyjne włączyć.
Stwórz własny diagram przepływu użytkownika
Mapowanie własnego przepływu użytkownika jest proste. Wizualna przestrzeń robocza Miro to idealna plansza do tworzenia i udostępniania twojego diagramu. Zacznij od wybrania szablonu przepływu użytkownika, a następnie wykonaj poniższe kroki, aby stworzyć własny:
Ustal cele biznesowe oraz cele użytkowników.
Zastanów się, gdzie chcesz, żeby użytkownicy trafili. Jeśli jeszcze nie masz mapy podróży klienta (lub trzeba ją zaktualizować), użyj mapy podróży klienta, aby stworzyć wspólną wizję doświadczeń klientów. Każdy członek zespołu może skorzystać ze wspólnego zrozumienia uczuć klientów na każdym potencjalnym punkcie styku z Twoim produktem lub usługą. Budowanie empatii użytkownika wpłynie na każdy krok procesu przepływu użytkownika.
Dowiedz się, jak odwiedzający odnajdują Twoją stronę.
Czy trafiają na Twój produkt lub usługę poprzez bezpośredni ruch, organiczne wyszukiwanie, płatne reklamy, media społecznościowe, linki referencyjne czy e-maile? Te punkty będą początkiem diagramu przepływu użytkownika, w zależności od tego, co odkryjesz.
Zidentyfikuj, jakie informacje są potrzebne użytkownikom i kiedy będą ich potrzebować.
Użytkownicy dokonują konwersji, gdy otrzymują właściwe informacje w odpowiednim czasie, więc zastanów się, czego klient oczekuje od Twojego cyfrowego punktu kontaktu i jakie mogą być jego odczucia. Zaangażowanie – na przykład interakcja z chatbotem – to także potencjalny wskaźnik sukcesu – nie wszystko sprowadza się do finalizacji zakupu.
Stwórz mapę przepływu użytkowników.
Możesz edytować istniejące kształty i strzałki z naszego szablonu przepływu użytkowników, aby dostosować je do wyników badań, które przeprowadziłeś we wcześniejszych krokach. Po odkryciu pierwszego punktu kontaktu przez klienta, co robi on dalej? Ile kroków potrzeba, aby ukończyć zadanie? Użyj podstawowego przepływu użytkowników na szablonie, aby zacząć rysować własny. Zmień punkty kontaktu, miejsca porzucenia, kierunki strzałek linii łączących, aby lepiej dopasować się do schematu przepływu użytkowników.
Zdobądź feedback od swojego zespołu.
Zaproś swój zespół, klientów lub interesariuszy z innych działów na tablicę Miro. Możesz zdecydować się na pozostawienie opinii asynchronicznie za pomocą karteczek lub @wzmianki dla recenzji przez współpracowników. Możesz także przeprowadzić rozmowę wideo na tablicy Miro i wyznaczyć członka zespołu do roli prowadzącego notatki. Gdy zbierzesz wystarczająco dużo informacji od zespołu, wprowadź odpowiednie poprawki.
Udostępniaj innym interesariuszom lub klientom i stale wprowadzaj poprawki w miarę potrzeb.
Twój przepływ użytkownika będzie się zmieniać z czasem, gdy zmieniają się postawy i motywacje klientów. Dostosowuj się odpowiednio, pozostając zorientowanym na użytkownika.
Często zadawane pytania na temat szablonu Przepływu Użytkownika
Co to jest przykład przepływu użytkownika?
Wyobraź sobie, że tworzysz stronę dla wydarzenia. Jeśli chcesz poprawić doświadczenie użytkownika, musisz rozplanować wszystkie niezbędne kroki do rejestracji na wydarzenie i zakupu biletów.
Możesz zacząć od śledzenia przepływu klientów i punktu, w którym rozpoczynają swoją podróż do zakupu biletów na Twoje wydarzenie. Diagram przepływu użytkowników pomoże Ci zwizualizować na pierwszy rzut oka, jak klient zakończy zakup (ostateczny cel Twojej strony internetowej), od rejestracji po stronę płatności.
Co może służyć za przykład przepływu użytkownika?
Wyobraź sobie, że tworzysz stronę dla wydarzenia. Jeśli chcesz poprawić doświadczenie użytkownika, musisz zmapować wszystkie kroki niezbędne do przeprowadzenia rejestracji i zakupu biletów na wydarzenie. Możesz zacząć od śledzenia przepływu klientów i miejsca, gdzie rozpoczynają swoją podróż, aby kupić bilety na wydarzenie. Diagram przepływu użytkownika pomaga zwizualizować na pierwszy rzut oka, w jaki sposób klient realizuje zakup (czyli spełnia ostateczny cel strony), od rejestracji do strony z płatnością.
Skorzystaj z tego szablonu już teraz.
Szablon wireframe o niskiej wierności
Zastosowania:
Desk Research, Zarządzanie produktem, Szkielety wireframe
Gdy projektujesz witrynę lub tworzysz aplikację, wczesne etapy powinny być ISTOTNE – musisz widzieć pełny obraz i przekazywać informacje o swoim rewolucyjnym pomyśle. Wireframe'y niskiej wierności umożliwiają Ci je zobaczyć i zrealizować. Te przybliżone schematy (pomyśl o nich jak o cyfrowej wersji szkicu na serwetce) pomagają zespołom i stakeholderom projektu szybko określić, czy projekt spełnia potrzeby użytkowników. Nasz szablon pozwala łatwo korzystać z wireframe'ów podczas spotkań lub warsztatów, prezentacji i sesji krytycznych.
Schemat blokowy strony internetowej szablon
Zastosowania:
Schematy blokowe, Mapowanie, Doświadczenie użytkownika
Schemat blokowy strony internetowej, znany także jako mapa strony, odwzorowuje strukturę i złożoność każdej obecnej lub przyszłej witryny. Schemat blokowy może również pomóc zespołowi w identyfikacji luk wiedzy na potrzeby przyszłej treści. Budując stronę internetową, należy zapewnić, że każda część zawartości dostarcza użytkownikom dokładnych wyników badań na podstawie słów kluczowych powiązanych z treścią na Twojej stronie. Zespoły produktowe, UX i treści mogą korzystać z schematów blokowych lub map, aby zrozumieć wszystko, co zawiera witryna, oraz planować dodanie lub restrukturyzację treści w celu poprawy doświadczeń użytkownika.
Szablon prototypu
Zastosowania:
Projektowanie UX, Design Thinking
Prototyp to dostępna na żywo makieta produktu, która definiuje strukturę produktu, przepływ użytkownika i detale nawigacyjne (np. przyciski i menu) bez ustalania ostatecznych szczegółów, takich jak projekt wizualny. Tworzenie prototypu pozwala zasymulować odbiór produktu lub usługi przez użytkownika, mapować konteksty użytkowników i przepływy zadań, tworzyć scenariusze w celu zrozumienia person klientów i zbierać opinie zwrotne na temat produktu. Korzystanie z prototypu pomaga zaoszczędzić pieniądze, lokalizując przeszkody na wczesnym etapie procesu. Prototypy mogą się różnić, ale zazwyczaj obejmują serię ekranów lub obszarów roboczych połączonych strzałkami lub linkami.
Szablon szkieletu aplikacji
Zastosowania:
Projektowanie UX, Szkielety wireframe
Chcesz zacząć budować aplikację? Nie musisz wyobrażać sobie, jak będzie ona funkcjonować i jak użytkownicy będą z nią wchodzić w interakcje – wykorzystaj do tego szkielet wireframe. Tworzenie szkieletów to technika projektowania podstawowego układu poszczególnych ekranów. Tworząc wireframe na wczesnym etapie procesu lepiej zaprojektujesz funkcję każdego ekranu i zdobędziesz poparcie stakeholderów – a wszystko to jeszcze przed dodaniem elementów wizualnych i treści, co pozwoli Ci zaoszczędzić czas i pieniądze. A projektując z perspektywy podróży użytkownika, zbudujesz bardziej atrakcyjne i udane doświadczenia.