Best practices for onboarding, upboarding, and offboarding users

Cette traduction est en cours.

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

Pay attention to the design and style of the page. Keep it consistent with your extension’s web page and AMO listing. For example, use consistent icons and colors. This helps reassure your user that they’ve installed and are using the right product. Follow the Photon Design System, where this doesn’t conflict with your product’s design.

Don’t include advertising on your post-install page. Ads can degrade people’s trust in an extension, draw people away before they engage with your extension, and create confusion about what extension has been installed among other drawbacks.

Onboarding page examples

Here are some examples of good onboarding pages:

LASER CAT

 

This page provides a succinct description of the extension, clear instructions on how to fire your cat’s lasers, and how to turn your laser cat on and off.

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

Ghostery – Privacy Ad Blocker

 

As the features of Ghostery are mostly silent, this onboarding screen gives users two options for the initial setup: A simple one-click option and a link to the full settings so they can customize how Ghostery works.

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

 

Upboarding

 

When you update to your extension, take the opportunity to tell your users about the new features and any fixed issues. In addition to being an opportunity to engage with active users, you can also re-engage with people who may have stopped or never started using your extension.

Detecting an upgrade

You can listen for your extension’s updates using runtime.onInstalled as follows:

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

Upboarding page content

Consider adding the following information to the update page:

  • A brief description of your extension. This should be enough so your regular users can identify which extension has updated and enough to entice lapsed users back to using the extension.
  • A list of the new or improved features or issues corrected in this update. Include information on how to find and use the new or improved features.
  • If any of the new features require payment to use, let the user know what those features are and how much they cost. If you have tiered payments, provide a comparison chart or link to one on the extension’s website. This is also a good time to request donations, remembering to add a link to the donate page.
  • Provide links to key information such as the extension support page, help guide, tutorials, and alike.

Upboarding page examples

Here are some examples of good upboarding pages:

 

This page provides a brief description of Snap Links Plus before listing the improvements made in the release. Clint, the developer, also makes it clear that the project is an unpaid personal one and provides users with details of where they can contribute. He also kindly mentions the people who helped create the 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

When a user decides to remove your extension, don’t miss the opportunity to gather feedback on why the extension hasn’t worked for them: you may not be able to get this user back but, by addressing their concerns you can hopefully reduce the number of users who might remove your extension in the future.

To gather information from leaving users, you need to set up an external webpage and then specify this in runtime.setUninstallURL(). This page then opens when a user removes the extension.

Page content

Consider adding the following information to the offboarding page:

  • A “help us improve” message.
  • A survey about why the user is removing the extension. Offer them a list of the most likely reasons and an optional free text area to provide more details.

Remember to keep everything brief. A departing user is unlikely to respond to a multiple question quiz about why they are going.

Offboarding page examples

Here are some examples of good offboarding pages:

Grammarly for Firefox

 

This page provides a personal message from one of the Grammarly developers, a short list of reasons why the user might be removing the extension, and a text box where they can provide more information.

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

 

This page provides a link to reinstalling the extension, guarding against accidental removal. Then it offers a list of reasons why the user might have removed the extension, with the final option expanding into a textbox for details of other reasons. There is also a handy reminder that this information is sent to Adblock Plus and a link to their privacy policy.

 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,