Diagramy user flow i wireframe'y stron do pobrania w SVG
User flow i wireframe'y
Przykłady diagramów user flow + zestaw wireframe'ów stron (darmowe SVG) | We.Inc
Czym jest user flow, osiem gotowych ścieżek dla rejestracji, zakupu, rezerwacji i innych zadań oraz proste wireframe'y strony głównej, cennika i kontaktu. Pobierz każdy jako SVG, który otworzysz w Figmie.
User flow to ścieżka, którą osoba przechodzi przez Twoją stronę, aby wykonać jedno zadanie, narysowana jako ekrany, akcje i decyzje połączone strzałkami. Wireframe to prosty szkic układu jednego ekranu. Najpierw rozrysuj ścieżkę, potem zrób wireframe każdego ekranu na niej. Poniżej znajdziesz osiem typowych ścieżek i trzy wireframe'y do pobrania jako SVG.
Kształty używane w diagramach
Kształt
Znaczenie
Zaokrąglona pigułka (niebieska)
Początek ścieżki
Kwadratowe pole
Strona lub ekran
Szare pole
Coś, co robi osoba, na przykład wypełnia formularz
Romb
Decyzja lub sprawdzenie, które może się nie powieść
Zaokrąglona pigułka (zielona)
Cel został osiągnięty
Każda ścieżka dotyczy jednego celu i ma jak najmniej kroków prowadzących do niego, a najczęstsza porażka jest narysowana jako przerywana pętla. Potraktuj je jako punkt wyjścia dla własnej strony, a potem zrób wireframe'y ekranów, przez które przechodzą.
Zapisz cel w jednym zdaniu, na przykład: nowy odwiedzający rezerwuje pierwszą wizytę.
Wypisz każdy ekran i każdą akcję od punktu wejścia do celu. Nie pomijaj tych nudnych, jak potwierdzenie adresu e-mail.
Zaznacz każde miejsce, w którym coś może pójść nie tak, na przykład odrzucona karta lub zajęty termin, i zdecyduj, dokąd osoba trafia dalej.
Policz kroki i usuń te, które nie pomagają osobie osiągnąć celu.
Zrób wireframe każdego ekranu na ścieżce, ustalając, co gdzie się znajdzie, zanim wybierzesz kolory czy czcionki.
Zaczynaj od miejsca, w którym ludzie faktycznie trafiają na stronę. Wielu odwiedzających ląduje z wyszukiwarki na stronie produktu lub wpisie na blogu, a nie na stronie głównej.
Celowo trzymaj wireframe'y w szarości. Kolory i prawdziwe zdjęcia prowokują uwagi o stylu, gdy chcesz uwag o strukturze.
Każdy romb decyzyjny potrzebuje drogi powrotu. Nieudana płatność, która kończy się ślepym zaułkiem, to utracona sprzedaż.
Przetestuj ścieżkę z pięcioma osobami, zanim ją zbudujesz. Obserwowanie, gdzie się wahają, ujawnia większość problemów.
Najczęściej zadawane pytania
Czym różni się user flow od user journey?
User flow mapuje ekrany i kroki jednego zadania na Twojej stronie. User journey jest szersza: obejmuje to, co ktoś myśli, czuje i robi przed, w trakcie i po korzystaniu z Twojego produktu, często w kilku kanałach. Ścieżki służą do projektowania ekranów; journeys do rozumienia ludzi.
Jak otworzyć te pliki SVG w Figmie?
Pobierz plik i przeciągnij go na płótno Figmy albo otwórz go w przeglądarce, skopiuj i wklej. Figma zamienia kształty i tekst w edytowalne warstwy, które możesz ostylować na nowo i rozbudować.
Jak szczegółowy powinien być wireframe?
Na tyle, by pokazać, co jest na ekranie i w jakiej kolejności: nawigację, nagłówki, obrazy, formularze i przyciski. Pomiń dokładne teksty, kolory i czcionki. Jeśli ludzie zaczynają dyskutować o odcieniu niebieskiego, jest zbyt szczegółowy.
Czy do user flow potrzebuję specjalnego oprogramowania?
Nie. Na pierwsze podejście wystarczą kartka i długopis. Narzędzia do diagramów pomagają, gdy chcesz udostępniać, edytować lub trzymać ścieżki obok projektów, a zwykłe pliki SVG, takie jak te, działają w większości z nich.
Dlaczego rozrysować ścieżkę przed stronami
Strony projektowane pojedynczo zwykle działają osobno, a zawodzą razem. Cennik wygląda świetnie, ale nie ma jasnego następnego kroku; formularz rejestracji pyta o rzeczy, o które ponownie pyta kasa. Narysowanie ścieżki najpierw pokazuje każde przejście między ekranami, a właśnie tam większość ludzi odpada.
Ścieżka pokazuje też koszt każdego dodatkowego kroku. Gdy rezerwacja na papierze zajmuje dziewięć pól, od razu widać, które można połączyć.
Od wireframe'u do prawdziwej strony
Gdy kolejność treści jest uzgodniona, wireframe staje się briefem dla właściwego projektu. Każdy szary blok zamienia się w sekcję z nagłówkiem i tekstem, a etykiety w rogach stają się nazwami sekcji, których używasz z zespołem lub w kreatorze stron.
Rejestracja
Odwiedzający zakłada konto i dociera do pierwszego przydatnego ekranu.
Odwiedzający trafia na stronę główną
Klika Zacznij za darmo
Formularz rejestracji: e-mail i hasło
E-mail już użyty?
Tak: zaloguj się
Link potwierdzający e-mail
Ekran powitalny z pierwszym zadaniem
Zakup
Kupujący płaci za zawartość koszyka.
Koszyk
Kasa: kontakt i wysyłka
Wybór sposobu dostawy
Dane płatności
Płatność zaakceptowana?
Nie: spróbuj ponownie
Potwierdzenie zamówienia i e-mail
Rezerwacja
Nowy klient rezerwuje pierwszą wizytę.
Strona usługi
Wybór usługi i pracownika
Kalendarz wolnych terminów
Termin nadal wolny?
Nie: wybierz ponownie
Formularz danych kontaktowych
Rezerwacja potwierdzona, dodana do kalendarza
Reset hasła
Użytkownik, który zapomniał hasła, odzyskuje dostęp.
Strona logowania
Klika Nie pamiętam hasła
Wpisuje e-mail
Otwiera link resetujący z e-maila
Link nadal ważny?
Nie: wyślij ponownie
Ustawia nowe hasło
Zalogowany
Zapytanie kontaktowe
Potencjalny klient wysyła pytanie i wie, kiedy spodziewać się odpowiedzi.
Dowolna strona
Strona kontaktowa
Wpisuje imię, e-mail, wiadomość
Pola poprawne?
Nie: pokaż błędy
Podziękowanie z czasem odpowiedzi
Zapis do newslettera
Czytelnik zapisuje się i potwierdza subskrypcję.
Wpis na blogu
Pole zapisu na końcu wpisu
Strona Sprawdź skrzynkę
Klika link potwierdzający
E-mail powitalny i strona archiwum
Od wyszukiwania do produktu
Kupujący znajduje produkt przez pole wyszukiwania.
Dowolna strona
Wpisuje w wyszukiwarkę
Strona wyników z filtrami
Coś znaleziono?
Nie: podpowiedzi
Strona produktu
Dodano do koszyka
Prośba o wycenę
Lokalny klient prosi o wycenę zlecenia.
Strona obszaru działania
Przycisk Poproś o wycenę
Krótki formularz: rodzaj pracy, kod pocztowy, zdjęcia
W obszarze działania?
Nie: poleć partnera
Potwierdzenie z godziną oddzwonienia
Strona główna
Powiedz, czym się zajmujesz, udowodnij to i wskaż jeden następny krok.
Nawigacja
Hero: nagłówek, zdanie, główny przycisk
Loga lub dowody
Trzy korzyści
Jak to działa
Opinie
Końcowe wezwanie do działania
Stopka
Cennik
Pozwól ludziom porównać plany i wybrać jeden bez kontaktowania się z Tobą.
Nawigacja
Nagłówek i przełącznik miesięcznie lub rocznie
Karty planów
Tabela porównania funkcji
FAQ o cenach
Stopka
Strona kontaktowa
Ułatw kontakt i jasno powiedz, kiedy odpowiesz.
Nawigacja
Nagłówek i czas odpowiedzi
Formularz kontaktowy
Mapa lub zdjęcie
Adres, telefon, godziny
Stopka
Osiem przykładów user flow
Każda ścieżka dotyczy jednego celu. Przerywana pomarańczowa linia to najczęstszy sposób, w jaki krok się nie udaje, i miejsce, do którego osoba trafia dalej.
Zestaw wireframe'ów
Trzy mało szczegółowe wireframe'y stron, których potrzebuje większość serwisów. Etykiety w każdym bloku nazywają sekcję.