Wzorce promowania instalacji PWA

Mustafa Kurtuldu

Penny McLachlan

Zainstalowanie progresywnej aplikacji internetowej (PWA) może ułatwić użytkownikom jej znalezienie i korzystanie z niej. Nawet w przypadku promocji w przeglądarce niektórzy użytkownicy nie zdają sobie sprawy, że mogą zainstalować progresywną aplikację internetową, dlatego warto udostępnić aplikację PWA, aby promować i umożliwiać jej instalację.

Ten artykuł nie wyczerpuje tematu, ale stanowi punkt wyjścia do promowania instalacji PWA. Niezależnie od tego, którego wzoru używasz, wszystkie prowadzą do tego samego kodu, który uruchamia proces instalacji. Opisany jest on w artykule Jak zapewnić własny proces instalacji aplikacji.

Sprawdzone metody

Istnieją pewne sprawdzone metody, które można zastosować niezależnie od wzorców promocji w witrynie.

• Zadbaj o to, aby promocje wykraczały poza ścieżkę klienta. Na przykład na stronie logowania aplikacji PWA umieść wezwanie do działania pod formularzem logowania i przyciskiem przesyłania. Używanie niestandardowych wzorów promocyjnych zmniejsza użyteczność PWA i negatywne wpływa na wskaźniki zaangażowania.
• Dodaj możliwość odrzucenia promocji. Zapamiętaj ustawienia użytkownika, jeśli je wprowadzi, i ponownie wyświetlaj je tylko wtedy, gdy nastąpi zmiana w stosunku użytkownika do Twoich treści, np. gdy zaloguje się lub dokona zakupu.
• Używaj różnych technik z różnych części aplikacji PWA, ale uważaj, aby nie przytłoczyć użytkownika ani zirytować go promowaniem instalacji.
• Wyświetlaj promocję dopiero po wywołaniu zdarzenia beforeinstallprompt.

Automatyczna promocja przeglądarki

Gdy są spełnione określone kryteria, większość przeglądarek automatycznie informuje użytkownika, że progresywna aplikacja internetowa jest dostępna do zainstalowania. Na przykład Chrome na komputerze wyświetla w omniboksie przycisk instalacji.

Chrome na Androida wyświetla użytkownikowi mini pasek informacji, ale można temu zapobiec, wywołując funkcję preventDefault() w zdarzeniu beforeinstallprompt. Jeśli nie wywołasz funkcji preventDefault(), baner zostanie wyświetlony, gdy użytkownik po raz pierwszy odwiedzi Twoją witrynę i spełni kryteria instalacji na Androidzie, a potem ponownie po około 90 dniach.

Wzorce promocyjne interfejsu

Wzorców promocyjnych interfejsu można używać w przypadku niemal każdego rodzaju PWA. Mogą one pojawiać się w miejscach takich jak nawigacja po stronie czy banery. Podobnie jak w przypadku każdego innego typu wzoru promocyjnego, ważne jest, aby znać kontekst użytkownika, aby zminimalizować zakłócenia na jego ścieżce.

Witryny, które przemyślane uruchamiają interfejs promocji, uzyskują większą liczbę instalacji i unikają zakłócania podróży użytkowników, którzy nie są zainteresowani instalacją.

Prosty przycisk instalowania

Najprostszy możliwy UX to umieszczenie przycisku „Zainstaluj” lub „Pobierz aplikację” w odpowiednim miejscu w treściach internetowych. Upewnij się, że przycisk nie blokuje innych ważnych funkcji i nie przeszkadza użytkownikowi w przeglądaniu aplikacji.

Nagłówek stały

Jest to przycisk instalacji, który jest częścią nagłówka witryny. Inne treści nagłówka często obejmują elementy marki witryny, takie jak logo i menu hamburgera. Nagłówki mogą być position:fixed lub nie, w zależności od funkcji witryny i potrzeb użytkowników.

Właściwe promowanie instalacji PWA w nagłówku witryny to świetny sposób na ułatwienie najwierniejszym klientom powrotu do Twojej aplikacji. Piksel w nagłówku PWA jest bardzo cenny, dlatego zadbaj o to, aby przycisk instalacji miał odpowiedni rozmiar, był ważniejszy niż inne możliwe treści w nagłówku i nie był uciążliwy.

Wykonaj następujące czynności:

• Nie pokazuj przycisku instalacji, chyba że funkcja beforeinstallprompt została wywołana.
• Oceń wartość zainstalowanego przypadku użycia dla użytkowników. Rozważ zastosowanie kierowania selektywnego, aby wyświetlać promocję tylko tym użytkownikom, którzy mogą z niej skorzystać.
• Skutecznie wykorzystuj cenne miejsce w nagłówku. Zastanów się, co jeszcze możesz zaoferować użytkownikowi w nagłówku, i rozważ priorytet promocji instalacji względem innych opcji.

Menu nawigacyjne

Menu nawigacyjne to idealne miejsce do promowania instalacji aplikacji, ponieważ użytkownicy, którzy ją otwierają, sygnalizują zainteresowanie aplikację.

Wykonaj następujące czynności:

• Unikaj zakłócania ważnych treści nawigacyjnych. Umieść promocję instalacji PWA pod innymi pozycjami menu.
• Przedstaw krótki, trafny argument, dlaczego użytkownik powinien zainstalować Twoją PWA.

Strona docelowa

Celem strony docelowej jest promowanie Twoich produktów i usług, więc jest to jedno z miejsc, w których możesz szczegółowo przedstawić zalety zainstalowania PWA.

Najpierw przedstaw propozycję wartości witryny, a następnie poinformuj użytkowników, co mogą zyskać po instalacji.

Wykonaj następujące czynności:

• Odwołuj się do funkcji, które mają największe znaczenie dla Twoich użytkowników, i wyróżnij słowa kluczowe, które mogły doprowadzić ich na Twoją stronę docelową.
• Zadbaj o to, aby promocja instalacji i wezwanie do działania przyciągały uwagę, ale dopiero po tym, jak przedstawisz swoją propozycję wartości. To jest Twoja strona docelowa.
• Zastanów się nad dodaniem promocji instalacji w części aplikacji, w której użytkownicy spędzają najwięcej czasu.

Baner instalacyjny

Większość użytkowników styka się z banerami instalacji na urządzeniach mobilnych i zna sposoby ich interakcji z banerami. Banery należy stosować ostrożnie, ponieważ mogą one rozpraszać użytkowników.

Wykonaj następujące czynności:

• Zanim wyświetlisz baner, zaczekaj, aż użytkownik wyrazi zainteresowanie Twoją witryną. Jeśli użytkownik odrzuci Twój baner, nie wyświetlaj go ponownie, chyba że wywoła to zdarzenie konwersji, które wskazuje na wyższy poziom zaangażowania w Twoje treści, np. zakup w witrynie e-commerce lub założenie konta.
• W banerze krótko wyjaśnij, dlaczego warto zainstalować PWA. Jeśli na przykład chcesz odróżnić instalację PWA od aplikacji na iOS lub Androida, wspomnij, że zajmuje ona prawie miejsce na urządzeniu użytkownika lub że instaluje się od razu bez przekierowania do sklepu.

Tymczasowy interfejs

Tymczasowy interfejs użytkownika, np. wzór projektowania Snackbar, informuje użytkownika i umożliwia mu łatwe wykonanie działania, w tym przypadku zainstalowanie aplikacji. Przy prawidłowym użyciu tego typu wzory interfejsu użytkownika nie zakłócają przepływu informacji i zwykle są automatycznie zamykane, jeśli użytkownik je zignoruje.

Po wyświetleniu kilku interakcji z aplikacją. Jeśli pojawi się ona podczas wczytywania strony lub poza kontekstem, może być łatwo przeoczona lub spowodować przeciążenie poznawcze. W takiej sytuacji użytkownicy po prostu zamkną wszystko, co widzą. Pamiętaj, że nowi użytkownicy Twojej witryny mogą nie być gotowi do zainstalowania PWA. Dlatego przed zastosowaniem tego wzorca najlepiej poczekać, aż użytkownik wykaże wyraźne sygnały zainteresowania, np. będzie miał na koncie powtarzające się wizyty, zaloguje się lub wywoła podobne zdarzenie konwersji.

Wykonaj następujące czynności:

• Wyświetlaj snackbar przez 4–7 sekund, aby dać użytkownikom wystarczająco dużo czasu na jego zobaczenie i zareagowanie, bez przeszkadzania.
• Unikaj wyświetlania go na innych tymczasowych interfejsach, takich jak banery.
• Zanim użyjesz tego wzorca, poczekaj, aż otrzymasz wyraźne sygnały zainteresowania ze strony użytkownika, np. powtarzające się wizyty, zalogowanie użytkownika lub podobne zdarzenie konwersji.

Po konwersji

Bezpośrednio po zdarzeniu konwersji użytkownika, np. po zakupie w witrynie e-commerce, jest doskonała okazja do promowania instalacji PWA. Użytkownik wyraźnie interesuje się Twoimi treściami, a konwersja często sygnalizuje, że znów skorzysta z Twoich usług.

Ścieżka do płatności

wyświetlać promocję dotyczącą instalacji podczas lub po sekwencyjnej podróży, np. po procesie rezerwacji lub płatności; Jeśli wyświetlasz promocję po zakończeniu podróży użytkownika, często możesz ją wyróżnić po zakończeniu podróży.

Wykonaj następujące czynności:

• Dodaj odpowiednie wezwanie do działania. Którzy użytkownicy skorzystają na zainstalowaniu Twojej aplikacji i dlaczego? Jak jest to związane z obecną podróżą?
• Jeśli Twoja marka ma specjalne oferty dla użytkowników zainstalowanej aplikacji, wspomnij o nich.
• Nie umieszczaj promocji na kolejnych etapach ścieżki, ponieważ może to negatywnie wpłynąć na wskaźnik ukończenia ścieżki. W przykładzie e-commerce widocznym powyżej widać, że główne wezwanie do działania dotyczące płatności znajduje się nad promocją instalacji aplikacji.

Proces rejestracji, logowania się i wylogowywania

Ta promocja jest szczególnym przypadkiem w schemacie promocyjnym podróży, w którym karta promocji może być bardziej widoczna.

Te strony są zwykle wyświetlane tylko przez zaangażowanych użytkowników, którzy już znają wartość oferty PWA. Często na tych stronach nie ma też zbyt wielu innych przydatnych treści. W efekcie, jeśli wezwanie do działania jest większe, ale nie przeszkadza, jest mniej uciążliwe.

Wykonaj następujące czynności:

• Nie zakłócaj ścieżki użytkownika w formularzu rejestracyjnym. Jeśli jest to proces wieloetapowy, warto poczekać, aż użytkownik go ukończy.
• promować funkcje, które są najbardziej przydatne dla zalogowanego użytkownika;
• Rozważ umieszczenie dodatkowej promocji instalacji w obszarach, w których zalogujesz się w aplikacji.

Wbudowane wzorce promocyjne

Techniki promocyjne w treściach polegają na wplataniu promocji w treści witryny. Często jest to bardziej subtelne niż promowanie w interfejsie, co wiąże się z kompromisami. Twoja promocja powinna być na tyle wyróżniająca się, aby zainteresowani użytkownicy ją zauważyli, ale nie na tyle, aby obniżała jakość wrażeń użytkowników.

In-Feed

Promocja instalacji w karcie wyświetla się między artykułami lub innymi listami kart informacji w Twojej aplikacji internetowej.

Twoim celem jest pokazanie użytkownikom, jak wygodniej uzyskać dostęp do treści, które lubią. Skup się na promowaniu funkcji, które będą przydatne dla użytkowników.

Wykonaj następujące czynności:

• Ogranicz częstotliwość promocji, aby nie irytować użytkowników.
• Daj użytkownikom możliwość odrzucenia promocji.
• Zapamiętaj wybór użytkownika dotyczący zamknięcia strony.