Einführung
Anfang 2020 hat das Chrome-Team für Mobilgeräte und Computer einen Plan zur Verbesserung der Sichtbarkeit und Interaktion mit installierten Web-Apps entwickelt. Unsere Arbeit führte zu einer Steigerung der PWA-Installationen und -Interaktionen um mehr als 100 %. Dazu haben wir bestehende Funktionen recherchiert, A/B-Tests durchgeführt und Nutzerinterviews geführt, um Einblicke in die Wahrnehmung und Erwartungen der Nutzer zu gewinnen. In diesem Artikel erfahren Sie, wie es dazu kam.
Einheitliche Installationssprache
Der Call-to-Action, der eine PWA-Installation auslöst, war auf der Webplattform nicht einheitlich. Für Chrome auf Android haben 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 ergab sich aus einer Studie, die das Team 2016 durchgeführt hat, um verschiedene Strings zu vergleichen. 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 keine Unterschiede. Das Team wollte die Installation von PWAs vereinheitlichen und entschied sich daher, das Label auf Android-Geräten zu Installieren zu ändern. In einer weiteren Studie 2021 wurden die Begriffe Installieren, Herunterladen und Abrufen verglichen. Dabei haben wir festgestellt, dass Nutzer Installieren als den laufenden Vorgang verstehen. Die Nutzer waren der Meinung, dass sie durch Tippen auf eine Schaltfläche mit dem Label Herunterladen zu einer Website weitergeleitet werden würden. Bei Herunterladen gingen sie davon aus, dass eine Datei in ihrem Downloadordner oder einem ähnlichen Ordner landet.
Aufgrund dieser Überlegungen haben wir uns entschieden, das Label Installieren für PWAs zu verwenden. Wir empfehlen Entwicklern auf der gesamten Webplattform, „Installieren“ als bevorzugten String zu verwenden.
Symbol auf dem Desktop installieren
Auf unseren Desktop-Plattformen gibt es ein Designmuster: Wenn eine Website eine PWA lädt, wird in Chrome rechts neben der Omnibox ein Pillensymbol mit dem Label Installieren angezeigt. Wenn ein Nutzer danach eine Website besucht, wird nur das Symbol angezeigt. Wenn Sie auf diese Tablette klicken, wird die Installation einer Desktop-PWA ausgelöst.
Das Symbol war ursprünglich ein Pluszeichen, was unter anderem an der Metapher Zum Startbildschirm hinzufügen auf Mobilgeräten lag. Wie bereits erwähnt, haben wir jedoch Installieren verwendet. Die Entwicklergemeinde hat uns mitgeteilt, dass dieses Symbol verwirrend war. Wenn ein Nutzer außerdem die Zoomfunktion zum Vergrößern von Text verwendete, sah das Symbol für das Zoomen sehr ähnlich aus, was die Nutzer noch mehr verwirrte.
Ich beschloss, die Wahrnehmung unserer Nutzer zu untersuchen, da das meiste Feedback anekdotisch war. In Zusammenarbeit mit unseren UX-Rechercheuren haben wir eine Studie mit 10.000 Nutzern in den USA und Indonesien durchgeführt, um herauszufinden,wie Nutzer die Symbole für die Installation verstehen. Wir haben fünf verschiedene Designs getestet, einschließlich des vorhandenen, und die 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 vor allem Bilder wie Pfeile und Geräte mit der Installation in Verbindung bringen. Auf der Grundlage dieser Schlussfolgerungen haben wir einen A/B/C-Test in Chrome durchgeführt, bei dem das vorhandene Design mit zwei Alternativen verglichen wurde. Wir entschieden uns für den Pfeil, der auf einen Monitor zeigt, da er deutlich besser abgeschnitten hatte als die anderen beiden. Außerdem wurde die Installationsoberfläche mit diesem neuen Symbol seltener geschlossen.
Das Ergebnis ist das Design, das Sie heute sehen. Die Installationsrate für PWAs hat sich im Vergleich zu Websites mehr als verdoppelt. Außerdem haben wir dieses Symbol und eine mobile Entsprechung in unser Material Design-Symbolset aufgenommen, damit die Community die Ikonografie verwenden kann, die wir am ansprechendsten fanden.
Natürlich wird die Welt nicht durch ein einzelnes Symbol verändert. Das bringt uns zu unserer nächsten Funktion.
Produktinterne Hilfe
Die In-Product-Hilfe ist ein blauer Hilfetext in Form einer Blase, der Nutzer über neue Funktionen informiert, die sie basierend auf bestimmten Kriterien interessieren könnten. Wir haben uns für dieses Designmuster entschieden, um Nutzer über die Installationsfunktionen zu informieren und das neue Symboldesign zu unterstützen.
Wenn ein Nutzer eine Website regelmäßig besucht, verwendet Chrome den Dienst Website-Interaktion.
So können Sie nachvollziehen, wie aktiv ein Nutzer mit einer Website interagiert. Unter chrome://site-engagement/ sehen Sie die Websites, mit denen Sie regelmäßig interagieren. Anhand dieser Bewertungen können wir feststellen, ob ein Nutzer an einer Website interessiert ist. Wenn es sich bei der Website um eine PWA handelt und der Nutzer aktiv ist, wird ihm die Hilfe zur Installation angezeigt.
So konnten wir uns nur auf aktive Nutzer konzentrieren und Nutzer, die eine Website nur einmal besuchen, nicht nerven.
Durch die Verwendung der in der Desktopversion integrierten Hilfe konnten wir die Anzahl der PWA-Installationen um mehr als 100 % steigern. Das zeigt, dass sich die Installierbarkeit von Web-Apps durch die Konzentration auf aktive Nutzer verbessern lässt.
Detailliertere Installations-UI
Für die meisten Nutzer ist ein App-Shop die erste Anlaufstelle. Seit Mitte der 2000er-Jahre informieren wir Nutzer darüber, dass sie bei der Installation einer App eine Beschreibung, Screenshots und andere Metadaten sehen, anhand derer sie entscheiden können, ob sie die App haben möchten.
Bei PWAs war die Benutzeroberfläche, die wir angezeigt haben, wenn ein Nutzer sich entschieden hatte, eine Webanwendung zu installieren, relativ dürftig. Das Team entschied sich daher, eine umfassendere Installationserfahrung zu entwickeln, die Nutzern Kontext zur Webanwendung bietet und Entwicklern die Möglichkeit gibt, ihre PWAs zu präsentieren, die mit nativen Apps vergleichbar sind.
Anfang des Jahres haben wir Richer Install eingeführt, eine erweiterte Installationsoberfläche in Chrome auf Android-Geräten, mit der Entwickler ihrem Manifest Screenshots hinzufügen können. Entwickler können auch eine Beschreibung hinzufügen. Dies wird empfohlen, ist aber nicht erforderlich. Durch diese neue Benutzeroberfläche hat sich die Installationsrate einiger PWAs verdoppelt. Das zeigt, dass Nutzer Web-Apps eher installieren, wenn wir ihnen mehr Kontext und eine bessere Nutzererfahrung bieten. Die Desktopversion dieser Benutzeroberfläche befindet sich derzeit in der Entwicklungsphase.
Fazit
In den letzten zwei Jahren hat das Team neue Funktionen in Chrome untersucht und getestet, die PWA-Entwicklern neue Möglichkeiten eröffnet und Nutzern die Vorteile von Web-Anwendungen nähergebracht haben. Es gibt noch viel zu tun, aber gemeinsam können wir das Leben unserer Nutzer verbessern und bereichern und das offene Web weiter unterstützen.