Einführung
Anfang 2020 hat das Chrome-Team für Mobilgeräte und Computer einen Plan zur Verbesserung der Auffindbarkeit und des Engagements von installierten Web-Apps erstellt. Durch unsere Arbeit konnten wir die Installation und Nutzung von PWAs um mehr als 100% steigern. Wir haben dies erreicht, indem wir bestehende Funktionen untersucht, A/B-Tests durchgeführt und Nutzer befragt haben, um Einblicke in die Wahrnehmungen und Erwartungen der Nutzer zu erhalten. In diesem Artikel wird beschrieben, wie wir dorthin gekommen sind.
Einheitliche Installationssprache
Der Call-to-Action, der eine PWA-Installation auslöst, war auf der Webplattform nicht einheitlich. Bei Chrome für Android hatten wir uns für Zum Startbildschirm hinzufügen entschieden, auf unseren Desktop-Plattformen haben wir jedoch Installieren hervorgehoben. Die Begründung für diese Abweichung stammt aus einer Studie, die das Team 2016 durchgeführt hat und in der verschiedene Strings verglichen wurden. Das Team stellte fest, dass Zum Startbildschirm hinzufügen auf Mobilgeräten besser funktionierte, wenn auch nur geringfügig.
Eine weitere Studie zur Taxonomie im Jahr 2019 ergab keinen Unterschied. Das Team, das die PWA-Installation vereinheitlichen wollte, beschloss daher, das Label unter Android in Installieren zu ändern. In einer weiteren Studie aus dem Jahr 2021 wurden die Begriffe Installieren, Herunterladen und Holen verglichen. Dabei stellte sich heraus, dass Nutzer Installieren als den Vorgang verstanden, der gerade ausgeführt wurde. Nutzer gingen davon aus, dass sie durch Tippen auf eine Schaltfläche mit dem Label Get (Abrufen) zu einer Website weitergeleitet würden und dass durch Tippen auf Download (Herunterladen) eine Datei im Downloadordner oder einem entsprechenden Ordner gespeichert würde.
Unter Berücksichtigung all dieser Aspekte sind wir zu dem Schluss gekommen, dass das Label Installieren am besten für PWAs geeignet ist. Wir empfehlen Entwicklern auf der gesamten Webplattform, „Installieren“ als bevorzugten String zu verwenden.
Installationssymbol auf dem Desktop
Auf unseren Desktop-Plattformen haben wir ein Designmuster, bei dem Chrome immer dann, wenn eine Website eine PWA lädt, rechts neben der Omnibox eine Schaltfläche mit einem Symbol und dem Label Installieren anzeigt. Danach wird beim Besuch einer Website nur noch das Symbol angezeigt. Wenn Sie auf diese Schaltfläche klicken, wird die Installation einer Desktop-PWA ausgelöst.
Das Symbol war anfangs ein Pluszeichen, was zum Teil auf die Metapher Zum Startbildschirm hinzufügen zurückzuführen ist, die auf Mobilgeräten verwendet wird. Wie bereits erwähnt, haben wir jedoch die Sprache Installieren verwendet. Wir haben von der Entwickler-Community Feedback erhalten, dass dieses Symbol verwirrend ist. Wenn ein Nutzer die Zoomfunktion verwendet hat, um Text zu vergrößern, sah das Symbol für Zoom sehr ähnlich aus, was den Nutzer noch mehr verwirrte.
Da das meiste Feedback anekdotisch war, habe ich beschlossen, die Wahrnehmung unserer Nutzer zu untersuchen. Gemeinsam mit unseren UX-Forschern haben wir eine Studie mit 10.000 Nutzern in den USA und Indonesien durchgeführt, um herauszufinden,wie Nutzer das Installationssymbol wahrnehmen. Wir haben fünf verschiedene Designs getestet, darunter das bestehende, und Nutzer gefragt, was „Installieren“ bedeutet. Wir haben festgestellt, dass das aktuelle Symbol, das Pluszeichen, für unsere Nutzer am verwirrendsten war. Viele verwechselten das Symbol mit „Medizin“, „Erste Hilfe“ und „Batterien“.
Außerdem haben wir festgestellt, dass Nutzer Bilder wie Pfeile und Geräte hauptsächlich mit der Installation in Verbindung bringen. Auf Grundlage dieser Schlussfolgerungen haben wir in Chrome einen A/B/C-Test durchgeführt, bei dem wir das bestehende Design mit zwei Alternativen verglichen haben. Wir entschieden uns für den Pfeil, der nach unten in einen Monitor zeigt, da er deutlich besser abschnitt als die anderen beiden. Außerdem wurde die Installations-UI mit diesem neuen Symbol seltener geschlossen.
Das Ergebnis ist das Design, das Sie heute sehen. Damit hat sich die Installationsrate für PWAs im Vergleich zu Websites mehr als verdoppelt. Wir haben dieses Symbol und ein mobiles Äquivalent auch unserem Material Design-Symbolset hinzugefügt, damit die Community die Symbole verwenden kann, die wir als am ansprechendsten empfunden haben.
Ein einzelnes Symbol wird natürlich nicht die Welt verändern. Das führt uns zur nächsten Funktion.
Produktinterne Hilfe
Die In-Product-Hilfe ist ein blauer Blasen-Tooltip, mit dem Nutzer anhand bestimmter Kriterien in neue Funktionen eingeführt werden, die für sie von Interesse sein könnten. Wir haben uns entschieden, dieses Designmuster einzuführen, um Nutzer über die Installationsfunktionen zu informieren und das neue Symboldesign zu unterstützen.
Wenn ein Nutzer eine Website regelmäßig besucht, verwendet Chrome einen Dienst namens Site Engagement.
So erhalten Sie Informationen dazu, wie stark ein Nutzer mit einer Website interagiert. Unter chrome://site-engagement/ können Sie die Websites sehen, mit denen Sie regelmäßig interagieren. Anhand dieser Werte konnten wir feststellen, ob ein Nutzer an einer Website interessiert ist. Wenn die Website eine PWA war und der Nutzer sie aktiv genutzt hat, wurde ihm die In-Product-Hilfe-UI für die Installation angezeigt.
So konnten wir uns auf Nutzer konzentrieren, die mit der Website interagieren, und Nutzer, die eine Website nur einmal besuchen, nicht stören.
Durch die Verwendung der In-Product-Hilfe auf dem Computer konnten wir die PWA-Installation um mehr als 100 % steigern. Das zeigt, dass sich die Konzentration auf engagierte Nutzer positiv auf die Installierbarkeit von Web-Apps auswirkt.
Detailliertere Installations-UI
Die meisten Nutzer installieren Apps über einen App-Shop. Seit Mitte der 2000er-Jahre informieren wir Nutzer darüber, dass sie beim Installieren einer App eine Beschreibung, Screenshots und andere Metadaten sehen, die ihnen bei der Entscheidung helfen, ob sie eine App installieren möchten.
Bei PWAs war die Benutzeroberfläche, die wir nach der Installation einer Web-App angezeigt haben, relativ spärlich. Das Team beschloss daher, eine umfassendere Installationsfunktion zu entwickeln, die Nutzern Kontext zur Web-App bietet und Entwicklern die Möglichkeit gibt, PWAs zu präsentieren, die mit nativen Apps vergleichbar sind.
Anfang des Jahres haben wir Richer Install eingeführt, eine erweiterte Installations-UI in Chrome für Android, mit der Entwickler Screenshots in ihr Manifest einfügen können. Entwickler können auch eine Beschreibung hinzufügen. Das wird empfohlen, ist aber nicht erforderlich. Aufgrund dieser neuen Benutzeroberfläche hat sich die Installationsrate für einige PWAs verdoppelt. Das zeigt, dass Nutzer Web-Apps eher installieren, wenn wir mehr Kontext und umfassendere Funktionen bieten. Die Desktopversion dieser Benutzeroberfläche befindet sich derzeit in der Entwicklung.
Fazit
Das Team hat in den letzten zwei Jahren neue Funktionen in Chrome untersucht und getestet, die PWA-Entwickler unterstützen und Nutzern die Vorteile von Webanwendungen näherbringen. Es gibt noch viel zu tun, aber gemeinsam können wir das Leben unserer Nutzer verbessern und das offene Web weiter unterstützen.