Wzorce promowania instalacji PWA

Penny McLachlan
Penny McLachlan

Instalacja progresywnej aplikacji internetowej (PWA) może ułatwić użytkownikom jej znalezienie i korzystanie. Nawet w przypadku promowania w przeglądarce niektórzy użytkownicy nie zdają sobie sprawy, że mogą zainstalować PWA. Dlatego warto udostępniać aplikację, która umożliwi promowanie i umożliwienie jej instalowania.

Zrzut ekranu przedstawiający przycisk prostej instalacji w aplikacji PWA.
Prosty przycisk instalacji dostępny w aplikacji PWA.

Ten artykuł nie jest wyczerpujący, ale stanowi punkt wyjścia dla różnych sposobów promowania instalacji PWA. Niezależnie od stosowanego wzorca wszystkie prowadzą do tego samego kodu, który uruchamia proces instalacji. Opisaliśmy to w sekcji Jak przeprowadzić instalację w aplikacji.

Sprawdzone metody

Niezależnie od tego, jakie wzorce promocyjne używasz w witrynie, masz do dyspozycji kilka sprawdzonych metod.

  • Nie pozwól, aby promocje nie pojawiały się w ścieżce użytkowników. Na przykład na stronie logowania PWA umieść wezwanie do działania pod formularzem logowania i przyciskiem przesyłania. Uciążliwe zasady promocyjne zmniejszają użyteczność Twojej aplikacji PWA i negatywnie wpływają na wskaźniki zaangażowania.
  • Musi mieć możliwość odrzucenia lub odrzucenia promocji. Pamiętaj o preferencjach użytkownika, jeśli to zrobi, i poproś o ponowną prośbę tylko wtedy, gdy zmieni się jego relacja z Twoimi treściami, np. to, że zalogował się lub dokonał zakupu.
  • Łącz różne metody w różnych częściach aplikacji PWA, ale uważaj, aby nie przytłaczać ani denerwować użytkowników reklamami zachęcającymi do zainstalowania aplikacji.
  • Wyświetlaj promocję dopiero po uruchomieniu zdarzenia beforeinstallprompt.

Automatyczna promocja przeglądarki

Gdy zostaną spełnione określone kryteria, większość przeglądarek automatycznie poinformuje użytkownika, że można zainstalować progresywną aplikację internetową. Na przykład Chrome na komputerze wyświetla w omniboksie przycisk instalacji.

Zrzut ekranu omniboksu z widocznym wskaźnikiem instalacji.
Promocja instalacji dostarczana przez przeglądarkę (na komputerze).
Zrzut ekranu pokazujący promocję instalacji w przeglądarce.
Promocja instalacji dostarczana przez przeglądarkę (na urządzeniu mobilnym).

Chrome na Androida wyświetla użytkownikowi minipasek informacyjny. Można temu zapobiec, wywołując preventDefault() podczas zdarzenia beforeinstallprompt. Jeśli nie wywołasz funkcji preventDefault(), baner wyświetli się, 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 w interfejsie użytkownika

Wzorce promocyjne dostępne w interfejsie można stosować w prawie wszystkich PWA w miejscach takich jak nawigacja w witrynie czy banery. Podobnie jak w przypadku każdego innego wzorca promocji, ważne jest, aby znać kontekst użytkownika, aby zminimalizować zakłócenia w jego ścieżce.

Witryny, które rozważnie wpływają na to, kiedy wyświetlają interfejs promocji, uzyskują większą liczbę instalacji i unikają zakłócania ścieżki użytkowników, którzy nie są zainteresowani instalacją.

Przycisk prostej instalacji

Najprostszym sposobem na wygodę użytkowników jest umieszczenie przycisku „Zainstaluj” lub „Pobierz aplikację” w odpowiednim miejscu w treści strony. Upewnij się, że przycisk nie blokuje innych ważnych funkcji i nie utrudnia użytkownikowi korzystania z aplikacji.

Niestandardowy przycisk instalacji...
Przycisk prostej instalacji.

To przycisk instalacji, który jest częścią nagłówka witryny. Inne elementy nagłówka często zawierają elementy marki witryny, takie jak logo czy hamburgery. Nagłówki mogą mieć postać position:fixed lub nie, w zależności od funkcji witryny i potrzeb użytkowników.

Niestandardowy przycisk instalacji w nagłówku.
Niestandardowy przycisk instalacji w nagłówku.

Właściwe użycie promowania instalacji PWA w nagłówku witryny to świetny sposób na zachęcenie najbardziej lojalnych klientów do powrotu do Twojej witryny. Piksele w nagłówku PWA są cenne, dlatego zadbaj o to, aby wezwanie do działania (instalacyjne) miało odpowiedni rozmiar, większe znaczenie niż pozostałe możliwe treści nagłówka i było nieuciążliwe.

Niestandardowy przycisk instalacji w nagłówku
Niestandardowy przycisk instalacji w nagłówku

Wykonaj następujące czynności:

  • Nie pokazuj przycisku instalacji, dopóki nie uruchomi się beforeinstallprompt.
  • Oceń wartość zastosowania instalacji dla użytkowników. Rozważ kierowanie selektywne, aby wyświetlać promocję tylko tym użytkownikom, którzy mogą z niej skorzystać.
  • Wykorzystuj cenne miejsce w nagłówku. Zastanów się, co jeszcze można wykorzystać do zaoferowania użytkownikowi w nagłówku, i rozważ priorytet promocji promującej instalację w porównaniu z innymi opcjami.
Niestandardowy przycisk instalacji w menu nawigacyjnym
W wysuwanym menu nawigacyjnym dodaj przycisk instalacji lub promocję.

Menu nawigacyjne to świetne miejsce do promowania instalacji aplikacji, ponieważ osoby otwierające menu sygnalizują zaangażowanie w korzystanie z aplikacji.

Wykonaj następujące czynności:

  • Nie zakłócaj ważnych treści nawigacyjnych. Umieść promocję instalacji PWA pod innymi pozycjami menu.
  • Zamieść krótką, trafną prezentację, w której wyjaśnisz, dlaczego instalacja aplikacji PWA może być korzystna dla użytkownika.

Strona docelowa,

Strona docelowa ma na celu promowanie produktów i usług, więc jest to jedno z miejsc, w których można używać dużej liczby zasobów do promowania korzyści płynących z instalacji aplikacji PWA.

Niestandardowa prośba o instalację na stronie docelowej.
Niestandardowa prośba o instalację na stronie docelowej.

Najpierw opowiedz o propozycji wartości witryny, a potem poinformuj użytkowników, co zyska po jej zainstalowaniu.

Wykonaj następujące czynności:

  • Dopasuj elementy, które są najistotniejsze dla użytkowników, i uwydatnij słowa kluczowe, które mogły kierować ich na stronę docelową.
  • Zadbaj o to, aby promocja instalacji i wezwanie do działania przyciągała uwagę, ale tylko wtedy, gdy określisz swoją propozycję wartości. To przecież Twoja strona docelowa.
  • Rozważ dodanie promocji instalacji w tej części aplikacji, w której użytkownicy spędzają najwięcej czasu.

Większość użytkowników napotyka banery instalacyjne na urządzeniach mobilnych i zna już interakcje z nimi. Banery należy stosować ostrożnie, bo mogą przeszkadzać użytkownikom.

Niestandardowy baner instalacyjny u góry strony.
Baner z możliwością zamknięcia u góry strony.

Wykonaj następujące czynności:

  • Zanim wyświetlisz baner, poczekaj, aż użytkownik wykaże zainteresowanie Twoją witryną. Jeśli użytkownik odrzuci Twój baner, nie pokazuj go ponownie, chyba że wywoła on zdarzenie konwersji wskazujące na większe zaangażowanie w Twoją treść, np. zakup w witrynie e-commerce lub założenie konta.
  • Krótko wyjaśnij, dlaczego warto zainstalować aplikację PWA w banerze. Można na przykład odróżnić instalację PWA od aplikacji na iOS lub Androida, informując, że nie zużywa ona prawie żadnego miejsca na urządzeniu lub instaluje się natychmiast bez przekierowania do sklepu.

Tymczasowy interfejs użytkownika

Tymczasowy interfejs, np. wzorzec projektowania Snackbar, powiadamia użytkownika i umożliwia mu łatwe wykonanie działania, w tym przypadku instalowanie aplikacji. Takie wzorce stosowane prawidłowo nie zakłócają korzystania z interfejsu i zwykle są automatycznie zamykane, jeśli użytkownik je ignoruje.

Niestandardowy baner instalacji jako pasek powiadomień.
Można zamknąć pasek powiadomień, który wskazuje, że PWA można zainstalować.

Pokazuj pasek powiadomień po kilku interakcjach z aplikacją. Jeśli pojawia się podczas wczytywania strony lub bez kontekstu, łatwo może go przeoczyć lub może prowadzić do przeciążenia poznawczego. Gdy to nastąpi, użytkownicy po prostu zamkną wszystko, co widzą. Pamiętaj, że nowi użytkownicy witryny mogą nie być gotowi do zainstalowania Twojej aplikacji PWA. Dlatego przed użyciem tego wzorca najlepiej poczekaj, aż zbierzesz od użytkownika silne sygnały o zainteresowaniach (np. powtórne wizyty, logowanie się przez użytkownika lub podobne zdarzenie konwersji).

Niestandardowy baner instalacji jako pasek powiadomień.
Można zamknąć pasek powiadomień, który wskazuje, że PWA można zainstalować.

Wykonaj następujące czynności:

  • Wyświetlaj pasek powiadomień przez 4–7 sekund, aby dać użytkownikom wystarczająco dużo czasu na jego wyświetlenie i zareagowanie.
  • Unikaj wyświetlania go nad innym tymczasowym interfejsem użytkownika, np. banerami itp.
  • Zanim użyjesz tego wzorca, poczekaj, aż otrzymasz od użytkownika wyraźne sygnały o zainteresowaniach (np. powtórne wizyty, logowanie się przez użytkownika lub podobne zdarzenie konwersji).

Po konwersji

Bezpośrednio po zdarzeniu konwersji użytkownika, np. po zakupie w witrynie e-commerce, to doskonała okazja do promowania instalacji aplikacji PWA. Użytkownik jest wyraźnie zaangażowany w Twoje treści, a konwersja często sygnalizuje, że znowu wejdzie w interakcję z Twoimi usługami.

Promocja instalacji po konwersji.
Promocja instalacji po dokonaniu przez użytkownika zakupu.

Rezerwacja lub ścieżka do płatności

Pokazuj promocję instalacji w trakcie sekwencji ścieżki lub po jej zakończeniu, np. po dokonaniu rezerwacji lub procesie płatności. Jeśli wyświetlasz promocję po zakończeniu ścieżki przez użytkownika, możesz często zwiększyć jej widoczność.

Promocja instalacji po ścieżce użytkownika.
Promocja instalacji po ścieżce użytkownika.

Wykonaj następujące czynności:

  • Umieszczenie odpowiedniego wezwania do działania. Którzy użytkownicy skorzystają na zainstalowaniu aplikacji i dlaczego? Jakie ma to znaczenie dla ich bieżącej ścieżki?
  • Jeśli Twoja marka ma unikalne oferty dla użytkowników zainstalowanych aplikacji, wspomnij o nich.
  • Nie pozwól, by promocja nie przeszkadzała Ci na dalszych etapach ścieżki, bo może też negatywnie wpłynąć na współczynnik ukończenia ścieżki. W powyższym przykładzie z e-commerce zwróć uwagę, że kluczowe wezwanie do działania prowadzące do płatności znajduje się nad promocją instalacji aplikacji.

Proces rejestracji, logowania i wylogowywania się

Ta promocja jest szczególnym przykładem wzorca podróży, który pozwala wyróżnić kartę promocyjną.

Własny przycisk instalacji na stronie rejestracji.
Niestandardowy przycisk instalacji na stronie rejestracji.

Te strony są zwykle wyświetlane tylko przez zaangażowanych użytkowników, którzy mają już ustaloną propozycję wartości Twojej aplikacji PWA. Na takich stronach zwykle nie ma zbyt wielu przydatnych treści. Utworzenie większego wezwania do działania jest mniej uciążliwe, o ile nie przeszkadza.

Wykonaj następujące czynności:

  • Nie przeszkadzaj użytkownikowi w korzystaniu z formularza rejestracyjnego. Jeśli jest to proces wieloetapowy, warto poczekać, aż użytkownik zakończy całą ścieżkę.
  • Promuj funkcje, które są najbardziej przydatne dla zarejestrowanego użytkownika.
  • Rozważ dodanie dodatkowej promocji instalacji w pomieszczeniach, w których logujesz się w aplikacji.

Wbudowane wzorce promocyjne

Wbudowane techniki promocyjne przeplatają promocje z treścią witryny. Jest to często bardziej subtelna niż reklama w interfejsie, która ma swoje wady. Twoja promocja powinna być na tyle widoczna, aby zainteresowani użytkownicy ją zauważyli, jednak nie będzie to miało tak dużego wpływu na wrażenia użytkowników.

In-Feed

Promocja promująca instalację aplikacji In-Feed wyświetla się między artykułami z wiadomościami lub innymi listami kart informacyjnych w aplikacji PWA.

Promocja instalacji w pliku danych z treścią.
Promocja instalacji w pliku danych z treścią.

Twoim celem jest pokazanie użytkownikom, jak uzyskać dostęp do przydatnych treści. 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ść zamknięcia promocji.
  • Zapamiętaj decyzję użytkownika dotyczącą odrzucenia.