Wzorce promowania instalacji PWA

Mustafa Kurtuldu

Penny McLachlan

Zainstalowanie progresywnej aplikacji internetowej (PWA) może ułatwić użytkownikom jej znalezienie i używanie. Nawet w przypadku promowania w przeglądarce niektórzy użytkownicy nie zdają sobie sprawy, że mogą instalować aplikacje PWA. Dlatego warto udostępnić w aplikacji opcje, które pomogą Ci promować aplikację PWA i umożliwią 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ą sprawdzone metody, które można stosować niezależnie od tego, jakich wzorów promocyjnych używasz w witrynie.

• Nie umieszczaj promocji na ścieżkach użytkowników. Na przykład na stronie logowania w PWA umieść wezwanie do działania pod formularzem logowania i przyciskiem przesyłania. Używanie w nieodpowiedzialny sposób wzorów promocyjnych zmniejsza użyteczność PWA i negatywne wpływa na wskaźniki zaangażowania.
• Dodaj możliwość odrzucenia promocji. Zapamiętaj preferencje użytkownika i ponownie wyświetlaj prośbę tylko wtedy, gdy nastąpiła zmiana w stosunku użytkownika do Twoich treści, np. gdy zaloguje się lub dokona zakupu.
• Stosuj różne techniki w różnych częściach aplikacji PWA, ale uważaj, aby nie przytłoczyć ani nie zirytować użytkownika promocją instalacji.
• Wyświetlaj promocję tylko po wyzwoleniu 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 może zostać zainstalowana. Na przykład w Chrome na komputery w polu wyszukiwania jest widoczny 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 będzie wyświetlany za każdym razem, gdy użytkownik odwiedza Twoją witrynę i spełnia 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 rozważnie decydują o czasie uruchomienia interfejsu promocji, osiągają większą liczbę instalacji i nie zakłócają ścieżek użytkowników, którzy nie są zainteresowani instalacją.

Prosty przycisk instalowania

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

Nagłówek stały

To przycisk instalowania, który jest częścią nagłówka Twojej 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 instalowania, chyba że funkcja beforeinstallprompt została wywołana.
• Oceń wartość zainstalowanego przypadku użycia dla użytkowników. Rozważ użycie selektywnego kierowania, aby prezentować promocję tylko 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 porównaj priorytet promocji instalacji z innymi opcjami.

Menu nawigacyjne

Menu nawigacyjne to świetne miejsce na promowanie instalacji aplikacji, ponieważ użytkownicy, którzy otwierają menu, sygnalizują zaangażowanie w Twoją aplikację.

Wykonaj następujące czynności:

• Unikaj zakłócania ważnych treści nawigacyjnych. Umieść promocję dotyczącą instalacji PWA poniżej innych pozycji menu.
• Przedstaw krótką, trafną prezentację, 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 wyjaśnij, dlaczego warto odwiedzić Twoją witrynę, a potem powiedz użytkownikom, co zyskają dzięki zainstalowaniu aplikacji.

Wykonaj następujące czynności:

• Zachęcaj do korzystania z funkcji, które są najważniejsze dla Twoich użytkowników, i podkreślaj słowa kluczowe, które mogły ich zaprowadzić na 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.
• Rozważ dodanie promocji instalacji w części aplikacji, w której użytkownicy spędzają najwięcej czasu.

Baner promujący instalację

Większość użytkowników widziała banery z instalacją w wersjach mobilnych i wie, jak z nimi wchodzić w interakcje. 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 zamknie baner, nie wyświetlaj go ponownie, chyba że wywoła zdarzenie konwersji, które wskazuje na wyższy poziom zaangażowania w Twoją treść, np. zakup w witrynie e-commerce lub utworzenie konta.
• W banerze krótko wyjaśnij, dlaczego warto zainstalować PWA. Możesz na przykład odróżnić instalację PWA od instalacji aplikacji na iOS lub Androida, wspominając, że PWA nie zajmuje prawie żadnego miejsca na urządzeniu użytkownika lub że zainstaluje się natychmiast 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 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 takim przypadku użytkownicy po prostu zamkną wszystkie widoczne treści. Pamiętaj, że nowi użytkownicy Twojej witryny mogą nie być gotowi do zainstalowania PWA. Dlatego przed zastosowaniem tego wzorca najlepiej zaczekać, aż uzyskasz wyraźne sygnały zainteresowania użytkownika, np. powtarzające się wizyty, rejestrację użytkownika lub podobne zdarzenie konwersji.

Wykonaj następujące czynności:

• Wyświetlaj pasek informacji przez 4–7 sekund, aby dać użytkownikom wystarczająco dużo czasu na jego zobaczenie i zareagowanie, a jednocześnie nie przeszkadzać im w działaniu.
• 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 tym, jak użytkownik ukończył ścieżkę, możesz ją wyróżnić.

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 tym przykładzie e-commerce 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ż dodanie dodatkowej promocji instalacji w obszarach aplikacji, w których użytkownik musi się zalogować.

Wbudowane wzorce promocyjne

Techniki promocyjne w treściach polegają na wplataniu promocji w treści witryny. Jest to często bardziej subtelne niż promocja w interfejsie, co wiąże się z pewnymi 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 odrzucenia.