Einleitung
Anfang 2020 erarbeitete das Chrome-Team für Mobilgeräte und Computer einen Plan zur Verbesserung der Auffindbarkeit und Interaktion von installierten Webanwendungen. So konnten wir die Installation und die Interaktion von PWAs um mehr als 100% steigern. Dazu haben wir bestehende Funktionen untersucht, A/B-Tests durchgeführt und Interviews mit Nutzern durchgeführt, um einen Einblick in die Wahrnehmung und Erwartungen der Nutzer zu erhalten. In diesem Artikel erfahren Sie, wie wir dorthin gekommen sind.
Einheitliche Installationssprache
Der Call-to-Action, der eine PWA-Installation auslöst, war auf der Webplattform unterschiedlich. Für Chrome unter Android hatten wir uns für die Option Zum Startbildschirm hinzufügen entschieden, auf unseren Desktop-Plattformen jedoch betonten wir Installieren. Die Begründung für diese Diskrepanz stammt aus einer Studie, die das Team 2016 durchgeführt hat, in der verschiedene Zeichenfolgen verglichen wurden. Das Team stellte fest, dass die Funktion Zum Startbildschirm hinzufügen auf Mobilgeräten, wenn auch nur marginal, besser funktioniert.
Eine weitere Studie zur Taxonomie aus dem Jahr 2019 ergab keinen Unterschied. Das Team, das die PWA-Installation vereinheitlichen wollte, beschloss daher, das Label unter Android zu Installieren zu aktualisieren. In einer weiteren Studie aus dem Jahr 2021 wurden die Programmiersprachen Installieren, Get und Download verglichen und festgestellt, dass Nutzer Installieren als den laufenden Vorgang verstanden haben. Nutzer hatten das Gefühl, dass sie durch Tippen auf eine Schaltfläche mit der Bezeichnung Get auf eine Website weitergeleitet werden. Bei Download nahmen sie an, dass eine Datei in ihrem Download-Ordner oder einem vergleichbaren Ordner abgelegt werden würde.
Vor diesem Hintergrund sind wir zu dem Schluss gekommen, dass das Label Installieren am besten zu PWAs passt. Wir empfehlen Entwicklern auf der gesamten Webplattform, in Zukunft „Installieren“ als bevorzugten String zu verwenden.
Installationssymbol auf Desktop-Computern
Auf unseren Desktop-Plattformen zeigt Chrome jedes Mal, wenn eine PWA geladen wird, eine Kachel an, die rechts in der Omnibox angezeigt wird. Sie enthält ein Symbol und das Label Installieren. Besucht ein Nutzer danach eine Website, ist nur noch das Symbol zu sehen. Wenn Sie auf diese Kachel klicken, wird die Installation einer Desktop-PWA ausgelöst.
Das Symbol war ursprünglich ein Pluszeichen, teilweise aufgrund der Metapher Zum Startbildschirm hinzufügen, die auf Mobilgeräten verwendet wurde. Wie bereits erwähnt, haben wir jedoch Installieren verwendet. Das Feedback der Entwickler-Community bekam, dass dieses Symbol verwirrend war. Wenn ein Nutzer außerdem die Zoomfunktion zum Vergrößern des Textes verwendet hat, sah das Zoomsymbol sehr ähnlich aus, was den Nutzer noch weiter verwirrte.
Ich beschloss, die Wahrnehmung unserer Nutzer zu untersuchen, da das meiste Feedback anekdotenhaft war. Gemeinsam mit unseren UX-Forschern haben wir eine Studie mit 10.000 Nutzern in den USA und Indonesien durchgeführt, um festzustellen,ob Nutzer Installationssymbole verstehen. Wir haben fünf verschiedene Designs getestet, darunter das vorhandene, und die Nutzer gefragt, was „Installieren“ bedeutet. Wir stellten fest, dass das aktuelle Symbol, das Pluszeichen, für unsere Nutzer am verwirrendsten war. Das Symbol wird oft mit „Medizin“, „Erste Hilfe“ und „Batterien“ verwechselt.
Außerdem haben wir festgestellt, dass Nutzer bei der Installation hauptsächlich Bilder wie Pfeile und Geräte in Verbindung gebracht haben. 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 Pfeil nach unten in einen Monitor, der deutlich besser abschneidet als die anderen beiden. Wir haben auch einen Rückgang der Installations-UI mit diesem neuen Symbol festgestellt.
Das Ergebnis ist das aktuelle Design, das dazu geführt hat, dass sich die Installationsrate für PWAs bei Websites mehr als verdoppelt hat. Außerdem haben wir der Symbolsammlung für Material Design dieses Symbol und ein Äquivalent für Mobilgeräte hinzugefügt, damit die Community die Symbole verwenden kann, die uns am meisten gefallen.
Natürlich wird ein einziges Symbol nicht die Welt verändern – das führt uns zu unserem nächsten Feature.
Produktinterne Hilfe
Die produktinterne Hilfe ist eine blaue Kurzinfo, die Nutzern neue Funktionen bietet, die sie aufgrund bestimmter Kriterien möglicherweise interessieren. Wir haben uns für die Einführung dieses Designmusters entschieden, um die Nutzer über die Installationsfunktionen zu informieren und die neue Neugestaltung der Symbole weiter zu unterstützen.
Wenn ein Nutzer regelmäßig eine Website besucht, verwendet Chrome einen Dienst, der als Website-Engagement bezeichnet wird.
Sie liefern Informationen darüber, wie aktiv ein Nutzer mit einer Website interagiert. Unter chrome://site-engagement/ siehst du die Websites, mit denen du regelmäßig interagierst. Anhand dieser Punktzahlen könnten wir feststellen, ob eine nutzende Person an einer Website interessiert ist. Wenn es sich um eine PWA handelt und der Nutzer aktiv ist, wird ihm die produktinterne Hilfe-UI zur Installation angezeigt.
Wir haben uns also nur auf interessierte Nutzer konzentriert und nicht auf Nutzer gestört, die eine Website nur einmal besuchen.
Durch die Nutzung der produktinternen Hilfe auf dem Computer konnten wir einen Anstieg von mehr als 100 % bei der PWA-Installation verzeichnen. Das zeigt, dass sich die Installierbarkeit von Web-Apps durch den Fokus auf aktive Nutzer verbessert hat.
Umfassendere Installations-UI
Das Installationsparadigma für die meisten Nutzer ist ein Store. Seit Mitte der 2000er-Jahre weisen wir die Nutzer darauf hin, dass sie bei der Installation einer App eine Beschreibung, Screenshots und andere Metadaten sehen, die ihnen bei der Entscheidung helfen, ob eine App geeignet ist.
Bei PWAs war die UI, die wir angezeigt haben, nachdem sich ein Nutzer für die Installation einer Web-App entschieden hatte, relativ gering. Deshalb entschied sich das Team für eine umfassendere Installationserfahrung, die unseren Nutzern mehr Kontext zur Web-App bietet und es Entwicklern ermöglicht, die PWAs zu würdigen, die den nativen Umgebungen entsprechen.
Anfang des Jahres haben wir Richer Install eingeführt, eine erweiterte Installations-UI für Chrome unter Android, mit der Entwickler Screenshots zu ihrem Manifest hinzufügen können. Entwickler können auch eine Beschreibung hinzufügen. Dies wird empfohlen, ist aber nicht erforderlich. Aufgrund dieser neuen Benutzeroberfläche hat sich die Installationsrate bei einigen PWAs verdoppelt. Dies zeigt, dass Nutzer mehr Vertrauen in die Installation von Web-Apps haben, wenn wir mehr Kontext und Funktionen bieten. Die Desktopversion dieser UI ist derzeit noch in der Entwicklung.
Fazit
Das Team hat in den letzten zwei Jahren neue Funktionen in Chrome erkundet und getestet, die PWA-Entwicklern ermöglicht und unterstützt und Nutzern die Vorteile von Weberlebnissen 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.