Introduction
Début 2020, l'équipe Chrome pour mobile et ordinateur a élaboré un plan visant à améliorer la visibilité et l'engagement des applications Web installées. Notre travail a permis d'augmenter de plus de 100% le nombre d'installations et d'engagements avec les PWA. Pour ce faire, nous avons mené des recherches sur les fonctionnalités existantes, des tests A/B et des entretiens avec les utilisateurs afin d'obtenir des insights sur leurs perceptions et leurs attentes. Cet article explique comment nous y sommes parvenus.
Langue d'installation unifiée
L'incitation à l'action qui déclenche l'installation d'une PWA n'était pas cohérente sur la plate-forme Web. Pour Chrome sur Android, nous avons opté pour Ajouter à l'écran d'accueil, mais sur nos plates-formes pour ordinateur, nous avons mis l'accent sur Installer. Cette divergence est justifiée par une étude menée par l'équipe en 2016 qui comparait différentes chaînes. L'équipe a constaté que Ajouter à l'écran d'accueil fonctionnait mieux, même si ce n'était que marginalement, sur mobile.
Une autre étude sur la taxonomie en 2019 n'a révélé aucune différence. L'équipe souhaitant unifier l'expérience d'installation des PWA, elle a décidé de remplacer le libellé par Installer sur Android. Une autre étude réalisée en 2021 a comparé les termes Installer, Obtenir et Télécharger. Nous avons constaté que les utilisateurs comprenaient Installer comme le processus en cours. Les utilisateurs pensaient qu'appuyer sur un bouton libellé Obtenir les renverrait vers un site Web, et avec Télécharger, ils supposaient qu'un fichier se retrouverait dans leur dossier de téléchargements ou son équivalent.
Compte tenu de tout cela, nous avons conclu que le libellé Installer convient le mieux aux PWA. Nous recommandons aux développeurs de la plate-forme Web d'utiliser Install comme chaîne préférée à l'avenir.
Icône d'installation sur le bureau
Sur nos plates-formes pour ordinateur, nous avons un modèle de conception qui prévoit que chaque fois qu'un site Web charge une PWA, Chrome affiche une pilule sur le côté droit de la barre d'adresse. Elle contient une icône et le libellé Installer. Par la suite, lorsque l'utilisateur accède à un site, seule l'icône s'affiche. Cliquez sur cette pilule pour déclencher l'installation d'une PWA pour ordinateur.
L'icône était initialement un symbole plus, en partie en raison de la métaphore Ajouter à l'écran d'accueil utilisée sur mobile. Toutefois, comme indiqué, le terme que nous avons utilisé était Install (Installer). Les commentaires que nous avons reçus de la communauté des développeurs nous ont indiqué que cette icône prêtait à confusion. De plus, si un utilisateur utilisait la fonction de zoom pour agrandir le texte, l'icône de zoom était très semblable, ce qui le confondait encore plus.
J'ai décidé d'étudier la perception de nos utilisateurs, car la plupart des commentaires étaient anecdotiques. En collaboration avec nos chercheurs en expérience utilisateur, nous avons mené une étude auprès de 10 000 utilisateurs aux États-Unis et en Indonésie pour déterminer leur compréhension de l'icône d'installation. Nous avons testé cinq conceptions différentes, y compris l'existante, et demandé aux utilisateurs ce que "Installer" signifiait. Nous avons découvert que l'icône actuelle, le symbole plus, était la plus déroutante pour nos utilisateurs. De nombreuses personnes ont confondu le symbole avec "médicaments", "premiers secours" et "piles".
Nous avons également constaté que les utilisateurs associaient principalement des images telles que des flèches et des appareils à l'installation. Sur la base de ces conclusions, nous avons effectué un test A/B/C dans Chrome, en comparant la conception existante à deux alternatives. Nous avons choisi la flèche pointant vers le bas dans un écran, qui a obtenu des résultats nettement meilleurs que les deux autres. Nous avons également constaté une diminution du nombre de refus de l'interface utilisateur d'installation avec cette nouvelle icône.
Le résultat est la conception que vous voyez aujourd'hui, qui a vu le taux d'installation des PWA plus que doubler par rapport aux sites Web. Nous avons également ajouté cette icône et un équivalent mobile à notre ensemble d'icônes Material Design, ce qui permet à la communauté d'utiliser l'iconographie que nous avons trouvée la plus attrayante.
Bien sûr, une seule icône ne changera pas le monde, ce qui nous amène à notre prochaine fonctionnalité.
Aide intégrée
L'aide dans le produit est une info-bulle bleue qui présente aux utilisateurs les nouvelles fonctionnalités susceptibles de les intéresser en fonction de critères spécifiques. Nous avons décidé de lancer ce modèle de conception pour informer les utilisateurs des fonctionnalités d'installation et pour mieux appuyer la nouvelle refonte des icônes.
Lorsqu'un utilisateur consulte régulièrement un site Web, Chrome utilise un service appelé Engagement sur le site.
Il s'agit d'informations sur l'engagement d'un utilisateur avec un site. En accédant à chrome://site-engagement/, vous pouvez voir les sites avec lesquels vous interagissez régulièrement. Grâce à ces scores, nous pouvons déterminer si un utilisateur est intéressé par un site Web. Si le site était une PWA et que l'utilisateur était engagé, nous lui présentions l'UI d'aide dans le produit.
Cela signifie que nous nous sommes concentrés uniquement sur les utilisateurs engagés et que nous n'avons pas importuné les utilisateurs qui ne visitent un site qu'une seule fois.
En utilisant l'aide dans le produit sur ordinateur, nous avons constaté une augmentation de plus de 100 % des installations de PWA, ce qui montre que l'accentuation sur les utilisateurs engagés a amélioré l'installabilité des applications Web.
Interface utilisateur d'installation plus riche
Pour la plupart des utilisateurs, le paradigme d'installation est une plate-forme de téléchargement d'applications. Depuis le milieu des années 2000, nous avons expliqué aux utilisateurs que chaque fois qu'ils installent une application, ils voient une description, des captures d'écran et d'autres métadonnées pour les aider à décider s'ils veulent installer l'application.
Avec les PWA, l'interface utilisateur que nous affichons une fois qu'un utilisateur a décidé d'installer une application Web était relativement limitée. L'équipe a donc décidé d'explorer une expérience d'installation plus riche qui donnerait du contexte à nos utilisateurs sur l'application Web et permettrait aux développeurs de mettre en avant les PWA qui étaient à la hauteur des expériences natives.
Plus tôt cette année, nous avons lancé Richer Install, une interface utilisateur d'installation étendue sur Chrome sur Android qui permet aux développeurs d'ajouter des captures d'écran à leur fichier manifeste. Les développeurs peuvent également ajouter une description, ce qui est recommandé, mais pas obligatoire. Grâce à cette nouvelle interface utilisateur, le taux d'installation de certaines PWA a doublé, ce qui montre que les utilisateurs sont plus enclins à installer des applications Web lorsque nous leur fournissons plus de contexte et des expériences plus riches. La version classique de cette interface utilisateur est actuellement en cours de développement.
Conclusion
L'équipe a passé les deux dernières années à explorer et à tester de nouvelles fonctionnalités de Chrome qui ont permis aux développeurs de PWA de créer des applications et ont aidé les utilisateurs à découvrir les avantages des expériences Web. Nous avons encore beaucoup de travail à faire, mais collectivement, nous pouvons améliorer et enrichir la vie de nos utilisateurs, et soutenir davantage le Web ouvert.