Muster für die Förderung der PWA-Installation

Mustafa Kurtuldu

Penny McLachlan

Wenn Sie eine 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 bei Weitem nicht vollständig, bietet aber einen Ausgangspunkt für verschiedene Möglichkeiten, die Installation Ihrer PWA zu bewerben. Unabhängig davon, welche Muster du verwendest, führen sie alle zum selben Code, der den Installationsablauf auslöst. Eine Anleitung dazu findest du 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 deiner PWA und wirkt sich negativ auf deine Engagement-Messwerte aus.
• Bieten Sie die Möglichkeit an, das Angebot zu schließen oder abzulehnen. 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.
• Kombiniere Techniken in verschiedenen Teilen deiner PWA. Achte aber darauf, dass du deine Nutzer nicht mit Installationswerbung überfordert oder verärgerst.
• Die Werbung wird erst nach dem Ereignis beforeinstallprompt eingeblendet.

Automatisches Browserangebot

Wenn bestimmte Kriterien erfüllt sind, teilen die meisten Browser dem Nutzer automatisch mit, dass Ihre progressive Web-App installierbar ist. In der Desktopversion von Chrome wird beispielsweise eine Installationsschaltfläche in der Omnibox angezeigt.

In Chrome für Android wird dem Nutzer eine Miniinfoleiste angezeigt. Dies lässt sich verhindern, indem preventDefault() für das Ereignis beforeinstallprompt aufgerufen wird. Wenn du preventDefault() nicht aufrufst, wird das Banner angezeigt, wenn ein Nutzer deine Website zum ersten Mal besucht und die Kriterien für die Installierbarkeit unter Android erfüllt. Nach etwa 90 Tagen wird das Banner noch einmal angezeigt.

Werbemuster der Benutzeroberfläche

Werbemuster der Benutzeroberfläche können für fast jede Art von PWA verwendet werden und erscheinen beispielsweise an Stellen der Websitenavigation und Banner. Wie bei allen anderen Werbemustern ist es wichtig, den Kontext des Nutzers zu kennen, um eine Unterbrechung des Kaufprozesses zu minimieren.

Websites, die beim Auslösen der Benutzeroberfläche für die Hochstufung überlegt sind, erzielen eine größere Anzahl von Installationen und verhindern, dass Nutzer, die nicht an der Installation interessiert sind, den Weg gestört werden.

Schaltfläche für einfache Installation

Die einfachste mögliche UX besteht darin, eine Schaltfläche „Installieren“ oder „App herunterladen“ an einer geeigneten Stelle in Ihren Webinhalten einzufügen. Achte darauf, dass die Schaltfläche keine anderen wichtigen Funktionen blockiert und den Weg des Nutzers durch deine Anwendung nicht im Weg ist.

Feste Kopfzeile

Dies ist eine Installationsschaltfläche, die Teil des Headers Ihrer Website ist. Andere Header-Inhalte umfassen häufig Website-Branding wie ein Logo und das Hamburger-Menü. Header können position:fixed lauten oder nicht, je nach Funktionalität und Nutzeranforderungen Ihrer Website.

Bei richtiger Verwendung ist es eine gute Möglichkeit, die Installation von PWAs über den Header deiner Website zu bewerben, um deinen treuesten Kunden die Rückkehr zur Website zu erleichtern. Pixel im PWA-Header sind kostbar. Daher sollten Sie darauf achten, dass der Call-to-Action für die Installation die richtige Größe hat, eine größere Bedeutung als andere mögliche Headerinhalte hat und unaufdringlich ist.

Folgende Schritte sind erforderlich:

• Die Installationsschaltfläche darf nur angezeigt werden, wenn das beforeinstallprompt ausgelöst wurde.
• Bewerten Sie den Wert des installierten Anwendungsfalls für Ihre Nutzer. Sie können eine selektive Ausrichtung verwenden, um Ihr Angebot nur Nutzern zu präsentieren, die wahrscheinlich davon profitieren.
• Nutzen Sie wertvollen Platz in der Kopfzeile. Überlegen Sie, was Ihrem Nutzer sonst noch im Header angeboten werden könnte, und wägen Sie die Priorität der Installationswerbung im Vergleich zu anderen Optionen ab.

Navigationsmenü

Das Navigationsmenü eignet sich hervorragend, um für die Installation Ihrer App zu werben, da Nutzer, die das Menü öffnen, signalisieren, dass sie mit Ihrer App interagieren.

Folgende Schritte sind erforderlich:

• Vermeiden Sie es, wichtige Navigationsinhalte zu stören. Platzieren Sie die PWA-Installationskampagne unter anderen Menüelementen.
• 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 sollten Sie an dieser Stelle groß rauskommen, wenn Sie die Vorteile der Installation Ihrer PWA bewerben.

Erläutern Sie zuerst das Nutzenversprechen Ihrer Website und informieren Sie dann die Besucher über die Vorteile einer Installation.

Folgende Schritte sind erforderlich:

• Sprechen Sie die Funktionen an, die für Ihre Besucher am wichtigsten sind, und heben Sie Keywords hervor, über die sie auf Ihre Landingpage gelangt sind.
• Gestalten Sie Ihre Installations- und Call-to-Action-Werbeaktion auffällig, aber erst, nachdem Sie Ihr Nutzenversprechen klar herausgestellt haben. Schließlich ist das 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 sind auf Mobilgeräten auf Installationsbanner gestoßen und sind mit den Interaktionen vertraut, die durch ein Banner möglich sind. Banner sollten mit Bedacht eingesetzt werden, da sie den Nutzer stören können.

Folgende Schritte sind erforderlich:

• Warten Sie, bis der Nutzer Interesse an Ihrer Website bekundet hat, bevor Sie ein Banner einblenden. Schließt der Nutzer Ihr Banner, blenden Sie es nur dann noch einmal aus, wenn der Nutzer ein Conversion-Ereignis auslöst, das auf eine höhere Interaktion mit Ihren Inhalten hindeutet, z. B. einen Kauf auf einer E-Commerce-Website oder die Registrierung für ein Konto.
• Erläutern Sie kurz, welche Vorteile die Installation Ihrer PWA im Banner bietet. Du kannst beispielsweise die Installation einer PWA von einer iOS- oder Android-App unterscheiden, indem du angibst, dass sie auf dem Gerät des Nutzers fast keinen Speicherplatz benötigt oder dass sie sofort und ohne Weiterleitung zum Store installiert wird.

Temporäre Benutzeroberfläche

Eine temporäre UI, wie das Designmuster Snackbar, benachrichtigt den Nutzer und ermöglicht ihm, eine Aktion (in diesem Fall die Installation der App) ganz einfach auszuführen. Bei richtiger Verwendung stören diese UI-Muster den Nutzerfluss nicht und werden normalerweise automatisch geschlossen, wenn sie vom Nutzer ignoriert werden.

Blenden Sie die Snackbar nach ein paar Interaktionen mit Ihrer App ein. Wenn sie beim Seitenaufbau oder ohne Kontext angezeigt wird, kann sie leicht übersehen werden oder zu kognitiver Überlastung führen. In diesem Fall schließen Nutzer einfach alles, was sie sehen. Neue Nutzer Ihrer Website sind möglicherweise noch nicht bereit, die 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.

Folgende Schritte sind erforderlich:

• 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.
• Vermeide es, es über anderen temporären UI-Elementen wie Bannern usw. zu zeigen.
• Warten Sie, bis Sie aussagekräftige Signale für das Interesse des Nutzers erhalten haben, 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 signalisiert häufig, dass der Nutzer wieder mit Ihren Diensten interagiert.

Buchung oder Bezahlvorgang

Präsentieren Sie ein Installationsangebot während oder nach einem aufeinanderfolgenden Kaufprozess, z. B. nach der Buchung oder dem Bezahlvorgang. Wenn du das Angebot erst präsentierst, nachdem der Nutzer den Kaufprozess abgeschlossen hat, kannst du es häufig hervorheben, da der Kaufprozess bereits abgeschlossen ist.

Folgende Schritte sind erforderlich:

• Fügen Sie einen relevanten Call-to-Action ein. Welche Nutzer profitieren von der Installation deiner App und warum? Wie relevant ist das für den Weg, auf dem sie sich gerade befinden?
• Wenn Ihre Marke einzigartige Angebote für Nutzer installierter Apps hat, erwähnen Sie diese.
• Halten Sie die Werbeaktion für die nächsten Schritte im Weg frei, da sich Ihre Abschlussraten negativ auf die Journey auswirken. 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 Werbemusters Journey, bei dem die Angebotskarte stärker hervorgehoben werden kann.

Diese Seiten werden normalerweise nur von interessierten Nutzern aufgerufen, für die das Nutzenversprechen Ihrer PWA bereits erstellt 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 platzieren, solange er nicht im Weg ist.

Folgende Schritte sind erforderlich:

• Vermeiden Sie es, den Vorgang des Nutzers durch das Anmeldeformular zu unterbrechen. Wenn es sich um einen mehrstufigen Prozess handelt, sollten Sie warten, bis der Nutzer den Prozess abgeschlossen hat.
• Bewerben Sie Funktionen, die für einen angemeldeten Nutzer am relevantesten sind.
• Erwägen Sie, ein zusätzliches Installationsangebot in den angemeldeten Bereichen Ihrer App hinzuzufügen.

Inline-Werbemuster

Inline-Werbetechniken verknüpfen Werbung mit Website-Inhalten. Dies ist oft subtiler als Werbung in der Benutzeroberfläche, die Nachteile hat. Ihr Angebot sollte so auffällig sein, dass interessierte Nutzer es bemerken, jedoch nicht so sehr, dass es die Qualität der Nutzererfahrung beeinträchtigt.

In-Feed

Ein In-Feed-Installationsangebot wird zwischen Nachrichtenartikeln oder anderen Listen von Infokarten in Ihrer PWA angezeigt.

Ihr Ziel ist es, Nutzern zu zeigen, wie sie einfacher auf Inhalte zugreifen können, die ihnen gefallen. Konzentrieren Sie sich darauf, Funktionen zu bewerben, die für Ihre Nutzer hilfreich sind.

Folgende Schritte sind erforderlich:

• Schränken Sie die Häufigkeit der Werbeaktionen ein, um Nutzer nicht zu stören.
• Geben Sie Ihren Nutzern die Möglichkeit, die Angebote zu schließen.
• Merken Sie sich die vom Nutzer gewählte Option zum Schließen.