Introduction
Début 2020, l'équipe Chrome sur les mobiles et les ordinateurs a élaboré un plan pour améliorer la visibilité et l'engagement des applications Web installées. Nos efforts ont entraîné une augmentation de plus de 100% de l'installation et de l'engagement des PWA. Pour ce faire, nous avons effectué des recherches sur les fonctionnalités existantes, mené des tests A/B et mené des entretiens avec des utilisateurs afin de mieux comprendre leurs perceptions et leurs attentes. Cet article explique comment nous en sommes arrivés là.
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 avions opté pour l'option Ajouter à l'écran d'accueil, mais sur les plates-formes pour ordinateur, nous avons mis l'accent sur l'option Installer. Cette différence s'explique par une étude menée par l'équipe en 2016 et qui comparait différentes chaînes. L'équipe a constaté que l'option Ajouter à l'écran d'accueil fonctionnait mieux, ne serait-ce que de manière marginale, sur mobile.
Une autre étude de la taxonomie réalisée en 2019 n'a mis en évidence aucune différence. L'équipe qui souhaitait unifier l'expérience d'installation des PWA a donc décidé de remplacer le libellé par Install (Installer) sur Android. Une étude supplémentaire réalisée en 2021 comparait les langages Install, Get et Download, et nous avons constaté que les utilisateurs comprenaient Install comme le processus qui se produisait. Les utilisateurs avaient l'impression qu'en appuyant sur un bouton Obtenir, ils étaient redirigés vers un site Web. Avec l'option Télécharger, ils pensaient qu'un fichier se trouverait dans leur dossier de téléchargements ou un dossier équivalent.
En gardant tout cela à l'esprit, nous avons conclu que l'étiquette Installer convient le mieux aux PWA. Nous recommandons aux développeurs de la plate-forme Web d'adopter la chaîne "Installer" à l'avenir.
Icône Installer sur le bureau
Sur nos plates-formes de bureau, nous appliquons un schéma de conception selon lequel chaque fois qu'un site Web charge une PWA, Chrome affiche une pilule qui apparaît sur le côté droit de l'omnibox. Elle contient une icône et le libellé Install (Installer). Par la suite, lorsqu'un utilisateur visitera un site, seule l'icône s'affichera. Cliquez sur ce bouton pour déclencher l'installation d'une PWA de bureau.
À l'origine, l'icône était un signe plus, en partie à cause de la métaphore Ajouter à l'écran d'accueil utilisée sur les mobiles. Toutefois, comme indiqué précédemment, nous avons utilisé Install. D'après les commentaires de la communauté de développeurs, cette icône prêtait à confusion. De plus, si un utilisateur utilisait la fonction zoom pour agrandir le texte, l'icône de zoom était très similaire, ce qui dérouterait encore plus l'utilisateur.
J'ai décidé d'étudier la perception de nos utilisateurs, car la plupart des commentaires étaient anecdotiques. En collaboration avec nos chercheurs UX, 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'iconographie des installations. Nous avons testé cinq conceptions différentes, y compris la conception existante, et demandé aux utilisateurs ce que signifiait "Installer". Nous avons découvert que l'icône actuelle, le symbole plus, était la plus déroutante pour nos utilisateurs. Beaucoup ont confondu ce symbole avec "médicament", "premier secours" et "piles".
Nous avons également constaté que les utilisateurs associent principalement des images (comme 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 variantes. Nous avons atterri sur la flèche pointant vers le bas sur un écran, qui a enregistré de meilleures performances que les deux autres. Nous avons également constaté une diminution du nombre de refus de l'UI 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 pour les sites Web. Nous avons également ajouté cette icône et un équivalent pour mobile à notre ensemble d'icônes Material Design, permettant à la communauté d'utiliser l'iconographie qui nous a semblé la plus intéressante.
Bien sûr, une seule icône ne changera pas le monde, ce qui nous mènera à notre prochaine fonctionnalité.
Aide intégrée au produit
L'aide intégrée est une info-bulle bleue qui présente aux utilisateurs de 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 sur les fonctionnalités d'installation et faciliter davantage la nouvelle refonte des icônes.
Lorsqu'un utilisateur consulte régulièrement un site Web, Chrome utilise un service appelé Engagement avec le site.
Ces informations fournissent des 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. À l’aide de ces scores, nous pourrions 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 montrons l'interface d'installation d'aide intégrée.
Cela signifie que nous nous sommes concentrés sur les utilisateurs engagés et non sur les utilisateurs susceptibles d'accéder à un site une seule fois.
Grâce à l'aide intégrée au produit pour ordinateur, nous avons constaté une augmentation de plus de 100 % du nombre d'installations de PWA, ce qui montre que le fait de se concentrer sur les utilisateurs engagés a amélioré l'installation des applications Web.
Interface utilisateur plus riche
Pour la plupart des utilisateurs, le paradigme d'installation est la plate-forme de téléchargement. Depuis le milieu des années 2000, nous avons indiqué aux utilisateurs que, lorsqu'ils installent une application, ils voient une description, des captures d'écran et d'autres métadonnées pour les aider à décider si une application leur convient.
Avec les PWA, l'interface utilisateur que nous avons montrée lorsqu'un utilisateur a décidé d'installer une application Web était relativement faible. L'équipe a donc décidé d'explorer une expérience d'installation plus riche qui fournirait aux utilisateurs du contexte sur l'application Web et permettrait aux développeurs de célébrer les PWA qui étaient équivalentes aux expériences natives.
Plus tôt cette année, nous avons lancé l'installation enrichie, 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 nécessaire. En raison de cette nouvelle interface utilisateur, le taux d'installation de certaines PWA a doublé, ce qui montre que les utilisateurs sont plus confiants pour installer des applications Web lorsque nous offrons plus de contexte et d'expériences plus riches. La version de bureau 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 d'activer et de donner les moyens d'agir, et d'informer les utilisateurs sur les avantages des expériences Web. Nous pouvons encore faire beaucoup de travail, mais collectivement, nous pouvons améliorer et enrichir la vie de nos utilisateurs, et soutenir davantage le Web ouvert.