Interaktywne demo na stronie: pozwól spróbować, zanim poprosisz o dostęp

Najciekawszy moment na stronie produktu bywa tuż po zdaniu „zobacz, jak to działa”. Odbiorca spodziewa się wtedy możliwości sprawdzenia jednej rzeczy. Zamiast tego dostaje formularz, wybór terminu i pytanie o wielkość organizacji. Niewykluczone, że rozmowa jest potrzebna. Tyle że obiecana próbka działania właśnie zamieniła się w rezerwację spotkania.

Krótkie interaktywne demo może wypełnić tę lukę. Pozwala przejść przez ograniczone zadanie na danych pokazowych, zanim człowiek poprosi o rozmowę albo dostęp do produktu. Nie musi odwzorowywać całej aplikacji. Powinno jednak uczciwie pokazywać, co jest działającą prezentacją, co przykładem wyniku, a co wymaga dopiero wdrożenia lub konfiguracji.

Wyobraźmy sobie stronę narzędzia do planowania dostaw materiałów reklamowych. Zamiast pokazywać wszystkie zakładki systemu, demonstracja pozwala przypisać fikcyjną przesyłkę do terminu i zobaczyć zmianę planu. Odbiorca poznaje sposób zmiany terminu i odczytania konfliktu. Nie musi przy tym zakładać konta dla firmy „Test Sp. z o.o.”, która ma już prawdopodobnie więcej kont niż niejeden koncern.

Jedno zadanie jest ciekawsze niż wycieczka po wszystkich zakładkach

Zacznij od pytania, na które demo ma odpowiedzieć. Czy zmiana terminu pokazuje konflikt? Czy konfiguracja produktu ujawnia zależności? Czy wynik można przejrzeć przed potwierdzeniem? Takie pytanie określa początek, wybór i zakończenie demonstracji. „Zaprezentujemy bogactwo funkcji” określa głównie przyszłą długość prezentacji.

W naszym przykładzie zadanie brzmi: przesuń pokazową dostawę na piątek i sprawdź, czy koliduje z innym odbiorem. Potrzebne są dwa terminy, jedna przesyłka i czytelny rezultat. Nie potrzeba panelu zarządzania użytkownikami, cennika przewoźników ani skrzynki powiadomień. Ich obecność może wyglądać wiarygodnie, lecz odciąga uwagę od decyzji, którą chcemy wyjaśnić.

Ograniczenie zakresu powinno być widoczne. Napis „Dane pokazowe” oraz krótka zapowiedź zadania pomagają ustalić zasady. Jeśli przycisk „Wyślij” jedynie pokazuje przykładowe potwierdzenie, nazwij go „Zobacz przykładowe potwierdzenie”. Człowiek nie powinien po zakończeniu zastanawiać się, czy przypadkiem zamówił transport do fikcyjnego magazynu.

Wybierz dane, które pomagają odczytać decyzję. Nazwy „Przesyłka A” i „Przesyłka B” mogą wystarczyć w makiecie, lecz w gotowym demo łatwiej rozpoznać „Materiały na targi” oraz „Uzupełnienie magazynu”. Obie pozycje nadal są fikcyjne. Opisują jednak różne potrzeby, więc konflikt terminu ma dla odbiorcy zrozumiały sens. Unikaj danych skopiowanych z prawdziwego zamówienia tylko dlatego, że wyglądają bardziej przekonująco.

Dla zespołu dobrym narzędziem jest rozpisanie trzech punktów: z czym odbiorca zaczyna, co może zmienić, co zobaczy po zmianie. Obok zapisz elementy nieaktywne i powód ich obecności. Każdy martwy przycisk wymaga obrony. Jeżeli stanowi tylko dekorację, często lepiej go usunąć niż objaśniać kolejnym komunikatem.

W konfiguratorze produktu zakres wyboru wynika z rzeczywistych zależności oferty. W demonstracji można pokazać wybrany fragment tych zależności, lecz nie wolno prezentować swobodnego wyboru tam, gdzie produkt go nie oferuje. Przykład ma upraszczać poznanie reguły, a nie poprawiać ją na potrzeby prezentacji.

Nie każda oferta potrzebuje klikania. Gdy najważniejsze jest zobaczenie ruchu albo kolejności czynności, krótkie wideo na stronie usługowej może przekazać sens szybciej. Demo ma przewagę wtedy, gdy własny wybór odbiorcy pomaga zrozumieć skutek. Sama możliwość naciśnięcia pięciu strzałek nie jest jeszcze taką przewagą.

Przed produkcją przygotuj wersję na papierze lub prostym prototypie. Przed sesją możesz też przejść pierwsze użycie interfejsu oczami nowej osoby, z jawnymi założeniami o tym, co odbiorca już wie. Poproś kogoś o wykonanie zadania i opowiedzenie, co się zmieniło. Jeżeli trzeba przez cały czas mówić „teraz kliknij tutaj, a to pomiń”, najpierw popraw scenariusz. Bardziej efektowna animacja nie doda mu logiki.

Pokaż rezultat, zanim zaczniesz tłumaczyć interfejs

Pierwszy ekran demonstracji powinien przedstawiać sytuację. „Przesyłka czeka na termin” mówi więcej niż „Witaj w naszym nowoczesnym panelu”. Obok pokaż cel i możliwość rozpoczęcia. Osoba, która zna już produkt, powinna też łatwo pominąć wstęp. Nie każdy przychodzi na stronę po tę samą porcję objaśnień.

Po działaniu pokaż różnicę w miejscu, w którym odbiorca jej szuka. Przesunięty termin może zmienić pozycję na planie, a konflikt otrzymać krótkie wyjaśnienie. Unikaj sytuacji, w której jedynym dowodem jest kolorowa chmurka w rogu. Zespół widzi ją, bo zna projekt. Nowy odbiorca patrzy prawdopodobnie na element, którego właśnie dotknął.

Przydatne bywa pokazanie stanu przed i po. Nie chodzi o rozbudowany panel porównań. Wystarczy etykieta poprzedniego terminu i nowa wartość, jeżeli to one wyjaśniają skutek. Rezultat powinien przetrwać dostatecznie długo, by dało się go przeczytać oraz omówić. Komunikat znikający w chwili, gdy człowiek dopiero przenosi na niego wzrok, bardziej sprawdza refleks niż produkt.

Dopiero teraz przydaje się krótka wskazówka przy konkretnej kontrolce. Dokumentacja komponentu Spotlight Atlassian opisuje kierowanie uwagi na wybrany element oraz mechanizmy zamknięcia i przejść. To użyteczny punkt odniesienia dla objaśnienia jednego kroku. O wyborze kroku i treści podpowiedzi decyduje jednak scenariusz demonstracji.

Nie zasłaniaj wskazówką tego, co trzeba porównać. Dymek „Tutaj pojawi się konflikt” umieszczony dokładnie na konflikcie jest małym dziełem sabotażu informacyjnego. Sprawdź położenie na wąskim ekranie i po powiększeniu tekstu. Jeżeli podpowiedź stale walczy o miejsce z zadaniem, skróć ją albo przenieś do spokojniejszej części układu.

Pozwól odbiorcy wykonać błędny, lecz bezpieczny wybór, jeśli dzięki temu zrozumie regułę. W naszym przykładzie można wskazać zajęty termin i otrzymać wyjaśnienie. Nie trzeba natomiast pozwalać na wpisywanie dowolnych danych kontaktowych. Demonstracja ma przekazać sposób rozwiązywania problemu, a nie zbierać informacje, których scenariusz nie potrzebuje.

Oznaczenie danych pokazowych powinno obejmować również wynik. Jeżeli prezentujesz narzędzie wspierane przez AI, podpisz przygotowaną odpowiedź jako przygotowany przykład. Nie nazywaj jej wynikiem bieżącego przetwarzania, jeśli żaden model nie wykonał zadania. W tekście o odpowiedzialnym workflow agentów AI wraca rozróżnienie między deklaracją działania a sprawdzonym rezultatem; na stronie produktu również łatwo je zatrzeć.

Wyjście jest częścią demonstracji

Odbiorca musi móc zakończyć próbę, cofnąć krok i zacząć od nowa. Te działania nie powinny wyglądać identycznie. „Zacznij od nowa” przywraca dane pokazowe, „Zamknij demo” wraca do strony, a „Wstecz” pozwala poprawić ostatni wybór. W krótkim scenariuszu nazwy wystarczą, żeby uniknąć dodatkowego przewodnika po przewodniku.

Przy zamknięciu zadbaj o powrót do miejsca rozpoczęcia. Jeśli człowiek uruchomił demonstrację z sekcji o planowaniu dostaw, po wyjściu nadal powinien rozpoznawać ten fragment oferty. Przeniesienie na samą górę strony zmusza go do ponownego szukania. Wyjście z demonstracji nie musi być końcem zainteresowania.

Dla interfejsów korzystających z natywnego mechanizmu popover MDN opisuje powiązanie kontrolki z otwieranym elementem, zachowanie kolejności nawigacji klawiaturą i powrót fokusu po zamknięciu klawiszem Escape. Inne rozwiązanie wymaga osobnego sprawdzenia. Nie zakładaj takiego zachowania wyłącznie na podstawie podobnego wyglądu okna.

Przetestuj pełne zadanie klawiaturą: otwarcie, przejście do wyboru, zmianę, odczyt rezultatu i zamknięcie. Niech sprawdzi je również osoba, która nie projektowała kolejności elementów. Jeśli trzeba pamiętać niewidoczną kombinację albo kliknąć myszą w tle, droga nie jest kompletna. Sprawność pierwszego przycisku to dopiero początek próby.

Możliwość pominięcia interakcji przydaje się także wtedy, gdy demo działa technicznie. Ktoś może chcieć tylko poznać warunki wdrożenia albo wrócić do ceny. Zostaw obok zwykły opis oraz konkretny następny krok. Zasada jest podobna do drogi bez sceny 3D: dodatkowa forma prezentacji ma pomagać, a jej brak nie może usuwać podstawowego sensu oferty.

Przed publikacją sprawdź uruchomienie z różnych miejsc strony. Ten sam przycisk w nagłówku i przy opisie funkcji może potrzebować innej zapowiedzi, lecz powinien prowadzić do rozpoznawalnego zadania. Jeżeli drugi odnośnik otwiera demonstrację od środka, pokaż wybrany termin i nazwij krok, od którego odbiorca zaczyna. Osoba zaczynająca od środka nie zna wcześniejszych kroków demonstracji.

Na telefonie szczególnie uważaj na osadzoną prezentację, która ma własne przewijanie wewnątrz strony. Sprawdź, czy człowiek potrafi przejść do kolejnej części oferty, czy wciąż przesuwa ten sam panel. Czasem pełna osobna sekcja z wyraźnym wyjściem jest wygodniejsza niż małe okienko, w którym widać głównie ramkę urządzenia.

Takie decyzje mieszczą się w projektowaniu prezentacji produktu. Oferta Aeneia Design jest punktem wyjścia do rozmowy o stronie i sposobie przedstawienia działania; zakres większej aplikacji wymaga osobnego ustalenia.

Zakończenie próby powinno naturalnie prowadzić do pytania, które odbiorca potrafi już zadać. „Omów planowanie dostaw dla swojej firmy” wynika z naszego scenariusza. Ogólne „Dowiedz się więcej” nie wykorzystuje tego, czego człowiek właśnie się nauczył. Można też zaproponować obejrzenie warunków wdrożenia albo innego, odrębnego zastosowania.

O miejscu demonstracji na stronie decyduje jej rola w całej ofercie. Na krótkim landing page może być głównym sposobem wyjaśnienia produktu. W rozbudowanej witrynie może lepiej pasować do jednej podstrony zastosowania. Nie trzeba przenosić tej samej próbki do każdej sekcji tylko dlatego, że kosztowała sporo pracy.

Przygotuj także wariant odpowiedzi, z którego zespół nie będzie zadowolony. Uczestnik może uznać, że zmienił termin prawdziwej dostawy albo że narzędzie samodzielnie wybrało przewoźnika. Taka interpretacja wskazuje konkretną granicę do dopisania lub poprawienia w interfejsie. Samo pytanie „czy wszystko jasne?” rzadko ją ujawni. Lepiej poprosić o opis następnego kroku, jaki uczestnik wykonałby już w swojej firmie.

Oceniaj demo przez zrozumienie zadania. Po próbie poproś uczestnika, by własnymi słowami opowiedział, co wybrał i co zmieniło się w wyniku. Zapytaj, czego nadal nie wie przed rozmową o zakupie. Liczba rozpoczęć prezentacji może pomóc znaleźć miejsce obserwacji, lecz nie wyjaśnia sama, czy ktoś zrozumiał produkt.

Dobrze jest zachować również wersję scenariusza i listę danych pokazowych. Gdy produkt zmieni regułę planowania, wiadomo, który krok trzeba przejrzeć. Nieaktualna demonstracja potrafi bardzo przekonująco nauczyć czegoś, czego oferta już nie robi. Wtedy problemem nie jest mała liczba kliknięć, tylko ich zaskakująco skuteczna wymowa.

Najlepsza krótka próba kończy się poczuciem „wiem, o co pytać dalej”. Odbiorca zobaczył skutek własnego wyboru, rozpoznał granice przykładu i może wrócić do oferty. To wystarczająco dużo jak na kilka ekranów. Nie trzeba przy okazji oprowadzać go po wszystkich zakładkach, piwnicy i pomieszczeniu gospodarczym produktu.