Interface utilisateur enrichie pour l'installation de PWA

Introduction

Les appareils mobiles et l'introduction de plates-formes de téléchargement d'applications de fournisseurs d'appareils ont modifié le modèle mental des utilisateurs en matière de découverte, d'évaluation et d'installation de logiciels. Les utilisateurs connaissent désormais tellement les plates-formes de téléchargement d'applications et les informations supplémentaires fournies via ces plates-formes, telles que le contexte de l'application, les commentaires sur les réseaux sociaux, les avis, etc., que la métaphore de la plate-forme de téléchargement apparaît dans les systèmes d'exploitation de bureau tels que ChromeOS, Mac et Windows.

Défi associé aux surfaces d'installation actuelles

Aujourd'hui, si un utilisateur souhaite installer une PWA, une barre d'informations et une superposition modale s'affichent avec un minimum d'informations. Si l'installation se poursuit, le processus se termine trop rapidement sans donner de contexte à l'utilisateur. Cela va à l'encontre de leurs attentes concernant l'installation d'applications et peut les induire en erreur.

Exemple d'interface utilisateur d'installation de PWA.
Exemple de l'interface utilisateur d'installation d'une PWA.

Pour permettre aux développeurs de proposer des expériences d'installation équivalentes à celles natives, Chrome lance une nouvelle surface d'installation, appelée "Richer Install", qui permet aux développeurs d'ajouter une description et des captures d'écran à leur fichier manifeste et de les faire apparaître dans une boîte de dialogue "Bottomsheet" dans Chrome pour Android.

Exemple d'interface utilisateur de bottom sheet dans Chrome.
Exemple d'interface utilisateur de bottom sheet dans Chrome.

Les développeurs peuvent ainsi créer un processus d'installation plus attrayant qui répond mieux aux attentes des utilisateurs et imite leur modèle mental existant d'installation.

Interface utilisateur d'installation plus riche développée.
Interface utilisateur d'installation enrichie développée.
Interface utilisateur d'installation plus riche réduite.
Interface utilisateur d'installation enrichie réduite.

Rétrocompatibilité

Les sites Web qui n'incluent pas au moins une capture d'écran de leur fichier manifeste continueront de recevoir les invites existantes. Cela peut changer à l'avenir en fonction de l'adoption de la communauté des développeurs et de la réaction des utilisateurs.

Prévisualiser l'interface utilisateur

Cette interface utilisateur fonctionne à partir de Chrome 94 sur Android et de Chrome 108 sur ordinateur.

Cette fonctionnalité est activée dans squoosh.app et peut être prévisualisée ici.

Implémentation

Pour afficher la boîte de dialogue d'installation plus riche, les développeurs doivent ajouter au moins une capture d'écran pour le facteur de forme correspondant dans le tableau screenshots. Le champ description n'est pas obligatoire, mais il est recommandé. La boîte de dialogue de contenu est conçue à l'aide du contenu des champs screenshots et description pour que l'expérience ressemble davantage à une installation sur une plate-forme de téléchargement d'applications. Cette interface utilisateur permet aux utilisateurs d'identifier qu'ils ajoutent une application à leur appareil. Avec plus d'espace disponible, les développeurs peuvent fournir un contexte spécifique à leurs utilisateurs au moment de l'installation.

Par exemple, les développeurs peuvent utiliser le champ description pour mettre en avant les fonctionnalités de l'application qui incitent l'utilisateur à la conserver sur son appareil. Avec le screenshots, ils peuvent présenter l'apparence de l'application Web de manière autonome, avec tout l'accès facile aux applications de plate-forme.

Pour connaître les spécifications détaillées et les instructions permettant de les ajouter à votre application, consultez le modèle d'interface utilisateur d'installation enrichie.

Commentaires

À l'avenir, nous envisageons d'ajouter d'autres données, telles que les catégories et la note de l'application, en fonction des commentaires des développeurs et des utilisateurs.

Dans les mois à venir, nous aimerions savoir comment les développeurs explorent ce nouveau modèle d'interface utilisateur, et nous aimerions connaître votre avis. Contactez-nous en remplissant ce formulaire.