Jak tworzyć przepływy użytkowników dla e-commerce

Wyobraź sobie, że tworzysz nową stronę internetową dla swojego sklepu internetowego. Wchodzisz do kreatora stron, takiego jak WordPress i zaczynasz dodawać sekcje do stron, decydując, że pasek nawigacyjny powinien być wyśrodkowany lub że klip z informacjami powinien znajdować się na pierwszym miejscu.

A może masz już witrynę i zdecydowałeś, że może wyglądać lepiej, więc zaczynasz przenosić obrazy, tekst i CTA.

Mimo to popełniono już błędy: w obu przypadkach nie ma strategii ani przepływu użytkowników. Projekt jest przypadkowo wybrany, poplamiony jak autentyczny obraz Jacksona Pollocka.

A fan Pollocka czy nie, jego obrazy nigdy nie musiały przechodzić tropu z jednego etapu lejka do następnego.

W nowej epoce zakupów online posiadanie witryny e-commerce ma kluczowe znaczenie – potencjalnie korzystnej aplikacji.

Ale posiadanie pięknej strony internetowej nie wystarczy, w ten sam sposób, w jaki przyciąganie dużego ruchu jest marnotrawstwem, chyba że powoduje konwersję (tj. kupuje Twoje produkty). Potrzebujesz strony internetowej, która poprowadzi potencjalnych klientów na ścieżce do konwersji.

Dobrze zaprojektowana strona internetowa nie zaczyna się od wyboru ulubionej czcionki i animacji. Zaczyna się od mapowania przepływów użytkowników.

Co to jest diagram przepływu użytkownika?

Diagramy przepływu użytkownika — zwane również schematami przepływu użytkownika, diagramami przepływu zadań i diagramami przepływu interfejsu użytkownika — przedstawiają ścieżkę, jaką użytkownik przechodzi przez witrynę lub aplikację, aby osiągnąć cel lub zadanie. Ilustrując kroki, jakie podejmuje użytkownik, aby przejść z jednej strony na drugą, aż do zakończenia zadania (np. zakupu produktu), zyskujesz zrozumienie, jak zachęcać do wykonywania zadań.

Przykładowy schemat przepływu użytkowników z UX Collective.

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

Projektowanie doświadczeń użytkownika (projektowanie UX) polega na tworzeniu projektów zorientowanych na użytkownika. Umieszczając użytkowników, czyli potencjalnych klientów, w centrum wyboru projektu, poprawiasz ich wrażenia i zwiększasz szanse na dotarcie do końca sprzedaży.

Przepływy użytkowników pokazują, w jaki sposób użytkownicy wchodzą w interakcję z projektem produktu, biorąc pod uwagę działania użytkownika i funkcjonalność produktu wymagane do utworzenia konwersji.

Utwórz diagram przepływu użytkownika przed rozpoczęciem procesu projektowania, aby poinformować o potrzebach Twojej witryny. Stratedzy, projektanci i twórcy stron internetowych wykorzystują przepływy UX, aby wykryć braki produktu i zrozumieć zakres projektu, w tym liczbę stron, komponenty dla każdego z nich i architekturę informacji tego wszystkiego.

Możesz również tworzyć przepływy użytkowników po rozwoju witryny, aby znaleźć obszary do uproszczenia i ulepszenia.

Przykładowy schemat przepływu użytkownika z Creately.

Przepływy użytkowników wysokiego poziomu i szczegółowe

Przepływy użytkowników wysokiego poziomu są szybkie i krótkie, stworzone w celu zapewnienia szybkiego przeglądu pomysłu lub procesu.

Bardziej przydatne są szczegółowe przepływy użytkowników lub przepływy zadań, które szczegółowo opisują wszystkie kroki i decyzje związane z wykonaniem zadania. Szczegółowe diagramy przepływu są tym, co chcesz stworzyć, aby informować o projekcie i treści witryny e-commerce.

Niektóre rozróżniają przepływy użytkownika od przepływów zadań w tych przepływach użytkownika podkreślają, że zadanie może być wykonywane inaczej przez użytkowników w zależności od osoby i punktu wejścia.

Przepływy użytkowników a podróże użytkowników

Przepływy użytkowników różnią się od map podróży użytkownika, które przedstawiają kompleksowe środowisko użytkownika z produktem. Tam, gdzie przepływy są oparte wyłącznie na działaniach, podróże użytkowników uwzględniają takie czynniki, jak emocje użytkowników.

Mapy podróży użytkownika i mapy podróży klienta są czasami używane zamiennie, ale działa to tylko wtedy, gdy użytkownik i klient są tą samą osobą, co nie zawsze ma miejsce. Na przykład pracodawca (klient) może zakupić narzędzie online dla swoich pracowników (użytkowników).

Jak budować diagramy przepływu użytkownika

1. Zdecyduj o celu diagramu

Zawartość diagramu przepływu użytkownika będzie zależeć od celu i śledzonego zadania. Ogranicz liczbę celów lub zadań na diagramie; wykresy tylko jeden na raz jest najlepsze. Patrzenie na więcej niż jedną osobę może nadmiernie skomplikować i zatłoczyć diagram, czyniąc go mniej efektywnym.

Nadaj przepływowi użytkownika jasny tytuł oparty na jego celu, aby móc z niego korzystać w przyszłości.

2. Zrozum swojego typowego użytkownika

Zrozumienie użytkowników pomoże określić najlepiej działającą nawigację przepływu zadań oraz zawartość, którą należy umieścić na każdej stronie.

Przeprowadź badania użytkowników, aby zebrać:

• Cele
• Motywacje
• Pożądane funkcje
• Poziom doświadczenia/wiedzy
• Bariery

Czynniki te mogą się zmieniać dla różnych segmentów odbiorców i etapów podróży zakupowej, ale użyjesz ich, aby określić, co dzieje się na każdej stronie internetowej, jak zaprojektować każdą stronę i gdzie umieścić link.

Cele użytkowników i cele biznesowe powinny być zgodne, aby można było zaprojektować przepływy witryn e-commerce, które spełniają oba te elementy.

Analiza przepływów konkurencji może również zapewnić wgląd.

3. Utwórz klucz przepływu zadań

Nie ma sztywnych reguł dotyczących tego, jak powinien wyglądać diagram przepływu zadań, o ile jesteś spójny i podajesz klucz do używanych kolorów i kształtów, aby inni mogli go zrozumieć.

Typowe symbole przepływu użytkownika obejmują:

Inne czasami używane kształty to trójkąty, ukośne równoległoboki i kształty przerywane (zamiast pełnych konturów). Możesz uzyskać tak szczegółowe, jak tylko chcesz, zmieniając kształty na dodatkowe elementy, takie jak zadania systemowe, elementy wejściowe lub selekcje/kliknięcia.

Wszelkie użyte kolory powinny przyczyniać się do znaczenia i czytelności schematu blokowego użytkownika. Zastanów się, jak kolor może pomóc w grupowaniu przedmiotów, identyfikowaniu elementów i ujawnianiu wzorów.

Inne rodzaje wykresów przepływu użytkownika

Ponieważ schematy blokowe użytkowników są unikalne dla Twojej witryny, nie wszystkie stosują powszechną praktykę używania kształtów i kolorów.

Inny styl przepływu użytkowników jest wzorowany na diagramach stanów stosowanych w informatyce. Diagramy stanu różnią się wyglądem, ale można je zapisać jako serię ułamków ze strzałkami kierującymi przebiegiem procesu e-commerce. Ułamki obejmują to, co użytkownik widzi nad linią ułamka i co użytkownik robi pod nią, na przykład:

Istnieją również przepływy użytkowników wzorowane na mapach witryn. Oprócz podjętych działań prezentują każdą stronę internetową biorącą udział w przepływie użytkownika z listą wszystkich sekcji i podsekcji na tych stronach. Następnie strzałki lub linie pokazują, które sekcje strony i wezwania do działania prowadzą użytkowników do następnego etapu przepływu.

Przykładowy przepływ użytkowników z Salinthip Kaewkerd na Behance.

4. Nakreśl swój diagram przepływu użytkownika

Po wybraniu formatu możesz zacząć mapować przepływy zadań. Rozpocznij od punktu wejścia wybranego dla konkretnego diagramu i wypisz wszystkie kroki między punktem wejścia a zakończeniem zadania.

Punkty wejścia mogą być dowolnym źródłem, które prowadzi użytkownika do Twojej witryny, w tym reklamami, mediami społecznościowymi, organicznymi wynikami wyszukiwania, linkami zewnętrznymi, kampaniami e-mailowymi i innymi. Aplikacje mają zwykle mniej punktów wejścia niż strony internetowe.

Kolejne kroki (przedmiot diagramu przepływu interfejsu użytkownika) będą zależeć od zadania, które wybrałeś do zmapowania. Mogą one obejmować takie elementy, jak formularze logowania i rejestracji, przeglądanie produktów, procesy kasowe lub onboarding. Zastanów się, w jaki sposób użytkownik dostaje się do każdej strony, jakie działania może na niej wykonać i dokąd przechodzi z tej strony, aby osiągnąć swój cel.

Ostatnim krokiem w przepływie użytkownika nie powinna być akcja użytkownika, która kończy zadanie, ale funkcja, która potwierdza ukończenie dla użytkownika.

Jeśli uaktualniasz obecną witrynę e-commerce, możesz skorzystać z raportów Google Analytics Behaviour Flow, aby dowiedzieć się, skąd pochodzą Twoi użytkownicy, jak poruszają się po Twojej witrynie i dokąd wychodzą.

Podczas mapowania przepływu użytkownika zauważysz, że istnieje wiele ścieżek, które użytkownik może obrać, aby wykonać jedno zadanie. Gałęzie lub węzły odrywają się w tych punktach, aby kontynuować mapowanie głównych ścieżek.

Tworząc diagramy przepływu, możesz zwiększyć czytelność, ograniczając liczbę kierunków, w których się poruszają. Jeśli skończysz ze strzałkami wskazującymi w każdą stronę, twój diagram zacznie wyglądać bardziej jak labirynt. Dostępnych jest wiele narzędzi przepływu użytkownika do tworzenia diagramów funkcjonalnych.

5. Ogranicz swoje przepływy

Po utworzeniu diagramu przepływu użytkownika nadszedł czas, aby wyciągnąć nożyce. Ten krok obejmuje trzy istotne zmiany:

1. Usuwanie informacji, które nie są niezbędne do wizualizacji przepływu
2. Przenoszenie szczegółów poza czystą nawigację użytkownika do mapy podróży
3. Identyfikowanie czynności, które są zbędne lub niepotrzebne

Ten ostatni krok jest mniej dla wizualizacji przepływu nawigacji, a więcej dla użytkownika, którego doświadczenie poprawiasz. Im więcej decyzji i działań użytkownik musi podjąć, aby wykonać zadanie, tym mniejsze prawdopodobieństwo, że to zrobi. Uprość przepływ użytkowników tak bardzo, jak możesz, aby zwiększyć szanse na konwersję.

6. Etykieta z intencją

Wyraźnie oznacz wszystkie elementy diagramu przepływu użytkownika. Powinno być jasne, do czego odnosi się każdy kształt, strona, sekcja lub akcja. Unikaj używania skrótów, jeśli umniejsza to znaczenie. Po zakończeniu poproś kilku współpracowników o sprawdzenie przepływów użytkowników, aby sprawdzić, czy mogą je zinterpretować.

Zoptymalizuj przepływy użytkowników za pomocą danych

Tworząc nową witrynę internetową lub testując nowe projekty lub treści, rozważ zbadanie rzeczywistych przepływów użytkowników i porównanie ich z oczekiwaniami przedstawionymi na diagramie przepływu. Jeśli pojawią się rozbieżności, możesz ich użyć do skorygowania diagramu przepływu lub edycji samego interfejsu użytkownika, aby poprowadzić użytkowników zgodnie z planem. Kilka metod badawczych UX testuje przepływy użytkowników, w tym testowanie użyteczności, analizę zadań i testowanie drzewa.

Możesz także użyć danych z Google Analytics lub badań, aby zobaczyć, gdzie możesz zoptymalizować przepływ użytkowników, aby zwiększyć sprzedaż. Podczas tworzenia witryn e-commerce przepływy użytkowników są powiązane z lejkiem sprzedaży e-commerce. To naturalne, że użytkownicy rezygnują z dalszej części ścieżki (stąd kształt lejka), ale drastyczne punkty porzucenia wskazują obszary wymagające poprawy.

Często ulepszenia oznaczają optymalizację przepływu użytkownika, czy to przez bardziej naturalną nawigację, edycję projektu lub dodanie kierunkowej kopii.

Przerwy w przepływie mogą również wynikać z wyborów biznesowych: wzrost współczynników odrzuceń po tym, jak potencjalni kupujący zobaczą koszt wysyłki, wskazuje, że prawdopodobnie problemem są wysokie stawki wysyłki.

Przeanalizuj kroki otaczające współczynniki odrzuceń i postaw hipotezę, jaki może być problem (i rozwiązanie). Testuj swoje rozwiązania A/B, aż porzucenia się zmniejszą, a więcej użytkowników przejdzie do następnego kroku.

Różnicowanie przepływu w witrynie e-commerce

Schematy blokowe e-commerce mają podobny schemat: odkryj stronę zewnętrznie, wejdź na stronę, przejrzyj produkty, dodaj produkty do koszyka, zrealizuj zamówienie, otrzymaj potwierdzenie.

Chociaż z natury są to wszystkie kroki związane z e-commerce, warto wziąć pod uwagę swoją wyjątkową propozycję wartości i odbiorców podczas projektowania przepływów użytkowników.

Czy możesz zaoferować więcej? Czy Twoi użytkownicy mogą korzystać z dodatkowych funkcji?

Niektóre sklepy e-commerce mieszają ścieżki użytkowników i przepływy zadań, dodając quizy personalizacyjne lub funkcje próbne. Na przykład Virtual Artist Sephora pozwala użytkownikom symulować, jak wyglądałby na nich makijaż przed zakupem w domu.

Kolejnym miejscem do wyróżnienia się w e-commerce, o którym często zapomina się przy projektowaniu przepływów użytkowników, jest obsługa posprzedażowa. Potwierdzenie zakupu klienta nigdy nie kończy podróży klienta. Teraz muszą śledzić swoją przesyłkę, z niepokojem czekać na jej przybycie, z podekscytowaniem rozpakować ją i ewentualnie zwrócić. Warto zastanowić się, jak możesz poprawić wrażenia użytkownika z wysyłką, stronami z podziękowaniami i sprzedażą dodatkową.

Tworząc przepływy dla witryn i aplikacji e-commerce, pamiętaj o wszystkich etapach ścieżki e-commerce:

• Namysł
• Ocena
• Zakup
• Po zakupie

Zwiększaj sprzedaż dzięki wydajnym przepływom UX

Doświadczenie użytkownika to coś więcej niż ładne wzornictwo, które użytkownicy lubią oglądać. To projektowanie architektury informacji i treści, które prowadzą przez drogę e-commerce do konwersji.

Chodzi o zbudowanie strony internetowej lub aplikacji, po której użytkownik może się z łatwością poruszać, przechodząc z jednego etapu do drugiego, odnajdując produkt, którego szuka, i klikając odpowiednie wezwanie do działania, gdy nadejdzie czas.

Upychanie zbyt wielu kroków między punktem wejścia a punktem sprzedaży oznacza poproszenie ich o wykonanie większej ilości pracy; zbyt mała liczba kroków może nie wystarczyć do rozstrzygnięcia ich wahań, co oznacza poproszenie ich o większe ryzyko. Nikt nie lubi pracy ani ryzyka przy zakupie online.

Mapowanie wydajnego przepływu użytkowników dla każdego zadania w Twojej witrynie to skuteczny sposób na wykrycie punktów tarcia konsumentów, dzięki czemu możesz zaprojektować produkt cyfrowy, który zapewnia lepsze wrażenia użytkownika, a w konsekwencji napędza sprzedaż.