Modèles pour promouvoir l'installation de PWA

Mustafa Kurtuldu

Penny McLachlan

L'installation de votre progressive web app (PWA) peut faciliter la recherche et l'utilisation de votre application par les utilisateurs. Même avec la promotion dans le navigateur, certains utilisateurs ne réalisent pas qu'ils peuvent installer une PWA. Il peut donc être utile de proposer une expérience dans l'application que vous pouvez utiliser pour promouvoir et activer l'installation de votre PWA.

Cet article n'est en aucun cas exhaustif, mais fournit un point de départ pour différentes manières de promouvoir l'installation de votre PWA. Quel que soit le ou les modèles que vous utilisez, ils mènent tous au même code qui déclenche le flux d'installation, documenté dans la section Fournir votre propre expérience d'installation dans l'application.

Bonnes pratiques

Certaines bonnes pratiques s'appliquent quelle que soit la stratégie promotionnelle que vous utilisez sur votre site.

• Les promotions doivent rester en dehors du parcours utilisateur. Par exemple, sur une page de connexion d'une PWA, placez l'incitation à l'action sous le formulaire de connexion et le bouton d'envoi. L'utilisation perturbatrice de modèles promotionnels réduit l'usabilité de votre PWA et a un impact négatif sur vos métriques d'engagement.
• Incluez la possibilité d'ignorer ou de refuser la promotion. Si l'utilisateur accepte, n'oubliez pas ses préférences et ne le relancez que s'il y a un changement dans sa relation avec votre contenu, par exemple s'il s'est connecté ou a effectué un achat.
• Combinez des techniques dans différentes parties de votre PWA, mais veillez à ne pas submerger ni ennuyer votre utilisateur avec la promotion de l'installation.
• N'affichez la promotion qu'après le déclenchement de l'événement beforeinstallprompt.

Promotion automatique du navigateur

Lorsque certains critères sont remplis, la plupart des navigateurs indiquent automatiquement à l'utilisateur que votre progressive web app peut être installée. Par exemple, Chrome pour ordinateur affiche un bouton d'installation dans la barre d'adresse.

Chrome pour Android affiche une mini-barre d'informations à l'utilisateur, mais vous pouvez l'empêcher en appelant preventDefault() sur l'événement beforeinstallprompt. Si vous n'appelez pas preventDefault(), la bannière s'affiche la première fois qu'un utilisateur accède à votre site et répond aux critères d'installation sur Android, puis de nouveau après environ 90 jours.

Modèles promotionnels de l'interface utilisateur

Les modèles promotionnels d'interface utilisateur peuvent être utilisés pour presque tous les types de PWA et apparaître dans des emplacements tels que la navigation sur le site et les bannières. Comme pour tout autre type de modèle promotionnel, il est important de connaître le contexte de l'utilisateur afin de minimiser les perturbations dans son parcours.

Les sites qui prennent le temps de déclencher l'UI de promotion enregistrent un plus grand nombre d'installations et évitent d'interférer avec le parcours des utilisateurs qui ne sont pas intéressés par l'installation.

Bouton d'installation simple

L'expérience utilisateur la plus simple consiste à inclure un bouton "Installer" ou "Obtenir l'application" à un emplacement approprié dans votre contenu Web. Assurez-vous que le bouton ne bloque pas d'autres fonctionnalités importantes et qu'il n'interfère pas avec le parcours de l'utilisateur dans votre application.

En-tête fixe

Il s'agit d'un bouton d'installation qui fait partie de l'en-tête de votre site. Le reste du contenu de l'en-tête inclut souvent le branding du site, comme un logo et le menu hamburger. Les en-têtes peuvent être position:fixed ou non, en fonction des fonctionnalités de votre site et des besoins des utilisateurs.

Si vous l'utilisez correctement, promouvoir l'installation d'une PWA dans l'en-tête de votre site est un excellent moyen de faciliter le retour de vos clients les plus fidèles. Les pixels de l'en-tête de votre PWA sont précieux. Assurez-vous donc que votre incitation à l'action d'installation est correctement dimensionnée, qu'elle a plus d'importance que tout autre contenu d'en-tête possible et qu'elle n'est pas intrusif.

Veillez à respecter les points suivants :

• Ne pas afficher le bouton d'installation, sauf si beforeinstallprompt a été déclenché.
• Évaluez la valeur de l'installation pour vos utilisateurs. Envisagez d'utiliser le ciblage sélectif pour ne présenter votre promotion qu'aux utilisateurs susceptibles d'en bénéficier.
• Utilisez efficacement le précieux espace d'en-tête. Réfléchissez à ce que vous pourriez proposer d'autre à votre utilisateur dans l'en-tête, et évaluez la priorité de la promotion d'installation par rapport aux autres options.

Menu de navigation

Le menu de navigation est un excellent endroit pour promouvoir l'installation de votre application, car les utilisateurs qui ouvrent le menu indiquent leur engagement avec votre expérience.

Veillez à respecter les points suivants :

• Évitez de perturber les contenus de navigation importants. Placez la promotion d'installation de la PWA sous les autres éléments de menu.
• Présentez un argumentaire court et pertinent expliquant pourquoi l'installation de votre PWA pourrait être bénéfique pour l'utilisateur.

Page de destination

Le but d'une page de destination est de promouvoir vos produits et services. C'est donc ici qu'il est judicieux de mettre en avant les avantages de l'installation de votre PWA.

Tout d'abord, expliquez la proposition de valeur de votre site, puis faites savoir aux visiteurs ce qu'ils obtiendront lors de l'installation.

Veillez à respecter les points suivants :

• Mettez en avant les fonctionnalités qui comptent le plus pour vos visiteurs et soulignez les mots clés qui les ont peut-être amenés sur votre page de destination.
• Faites en sorte que votre promotion d'installation et votre incitation à l'action soient attrayantes, mais seulement après avoir clairement défini votre proposition de valeur. C'est votre page de destination, après tout.
• Envisagez d'ajouter une promotion d'installation dans la partie de votre application où les utilisateurs passent le plus de temps.

Bannière d'installation

La plupart des utilisateurs ont déjà vu des bannières d'installation sur mobile et connaissent bien les interactions qu'elles offrent. Les bannières doivent être utilisées avec précaution, car elles peuvent perturber l'utilisateur.

Veillez à respecter les points suivants :

• Attendez que l'utilisateur ait manifesté de l'intérêt pour votre site avant d'afficher une bannière. Si l'utilisateur ferme votre bannière, ne la réaffichez pas, sauf s'il déclenche un événement de conversion qui indique un niveau d'engagement plus élevé avec votre contenu (par exemple, un achat sur un site d'e-commerce ou une inscription à un compte).
• Expliquez brièvement l'intérêt d'installer votre PWA dans la bannière. Par exemple, vous pouvez différencier l'installation d'une PWA de celle d'une application iOS/Android en indiquant qu'elle n'utilise presque pas d'espace de stockage sur l'appareil de l'utilisateur ou qu'elle s'installe instantanément sans redirection vers une plate-forme de téléchargement.

Interface utilisateur temporaire

L'UI temporaire, comme le modèle de conception de barre de notification, informe l'utilisateur et lui permet d'effectuer facilement une action, dans ce cas, d'installer l'application. Lorsqu'ils sont utilisés correctement, ces types de modèles d'UI n'interrompent pas le parcours utilisateur et sont généralement automatiquement fermés s'ils sont ignorés par l'utilisateur.

Affichez la barre de notification après quelques interactions avec votre application. Si elle s'affiche lors du chargement de la page ou hors contexte, elle peut être facilement manquée ou entraîner une surcharge cognitive. Dans ce cas, les utilisateurs ignoreront simplement tout ce qu'ils voient. N'oubliez pas que les nouveaux utilisateurs de votre site ne sont peut-être pas prêts à installer votre PWA. Par conséquent, il est préférable d'attendre d'avoir des signaux d'intérêt forts de la part de l'utilisateur avant d'utiliser ce modèle, par exemple des visites répétées, une connexion de l'utilisateur ou un événement de conversion similaire.

Veillez à respecter les points suivants :

• Affichez la barre de notification pendant 4 à 7 secondes pour laisser aux utilisateurs suffisamment de temps pour la voir et y réagir, sans les gêner.
• Évitez de l'afficher sur d'autres interfaces utilisateur temporaires telles que des bannières, etc.
• Attendez d'avoir des signaux d'intérêt forts de la part de l'utilisateur avant d'utiliser ce modèle, par exemple des visites répétées, une connexion de l'utilisateur ou un événement de conversion similaire.

Après la conversion

Immédiatement après un événement de conversion utilisateur, par exemple après un achat sur un site d'e-commerce, c'est une excellente occasion de promouvoir l'installation de votre PWA. L'engagement de l'utilisateur avec votre contenu est clair, et une conversion indique souvent qu'il interagira de nouveau avec vos services.

Parcours de réservation ou de paiement

Afficher une promotion d'installation pendant ou après un parcours séquentiel, par exemple après les parcours de réservation ou de paiement. Si vous affichez la promotion après que l'utilisateur a terminé le parcours, vous pouvez souvent la rendre plus visible, car le parcours est terminé.

Veillez à respecter les points suivants :

• Incluez une incitation à l'action pertinente. Quels utilisateurs bénéficieront de l'installation de votre application et pourquoi ? En quoi est-il pertinent pour le parcours qu'il suit actuellement ?
• Si votre marque propose des offres uniques aux utilisateurs de votre application installée, mentionnez-les.
• Ne laissez pas la promotion s'interposer entre les étapes suivantes de votre parcours, car cela pourrait avoir un impact négatif sur les taux de finalisation du parcours. Dans l'exemple d'e-commerce ci-dessus, notez que l'incitation à l'action principale pour le règlement se trouve au-dessus de la promotion d'installation d'application.

Flux d'inscription, de connexion ou de déconnexion

Cette promotion est un cas particulier du modèle promotionnel de parcours, où la fiche promotionnelle peut être plus visible.

Ces pages ne sont généralement consultées que par des utilisateurs engagés, pour lesquels la proposition de valeur de votre PWA a déjà été établie. Il n'y a souvent pas beaucoup d'autres contenus utiles à placer sur ces pages. Par conséquent, il est moins perturbateur de créer un incitation à l'action plus grand, à condition qu'il ne gêne pas.

Veillez à respecter les points suivants :

• Évitez de perturber le parcours de l'utilisateur dans le formulaire d'inscription. S'il s'agit d'un processus en plusieurs étapes, vous pouvez attendre que l'utilisateur ait terminé le parcours.
• Promouvoir les fonctionnalités les plus pertinentes pour un utilisateur connecté
• Envisagez d'ajouter une promotion d'installation supplémentaire dans les zones de connexion de votre application.

Modèles promotionnels intégrés

Les techniques promotionnelles intégrées entremêlent les promotions au contenu du site. Cette approche est souvent plus subtile que la promotion dans l'interface utilisateur, qui présente des compromis. Vous voulez que votre promotion se démarque suffisamment pour que les utilisateurs intéressés la remarquent, mais pas trop pour qu'elle ne nuise pas à la qualité de l'expérience utilisateur.

In-Feed

Une promotion d'installation In-Feed s'affiche entre les articles d'actualité ou d'autres listes de fiches d'informations dans votre PWA.

Votre objectif est de montrer aux utilisateurs comment accéder plus facilement aux contenus qu'ils apprécient. Concentrez-vous sur la promotion des fonctionnalités qui seront utiles à vos utilisateurs.

Veillez à respecter les points suivants :

• Limitez la fréquence des promotions pour éviter d'agacer les utilisateurs.
• Donnez à vos utilisateurs la possibilité d'ignorer les promotions.
• Mémorisez le choix de l'utilisateur de fermer la fenêtre.