L'installation de votre progressive web app (PWA) peut faciliter la recherche et l'utilisation par les utilisateurs. Même avec la promotion sur 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 permettre l'installation de votre PWA.
Cet article n'est en aucun cas exhaustif, mais offre un point de départ pour différentes façons de promouvoir l'installation de votre PWA. Quels que soient les modèles que vous utilisez, ils mènent tous au même code qui déclenche le parcours d'installation, décrit dans Comment offrir votre propre expérience d'installation dans l'application.
Bonnes pratiques
Certaines bonnes pratiques s'appliquent quels que soient les modèles promotionnels utilisés sur votre site.
- Placez les promotions en dehors du parcours utilisateur. Par exemple, sur la page de connexion d'une PWA, placez l'incitation à l'action sous le formulaire de connexion et le bouton d'envoi. 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.
- Incluez la possibilité d'ignorer ou de refuser la promotion. Mémorisez les préférences de l'utilisateur s'il le fait. N'envoyez une nouvelle invite que si sa relation avec votre contenu change (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 contrarier l'utilisateur avec une promotion incitant à installer une application.
- N'afficher 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 l'omnibox.
Chrome pour Android affiche une mini-barre d'informations à l'utilisateur. Vous pouvez l'empêcher en appelant preventDefault() sur l'événement beforeinstallprompt.
Si vous n'appelez pas preventDefault(), la bannière s'affichera la première fois qu'un utilisateur visitera votre site et répondra 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 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 schéma promotionnel, il est important de tenir compte du contexte de l'utilisateur afin de minimiser l'interruption de son parcours.
Les sites qui réfléchissent au moment où ils déclenchent l'interface utilisateur de la promotion génèrent 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 "Télécharger 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 ne gêne pas 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. D'autres contenus d'en-tête comprennent souvent le branding du site, tel qu'un logo et le menu hamburger. Les en-têtes peuvent être position:fixed ou non, selon les fonctionnalités de votre site et les besoins des utilisateurs.
Lorsqu'elle est utilisée correctement, promouvoir l'installation de 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 de l'en-tête de votre PWA sont précieux. Assurez-vous donc que votre incitation à l'action d'installation est de taille appropriée, est plus importante que tout autre contenu d'en-tête possible et qu'elle n'est pas intrusive.
Assurez-vous :
- N'affichez le bouton d'installation que si
beforeinstallprompta été déclenché. - Évaluez la valeur du cas d'utilisation installé 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 aux autres éléments qu'il serait utile d'offrir à 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 moyen de promouvoir l'installation de votre application, car les utilisateurs qui ouvrent le menu signalent leur engagement envers votre expérience.
Assurez-vous :
- Évitez de perturber les contenus de navigation importants. Placez la promotion d'installation de PWA en dessous d'autres éléments du menu.
- Présentez un argumentaire court et pertinent expliquant pourquoi l'installation de votre PWA pourrait être bénéfique à l'utilisateur.
Page de destination
L'objectif d'une page de destination est de promouvoir vos produits et services. Elle est donc appropriée pour promouvoir les avantages de l'installation de votre PWA.
Tout d'abord, expliquez la proposition de valeur de votre site, puis indiquez aux visiteurs ce qu'ils retireront de l'installation.
Assurez-vous :
- Privilégiez les fonctionnalités qui intéressent le plus vos visiteurs et mettez en avant les mots clés susceptibles de les avoir conduits jusqu'à votre page de destination.
- Faites en sorte que votre promotion incitant à installer et votre incitation à l'action soient accrocheuses, mais seulement après avoir clairement défini votre proposition de valeur. Après tout, c'est votre page de destination.
- Pensez à ajouter une promotion pour l'installation dans la partie de votre application où les utilisateurs passent le plus de temps.
Bannière d'installation
La plupart des utilisateurs ont rencontré des bannières d'installation dans des expériences mobiles et connaissent bien les interactions proposées par ces bannières. Les bannières doivent être utilisées prudemment, 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 ferme votre bannière, ne l'affichez plus, sauf s'il déclenche un événement de conversion indiquant un niveau d'engagement plus élevé avec votre contenu (par exemple, un achat sur un site d'e-commerce ou la création d'un compte).
- Dans la bannière, expliquez brièvement l'intérêt d'installer votre PWA. Par exemple, vous pouvez différencier l'installation d'une PWA de celle d'une application iOS/Android en indiquant qu'elle n'utilise quasiment pas d'espace de stockage sur l'appareil de l'utilisateur ou qu'elle s'installera instantanément sans redirection vers la plate-forme.
UI temporaire
Une UI temporaire, telle que le modèle de conception Snackbar, avertit l'utilisateur et lui permet d'effectuer facilement une action (dans ce cas, l'installation de l'application). Lorsqu'ils sont utilisés correctement, ces types de modèles d'interface utilisateur n'interrompent pas le parcours utilisateur et sont généralement automatiquement ignorés 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 être facilement 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 forts de l'intérêt de l'utilisateur avant d'utiliser cette méthode (par exemple, des visites répétées, une connexion d'utilisateur ou un événement de conversion similaire).
Assurez-vous :
- Affichez le snackbar pendant quatre à sept secondes afin de laisser suffisamment de temps aux utilisateurs pour le voir et y réagir, sans les perturber.
- Évitez de l'afficher sur d'autres interfaces utilisateur temporaires telles que des bannières, etc.
- Attendez d'avoir obtenu des signaux forts de l'intérêt de l'utilisateur avant d'utiliser ce modèle (par exemple, des visites répétées, une connexion d'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'utilisateur est clairement engagé avec votre contenu, 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 un processus de réservation ou de paiement. Si vous diffusez 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 :
- Incluez une incitation à l'action pertinente. Quels utilisateurs bénéficieront de l'installation de votre application et pourquoi ? En quoi est-elle pertinente par rapport à son parcours actuel ?
- Si votre marque propose des offres uniques aux utilisateurs d'applications installées, mentionnez-les.
- Empêchez la promotion des prochaines étapes de votre parcours, sinon vous pourriez avoir une incidence négative sur les taux d’achèvement du parcours. Dans l'exemple d'e-commerce ci-dessus, notez que l'incitation à l'action principale concernant le règlement se trouve 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, dans lequel la carte de promotion peut être plus proéminente.
Ces pages ne sont généralement vues que par les utilisateurs engagés, pour lesquels la proposition de valeur de votre PWA a déjà été établie. De plus, il y a souvent peu d'autres contenus utiles à placer sur ces pages. Il est donc moins gênant de créer une incitation à l'action plus large, tant qu'elle n'interfère pas.
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 un utilisateur inscrit.
- Envisagez d'ajouter une promotion supplémentaire pour l'installation dans les zones connectées de votre application.
Modèles promotionnels intégrés
Les techniques de promotion intégrées permettent d'intégrer les promotions et le contenu du site. Cette approche est souvent plus subtile que la promotion dans l'interface utilisateur, qui présente des inconvénients. 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 In-Feed sur l'installation s'affiche entre des 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 mettre en avant les fonctionnalités qui seront utiles à vos utilisateurs.
Assurez-vous :
- Limitez la fréquence des promotions pour ne pas agacer les utilisateurs.
- Permettez à vos utilisateurs d'ignorer les promotions.
- Mémoriser le choix de l'utilisateur de l'ignorer.