Einführung
Anfang 2020 hat das Chrome-Team für Mobilgeräte und Computer einen Plan zur Verbesserung der Sichtbarkeit und Interaktion der installierten Webanwendungen entwickelt. Unsere Arbeit führte zu einem Anstieg von mehr als 100% bei der Installation und Interaktion mit PWAs. Dazu haben wir uns vorhandene Funktionen angesehen, A/B-Tests durchgeführt und Interviews mit Nutzern durchgeführt, um mehr über die Wahrnehmung und Erwartungen der Nutzer zu erfahren. In diesem Artikel erfahren Sie, wie wir dazu gekommen sind.
Einheitliche Installationssprache
Der Call-to-Action, der eine PWA-Installation auslöst, war auf der gesamten Webplattform nicht einheitlich. Für Chrome unter Android hatten wir uns für Zum Startbildschirm hinzufügen entschieden, aber auf unseren Desktop-Plattformen lag der Schwerpunkt auf Installieren. Die Abweichung wurde durch eine vom Team im Jahr 2016 durchgeführte Studie begründet, in der verschiedene Strings verglichen wurden. Das Team stellte fest, dass Zum Startbildschirm hinzufügen auf Mobilgeräten besser, wenn auch nur geringfügig funktioniert.
Eine weitere Studie zur Taxonomie ergab im Jahr 2019 keinen Unterschied. Um die PWA-Installation zu vereinheitlichen, beschloss das Team, das Label unter Android zu Installieren zu aktualisieren. In einer weiteren Studie aus dem Jahr 2021 wurden die Programmiersprachen Installieren, Get und Herunterladen verglichen. Dabei stellten wir fest, dass Nutzer Installieren als Prozess verstehen. Durch Tippen auf eine Schaltfläche mit dem Label Get (Abrufen) werden Nutzer auf eine Website weitergeleitet. Bei Download gingen sie davon aus, dass eine Datei im Downloadordner oder in einer ähnlichen Form landen würde.
Vor diesem Hintergrund sind wir zu dem Schluss gekommen, dass das Label Installieren am besten für PWAs geeignet ist. Wir empfehlen Entwicklern der Webplattform, die Installation als bevorzugten String zu verwenden.
Installationssymbol auf dem Desktop
Auf unseren Desktop-Plattformen haben wir ein Designmuster, nach dem Chrome beim Laden einer PWA auf der rechten Seite der Omnibox ein Symbol und das Label Installieren enthält. Wenn ein Nutzer anschließend eine Website besucht, ist nur noch das Symbol zu sehen. Wenn Sie auf diese Pille klicken, wird eine Desktop-PWA installiert.
Das Symbol war anfangs ein Pluszeichen, teilweise aufgrund der Metapher Zum Startbildschirm hinzufügen, die auf Mobilgeräten verwendet wird. Wie bereits erwähnt, haben wir jedoch Install (Installieren) verwendet. Wir haben von der Entwickler-Community Feedback erhalten, dass dieses Symbol verwirrend war. Wenn ein Nutzer außerdem die Zoom-Funktion zum Vergrößern von Text verwendet hat, sieht das Zoom-Symbol sehr ähnlich aus, was den Nutzer noch mehr verwirrt.
Ich beschloss, die Wahrnehmung der Nutzenden zu untersuchen, da das meiste Feedback Anekdote ist. Gemeinsam mit unseren UX-Forschern haben wir in den USA und Indonesien eine Studie mit 10.000 Nutzern durchgeführt, um festzustellen,ob sie Installationssymbole 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. Das Symbol wurde häufig mit „Medizin“, „Erste Hilfe“ und „Batterien“ verwechselt.
Außerdem stellten wir fest, dass Nutzer mit der Installation hauptsächlich Bilder wie Pfeile und Geräte in Verbindung brachten. Basierend auf diesen Schlussfolgerungen haben wir einen A/B/C-Test in Chrome durchgeführt, um das vorhandene Design mit zwei Alternativen zu vergleichen. Wir landeten auf dem nach unten zeigenden Pfeil, der deutlich besser als die anderen beiden war. Auch die Anzahl der Nutzer, die die Installations-UI mit dem neuen Symbol schließen, ist zurückgegangen.
Das Ergebnis ist das Design, das wir heute sehen: Die Installationsrate für PWAs hat sich bei Websites mehr als verdoppelt. Wir haben auch dieses Symbol und ein mobiles Äquivalent zu unserem Material Design-Symbolsatz hinzugefügt, damit die Community die Symbole verwenden kann, die sie am interessantesten fanden.
Natürlich wird ein einzelnes Symbol die Welt nicht verändern, was uns zum nächsten Feature führt.
Produktinterne Hilfe
Die produktinterne Hilfe ist eine blaue Blasenkurzinfo, mit der Nutzer neue Funktionen kennenlernen können, die sie basierend auf bestimmten Kriterien interessieren könnten. Wir beschlossen, dieses Designmuster einzuführen, um Nutzer über die Installationsfunktionen zu informieren und die Neugestaltung des Symbols weiter zu unterstützen.
Wenn ein Nutzer regelmäßig eine Website besucht, verwendet Chrome den Dienst Website-Engagement.
Dies liefert Informationen darüber, wie intensiv ein Nutzer mit einer Website interagiert. Unter chrome://site-engagement/ kannst du die Websites sehen, mit denen du regelmäßig interagierst. Anhand dieser Bewertungen können wir feststellen, ob Nutzende an einer Website interessiert sind. Wenn die Website eine PWA ist und der Nutzer aktiv ist, wird ihm die produktinterne Hilfe zur Installation angezeigt.
Das bedeutete, dass wir uns nur auf aktive Nutzer konzentrierten und nicht auf Nutzer gestört haben, die eine Website nur einmal besuchen.
Durch die Nutzung der produktinternen Hilfe auf dem Computer konnten wir die Installation von PWAs um mehr als 100 % steigern. Dies zeigt, dass die Installierbarkeit von Webanwendungen durch den Fokus auf aktive Nutzer verbessert wurde.
Umfassendere Installations-UI
Das Installationsparadigma ist für die meisten Nutzer ein Store. Seit Mitte der 2000er-Jahre haben wir Nutzer darüber informiert, dass bei jeder Installation einer App eine Beschreibung, Screenshots und andere Metadaten angezeigt werden, um zu entscheiden, ob eine App für sie geeignet ist.
Mit PWAs war die Benutzeroberfläche, die wir gezeigt haben, nachdem ein Nutzer sich für die Installation einer Web-App entschieden hatte, relativ knapp bemessen. Daher entschied sich das Team für eine verbesserte Installation, die den Nutzern Kontext zu der Web-App bietet und Entwicklern die Möglichkeit gibt, die PWAs zu würdigen, die denen der nativen Anzeigen gerecht waren.
Anfang des Jahres haben wir Richer Install eingeführt, eine erweiterte Installations-UI für Chrome unter Android, mit der Entwickler ihrem Manifest Screenshots hinzufügen können. Entwickler können auch eine Beschreibung hinzufügen. Dies wird zwar empfohlen, ist aber nicht erforderlich. Aufgrund dieser neuen UI hat sich die Installationsrate einiger PWAs verdoppelt. Dies zeigt, dass Nutzer mehr Vertrauen in die Installation von Web-Apps haben, wenn wir ihnen mehr Kontext und eine bessere Nutzererfahrung bieten. Die Desktop-Version dieser UI ist derzeit noch in Arbeit.
Fazit
In den letzten zwei Jahren hat sich das Team mit neueren Funktionen in Chrome beschäftigt und diese getestet, um PWA-Entwickler zu unterstützen und Nutzer über die Vorteile von Weberlebnissen aufzuklären. 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.