Wzorce promowania instalacji PWA

Penny McLachlan
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ę.

Zrzut ekranu pokazujący prosty przycisk instalacji w aplikacji PWA.
Prosty przycisk instalacji dostępny w aplikacji PWA.

Ten artykuł nie jest wyczerpujący, ale zawiera punkt wyjścia do różnych sposobów promowania instalacji PWA. Niezależnie od użytego wzorca wszystkie prowadzą do tego samego kodu, który uruchamia proces instalacji, co opisano w sekcji Jak zapewnić użytkownikom własną instalację w 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ę użytkownika. Na przykład na stronie logowania aplikacji PWA umieść wezwanie do działania pod formularzem logowania i przyciskiem przesyłania. Uciążliwe stosowanie wzorców promocyjnych ogranicza użyteczność aplikacji PWA i niekorzystnie wpływa na wskaźniki zaangażowania.
  • mieć możliwość odrzucenia lub odrzucenia promocji; Zapamiętaj preferencje użytkownika, jeśli to zrobi, i zapytaj ponownie tylko wtedy, gdy zmieni się relacja użytkownika z Twoimi treściami, np. zaloguje się lub dokona zakupu.
  • Połącz techniki z różnych części aplikacji PWA, ale uważaj, aby nie przytłoczyć użytkownika ani go zirytować.
  • Wyświetlaj promocję dopiero po wywołaniu zdarzenia beforeinstallprompt.

Automatyczna promocja przeglądarki

Większość przeglądarek po spełnieniu określonych kryteriów automatycznie informuje użytkownika, że progresywną aplikację internetową można zainstalować. Na przykład Chrome na komputerze wyświetla w omniboksie przycisk instalacji.

Zrzut ekranu przedstawiający omniboksa z widocznym wskaźnikiem instalacji.
Promocja instalacji udostępniana przez przeglądarkę (na komputerze).
Zrzut ekranu pokazujący udostępniony w przeglądarce promocję na instalację.
Promocja instalacji prowadzona przez przeglądarkę (na urządzeniach mobilnych).

Chrome na Androida wyświetla użytkownikowi minipasek informacyjny, ale można temu zapobiec, wywołując funkcję preventDefault() w zdarzeniu beforeinstallprompt. Jeśli nie wywołasz preventDefault(), baner wyświetli się, gdy użytkownik po raz pierwszy odwiedzi Twoją witrynę i będzie spełniać kryteria możliwości zainstalowania na Androidzie, a potem ponownie po około 90 dniach.

Wzorce promocyjne interfejsu użytkownika

Wzorce promocyjne interfejsu użytkownika mogą być wykorzystywane w prawie wszystkich rodzajach aplikacji PWA i wyświetlają się m.in. w nawigacji w witrynie i w banerach. Podobnie jak w przypadku każdego innego rodzaju wzorca promocji, należy znać kontekst użytkownika, aby zminimalizować zakłócenia w 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 instalacji

Najprostszym sposobem jest umieszczenie przycisku „Zainstaluj” lub „Pobierz aplikację” w odpowiednim miejscu treści internetowej. Sprawdź, czy przycisk nie blokuje innych ważnych funkcji i nie utrudnia użytkownikowi korzystania z aplikacji.

Niestandardowy przycisk instalacji...
Prosty przycisk instalacji.

Jest to przycisk instalacji, który jest częścią nagłówka witryny. W nagłówku często pojawiają się elementy marki witryny, np. logo i menu z hamburgerami. Liczba nagłówków może wynosić position:fixed lub nie, w zależności od funkcji witryny i potrzeb użytkownika.

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

Jeśli będziesz właściwie korzystać z tej aplikacji, promowanie instalacji aplikacji PWA w nagłówku witryny to świetny sposób na ułatwienie najbardziej lojalnym klientom powrotu do Twojej witryny. Piksele w nagłówku PWA są cenne, dlatego upewnij się, że wezwanie do działania dotyczące instalacji ma odpowiedni rozmiar, większe znaczenie niż inne możliwe treści w nagłówku i jest nienachalne.

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

Wykonaj następujące czynności:

  • Nie pokazuj przycisku instalacji, jeśli beforeinstallprompt nie zostanie uruchomiony.
  • 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ć.
  • Efektywnie wykorzystuj cenną przestrzeń nagłówka. Zastanów się, co jeszcze możesz zaoferować użytkownikowi w nagłówku, i rozważ priorytet promocji instalacji względem innych opcji.
Niestandardowy przycisk instalacji w menu nawigacyjnym
Dodaj przycisk instalacji/promocję w wysuwanym menu nawigacyjnym.

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.
  • Zaoferuj krótką, trafną prezentację, która zachęci użytkownika do zainstalowania Twojej aplikacji PWA.

Strona docelowa,

Strona docelowa ma na celu promowanie produktów i usług, więc warto w niej zareklamować zalety instalacji aplikacji PWA.

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

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 skłonić ich do odwiedzenia Twojej strony docelowej.
  • Promocja instalacji i wezwanie do działania powinny przyciągać uwagę, ale dopiero wtedy, gdy przedstawisz propozycję wartości. To przecież 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 styka się z banerami instalacji na urządzeniach mobilnych i zna sposoby ich interakcji z banerami. Z banerów należy korzystać z rozwagą, bo mogą przeszkadzać użytkownikowi.

Niestandardowy baner promujący instalację u góry strony.
Baner u góry strony, który można zamknąć.

Wykonaj następujące czynności:

  • Poczekaj, aż użytkownik wykaże zainteresowanie Twoją witryną, zanim wyświetli się baner. 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.
  • Krótko wyjaśnij, jakie korzyści może przynieść instalacja PWA na banerze. 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, np. wzór interfejsu Snackbar, powiadamia użytkownika i umożliwia łatwe wykonanie działania, w tym przypadku zainstalowanie aplikacji. Prawidłowo używane tego rodzaju wzorce interfejsu nie zakłócają korzystania z aplikacji i zwykle są automatycznie zamykane, jeśli użytkownik je pominie.

Niestandardowy baner instalacji jako pasek powiadomień.
Można zamknąć pasek powiadomień wskazujący, że PWA można zainstalować.

Pokaż pasek powiadomień po kilku interakcjach z aplikacją. Jeśli pojawia się podczas wczytywania strony lub wychodzi z kontekstu, może go łatwo przeoczyć lub doprowadzić do przeciążenia funkcji poznawczych. 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 Twojej aplikacji PWA. Dlatego przed skorzystaniem z tego wzorca warto poczekać, aż pojawią się wyraźne sygnały dotyczące zainteresowań użytkownika, np. powtórne wizyty, logowanie użytkownika lub podobne zdarzenie konwersji.

Niestandardowy baner instalacji jako pasek powiadomień.
Można zamknąć pasek powiadomień wskazujący, ż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, aby go zobaczyli i na niego zareagowali.
  • Nie pokazuj jej nad innymi tymczasowymi interfejsami, takimi jak banery itp.
  • Zanim użyjesz tego wzorca, poczekaj, aż uzyskasz od użytkownika wyraźne sygnały dotyczące zainteresowań, np. powtórne wizyty, logowanie użytkownika lub podobne zdarzenie konwersji.

Po konwersji

Bezpośrednio po zdarzeniu konwersji użytkownika, np. po dokonaniu zakupu w witrynie e-commerce, warto wypromować aplikację PWA. Użytkownik jest wyraźnie zaangażowany w Twoje treści, a konwersja często sygnalizuje, że ponownie zainteresuje się Twoimi usługami.

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

Ścieżka do rezerwacji lub płatności

Pokaż promocję na instalację podczas sekwencji ścieżki lub po niej, np. po dokonaniu rezerwacji lub procesie 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.

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

Wykonaj następujące czynności:

  • Uwzględnij odpowiednie wezwanie do działania. Którzy użytkownicy skorzystają na zainstalowaniu Twojej aplikacji i dlaczego? W jaki sposób ma to związek z bieżącą podróżą klienta?
  • Jeśli Twoja marka ma unikalne oferty dla użytkowników, którzy zainstalowali aplikację, wspomnij o nich.
  • Zadbaj o to, aby promocja nie przeszkadzała Ci w realizacji kolejnych kroków ścieżki, bo może to negatywnie wpłynąć na współczynniki ukończenia ścieżki. Zwróć uwagę, że w przykładzie e-commerce powyżej zwróć uwagę, że kluczowe wezwanie do działania prowadzące do płatności znajduje się nad promocją instalacji aplikacji.

Proces rejestracji, logowania się lub wylogowywania

Ta promocja to specjalny przypadek promowania podróży, w ramach której karta promocyjna może być bardziej widoczna.

Niestandardowy przycisk instalacji na stronie rejestracji.
Niestandardowy przycisk instalacji na stronie rejestracji.

Są one zwykle wyświetlane tylko przez zaangażowanych użytkowników, którzy mają już ustaloną propozycję wartości aplikacji PWA. Często nie ma tam też wielu przydatnych treści. Dzięki temu dłuższe wezwania do działania są mniej uciążliwe, o ile nie przeszkadzają.

Wykonaj następujące czynności:

  • Staraj się nie zakłócać korzystania z witryny przez użytkownika w formularzu rejestracyjnym. Jeśli jest to proces wieloetapowy, możesz zaczekać, aż użytkownik zakończy podróż.
  • Promuj funkcje, które są najbardziej przydatne dla zarejestrowanego użytkownika.
  • Rozważ umieszczenie dodatkowej promocji instalacji w obszarach, w których logujesz się w aplikacji.

Wbudowane wzorce promocyjne

Wbudowane techniki promocji przeplatają promocje z treścią witryny. Często jest to bardziej subtelne niż promowanie w interfejsie, co wiąże się z kompromisami. Chcesz, aby Twoja promocja była wyróżniona na tyle, że zainteresowani użytkownicy ją zauważą, ale nie na tyle, aby negatywnie wpływały na wrażenia użytkowników.

In-Feed

Promocja instalacji In-Feed wyświetla się między artykułami z wiadomościami lub innymi listami kart informacyjnych w progresywnej aplikacji internetowej.

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

Twoim celem jest pokazanie użytkownikom, jak wygodniej dostać się do treści, które ich interesują. 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 wybór użytkownika dotyczący zamknięcia strony.