Wenn Sie Ihre progressive Web-App (PWA) installieren, können Nutzer sie leichter finden und verwenden. Selbst bei Werbung im Browser ist einigen Nutzern nicht bewusst, dass sie eine PWA installieren können. Daher kann es hilfreich sein, eine In-App-Nutzererfahrung bereitzustellen, mit der Sie die Installation Ihrer PWA bewerben und aktivieren 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 davon gelten, welche Werbemuster Sie auf Ihrer Website verwenden.
- Werbeaktionen sollten nicht in den User Journeys einbezogen werden. Platzieren Sie den Call-to-Action beispielsweise auf einer PWA-Anmeldeseite unter dem Anmeldeformular und unter 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. Behalte in diesem Fall die Einstellung des Nutzers im Hinterkopf und fragt dich nur dann, wenn sich die Beziehung des Nutzers zu deinen Inhalten ändert, z. B. wenn er sich angemeldet oder einen Kauf abgeschlossen hat.
- Kombinieren Sie die verschiedenen Methoden in verschiedenen Bereichen Ihrer PWA. Achten Sie aber darauf, die Nutzer nicht mit zu vielen Installationsaufforderungen 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 allen anderen Werbemustern ist es wichtig, den Kontext des Nutzers zu kennen, um eine Unterbrechung des Kaufprozesses zu minimieren.
Websites, auf denen die Promotion-UI gut platziert ist, erzielen mehr Installationen und stören nicht die Nutzer, die nicht an der 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. Achte darauf, dass die Schaltfläche keine anderen wichtigen Funktionen blockiert und den Weg des Nutzers durch deine Anwendung nicht im Weg ist.
Feste Überschrift
Dies ist eine Installationsschaltfläche, die Teil der Kopfzeile Ihrer Website ist. Andere Kopfzeileninhalte umfassen häufig das Branding der Website, z. B. ein Logo und das Dreistrich-Menü. Header können position:fixed lauten oder nicht, je nach Funktionalität und Nutzeranforderungen Ihrer Website.
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 Navigationsinhalte zu stören. Platzieren Sie die Werbung für die PWA-Installation unter anderen Menüpunkten.
- Erkläre kurz, warum Nutzer von der Installation deiner PWA profitieren würden.
Landingpage
Der Zweck einer Landingpage besteht darin, für Ihre Produkte und Dienstleistungen zu werben. Daher ist dies ein geeigneter Ort, um 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.
- Gestalten Sie Ihre Installations- und Call-to-Action-Werbeaktion auffällig, aber erst, nachdem Sie Ihr Nutzenversprechen klar herausgestellt haben. Das ist schließlich Ihre Landingpage.
- Erwägen Sie, in dem Teil Ihrer App, in dem Nutzer die meiste Zeit verbringen, ein Installationsangebot hinzuzufügen.
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 ein höheres Maß an Interaktion mit Ihren Inhalten anzeigt, z. B. einen Kauf auf einer E-Commerce-Website oder die Registrierung für ein Konto.
- Erläutern Sie im Banner kurz, warum es sich lohnt, Ihre PWA zu installieren. 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 empfiehlt es sich, dieses Muster zu verwenden, z. B. wiederholte Besuche, eine Nutzeranmeldung oder ein ähnliches Conversion-Ereignis. Warten Sie damit, bis Sie starke Signale für das Interesse des Nutzers haben, bevor Sie dieses Muster verwenden.
Beachten Sie in diesem Zusammenhang Folgendes:
- Blenden Sie die Snackbar 4 bis 7 Sekunden lang ein, damit die Nutzer genügend Zeit haben, sie zu sehen und darauf zu reagieren, ohne zu stören.
- Die Anzeige sollte 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 Conversion
Unmittelbar nach einem Conversion-Ereignis, z. B. nach einem Kauf auf einer E‐Commerce-Website, ist dies eine hervorragende Möglichkeit, die Installation Ihrer PWA zu bewerben. 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
Präsentieren Sie ein Installationsangebot während oder nach einem aufeinanderfolgenden Kaufprozess, z. B. nach der Buchung oder dem Bezahlvorgang. Wenn das Angebot erst angezeigt wird, nachdem der Nutzer den Kaufprozess abgeschlossen hat, kannst du es häufig hervorheben, da der Kaufprozess bereits abgeschlossen ist.
Beachten Sie in diesem Zusammenhang Folgendes:
- Fügen Sie einen relevanten Call-to-Action ein. Welche Nutzer profitieren von der Installation Ihrer App und warum? Inwiefern ist es für den aktuellen Kaufprozess relevant?
- Wenn Ihre Marke einzigartige 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 Abschlussrate auswirken kann. Im E-Commerce-Beispiel oben sehen Sie, dass sich der zentrale Call-to-Action zum Bezahlvorgang über der Werbeaktion für die App-Installation befindet.
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:
- Vermeiden Sie es, den Vorgang des Nutzers durch das Registrierungsformular zu unterbrechen. Wenn es sich um einen mehrstufigen Prozess handelt, sollten Sie warten, bis die Nutzenden den Prozess abgeschlossen haben.
- 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
Inline-Werbetechniken verknüpfen Werbung mit Website-Inhalten. 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.
- Merken Sie sich die vom Nutzer gewählte Option zum Schließen.