Wenn Sie Ihre progressive Web-App (PWA) installieren, können Nutzer sie leichter finden und verwenden. Selbst wenn Sie Ihre PWA in einem Browser bewerben, wissen einige Nutzer nicht, dass sie sie installieren können. Daher kann es hilfreich sein, eine In-App-Umgebung bereitzustellen, mit der Sie für die Installation Ihrer PWA werben und sie ermöglichen können.
Dieser Artikel ist keineswegs vollständig, bietet aber einen Ausgangspunkt für verschiedene Möglichkeiten, die Installation Ihrer PWA zu fördern. Unabhängig davon, welches oder welche Muster Sie verwenden, führen sie alle zum selben Code, der den Installationsvorgang auslöst. Weitere Informationen finden Sie unter Eigene In-App-Installation bereitstellen.
Best Practices
Es gibt einige Best Practices, die unabhängig von den Werbemustern gelten, die Sie auf Ihrer Website verwenden.
- Platzieren Sie Angebote nicht im Fluss Ihrer User Journeys. Platzieren Sie den Call-to-Action beispielsweise auf der Anmeldeseite einer PWA unter dem Anmeldeformular und der Schaltfläche „Senden“. Die störende Verwendung von Werbemustern beeinträchtigt die Nutzerfreundlichkeit Ihrer PWA und wirkt sich negativ auf Ihre Interaktionsmesswerte aus.
- Die Möglichkeit, das Angebot zu schließen oder abzulehnen, muss vorhanden sein. Speichern Sie die Einstellung des Nutzers, wenn er dies tut, und fragen Sie ihn nur noch einmal, wenn sich seine Beziehung zu Ihren Inhalten ändert, z. B. wenn er sich angemeldet oder einen Kauf abgeschlossen hat.
- Kombinieren Sie die verschiedenen Techniken in verschiedenen Teilen Ihrer PWA. Achten Sie jedoch darauf, die Nutzer nicht mit Installationswerbung zu überfordern oder zu nerven.
- Das Angebot wird nur nach dem
beforeinstallprompt-Ereignis angezeigt.
Automatische Browserwerbung
Wenn bestimmte Kriterien erfüllt sind, wird Nutzern in den meisten Browsern automatisch angezeigt, dass Ihre progressive Web-App installiert werden kann. In der Desktopversion von Chrome wird beispielsweise eine Schaltfläche zum Installieren in der Omnibox angezeigt.
In Chrome für Android wird dem Nutzer eine Mini-Infobar angezeigt. Sie können dies jedoch verhindern, indem Sie preventDefault() für das Ereignis beforeinstallprompt aufrufen.
Wenn Sie preventDefault() nicht aufrufen, wird das Banner zum ersten Mal angezeigt, wenn ein Nutzer Ihre Website besucht und die Installationskriterien für Android erfüllt, und dann noch einmal nach etwa 90 Tagen.
Werbemuster für die Benutzeroberfläche
Werbemuster für die Benutzeroberfläche können für fast jede Art von PWA verwendet werden und erscheinen an Stellen wie der Navigation auf der Website und in Bannern. Wie bei jeder anderen Art von Werbemuster ist es wichtig, den Kontext des Nutzers zu kennen, um Unterbrechungen des Kaufprozesses zu minimieren.
Websites, auf denen die UI für Werbung gut durchdacht ist, erzielen mehr Installationen und stören die Nutzer nicht, die nicht an einer Installation interessiert sind.
Schaltfläche für die einfache Installation
Die einfachste UX ist die Einbindung einer Schaltfläche „Installieren“ oder „App herunterladen“ an einer geeigneten Stelle in Ihren Webinhalten. Achten Sie darauf, dass die Schaltfläche andere wichtige Funktionen nicht blockiert und nicht im Weg steht, wenn sich Nutzer durch Ihre App bewegen.
Feste Überschrift
Dies ist eine Schaltfläche zum Installieren, die Teil der Kopfzeile Ihrer Website ist. Andere Kopfzeileninhalte umfassen häufig das Branding der Website, z. B. ein Logo und das Dreistrich-Menü. Je nach Funktionalität Ihrer Website und den Anforderungen der Nutzer können Überschriften position:fixed sein oder nicht.
Wenn Sie die Installation der PWA in der Kopfzeile Ihrer Website bewerben, können Sie Ihren treuesten Kunden die Rückkehr zu Ihrer Website erleichtern. Pixel im PWA-Header sind wertvoll. Achten Sie daher darauf, dass der Installations-Call-to-Action die richtige Größe hat, wichtiger ist als andere mögliche Kopfzeileninhalte und nicht aufdringlich wirkt.
Beachten Sie in diesem Zusammenhang Folgendes:
- Die Schaltfläche „Installieren“ darf nur angezeigt werden, wenn
beforeinstallpromptausgelöst wurde. - Bewerten Sie den Wert des installierten Anwendungsfalls für Ihre Nutzer. Sie können ein selektives Targeting verwenden, um Ihr Angebot nur Nutzern zu präsentieren, die wahrscheinlich davon profitieren.
- Nutzen Sie den wertvollen Header-Bereich effizient. Überlegen Sie, was Sie Nutzern in der Kopfzeile noch anbieten könnten, und wägen Sie die Priorität des Installationsangebots im Vergleich zu anderen Optionen ab.
Navigationsmenü
Das Navigationsmenü ist ein guter Ort, um für die Installation Ihrer App zu werben, da Nutzer, die das Menü öffnen, Interesse an Ihrer App zeigen.
Beachten Sie in diesem Zusammenhang Folgendes:
- Vermeiden Sie es, wichtige Navigationselemente zu verdecken. Platzieren Sie die Werbung für die PWA-Installation unter anderen Menüpunkten.
- Erläutern Sie kurz und prägnant, warum Nutzer von der Installation Ihrer PWA profitieren würden.
Landingpage
Der Zweck einer Landingpage besteht darin, für Ihre Produkte und Dienstleistungen zu werben. Daher ist es hier angebracht, die Vorteile der Installation Ihrer PWA hervorzuheben.
Erläutern Sie zuerst den Mehrwert Ihrer Website und informieren Sie die Besucher dann darüber, welche Vorteile die Installation bietet.
Beachten Sie in diesem Zusammenhang Folgendes:
- Heben Sie die Funktionen hervor, die für Ihre Besucher am wichtigsten sind, und betonen Sie Keywords, die sie möglicherweise auf Ihre Landingpage geführt haben.
- Achten Sie darauf, dass Ihr Angebot zur Installation und Ihr Call-to-Action ins Auge fallen, aber erst, nachdem Sie Ihr Angebot klar formuliert haben. Das ist schließlich Ihre Landingpage.
- Fügen Sie eine Installationswerbung in den Bereich Ihrer App ein, in dem Nutzer die meiste Zeit verbringen.
Banner installieren
Die meisten Nutzer haben schon einmal Installationsbanner auf Mobilgeräten gesehen und sind mit den Interaktionen vertraut, die ein Banner bietet. Banner sollten mit Bedacht verwendet werden, da sie die Nutzer ablenken können.
Beachten Sie in diesem Zusammenhang Folgendes:
- Warten Sie, bis der Nutzer Interesse an Ihrer Website gezeigt hat, bevor Sie ein Banner anzeigen. Wenn der Nutzer Ihr Banner schließt, sollten Sie es nicht noch einmal anzeigen, es sei denn, er löst ein Conversion-Ereignis aus, das auf ein höheres Maß an Interaktion mit Ihren Inhalten hinweist, z. B. einen Kauf auf einer E-Commerce-Website oder die Registrierung für ein Konto.
- Erläutern Sie im Banner kurz den Vorteil der Installation Ihrer PWA. Sie können beispielsweise die Installation einer PWA von einer iOS-/Android-App unterscheiden, indem Sie erwähnen, dass sie fast keinen Speicherplatz auf dem Gerät des Nutzers belegt oder dass sie sofort ohne Weiterleitung zum Store installiert wird.
Vorläufige Benutzeroberfläche
Eine temporäre Benutzeroberfläche wie das Designmuster Snackbar benachrichtigt den Nutzer und ermöglicht es ihm, eine Aktion einfach auszuführen, in diesem Fall die Installation der App. Bei richtiger Verwendung unterbrechen diese Arten von UI-Mustern den Nutzerfluss nicht und werden in der Regel automatisch geschlossen, wenn sie vom Nutzer ignoriert werden.
Zeigen Sie die Infofläche nach einigen Interaktionen mit Ihrer App an. Wenn sie beim Laden der Seite oder ohne Kontext angezeigt wird, kann sie leicht übersehen werden oder zu einer kognitiven Überlastung führen. In diesem Fall schließen Nutzer einfach alles, was sie sehen. Denken Sie daran, dass neue Nutzer Ihrer Website möglicherweise nicht bereit sind, Ihre PWA zu installieren. Daher sollten Sie warten, bis Sie starke Interessensignale vom Nutzer erhalten, bevor Sie dieses Muster verwenden. Das können beispielsweise wiederholte Besuche, eine Nutzeranmeldung oder ein ähnliches Conversion-Ereignis sein.
Beachten Sie in diesem Zusammenhang Folgendes:
- Zeigen Sie die Snackbar zwischen 4 und 7 Sekunden lang an, damit Nutzer genügend Zeit haben, sie zu sehen und darauf zu reagieren, ohne dass sie im Weg steht.
- Die Anzeige darf nicht über anderen temporären UI-Elementen wie Bannern eingeblendet werden.
- Warten Sie, bis Sie starke Interessensignale vom Nutzer erhalten, bevor Sie dieses Muster verwenden, z. B. wiederholte Besuche, eine Nutzeranmeldung oder ein ähnliches Conversion-Ereignis.
Nach der Umwandlung
Unmittelbar nach einem Conversion-Ereignis, z. B. nach einem Kauf auf einer E-Commerce-Website, ist eine hervorragende Gelegenheit, für die Installation Ihrer PWA zu werben. Der Nutzer interagiert eindeutig mit Ihren Inhalten und eine Conversion ist oft ein Signal dafür, dass der Nutzer Ihre Dienste noch einmal nutzen wird.
Buchungs- oder Bezahlvorgang
Anzeigen Sie ein Angebot für die Installation während oder nach einer sequenziellen Customer Journey, z. B. nach dem Buchungs- oder Bezahlvorgang. Wenn Sie das Angebot präsentieren, nachdem der Nutzer die Kaufentscheidung getroffen hat, können Sie es oft auffälliger gestalten, da die Kaufentscheidung bereits getroffen wurde.
Beachten Sie in diesem Zusammenhang Folgendes:
- Fügen Sie einen relevanten Call-to-Action hinzu. Welche Nutzer profitieren von der Installation Ihrer App und warum? Inwiefern ist es für den aktuellen Kaufprozess relevant?
- Wenn Ihre Marke spezielle Angebote für Nutzer installierter Apps hat, erwähnen Sie diese.
- Achten Sie darauf, dass die Werbung nicht den nächsten Schritten im Kaufprozess im Wege steht, da sich dies negativ auf die Abschlussraten auswirken kann. Im E-Commerce-Beispiel oben sehen Sie, dass der wichtigste Call-to-Action für den Bezahlvorgang über der Werbung für App-Installationen platziert ist.
Registrierung, Anmeldung oder Abmeldung
Dieses Angebot ist ein Sonderfall des Angebotsmusters, bei dem die Angebotskarte stärker hervorgehoben werden kann.
Diese Seiten werden in der Regel nur von aktiven Nutzern aufgerufen, für die der Mehrwert Ihrer PWA bereits nachgewiesen wurde. Außerdem gibt es oft nicht viele andere nützliche Inhalte, die auf diesen Seiten platziert werden können. Daher ist es weniger störend, einen größeren Call-to-Action zu verwenden, solange er nicht im Weg steht.
Beachten Sie in diesem Zusammenhang Folgendes:
- Unterbrechen Sie den Ablauf im Anmeldeformular nicht. Bei einem mehrstufigen Prozess sollten Sie warten, bis der Nutzer den gesamten Vorgang abgeschlossen hat.
- Sie können Funktionen bewerben, die für einen registrierten Nutzer am relevantesten sind.
- Sie können in den Bereichen Ihrer App, in denen Nutzer angemeldet sind, eine zusätzliche Installationswerbung hinzufügen.
Inline-Anzeigenmuster
Bei Inline-Werbetechniken werden Werbung und Websitecontent miteinander verwoben. Das ist oft subtiler als Werbung in der Benutzeroberfläche, was Vor- und Nachteile hat. Ihr Angebot sollte sich so abheben, dass interessierte Nutzer es bemerken, aber nicht so sehr, dass es die Qualität der Nutzererfahrung beeinträchtigt.
In-Feed
Eine In-Feed-Installationswerbung wird in Ihrer PWA zwischen Nachrichtenartikeln oder anderen Listen mit Informationskarten angezeigt.
Ihr Ziel ist es, Nutzern zu zeigen, wie sie noch einfacher auf die Inhalte zugreifen können, die sie sich ansehen. Konzentrieren Sie sich auf Funktionen, die für Ihre Nutzer hilfreich sind.
Beachten Sie in diesem Zusammenhang Folgendes:
- Begrenzen Sie die Häufigkeit der Angebote, um Nutzer nicht zu nerven.
- Geben Sie Nutzern die Möglichkeit, die Angebote zu schließen.
- Speichern Sie die Entscheidung des Nutzers, die Benachrichtigung zu schließen.