Prosty hack interfejsu użytkownika w celu ulepszenia Onboarding UX [OCD]

Makiety i szkice interfejsu użytkownika zakładają, że dane użytkownika są już obecne. Na przykład poniższa makieta zakłada, że ​​użytkownik będzie miał kontakty do czatowania, powiadomienia, a nawet wątki na czacie.

Prosty interfejs komunikatora zbudowany przy użyciu tego bezpłatnego zasobu szkicu

Ale tak się nigdy nie dzieje, gdy użytkownik rejestruje się. Na początku nie ma danych, więc pusta kolumna kontaktów i puste okno czatu.

Błyszczący interfejs użytkownika ułatwia korzystanie z informacji i nie koncentruje się na tym, jak je utworzyć.

Nauczyłem się tego na własnej skórze, kiedy wchłonąłem tyle Dribbble, ile mogłem zaprojektować pulpit nawigacyjny dla aplikacji b2b. Szkic wyglądał świetnie, ale nasi klienci nie byli w stanie znaleźć drogi.

Złe UX zwiększa koszty wdrożenia i wsparcia, co bezpośrednio wpływa na przychody. Źle się też ogląda, jak użytkownik walczy o perfekcyjny wygląd swojego piksela. Przypomina, że ​​zawiodłeś.

Istniejące rozwiązania

Jednym z rozwiązań było wcześniejsze wdrożenie przy użyciu slajdów takich jak interfejs. To wydaje się być standardem dla aplikacji mobilnych.

Slack oparty na slajdach on-boarding UX

Problemem w podejściu do slajdów jest brak kontekstu. Możesz przekazać tylko tyle na slajdach (ile zachowuje użytkownik to inne pytanie).

Świetnie nadaje się do przedstawienia przeglądu produktu, ale nie jest bardzo pomocny w wyjaśnieniu jego działania. Nie miało to znaczenia w moim przypadku użycia, ponieważ złożoności produktu nie można było sprowadzić do kilku slajdów.

Istniało również rozwiązanie oparte na podpowiedzi, które prowadzi użytkownika przez określone kroki. Ta opcja jest bardziej popularna w aplikacjach internetowych. Istnieje wiele dobrych bibliotek javascript, które pomogą Ci zbudować te przepływy.

Podpowiedź oparta na demie wbudowanej dla introjs.com/

Jeśli chodzi o rozwiązanie oparte na podpowiedziach, uznałem je za denerwujące i prawie zawsze klikałem „pomiń samouczek”. Chociaż duże firmy, takie jak Canva, korzystają z podpowiedzi opartych na pokładzie. Produkt o nazwie AppCues pozwala zaprojektować te podpowiedzi bez kodu, porządnie.

Istnieje również podejście typu latarni nawigacyjnej, w którym często źle rozumiane funkcje są oznaczone świecącymi sygnalizatorami, które dostarczają odpowiednich informacji, gdy (jeśli) potrzebne.

To najbardziej dyskretny sposób. W przeciwieństwie do podpowiedzi, która zsuwa 17-krokowy samouczek do gardła i znika, gdy go potrzebujesz, to podejście oparte na hotspotach dostarcza informacji, gdy będziesz gotowy.

Warto wspomnieć, że Slack używa wszystkich 3 formularzy. Nic dziwnego, że ich użytkownicy trzymają się. Co również w jakiś sposób wskazuje na fakt, że zatrzymanie jest wprost proporcjonalne do łatwości wejścia na pokład.

OCD aka Onboarding centric design

Lubię nazywać rzeczy. Nazwy pomagają urzeczywistniać pomysły w umyśle. Nazwijmy to centralnym projektem Onboarding.

Chciałem rozwiązania, które:

  • Był odpowiedni do kontekstu
  • Nie było denerwujące (nikt nie lubi robić 17 kroków, aby dowiedzieć się, jak działa funkcja)
  • Jest dyskretny (jak latarnie)
  • Jest łatwy do spożycia (etykiety narzędzi nie są łatwe do spożycia)

Wynik

Po prostu zacząłem projektować stany. Projekt czatu, który widziałeś, gdy zacząłeś czytać ten artykuł, można zaprojektować w trzech stanach.

Stan 1: Brak kontaktów

Stan 2: Kontakty są obecne, ale nie ma rozmów

Stan 3: Czaty i kontakty są obecne

Celem każdego stanu jest przejście użytkownika do następnego stanu. Gdy użytkownik przejdzie do stanu 3, jest z powodzeniem dołączany. Biorąc pod uwagę makietę czatu, cele dla każdego stanu są następujące:

Cel stanu 1: główny użytkownik, aby dodać kontakt

Poniższa makieta zawiera tylko jedno wezwanie do działania, niebieski przycisk plus, który pozwala użytkownikowi dodać nowy kontakt. Zarówno grafika, jak i tekst przygotowują użytkownika do podjęcia tej akcji.

Stan 1 - Prime użytkownika, aby dodać kontakty (ilustracja undraw.co)

Po dodaniu kontaktu możemy rozpocząć drugi cel.

Cel stanu 2: najlepszy użytkownik, aby rozpocząć czat

Poniższy przykład pokazuje graficzny podkład do rozpoczęcia czatu. Wyraźnie opisuje dostępne funkcje. Znów jest tylko jedna rzecz, którą możesz teraz zrobić, tj. Wysłać wiadomość. Możesz również wykonać połączenie w tym interfejsie użytkownika, ale oba te działania służą temu samemu celowi. Zabiorą użytkownika do kroku 3.

Stan 2 - Dodano kontakt, należy rozpocząć czat

Cel stanu 3: Brak, użytkownik jest włączony - wszystkie wskazówki powinny zniknąć

I wreszcie, gdy użytkownik powtórzy ten proces kilka razy, jej interfejs zacznie wyglądać tak, jak pierwotnie zamierzaliśmy.

Stan 3 - Użytkownik pomyślnie wszedł na pokład

Korzyści z tego podejścia

  • W porównaniu z podejściem do slajdów w kroku 1, Onboarding Centric Design (OCD) przedstawia zawartość w częściach. Informacje są dostępne w momencie podejmowania decyzji.
  • Tego podejścia można używać zarówno na urządzeniach mobilnych, jak i stacjonarnych. Ten interfejs użytkownika jest prosty, ale w przypadku złożonego interfejsu użytkownika można użyć OCD z punktami dostępowymi w celu podniesienia CTA.
  • Takie podejście poprawia przede wszystkim UX, zmuszając Cię do myślenia o podróży użytkownika.
  • Jeśli zdarzy ci się pisać swoje nakładki za pomocą React, to podejście pasuje idealnie do architektury komponentów.

Zasadniczo:

Projektuj makiety stanów.
Każdy stan ma jeden cel - przejście do następnego stanu.
Ostatni stan ma miejsce, gdy użytkownik jest na pokładzie.

Dziękuje za przeczytanie :)

Cześć, jeśli spodobał Ci się ten artykuł i chcesz być na bieżąco, śledź mnie na: Medium, Github lub Twitterze

Prowadzę luźną społeczność (która ma 18 członków od 6 października 2018 r.), W której możesz pomagać innym lub otrzymywać pomoc dotyczącą frontendu, backendu i ogólnie rozwoju. Możesz dołączyć do tego tutaj.