Onboarding w produkcie – wzorce

Onboarding! Ostatnio było o dobrych praktykach i wszystkim dookoła. A teraz przyszedł czas żeby obgadać sobie popularne wzorce.

Jak ze wszystkim w UI, kategoryzacja i nazewnictwo nie jest ujednolicone – i możecie spotkać się z bardzo różnym podziałem, często mieszającym np. typy komponentów z całymi wzorcami. Więc nie przejmowałabym się tak bardzo podziałem, jak długo rozumie się jakie mamy opcje i jak możemy je wykorzystać.

Onboarding w produkcie jako… produkt

Nie zawsze onboarding do produktu robimy zupełnie od zera. Powszechne jest stosowanie gotowych produktów i usług, które pomagają nam wprowadzić np. czatboty albo listy zadań i wymagają tylko ostylowania i uzupełnienia treści.

To jest zawsze dyskusja między tym co możemy, jakie mamy zasoby i ile czasu i jak bardzo nam się opłaca lub nie, z gotowców korzystać. Takie przykładowe produkty, które wprowadzają onboarding w formie płatnego produktu, to np. intercom albo userflow.

Onboarding produktu wewnątrz czy na zewnątrz?

Zacznijmy od tego, że onboarding możemy przeprowadzić w produkcie, ale też poza nim. Czyli nie musimy odpalać appki żeby dostać treści, które mają nas czegoś nauczyć. I do takich typów onboardingów należą np.:

Serie maili (onboarding emails)

To zaprojektowane wiadomości, które trafiają do skrzynek odbiorców by pokazać jak korzystać z głównych funkcji, ale też przy okazji przypomnieć, że coś trzeba tam zrobić. Z reguły to maile, które przychodzą codziennie od momentu rejestracji i takie serie mogą trwać od kilku do kilkunastu dni. W dodatku bywają przeplatane innymi typami wiadomości (więc może się okazać, że nagle dostaje się całkiem sporo wiadomości od jednego serwisu).

Z reguły jedna wiadomość zachęca nas do zrobienia jednej, konkretnej rzeczy. Np. jak w przypadku Substacka – stworzenie pierwszego wpisu lub podzielenie się swoim newsletterem ze znajomymi.

Stworzenie serii wiadomości, które automatycznie się wysyłają nie brzmi jak jakieś wyzwanie. Ale jeśli faktycznie mają być skuteczne, zachęcać do działania i angażować użytkowników do tego by wracać do produktu, a jednocześnie nie być irytującymi i zaśmiecającymi skrzynkę – no cóż, robi się trochę trudniej.

W przypadku projektowania tego rozwiązania trzeba wziąć pod uwagę nie tylko podstawy użyteczności, ale też specyfikę tego kanału. Musimy zadbać o informatywny i zwracający uwagę tytuł wiadomości, dobrze zaprojektowaną, nie za długą treść wiadomości, która będzie miała jasne wezwanie do działania (CTA). A do tego wszystkiego musimy pamiętać o filtrach antyspamowych i tym jak łatwo zniechęcić do siebie odbiorców – co może skutkować wypisaniem się z tego kanału.

Na całe szczęście maile też można testować, co więcej, popularne systemy newsletterowe pomagają tworzyć testy A/B. Można łatwo mierzyć skuteczność onboardingu przez maile, bo systemy newsletterowe mają wbudowane raportowanie otwieralności i klikalności wiadomości.

Community – społeczności i fora

Coś, co być może nie kojarzy się na pierwszy rzut oka z onboardingiem, ale może w tym onboardingu pomóc, to dostęp do społeczności. Takiej, która dzieli się wskazówkami i odpowiada na pytania dotyczące użycia produktu.

Samo budowanie aktywnej społeczności, która będzie generowała dla nas treści jest cholernie trudne i wymagające czasu. Ale jeśli już taką społeczność mamy i treści tworzą się praktycznie same, warto zastanowić się, czy nie możemy w jakimś stopniu wykorzystać jej w onboardingu.

Kiedy zastanawiam się nad produktami, w których główną rolę onboardingu przejęły właśnie społeczności, to myślę o trzech takich produktach, z których korzystałam. Pierwszy to świętej pamięci Flash – w czasach, gdy nie można było liczyć jeszcze na video tutoriale na YouTube, duża część użytkowników siedziała właśnie na forach, gdzie dzieliliśmy się plikami, fragmentami skryptów i tipami jak coś zrobić szybciej. Podobnie uczyłam się Axure, który ma legendarną społeczność. 99% problemów jakie macie z czymś w tej appce, jest już rozwiązana, opisana i z wrzuconym plikiem rozwiązania na ich forum właśnie.

A z takich świeższych produktów, to myślę o Midjourney – czyli produkcie generującym obrazy przy pomocy AI, ale działającym jako bot Discorda (aplikacji do komunikacji). Mam poczucie, że Midjourney ma całkiem wysoki próg wejścia, właśnie przez użycie Discorda, ale mimo to, ma mnóstwo aktywnych użytkowników. I toczące się dyskusje na publicznych czatach – pisanych i głosowych.

Ale jak wspomniałam – budowanie społeczności, takiej moderowanej przez ludzi z produktu i hostowanej na oficjalnych kanałach, to wyższa szkoła jazdy. I przyznam, że częściej widziałam nieudane próby wciągnięcia społeczności do onboardingu, niż te, które podałabym za dobre przykłady.

Szkolenia stacjonarne

Na koniec tych zewnętrznych onboardingów myślę, że trzeba wspomnieć też o tym, że niektóre produkty wymagają szkoleń stacjonarnych (albo nie wymagają, ale udostępniają taką możliwość). To będzie dotyczyło głównie oprogramowania specjalistycznego, często łączące obsługę nie tylko softu, ale też całego urządzenia. Tu mogę podać przykład mojej poprzedniej firmy, gdzie zespół odpowiedzialny na instalację urządzeń do obsługi restauracji (np. kas, tabletów, ekranów w kuchniach i kiosków), był odpowiedzialny również za podstawowe przeszkolenie klientów.

Nie planuję w ogóle tego tematu bardziej omawiać, bo zupełnie nie zajmuję się tworzeniem takich szkoleń i treści, ale chciałam zaznaczyć, że takie rozwiązania również funkcjonują i wymagają np. tworzenia wspomagających materiałów – zeszyty ćwiczeń, prezentacje, testy itd.

Video tutoriale

Na pograniczu zewnętrznego i wewnętrznego onboardingu spotkamy się również z tutorialami video. Czemu na pograniczu? Ano dlatego, że takie nagrania możemy znaleźć jednocześnie w appkach i poza nimi, np. na stronie dokumentacji. ProtoPie – aplikacja do prototypowania, pokazuje dostęp do video w zakładce produktu. Ale nagrania przenoszą nas do zewnętrznego serwisu – Protopie School, czyli stronie gdzie znajdziemy przykładowe rozwiązania i video tłumaczące jak coś zrobić.

Czasami w produktach spotkacie się z krótkimi video nagraniami w trakcie uzupełniania niezbędnych informacji lub pierwszego korzystania z produktu. Framer, który wprowadził niedawno opcję generowania strony przy pomocy AI, pokazuje krótkie video na start. Również po przejściu do edytora możemy otworzyć w aplikacji video z instrukcjami i ukryć je, jeśli nie chcemy oglądać całości.

No i tu mamy jeszcze jedną formę video, łączącą format szkoleń – bo trzeba jeszcze wspomnieć o webinarach. Zdarza się, że firmy organizują takie szkolenia online, w formie webinaru. Czasami część spotkania jest nagrana wcześniej i puszczona, ale pozwala na kontakt na żywo z osobami, które mogą odpowiedzieć na nasze pytania i poświęcić czas, na pokazanie lub wytłumaczenie czegoś.

Zdarzyło mi się brać udział w takich webinarach, gdy pojawiały się jakieś nowe funkcje w produktach. Ich dużym minusem jest to, że spotkanie ma określoną godzinę i czas, plus wymaga dodatkowego zaangażowania ze strony firmy – czyli musimy mieć ludzi, którzy to ogarną (czyli mamy pewnie zwiększone koszty).

Zakładka pomocy lub link do dokumentacji

Z takich rozwiązań, z pogranicza, spotkacie się również z pomocą/dokumentacją. Czasami zdarza się, że po rejestracji jesteśmy od razu wrzucani do produktu i… musimy zdać się na własną intuicję. Jedyną formą podpowiedzi czy pomocy bywa wtedy zakładka, która otwiera nam specjalny obszar bądź przenosi do zewnętrznego serwisu. To może być baza wiedzy, najczęściej zadawane pytania, również możliwość zgłoszenia problemu do obsługi klienta. Przy mniej zaawansowanych użytkownikach, może to oznaczać przełączanie się między zakładkami w produkcie a pomocą, żeby przejść przez ustawienia produktu.

Dobrze przygotowana dokumentacja i pomoc to temat na inny materiał, ale jeśli wiemy, że nie proponujemy użytkownikom alternatywnych metod nauki produktu, musimy się upewnić, że przede wszystkim, łatwo będzie tę pomoc znaleźć.

I tu mam taki przykład z Zenboxa – hostingu, z którego korzystam. Który nie ma najbardziej intuicyjnego interfejsu dla osób, które nie ogarniają technikaliów. Pojawia się specjalistyczne słownictwo, czasami w różnych miejscach znajdują się rzeczy, które wydawać by się mogło, powinny być obok siebie. I przyznam, że zdarzało mi się dość często korzystać właśnie z zakładki pomocy i ich bazy wiedzy, która jest przygotowana naprawdę w świetny sposób.

I dość jasne jest też, że jeśli sama sobie nie poradzę z problemem, mogę po prostu odezwać się do obsługi klienta i tam ktoś pomoże mi z moim problemem. Więc z jednej strony, jestem skazana na to, żeby uczyć się, gdzie ustawia się jakieś funkcje, ale z drugiej, pomagają mi to robić samodzielnie przez materiały edukacyjne.

Przejdźmy teraz do tych rozwiązań, które często znajdziemy w produktach:

Czaty i czatboty

Czyli onboarding w formie czatu. I to może być również setup całego produktu, który dokonywany jest w formie „czatu”. To zobaczycie na screenie ekranu powyżej, z pierwszego użycia aplikacji Hocoos, czyli buildera stron. No i tutaj przyznam, że ta forma jest taka trochę… wymuszona, bo dokładnie te wszystkie rzeczy mogłabym przecież wyklikać w jakimś popupie, ale twórcy najwyraźniej uznali, że to optymalna forma. Ale zobaczycie tu animację pozorującą rozmowę, możemy coś tam wpisać, coś wyklikać, po drodze możemy w razie co się cofnąć i przechodzimy do rejestracji konta.

Ale czaty mogą być też mniejszym elementem, który wyskakuje nam w określonym momencie i serwuje rady, porady, dobre praktyki, linki do bazy wiedzy lub otwiera instrukcje. Problem z takimi czatami jest taki, że mogą nam się pomylić z popularnymi również czatami obsługi klienta i odruchowo je zamkniemy. No i nie ma co przesadzać, bo znam firmy, które decysują się na wrzucenie czatów dwóch. I z lewej strony mamy obsługę klienta, a z drugiej np. onboarding i szkolenia (screen wyżej).

Niemniej, czat może posłużyć nam za element onboardingu – upewnijmy się tylko, że pokazuje istotne dla kontekstu informacje, a nie zupełnie losowe treści.

Walkthrough

To chyba najbardziej nadużywany format w aplikacjach mobilnych i przez wielu projektantów używany jako definicja onboardingu. A wiecie już, że onboardingów mamy wiele rodzajów. To te ekrany, które wyświetlają się po pierwszy odpaleniu aplikacji i wymagają od nas czytania o tym co znajduje się w appce, co możemy w niej zrobić, albo dlaczego warto z niej skorzystać. No i to jest taki dziwny twór, za którym osobiście nie przepadam i trochę uważam go za pójście na łatwiznę.

No bo w aplikacjach mobilnych, zanim otworzymy appkę, musimy ją pobrać. Co nie dzieje się raczej przez przypadek, mamy jakieś wyobrażenia i podejrzenia co ta appka robi. Więc po odpaleniu jej, niekoniecznie musimy chcieć oglądać kolejne ekrany, które nam ją reklamują. Bo to mogliśmy już pewnie zobaczyć na ekranach sklepu z aplikacjami albo landing pagu, który zachęcił nas do jej pobrania.

Nie przekonuje mnie też argument, że pokazujemy na pierwszych ekranach jak z aplikacji skorzystać, bo tu z kolei wymuszamy na użytkownikach zapamiętywania informacji. Co zrobić w jakiej kolejności, gdzie kliknąć itd. Jedną z heurystyk Nielsena jest Daj wybór zamiast wymagać zapamiętania i sprowadza się do tego żeby unikać zwiększania obciążenia poznawczego. Jeśli na start bombardujemy użytkowników informacjami i to takimi, które być może nie przydadzą im się w tej chwili, to może wcale nie musimy tego robić?

Jeśli jednak decydujecie się na ten typ onboardingu w produkcie, przede wszystkim dajcie możliwość pominięcia go i/lub wykonania głównej akcji z pierwszego ekranu. Taki swipe pięciu ekranów, których nie chce nam się czytać, to niezbyt dobre pierwsze wrażenie. Pokazujcie też ile ekranów jeszcze przed nami – popularne jest oznaczenie np. kropkami, które znacie pewnie z karuzeli na stronach.

No i właśnie, czytanie – teksty nie mogą być zbyt długie, a same ekrany chaotyczne. Dobrze sprawdzą się proste układy jak ilustracja + podpis. I trzymamy się tu wszystkich podstawowych zasad projektowania graficznego – tekst nie mogą być zbyt małe, wyrównujemy je do lewej lub do środka i muszą zachować minimalny kontrast tekstu do tła, bo skoro już je wrzucacie, to raczej z zamiarem, że powinno dać się je przeczytać.

Zdarza się, że takie ekrany spotkacie również po rejestracji w produkcie – i mam poczucie, że częściej widzę je po jakiejś aktualizacji aplikacji. Np. do zaprezentowania kilku nowych funkcji. Przyznam, że częściej wydają mi się praktyczne (bo pozwalają szybko, w jednym miejscu przewinąć wszystkie aktualizacje), niż gdybym miała znowu przechodzić przez całe ścieżki onboardingu. A jak już mowa o ścieżkach to…

Guided tour – wycieczki po produkcie

To również dość popularna forma wprowadzenia do produktu, która przyjmuje formę oprowadzenia po interfejsie. Z reguły skupia się na pojedynczych elementach interfejsu – np. pokazuje do czego służą poszczególne ikony i przyciski, albo co znajdziemy pod różnymi zakładkami nawigacji. Takie „wycieczki” mogą przeprowadzić nas również przez np. cały proces tworzenia nowego produktu w sklepie albo dodawanie nowego wydarzenia do kalendarza.

Mogą przyjąć różną formę – od małych tooltipów, które pojawiają się na ekranie, po wygaszanie całego ekranu i zaznaczanie konkretnych obszarów z wytłumaczeniem jak coś zrobić. Dużo częściej spotykam się z rozwiązaniem, które mogę przerwać, zamknąć okienko i iść swoim rytmem, ale zdarza się, że takie oprowadzenie po interfejsie jest wymagane – i dopóki kilka razy sobie nie klikniemy, nie możemy nic w produkcie zrobić.

Ten efekt wygaszenia tła ma sens, kiedy chcemy mocno zwrócić uwagę użytkowników na konkretny element – ale jak to z wygaszeniem bywa – blokuje jednocześnie dostęp do pozostałych opcji. Więc jeśli bierzemy się za projektowanie takiego elementu interfejsu, to trzeba zastanowić się czy zwykły tooltip, który nie zablokuje pozostałych elementów nie będzie lepszy w naszym przypadku.

Takie oprowadzanie po produkcie ma tę zaletę, że przejmujemy kontrolę nad tym co i w jakiej kolejności użytkownicy zobaczą. Zakładając oczywiście, że nie wyłączą onboardingu już na pierwszym kroku.

No i trzeba uważać na długość takiego onboardingu i ile tych tooltipów planujemy wyświetlić. Jeśli będziemy wymagać wielokrotnego odklikiwania kolejnych kroków, to oprócz tego, że zanudzimy użytkowników możemy sprawić, że zaczną odklikiwać mechanicznie, bez czytania, byle tylko taki onboarding zamknąć. Dlatego tak ważne jest, żeby dać po prostu możliwość zakończenia takiej wycieczki i dobrze przemyśleć co w tym onboardingu przewidzieć. Najlepiej skupić się na kluczowych celach, które użytkownicy chcą osiągnąć w appce.

Checlisty – Listy zadań (uczenie przez robienie)

Widzę je ostatnio coraz częściej i w sumie nic dziwnego, bo mają proste założenie – uczyć przez praktykę. Wchodząc pierwszy raz do produktu otrzymujemy listę zadań do wykonania – często wspartą dodatkowymi wizualnymi wskazówkami – skreśleniami wykonanych zadań, paskami postępu, które mają zachęcać nas do dalszych działań.

To mogą być małe rzeczy, które będą zachęcać nas np. do wypełniania formularzy z informacjami kontaktowymi, udostępnianiem informacji kontaktowych, szerowaniem profilu w mediach społecznościowych itd. Taką listę zadań zobaczycie min. w LinkedIn, która stopniowo zachęca nas do uzupełniania profilu, a w bardziej rozbudowanej wersji – w Shopify, gdzie mamy do ustawienia masę treści.

Najczęściej odpala się w pierwszym widoku po wejściu do produktu – na dashboardzie lub w formie jakiegoś widgetu – dodatkowego panelu, który wisi sobie gdzieś z boku. I co najważniejsze – lista pozwala nam jednocześnie swobodnie korzystać z różnych podstron i eksplorować produkt we własnym tempie.

Lista zadań pozwala nam zrozumieć ile brakuje nam do pełnego ustawienia produktu i pomaga gdy wracamy do niego np. kolejnego dnia lub po kilku dniach. Status listy nie zmienia się bowiem, dopóki sami nie wykonamy jakichś akcji.

Pomaga przede wszystkim w praktycznej nauce produktu – żeby wykonać zadanie, musimy bowiem poklikać po interfejsie i z reguły, wykonać podstawowe zadania. A to oznacza, że jest większa szansa, że następnym razem, gdy przyjdzie nam z produktu korzystać, zapamiętamy jak coś robiliśmy.

Tu trzeba tylko ostrożnie planować ile elementów do listy zadań wrzucimy – łatwo bowiem osiągnąć efekt przytłoczenia – na zasadzie, o matko, 30 zadań, nie chce mi się, nie mam czasu! Warto zadbać też o odpowiednią interakcję – zamiast suchej listy zadań, możemy dodać CTA, linki do tych miejsc, gdzie te zadania możemy wykonać. Tak, by jeszcze szybciej dotrzeć do właściwego miejsca i odhaczyć zadanie.

Lubię tę formę onboardingu, ale nie oznacza to wcale, że nie można jej schrzanić. Niejasne komunikaty (oczekiwania), brak pomocy w postaci linków i CTA, mogą skutecznie zamienić ciekawy koncept, w irytację spowodowaną poszukiwaniem punktu „startu zadania”.

Onboarding kontekstowy

I jeszcze jeden typ, który wydaje mi się idealnym rozwiązaniem, ale bywa dość podstępny we wdrożeniu. Czyli taki onboarding, który pojawia się w momencie, kiedy chcemy wykonać jakieś akcje, zmieniamy kontekst lub przechodzimy do zupełnie nowego obszaru, którego wcześniej nie odwiedzaliśmy. Format tego onboardingu bywa różny, może nawet zmieniać się w zależności od obszaru lub etapu użycia produktu. Najczęściej przyjmuje formę tooltipów, małych infoboxów, z krótkimi informacjami tekstowymi, czasem gifem lub linkiem do video.

To jest o tyle ciekawe rozwiązanie, bo pojawia się, w założeniu, wtedy kiedy możemy go potrzebować. Czyli wchodzę do zakładki np. z fakturami, bo być może chcę się nauczyć, zobaczyć, jak wystawić fakturę w produkcie i wtedy dostaję jakąś kontekstową wskazówkę o tym od czego np. zacząć.

Elementy wspierające onboarding w produkcie

No i trzeba jeszcze wspomnieć o elementach, które przy różnych typach onboardingu są wykorzystywane by np. zwrócić naszą uwagę lub zachęcić nas do dalszego działania. I tu wymieniłabym takie jak:

Wiadomości, powiadomienia, banery

To charakterystyczne dla nowych funkcji pojawiających się w produkcie, ale zdarza się też, że wchodzimy do świeżo założonego konta w appce… i widzimy te magiczne, czerwone kropeczki przy ikonie dzwonka lub profilu. Notyfikacje przydają się żeby zaznaczyć użytkownikom, że pojawiło się w produkcie coś nowego i bywa, że kierują w kolejnych krokach do innych typów onboardingu – np. Video albo Guided tour.

Spotkacie się też z banerkami, które wyskakują przy krawędziach ekranu, często polecając co zrobić w produkcie jako „kolejne kroki” lub serwują wskazówki np. pokazują skróty klawiaturowe.

Grywalizacja, odznaki i paski postępów

Onboarding bywa łączony z jakąś formą grywalizacji – na zasadzie przechodzenia kolejnych etapów, otrzymywania za to nagród w postaci odznak. Lub innego badziewia, które nas często zupełnie nie obchodzi. No i jak wyczuwacie, nie jestem największą fanką – ale to, że coś nie działa na mnie, nie oznacza, że nie działa na innych użytkowników. I jeszcze raz – dużo zależy od typu produktu. Jeśli mamy cały produkt oparty na grywalizacji i zbieraniu odznak, to czemu nie wdrożyć tego również w etap onboardingu?

Założenie jest takie żeby uprzyjemnić i wciągnąć bardziej użytkowników już od pierwszego etapu korzystania z produktu. I takich najprostszym elementem jest pokazywanie paska postępu. Ciekawostka, często pokazuje się go już częściowo uzupełnionego, żeby dać poczucie, że już wykonaliśmy jakąś pracę – np. pobraliśmy aplikację. Do tego pojawiają się komunikaty, które mają wzmacniać poczucie robienia postępów. Emotki, zabawne komunikaty, mikroanimacje, a nawet haptyka w urządzeniach dotykowych.

Empty states – puste stany

To, co może jeszcze nam w onboardingu pomóc, to dobre zaprojektowanie pustych stanów – czyli tych miejsc w aplikacji, które są puste, bo wymagają akcji użytkowników. Załóżmy, że mamy produkt, który jest systemem do zarządzania fakturami. Dopóki nie wgramy lub wystawimy pierwszych faktur, nic w tym systemie mieć nie będziemy. Ani danych o naszych klientach, ani analiz wydatków lub przychodów. No i zamiast pokazywać puste ekrany – możemy wykorzystać je do nauki użytkowników.

Na zakończenie

Na koniec warto zapamiętać, że często łączy się kilka sposobów na zapoznanie użytkowników z produktami. Np. spotkacie się z użyciem jednocześnie walktrough, wycieczek po produkcie i np. wysyłanych codziennie maili z podpowiedziami jak coś robić. To, który sposób wybrać lub które z nich połączyć zależy przede wszystkim od typu produktu i odbiorców. Onboarding może wymagać bardzo zaawansowanych ustawień, wieloetapowych procesów – np. gdy tworzymy swój sklep na Shopify. A to oznacza, że będziemy się w takich przypadkach posiłkować różnymi sposobami na to, by zachęcać do dalszego uzupełniania informacji i przede wszystkim, powracania do produktu.