Bonnes pratiques pour les utilisateurs d'embarquement et de débarquement

Les premières minutes après l'installation de votre extension peuvent être cruciales pour son succès. Votre nouvel utilisateur doit savoir par où commencer et comment utiliser les fonctions de l'extension de votre navigateur.

Une étude de recherche sur les utilisateurs de Think Aloud, menée par Mozilla en août 2018, a révélé que de mauvais onglets post-installation peuvent éroder la confiance que les gens avaient gagnée dans une extension de sa liste addons.mozilla.org. Tant et si bien que, dans certains cas, les participants à l'étude ont voulu supprimer immédiatement la prolongation. La recherche a également révélé qu'une trop grande quantité d'information ou des exigences d'installation prolongées peuvent avoir un impact négatif similaire sur la perception d'une extension par les gens.

Les meilleures extensions fournissent aux gens l'information dont ils ont besoin pour commencer, sans exiger trop de temps ou d'efforts pour la mise en place. De même, si l'extension comporte des limitations, celles-ci doivent être mentionnées lors de l'installation pour éviter les demandes d'assistance inutiles ou, pire, les mauvaises critiques.

Cependant, l'engagement et l'information des gens ne se limitent pas aux premières minutes après l'installation, mais s'appliquent également lorsque vous mettez à niveau votre poste et même lorsque l'utilisateur le supprime

L'intégration

Une bonne expérience d'intégration est essentielle pour chaque extension de navigateur et n'est pas difficile à faire. Vous pouvez embarquer des personnes par le biais d'un nouvel onglet ou d'une nouvelle fenêtre popup sur votre bouton de la barre d'outils (si vous en utilisez un).

Installation de détection

Vous pouvez écouter l'installation de votre extension en utilisant runtime.onInstalled comme suit :

Function handleInstalled(details) {
  if details.reason = "install" {
    browser.tabs.create({
      … your tab details…
    });
  }
 }

 browser.runtime.onInstalled.addListener(handleInstalled);

Intégration du contenu des pages

Votre page d'accueil ou votre popup devrait fournir les informations essentielles dont les gens ont besoin pour commencer. Le contenu doit donc être bref et précis. Si votre extension possède de nombreuses fonctionnalités, fournissez un guide d'aide séparé. La page doit également compléter les détails fournis sur addons.mozilla.org, et non les répéter en détail : l'objectif de la page de démarrage doit être comment utiliser votre extension, plutôt que ce qu'elle fait.

Envisagez d'ajouter les informations suivantes à la page d'accueil, dans l'ordre approximatif indiqué ci-dessous :

  • Le nom de votre extension, tel qu'il apparait sur addons.mozilla.org, ainsi que son icône ou logo.
  • Un bref aperçu des fonctionnalités et des fonctions de votre extension, assez d'informations pour rassurer le nouvel utilisateur qu'il a installé la bonne extension.
  • Informations pratiques sur l'utilisation de l'extension, y compris des détails sur la façon d'accéder à ses fonctions à partir d'un bouton de la barre d'outils, d'un bouton de la barre d'adresse, d'une barre latérale ou du menu contextuel. Inclure au moins une activité simple que l'utilisateur peut faire immédiatement. Si votre extension possède de nombreuses fonctionnalités, concentrez-vous sur la fourniture d'instructions sur ce que les utilisateurs doivent faire en premier.
    Astuce: Présentez une vidéo d'introduction : montrer à quelqu'un comment utiliser votre extension peut être beaucoup plus efficace que de le lui dire. Si vous créez une vidéo, fournissez un sous-titrage codé ou une transcription pour vous assurer qu'elle est accessible.
  • Si vos fonctions d'extension peuvent être personnalisées, expliquez les options disponibles et fournissez un lien vers la page des paramètres. Si les paramètres sont une caractéristique importante de l'extension ou si la gamme des paramètres est large, ne vous attendez pas à ce que votre nouvel utilisateur soit satisfait de travailler sur plusieurs pages de paramètres maintenant : pensez à fournir des liens rapides vers des configurations spécifiques.
    Astuce: Utilisez runtime.openOptionsPage() pour ouvrir la page des paramètres.
  • Si l'utilisateur a besoin d'un compte pour que votre service Web puisse utiliser l'extension, fournissez-lui un lien pour s'identifier ou s'inscrire.
  • Si votre extension a des fonctions payantes, informez l'utilisateur de leur nature et de leur coût. Si vous avez des paiements échelonnés, fournissez un tableau comparatif ou un lien vers le site Web de l'extension.
    Astuce: Si vous financez le développement de l'extension par des dons, c'est le bon moment de le dire aux gens et de fournir un lien vers la page des dons.
  • Fournissez des liens vers des informations supplémentaires telles que la page d'aide à l'extension, le guide d'aide, les tutoriels, etc.
    Astuce: Si vous avez d'autres extensions, mentionnez-les.

Après avoir lu votre page d'intégration, votre nouvel utilisateur devrait être sûr de commencer à utiliser l'extension immédiatement et savoir où aller s'il a besoin de plus d'informations ou de support. Dans la mesure du possible, ils auraient dû avoir une certaine expérience pratique des principales caractéristiques.

Mise en page

Faites attention à la conception et au style de la page. Conservez la cohérence avec la page Web de votre extension et la liste de l'AMO. Par exemple, utilisez des icônes et des couleurs cohérentes. Cela aide à rassurer votre utilisateur sur le fait qu'il a installé et utilise le bon produit. Suivez le système Photon Design System,  lorsque cela n'entre pas en conflit avec le design de votre produit.

N'incluez pas de publicité sur votre page de post-installation. Les publicités peuvent dégrader la confiance des gens dans une extension, éloigner les gens avant qu'ils ne s'engagent avec votre extension, et créer de la confusion sur l'extension qui a été installée parmi d'autres inconvénients.

Exemples de pages d'intégration

oici quelques exemples de bonnes pages d'intégration :

LASER CAT

Cette page fournit une description succincte de l'extension, des instructions claires sur la façon de tirer les lasers de votre chat, et comment allumer et éteindre votre chat laser.

Example onboarding page that details how to use the extension's features and turn them on and off

Ghostery – Privacy Ad Blocker

Comme les fonctionnalités de Ghostery sont pour la plupart silencieuses, cet écran d'intégration offre aux utilisateurs deux options pour l'installation initiale : Une simple option d'un seul clic et un lien vers les paramètres complets pour qu'ils puissent personnaliser le fonctionnement de Ghostery.

Example onboarding page that gives the user options for a one-click set up or the option to proceed to the settings page

Upboarding

Lorsque vous mettez à jour votre extension, profitez-en pour informer vos utilisateurs des nouvelles fonctionnalités et des problèmes corrigés. En plus d'être une occasion de vous engager avec des utilisateurs actifs, vous pouvez également vous réengager avec des personnes qui ont peut-être arrêté ou n'ont jamais commencé à utiliser votre poste.

Détection d'une mise à jour

Vous pouvez écouter les mises à jour de votre extension en utilisant  runtime.onInstalled comme suit :

Function handleInstalled(details) {
  if details.reason = "update" {
    browser.tabs.create({
      … your tab details…
    });
  }
 }
 
 browser.runtime.onInstalled.addListener(handleInstalled);

Upboarding page content

Envisagez d'ajouter les informations suivantes à la page de mise à jour :

  • Une brève description de votre poste. Cela devrait suffire pour que vos utilisateurs réguliers puissent identifier l'extension qui a été mise à jour et suffisamment pour inciter les utilisateurs déchus à utiliser à nouveau l'extension.
  • Une liste des fonctionnalités nouvelles ou améliorées ou des problèmes corrigés dans cette mise à jour. Inclure de l'information sur la façon de trouver et d'utiliser les caractéristiques nouvelles ou améliorées.
  • Si l'utilisation de l'une ou l'autre de ces nouvelles fonctions nécessite un paiement, informez l'utilisateur de la nature de ces fonctions et de leur coût. Si vous avez des paiements échelonnés, fournissez un tableau comparatif ou un lien vers le site Web de l'extension. C'est aussi un bon moment pour demander des dons, en n'oubliant pas d'ajouter un lien vers la page des dons.
  • Fournir des liens vers des informations clés telles que la page d'extension, le guide d'aide, les tutoriels, etc.

Upboarding page examples

Voici quelques exemples de bonnes pages d'upboarding :

Plus de Liens instantanés

Cette page fournit une brève description de Snap Links Plus avant d'énumérer les améliorations apportées à la version. Clint, le développeur, précise également que le projet est un projet personnel non rémunéré et fournit aux utilisateurs des détails sur les endroits où ils peuvent contribuer. Il a également la gentillesse de mentionner les personnes qui ont contribué à la création de l'extension.

Example upboarding page that includes a summary of the extension's features, details of the improvements and updates, and a request for donations.

Offboarding

Lorsqu'un utilisateur décide de supprimer votre extension, ne manquez pas l'occasion de recueillir des commentaires sur les raisons pour lesquelles l'extension n'a pas fonctionné pour lui : vous ne pourrez peut-être pas récupérer cet utilisateur, mais en répondant à ses préoccupations, vous pourrez peut-être réduire le nombre d'utilisateurs qui pourraient supprimer votre extension dans l'avenir.

Mise en place d'un lien vers une page d'hors-bord

Pour recueillir des informations auprès des utilisateurs sortants, vous devez configurer une page Web externe et l'indiquer dans runtime.setUninstallURL(). Cette page s'ouvre alors lorsqu'un utilisateur supprime l'extension.

Contenu de la page

Envisagez d'ajouter les informations suivantes à la page d'embarquement :

  • Un message “aidez-nous à améliorer”.
  • Une enquête sur la raison pour laquelle l'utilisateur supprime l'extension. Offrez-leur une liste des raisons les plus probables et une zone de texte libre facultative pour fournir plus de détails.

N'oubliez pas d'être bref. Il est peu probable qu'un utilisateur qui quitte le site réponde à un questionnaire à questions multiples sur les raisons de son départ.

Exemples de pages débarquement

Voici quelques exemples de bonnes pages de débarquement :

Grammarly for Firefox

Cette page fournit un message personnel d'un des développeurs de Grammarly, une courte liste de raisons pour lesquelles l'utilisateur peut supprimer l'extension, et une zone de texte où il peut fournir plus d'informations.

Example of boarding page with a "help us improve" message and simple survey with a list of reasons the extension is being removed.

Adblock Plus

Cette page fournit un lien pour réinstaller l'extension, afin d'éviter tout retrait accidentel. Ensuite, il offre une liste des raisons pour lesquelles l'utilisateur aurait pu supprimer l'extension, l'option finale se développant dans une zone de texte pour des détails sur d'autres raisons. Il y a également un rappel pratique que ces informations sont envoyées à Adblock Plus et un lien vers leur politique de confidentialité.

Example offboarding page that includes a reinstall button and request information about the removal with a simple questionnaire.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : hellosct1
Dernière mise à jour par : hellosct1,