Umfangreichere UI für die Installation von PWAs

Mustafa Kurtuldu
Mustafa Kurtuldu
Adriana Jara
Adriana Jara

Einführung

Mobilgeräte und die Einführung von App-Shops von Geräteherstellern haben das mentale Modell von Nutzern zum Finden, Bewerten und Installieren von Software verändert. Nutzer sind jetzt so vertraut mit App-Shops und den zusätzlichen Informationen, die über App-Shops zur Verfügung gestellt werden, z. B. Kontext zur App, Feedback aus sozialen Netzwerken, Bewertungen usw., dass die Metapher des App-Shops in Desktop-Betriebssystemen wie ChromeOS, Mac und Windows auftaucht.

Herausforderung mit den heutigen Installationsoberflächen

Wenn ein Nutzer heute eine PWA installieren möchte, werden eine Infoleiste und ein modales Overlay mit minimalen Informationen angezeigt. Wenn die Installation fortgesetzt wird, ist der Vorgang zu schnell beendet, ohne dem Nutzer Kontext zu liefern. Dies widerspricht den Erwartungen an die Installation von Apps und kann dazu führen, dass sie etwas verwirrt über das Geschehen sind.

Beispiel für die Benutzeroberfläche zur Installation einer PWA.
Beispiel für die Benutzeroberfläche für die Installation von PWAs.

Damit Entwickler sowohl installierte Apps als auch native Umgebungen anbieten können, führt Chrome eine neue Installationsoberfläche ein: Richer Install. Mit dieser neuen Installationsoberfläche können Entwickler ihrer Manifest-Datei eine Beschreibung und Screenshots hinzufügen, die dann in einem Dialogfeld am unteren Rand in Chrome für Android angezeigt werden.

Beispiel für die Benutzeroberfläche am unteren Rand in Chrome
Beispiel für die Benutzeroberfläche am unteren Rand in Chrome.

Dies gibt Entwicklern die Möglichkeit, einen ansprechenderen Installationsprozess zu schaffen, der besser auf die Erwartungen der Nutzer abgestimmt ist und ihr vorhandenes mentales Modell installierter Erfahrungen nachahmt.

Erweiterte Benutzeroberfläche für die Installation.
Erweitertere Benutzeroberfläche für die Installation.
Umfassendere Installations-UI minimiert.
Größere Benutzeroberfläche für die Installation minimiert.

Abwärtskompatibilität

Websites, die in ihrer Manifestdatei nicht mindestens einen Screenshot enthalten, erhalten die vorhandenen Aufforderungen weiterhin. Dies kann sich in Zukunft ändern, je nachdem, wie stark die Entwickler-Community angenommen wird und wie die Nutzer reagieren.

Vorschau der Benutzeroberfläche

Diese Benutzeroberfläche ist ab Chrome 94 unter Android und Chrome 108 auf Computern verfügbar.

Diese Funktion ist in squoosh.app aktiviert und kann dort als Vorschau angesehen werden.

Implementierung

Entwickler müssen mindestens einen Screenshot für den entsprechenden Formfaktor im Array screenshots hinzufügen, um das Dialogfeld mit der Installations-UI anzuzeigen. Das Feld description ist nicht erforderlich, wird aber empfohlen. Das Dialogfeld „Inhalte“ basiert auf dem Inhalt der Felder screenshots und description, um der App eine App-Store-Installation zu ermöglichen. So können Nutzer leichter erkennen, wenn sie ihrem Gerät eine App hinzufügen. Da mehr Speicherplatz verfügbar ist, können Entwickler ihren Nutzern bei der Installation spezifischen Kontext liefern.

Entwickler können beispielsweise das Feld description verwenden, um die Funktionen der App hervorzuheben, die Nutzer dazu motivieren, die App auf ihren Geräten zu belassen. Mit dem screenshots können sie das Erscheinungsbild der Web-App als eigenständiges Element mit dem einfachen Zugriff präsentieren, den Plattform-Apps bieten.

Eine ausführliche Spezifikation und eine Anleitung dazu, wie Sie sie Ihrer App hinzufügen, finden Sie unter Richter Install UI-Muster.

Feedback

In Zukunft werden wir erwägen, weitere Daten wie Kategorien und App-Bewertungen hinzuzufügen, aber dies basiert auf dem Feedback von Entwicklern und Nutzern.

In den kommenden Monaten würden wir gerne sehen, wie Entwickler dieses neue UI-Muster ausprobieren, und würden uns über Feedback von dir freuen. Sie können uns über dieses Formular kontaktieren.