Introduction
Début 2020, l'équipe Chrome pour les mobiles et les ordinateurs a élaboré un plan pour améliorer la visibilité et l'engagement des applications Web installées. Notre travail a entraîné une augmentation de plus de 100% de l'installation de PWA et de l'engagement. Pour ce faire, nous avons effectué des recherches sur les fonctionnalités existantes, des tests A/B et des entretiens avec les 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 la même sur la plate-forme Web. Pour Chrome sur Android, nous avions choisi Ajouter à l'écran d'accueil, mais sur nos plates-formes de bureau, nous avons mis l'accent sur Installer. La raison de cet écart provient d'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, mais seulement de manière marginale, sur mobile.
Une étude supplémentaire sur la taxonomie de 2019 n'a révélé aucune différence. L'équipe souhaitant unifier l'expérience d'installation de la PWA a donc décidé de remplacer le libellé par Installer sur Android. Une autre étude menée en 2021 comparait les langages Install, Get et Download, et nous avons constaté que les utilisateurs comprenaient Install comme le processus en cours. Les utilisateurs ont eu l'impression qu'appuyer sur un bouton portant le libellé Get (Obtenir) le redirige vers un site Web. Avec Download, ils pensaient qu'un fichier se retrouverait dans leur dossier de téléchargements ou équivalent.
En gardant tout cela à l'esprit, nous avons conclu que l'étiquette Install (Installer) convient le mieux aux PWA. À l'avenir, nous recommandons aux développeurs de la plate-forme Web d'adopter "Install" comme chaîne préférée.
Icône Installer sur le bureau
Sur nos plates-formes de bureau, nous suivons un schéma de conception qui veut qu'à chaque fois qu'un site Web charge une PWA, Chrome affiche un panneau contenant une icône et le libellé Installer sur le côté droit de l'omnibox. Ensuite, lorsqu'un utilisateur visitera un site, seule l'icône sera présente. 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 mobile. Toutefois, comme indiqué précédemment, nous avons utilisé la langue Install (Installer). La communauté des développeurs nous a fait savoir 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 ressemblait très similaire, ce qui le dérouterait encore plus.
J'ai décidé d'examiner 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 afin de déterminer leur compréhension de l'iconographie des installations. Nous avons testé cinq conceptions différentes, y compris la version 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édecine", "premier secours" et "piles".
Nous avons également constaté que les utilisateurs associent 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 atterri sur la flèche pointant vers un écran qui a présenté de meilleures performances que les deux autres. Nous avons également constaté une diminution du nombre de fermetures de l'UI d'installation avec cette nouvelle icône.
Le résultat est la conception que vous voyez aujourd'hui, qui a permis de doubler le taux d'installation des PWA pour les sites Web. Nous avons également ajouté cette icône et un équivalent mobile à notre jeu d'icônes Material Design, permettant à la communauté d'utiliser l'iconographie qui nous a semblé la plus intéressante.
Bien entendu, une seule icône ne changera pas le monde, ce qui nous amène à notre prochaine fonctionnalité.
Aide intégrée
L'aide intégrée est une info-bulle bleue qui invite les utilisateurs à découvrir 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 des fonctionnalités d'installation et les soutenir davantage.
Lorsqu'un utilisateur visite régulièrement un site Web, Chrome utilise un service appelé engagement sur le site.
Cette métrique fournit des informations sur le niveau d'engagement d'un utilisateur sur un site. En accédant à chrome://site-engagement/, vous pouvez voir les sites avec lesquels vous interagissez régulièrement. Ces scores nous permettent de 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ésenterions l'UI d'aide intégrée à l'installation.
En d'autres termes, nous nous sommes concentrés sur les utilisateurs intéressés, et non sur ceux qui ne venaient pas à l'idée d'aller sur un site.
Grâce à l'aide intégrée aux ordinateurs de bureau, nous avons constaté une augmentation de plus de 100 % du nombre d'installations de PWA. Cela prouve que le fait de se concentrer sur les utilisateurs engagés a amélioré l'installation des applications Web.
Interface d'installation plus riche
Pour la plupart des utilisateurs, le paradigme d'installation consiste en un magasin. Depuis le milieu des années 2000, nous avons informé les 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 si une application leur conviendrait.
Avec les PWA, l'interface utilisateur que nous avons présentée lorsqu'un utilisateur a décidé d'installer une application Web était relativement simple. 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 au même niveau que les expériences natives.
Plus tôt cette année, nous avons lancé l'installation enrichie, une interface utilisateur d'installation étendue dans 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. Grâce à cette nouvelle interface utilisateur, nous avons vu le taux d'installation de certaines PWA doubler, ce qui montre que les utilisateurs ont plus confiance en l'installation d'applications Web lorsque nous proposons plus de contexte et d'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 d'être plus performantes et ont contribué à sensibiliser les utilisateurs aux avantages des expériences Web. Il nous reste encore beaucoup à faire, mais collectivement, nous pouvons améliorer et enrichir la vie de nos utilisateurs, et soutenir davantage le Web ouvert.