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é les besoins modèle mental de la façon de découvrir, d’évaluer et d’installer des logiciels. Les utilisateurs connaissent tellement les plates-formes de téléchargement d'applications. les informations supplémentaires fournies via les plates-formes de téléchargement d'applications, comme le contexte de l'application, commentaires sur les réseaux sociaux, évaluations, etc., comme la métaphore de la plate-forme de téléchargement d'applications apparaît dans la version pour ordinateur systèmes 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 des informations. Si l'installation se poursuit, le processus est terminé trop rapidement le contexte à l’utilisateur. Cela va à l'encontre de leurs attentes concernant l'installation d'applications et peut les amener un peu confus sur ce qui s'est passé.

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

Pour permettre aux développeurs de proposer des expériences installées semblables à celles des expériences natives Chrome propose une nouvelle surface d'installation, appelée "Richer Install", qui permet aux développeurs d'ajouter description et captures d'écran dans leur fichier manifeste et les faire apparaître dans une boîte de dialogue bottom sheet. de 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 correspond mieux aux attentes des utilisateurs et qui imite leur modèle mental existant d'expériences installées.

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 dans leur fichier manifeste continueront de recevoir les invites existantes. Cela pourrait changer à l'avenir en fonction de l'adoption de la communauté des développeurs. et celle des utilisateurs de réaction.

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

Nous envisageons d'ajouter à l'avenir d'autres données telles que les catégories et la note de l'application, basée sur les commentaires des développeurs et des utilisateurs.

Dans les mois à venir, nous aimerions voir comment les développeurs explorent ce nouveau modèle d'interface utilisateur. aimerait avoir votre avis. Contactez-nous en remplissant ce formulaire.