Interface utilisateur enrichie pour l'installation de PWA

Mustafa Kurtuldu
Mustafa Kurtuldu
Adriana Jara
Adriana Jara

Introduction

Les appareils mobiles et l'introduction des plates-formes de téléchargement d'applications des fournisseurs d'appareils ont changé le modèle mental des utilisateurs concernant la découverte, l'évaluation et l'installation de logiciels. Les utilisateurs connaissent tellement bien les plates-formes de téléchargement d'applications et les informations supplémentaires fournies par ces plates-formes (comme le contexte de l'application, les commentaires sur les réseaux sociaux, les notes, etc.) que vous constatez que la métaphore de ces plates-formes émerge dans les systèmes d'exploitation pour ordinateurs de bureau tels que ChromeOS, Mac et Windows.

Défis liés aux surfaces d'installation d'aujourd'hui

Aujourd'hui, si un utilisateur souhaite installer une PWA, une barre d'informations et une superposition modale s'affichent avec un minimum d'informations. S'il continue à s'installer, 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 confondre avec 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 équivalentes à celles des expériences natives Chrome lance une nouvelle surface d'installation appelée "Installation enrichie", 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 de type bottom sheet dans Chrome pour Android.

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

Cela permet aux développeurs de créer un processus d'installation plus attrayant qui répond mieux aux attentes des utilisateurs et qui imite leur modèle mental existant d'expériences installées.

Interface utilisateur d'installation enrichie développée.
Élargissement de l'interface utilisateur d'installation enrichie.
Interface utilisateur d'installation enrichie 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. Cette situation est susceptible d'évoluer à l'avenir en fonction de l'implication de la communauté de développeurs et des réactions des utilisateurs.

Prévisualiser l'interface utilisateur

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

Cette fonctionnalité est activée sur squoosh.app et peut être prévisualisée sur ce site.

Implémentation

Pour afficher la boîte de dialogue d'installation enrichie, 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 recommandé. La boîte de dialogue de contenu est conçue à l'aide du contenu des champs screenshots et description pour rendre l'expérience plus semblable à celle d'une installation sur une plate-forme de téléchargement d'applications. Cette interface utilisateur aide les utilisateurs à 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 évidence les fonctionnalités de l'application qui incitent les utilisateurs à la conserver sur leurs appareils. Avec le screenshots, ils peuvent présenter l'apparence de l'application Web de manière autonome, avec tous les accès faciles dont disposent les applications de plate-forme.

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

Commentaires

À l'avenir, nous envisagerons d'ajouter d'autres données telles que les catégories et les notes de l'application, mais celles-ci seront basées sur les commentaires des développeurs et des utilisateurs.

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