L'installation de votre progressive web app (PWA) peut permettre aux utilisateurs de la trouver et de l'utiliser plus facilement. Même avec la promotion du 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. Quels que soient le modèle que vous utilisez, ils conduisent tous au même code qui déclenche le flux d'installation, décrit dans la section Fournir votre propre expérience d'installation dans l'application.
Bonnes pratiques
Certaines bonnes pratiques s'appliquent quels que soient les modèles promotionnels que vous utilisez sur votre site.
- Maintenez les promotions en dehors du flux de vos parcours utilisateur. Par exemple, sur une page de connexion PWA, placez l'incitation à l'action sous le formulaire de connexion et le bouton "Submit" (Envoyer). Une utilisation perturbatrice de modèles promotionnels réduit la facilité d'utilisation de votre PWA et a un impact négatif sur vos métriques d'engagement.
- donner la possibilité d'ignorer ou de refuser la promotion ; Souvenez-vous des préférences de l'utilisateur s'il effectue cette opération et ne demandez une nouvelle demande qu'en cas de changement dans la relation entre l'utilisateur et 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 gêner l'utilisateur avec la promotion des installations.
- La promotion n'est affichée 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 l'omnibox.
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 au bout de 90 jours environ.
Schémas promotionnels de l'interface utilisateur
Les modèles promotionnels de l'interface utilisateur peuvent être utilisés pour presque tous les types de PWA et apparaissent à 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 l'interruption de 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é de 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
Ce bouton d'installation fait partie de l'en-tête de votre site. L'autre contenu de l'en-tête inclut souvent le branding du site, comme un logo et le menu hamburger. Selon les fonctionnalités de votre site et les besoins des utilisateurs, les en-têtes peuvent présenter la valeur position:fixed ou non.
Lorsqu'elle est utilisée de manière appropriée, promouvoir l'installation d'une PWA à partir de l'en-tête de votre site est un excellent moyen de permettre à vos clients les plus fidèles de revenir plus facilement à votre expérience. Les pixels dans 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.
Assurez-vous :
- N'affichez le bouton d'installation que si
beforeinstallprompta été déclenché. - Évaluez la valeur de l'installation pour vos utilisateurs. Pensez à 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 aux autres éléments qu'il serait utile d'offrir à l'utilisateur dans l'en-tête et pesez la priorité de la promotion d'installation par rapport aux autres options.
Menu de navigation
Le menu de navigation est l'endroit idéal pour promouvoir l'installation de votre application, car les utilisateurs qui ouvrent le menu indiquent qu'ils interagissent avec votre expérience.
Assurez-vous :
- Évitez de perturber les contenus de navigation importants. Placez la promotion d'installation de 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.
Assurez-vous :
- Concentrez-vous sur les fonctionnalités qui comptent le plus pour vos visiteurs et mettez en avant les mots clés qui ont pu les amener sur votre page de destination.
- Assurez-vous que votre promotion d'installation et votre incitation à l'action attirent l'attention, mais uniquement après avoir clairement défini votre proposition de valeur. C'est votre page de destination, après tout.
- Envisagez d'ajouter une promotion pour les installations dans la partie de votre application où les utilisateurs passent le plus de temps.
Installer la bannière
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.
Assurez-vous :
- Attendez que l'utilisateur ait manifesté de l'intérêt pour votre site avant d'afficher une bannière. Si l'utilisateur ignore votre bannière, ne l'affichez plus, sauf si l'utilisateur déclenche un événement de conversion indiquant un niveau d'engagement plus élevé avec votre contenu, comme un achat sur un site d'e-commerce ou la création d'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 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'installera instantanément sans redirection de plate-forme.
UI temporaire
Une interface utilisateur temporaire, telle que le schéma de conception Snackbar, informe l'utilisateur et lui permet d'effectuer facilement une action, en l'occurrence l'installation de l'application. Lorsqu'ils sont utilisés correctement, ces modèles d'interface utilisateur n'interrompent pas le parcours utilisateur et sont généralement ignorés automatiquement s'ils sont ignorés par l'utilisateur.
Affichez le snackbar après quelques interactions avec votre application. S'il apparaît au chargement de la page ou hors contexte, il peut facilement être manqué ou entraîner une surcharge cognitive. Dans ce cas, les utilisateurs ignorent simplement tout ce qu'ils voient. N'oubliez pas que les nouveaux utilisateurs de votre site ne seront peut-être pas prêts à installer votre PWA. Par conséquent, il est préférable d'attendre d'avoir obtenu 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 utilisateur ou un événement de conversion similaire).
Assurez-vous :
- Affichez le snackbar pendant 4 à 7 secondes afin de laisser aux utilisateurs suffisamment de temps pour le voir et y réagir, sans perturber le processus.
- Évitez de le diffuser par-dessus d'autres interfaces utilisateur temporaires telles que des bannières, etc.
- Attendez d'avoir obtenu 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 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), vous pouvez 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
Affichez une promotion d'installation pendant ou après un parcours séquentiel (par exemple, après une réservation ou un processus de paiement). Si vous affichez la promotion une fois que l'utilisateur a terminé le parcours, vous pouvez souvent la rendre plus visible une fois le parcours terminé.
Assurez-vous :
- Ajoutez une incitation à l'action pertinente. Quels utilisateurs bénéficieront de l'installation de votre application et pourquoi ? En quoi sont-elles pertinentes par rapport à leur parcours actuel ?
- Si votre marque propose des offres uniques pour les utilisateurs d'applications installées, mentionnez-les.
- Éloignez la promotion des prochaines étapes de votre parcours, sinon vous risquez d'avoir une incidence négative sur les taux d'achèvement du parcours. Dans l'exemple d'e-commerce ci-dessus, notez que la principale incitation à l'action au paiement est située au-dessus de la promotion incitant à installer une application.
Processus d'inscription, de connexion ou de déconnexion
Cette promotion est un cas particulier du schéma promotionnel parcours, où la fiche de promotion peut être plus proéminente.
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. De plus, il n'y a souvent pas beaucoup d'autres contenus utiles à placer sur ces pages. Il est ainsi moins perturbateur d'ajouter une incitation à l'action plus large, tant qu'elle ne gêne pas l'interaction.
Assurez-vous :
- É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 les utilisateurs inscrits.
- Envisagez d'ajouter une promotion supplémentaire pour les installations dans les zones où vous êtes connecté à votre application.
Modèles promotionnels intégrés
Les techniques promotionnelles intégrées associent les promotions au contenu du site. Cette approche est souvent plus subtile que la promotion dans l'interface utilisateur, ce qui présente des compromis. Votre promotion doit se démarquer suffisamment pour que les utilisateurs intéressés la remarquent, mais pas au point de nuire à la qualité de l'expérience utilisateur.
Annonces In-Feed
Une promotion d'installation In-Feed s'affiche entre les articles de presse ou d'autres listes de fiches d'information dans votre PWA.
Votre objectif est de montrer aux utilisateurs comment accéder plus facilement au contenu qu'ils apprécient. Efforcez-vous de promouvoir les fonctionnalités qui seront utiles à vos utilisateurs.
Assurez-vous :
- Limitez la fréquence des promotions pour éviter d'agacer les utilisateurs.
- Donnez à vos utilisateurs la possibilité d'ignorer les promotions.
- N'oubliez pas que l'utilisateur a choisi d'ignorer la suggestion.