path: root/files/fr/mozilla/add-ons/webextensions/experience_utilisateur_bonnes_pratiques/index.html

---
title: Expérience utilisateur bonnes pratiques
slug: Mozilla/Add-ons/WebExtensions/Experience_utilisateur_bonnes_pratiques
tags:
  - Add-ons
  - Extensions
  - Guide
  - UI
  - UX
translation_of: Mozilla/Add-ons/WebExtensions/User_experience_best_practices
---
<div>{{AddonSidebar()}}</div>

<p>Vous voudrez vous assurer que vos utilisateurs ont une excellente expérience en utilisant votre extension—quand vous le ferez, les bonnes critiques et évaluations suivront sur <a href="https://addons.mozilla.org">addons.mozilla.org</a> (AMO).</p>

<p dir="ltr">Si vous êtes nouveau sur le sujet de rendre un logiciel utilisable. un bon point de départ pour démarrer est l'<a href="https://en.wikipedia.org/wiki/Heuristic_evaluation#Nielsen">Heuristique d'usabilité</a> de Jakob Nielsen. Nous vous recommandons, que vous soyez nouveau pour le développement d'extension ou pour un professionnel expérimenté, en utilisant les Heuristiques de Nielsen comme une liste de contrôle du <a href="#Test_test_and_then_test_again">test de votre expérience utilisateur (UX)</a>.</p>

<p>Nous présentons ici les six étapes à suivre pour créer des fonctionnalités Firefox et UX spécifiques afin que vous puissiez créer une extension qui séduise, informe, enchante et fidélise vos utilisateurs.</p>

<p>En plus des étapes décrites ici, votre extension doit suivre les règles d'<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/AMO/Policy/Reviews">Add-on Policies</a>, qui incluent la transparence avec les utilisateurs sur la sécurité, la confidentialité et le contrôle de l'utilisateur.</p>

<h2 id="1._Gardez_le_cap">1. Gardez le cap</h2>

<p dir="ltr">Les meilleures extensions Firefox offrent aux utilisateurs une nouvelle fonctionnalité ou capacité qui répond à un besoin, qu'il soit plus intelligent, plus efficace ou plus agréable de navigation. Idéalement, votre extension permet à l'utilisateur d'économiser du temps, de l'argent ou de la frustration.</p>

<p>Une extension est meilleure lorsqu'elle est centrée autour d'un cas d'utilisation principal et qu'elle s'adresse à ce cas d'utilisation aussi bien que possible pour le public cible :</p>

<ul>
 <li>Il doit ajouter une fonction ou un ensemble de fonctions étroitement liées au navigateur, modifier une fonction du navigateur ou modifier des pages Web.</li>
 <li>Déterminez si vous y êtes parvenu en demandant si vous pouvez facilement communiquer les caractéristiques et le but de la prolongation en trois phrases (courtes) ou moins.</li>
</ul>

<h2 id="2._Donner_aux_utilisateurs_ce_dont_ils_ont_besoin_là_où_ils_en_ont_besoin">2. Donner aux utilisateurs ce dont ils ont besoin, là où ils en ont besoin</h2>

<p dir="ltr">Choisir la bonne façon, ou la combinaison de plusieurs façons, de rendre la fonctionnalité de votre extension disponible pour l'utilisateur peut avoir un effet significatif sur la convivialité. Poser quelques questions simples sur les fonctionnalités de votre poste peut vous guider rapidement vers les bons choix :</p>

<h3 dir="ltr" id="Est-ce_que_mon_extension_fonctionne_sur_la_plupart_des_sites_et_pages_web">Est-ce que mon extension fonctionne sur la plupart des sites et pages web ?</h3>

<p dir="ltr">Si votre extension fournit à l'utilisateur des fonctionnalités qu'il peut utiliser sur presque tous les sites Web ou pages, donnez-lui accès à partir d'un <strong><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Browser_action">bouton de la barre d'outils</a> </strong><strong>en utilisant <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">l'action du navigateur.</a></strong></p>

<ul dir="ltr">
 <li>Cela peut inclure l'accès à votre éditeur d'images ou l'ouverture d'une page de votre site Web.</li>
</ul>

<p dir="ltr"><img alt="" src="https://mdn.mozillademos.org/files/12966/browser-action.png" style="display: block; height: 387px; margin-left: auto; margin-right: auto; width: 782px;"></p>

<p dir="ltr">Lorsque vous voulez donner l'accès à l'utilisateur à plusieurs fonctions, vous pouvez ajouter  <a href="/en-US/Add-ons/WebExtensions/Popups">popup</a> au bouton (un popup apparaît comme un crochet de porte qui s'ouvre lorsque l'utilisateur sélectionne le bouton d'action du navigateur).</p>

<h3 dir="ltr" id="Est-ce_que_mon_extension_ne_fonctionne_que_pour_certains_sites_et_pages_web">Est-ce que mon extension ne fonctionne que pour certains sites et pages web ?</h3>

<p dir="ltr"> </p>

<p dir="ltr">Si votre extension fournit à l'utilisateur des fonctionnalités qu'il peut utiliser sur presque tous les sites Web ou pages, donnez-lui accès à partir d'un <strong><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Browser_action">bouton de la barre d'outils</a> </strong><strong>en utilisant <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">l'action du navigateur.</a></strong></p>

<ul dir="ltr">
 <li>Cela peut inclure l'accès à votre éditeur d'images ou l'ouverture d'une page de votre site Web.</li>
</ul>

<p dir="ltr"> </p>

<p dir="ltr"><img alt="" src="https://mdn.mozillademos.org/files/12960/page-action.png" style="display: block; height: 262px; margin-left: auto; margin-right: auto; width: 850px;"></p>

<p dir="ltr">Lorsque vous souhaitez donner accès à plusieurs fonctions à l'utilisateur, vous pouvez ajouter une fenêtre contextuelle au bouton.</p>

<h3 dir="ltr" id="Mon_extension_doit-elle_afficher_des_informations_ou_proposer_des_actions_en_parallèle_avec_des_pages_web">Mon extension doit-elle afficher des informations ou proposer des actions en parallèle avec des pages web ?</h3>

<p dir="ltr">Si votre extension contient des informations ou des actions auxquelles un utilisateur souhaite accéder immédiatement lorsqu'il consulte une page Web, <strong>utilisez une <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">barre latérale</a></strong>.</p>

<ul dir="ltr">
 <li>Il peut s'agir de notes que l'utilisateur peut faire sur le contenu d'une page ou d'une fonction offrant diverses substitutions de polices pour améliorer la lisibilité.</li>
</ul>

<p dir="ltr"><img alt="" src="https://mdn.mozillademos.org/files/14825/bookmarks-sidebar.png" style="display: block; height: 761px; margin-left: auto; margin-right: auto; width: 728px;"></p>

<h3 dir="ltr" id="Mon_extension_offre-t-elle_des_fonctionnalités_spécifiques_au_contenu_de_la_page_ou_à_d'autres_fonctions_du_navigateur">Mon extension offre-t-elle des fonctionnalités spécifiques au contenu de la page ou à d'autres fonctions du navigateur ?</h3>

<p dir="ltr">Si votre extension offre des fonctionnalités auxquelles l'utilisateur peut vouloir accéder en contexte, <strong>ajoutez-les à un <a href="/en-US/Add-ons/WebExtensions/user_interface/Context_menu_items">menu contextuel</a></strong> approprié.</p>

<ul dir="ltr">
 <li>Cela peut inclure l'accès à un éditeur d'image dans le menu contextuel de l'image ou des fonctions de copie étendues dans le menu contextuel pour le contenu de la page sélectionnée.</li>
</ul>

<p dir="ltr"><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15051/context_menu_example.png" style="display: block; height: 587px; margin-left: auto; margin-right: auto; width: 573px;"></p>

<h3 dir="ltr" id="Est-ce_que_mon_poste_possède_des_paramètres_que_l'utilisateur_peut_régler">Est-ce que mon poste possède des paramètres que l'utilisateur peut régler ?</h3>

<p dir="ltr">Si votre extension permet à l'utilisateur de modifier et d'enregistrer les paramètres qui affectent le comportement de l'extension, utilisez une <strong><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">page d'options</a> pour fournir un lien Préférences standard vers les paramètres </strong>du gestionnaire des extensions</p>

<p dir="ltr"><img alt="Typical preferences button, to access an extension's settings, from the Add-on Manager" src="https://mdn.mozillademos.org/files/15271/add-on-manager-preferences-button.png" style="display: block; height: 80px; margin-left: auto; margin-right: auto; width: 732px;"></p>

<div class="note">
<p dir="ltr">Dans le système d'exploitation Windows, le bouton "Préférences" est appelé "Options".</p>
</div>

<h3 dir="ltr" id="Est-ce_que_mon_extension_a_besoin_de_collecter_beaucoup_d'informations_ou_d'afficher_du_contenu_en_plus_des_onglets_actuels">Est-ce que mon extension a besoin de collecter beaucoup d'informations ou d'afficher du contenu en plus des onglets actuels ?</h3>

<p dir="ltr">Lorsque votre extension a besoin de rassembler ou d'afficher des quantités importantes d'informations (plus qu'il n'est nécessaire pour une <a href="/en-US/docs/Web/API/Window/alert">alerte</a> ou qu'un formatage supplémentaire serait avantageux) <strong>utilisez <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Bundled_web_pages">pages webs groupées</a> pour fournir des formulaires et un contenu similaire.</strong></p>

<p dir="ltr"><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15073/bundled_page_as_panel.png" style="display: block; height: 445px; margin-left: auto; margin-right: auto; width: 680px;"></p>

<h3 dir="ltr" id="Est-ce_que_mon_extension_essaie_d'aider_l'utilisateur_à_trouver_des_pages_web_ou_du_contenu">Est-ce que mon extension essaie d'aider l'utilisateur à trouver des pages web ou du contenu ?</h3>

<p dir="ltr">Si votre extension inclut une fonctionnalité permettant de localiser des pages Web ou du contenu, par exemple en proposant une recherche spécifique à un site, utilisez les <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">suggessions de la barre d'adresse</a> pour fournir ces recommandations.</p>

<p dir="ltr"><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15075/omnibox_example_full.png" style="display: block; height: 325px; margin-left: auto; margin-right: auto; width: 679px;"></p>

<h3 dir="ltr" id="Mon_extension_offre-t-elle_des_outils_pour_les_développeurs">Mon extension offre-t-elle des outils pour les développeurs ?</h3>

<p dir="ltr">Si vous fournissez des outils pour les développeurs, ajoutez-les aux outils de développement Firefox en utilisant les <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">panneaux des outils de développement</a>.</p>

<h2 dir="ltr" id="3._Tenir_l'utilisateur_informé">3. Tenir l'utilisateur informé</h2>

<p dir="ltr">S'assurer que l'utilisateur sait ce qui va se passer, ce qui se passe et ce qui s'est passé dans votre extension est un élément essentiel pour établir la confiance et assurer un utilisateur heureux.</p>

<h3 dir="ltr" id="Dites_à_l'utilisateur_ce_qui_va_se_passer_avant_qu'il_ne_se_produise.">Dites à l'utilisateur ce qui va se passer, avant qu'il ne se produise.</h3>

<p dir="ltr">Les utilisateurs doivent comprendre ce qui se passe lorsqu'ils cliquent sur un bouton :</p>

<ul dir="ltr">
 <li>Fournissez une étiquette de bouton significative et descriptive.</li>
 <li>Fournissez des infobulles qui décrivent l'action que le bouton va effectuer..</li>
 <li>Ne mettez <strong>pas</strong> le nom de l'extension seul dans l'infobulle, à moins qu'il ne soit descriptif de l'action que le bouton va effectuer..</li>
 <li><strong>N'</strong>utilisez <strong>pas</strong> l'infobulle pour d'autres types d'informations telles que des statistiques détaillées sur votre extension. Gardez le contenu de l'infobulle simple et concentrez-vous sur ce qui se passera lorsque l'utilisateur clique sur le bouton.</li>
</ul>

<h3 dir="ltr" id="Si_quelque_chose_est_vraiment_important_et_que_l'utilisateur_n'en_est_pas_conscient_informez-le.">Si quelque chose est <em>vraiment</em> important et que l'utilisateur n'en est pas conscient, informez-le.</h3>

<p>Si votre extension a terminé une tâche d'arrière-plan critique et de longue durée, utilisez les  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">notifications</a> natives du système d'exploitation pour mettre à jour l'utilisateur lorsque la tâche est terminée. Ceci peut être utile lorsque l'utilisateur ne se concentre pas sur l'extension ou le navigateur, une fois la tâche terminée.</p>

<p>Toutefois, utilisez les avis avec parcimonie. S'il suffit que l'utilisateur découvre qu'un processus est terminé lorsqu'il revient au navigateur ou à l'extension, <strong>n'</strong>utilisez pas de notifications.</p>

<p dir="ltr"><img alt="" src="https://mdn.mozillademos.org/files/14043/notify-shadowed.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 700px;"></p>

<h3 dir="ltr" id="Utiliser_les_badges_browserAction_avec_parcimonie">Utiliser les badges browserAction avec parcimonie</h3>

<p>Pour informer les utilisateurs des événements importants, vous pouvez <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction/setBadgeText">ajouter un badge</a> au dessus de l'icône de la barre <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a>. Faites-le avec parcimonie - n'utilisez pas de badges pour fournir des mises à jour régulières ou persistantes de l'état.</p>

<p>Lorsqu'il s'agit de <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction/setBadgeBackgroundColor">coloriser un badge</a>, il est recommandé d'utiliser l'une des quatre couleurs pour les notifications de gravité différente :</p>

<ul>
 <li>Décontracté : bleu</li>
 <li>Succès : vert</li>
 <li>Attention : jaune</li>
 <li>Erreur : rouge</li>
</ul>

<div class="note">
<p dir="ltr">L'utilisation des couleurs Firefox est suggérée, pour plus de détails voir <a href="http://design.firefox.com/photon/visuals/color.html">Firefox Colors</a>. Cependant, pour des raisons de compatibilité avec <a href="https://developer.chrome.com/extensions/browserAction#icon">Chrome</a> et Opera, nous prenons en charge toutes les couleurs que vous souhaitez utiliser.</p>
</div>

<h2 dir="ltr" id="4._Soyez_Firefoxy_dans_l'apparence_et_la_convivialité">4. Soyez Firefoxy dans l'apparence et la convivialité</h2>

<p>Vos utilisateurs ont choisi Firefox pour une raison, peut-être pour plusieurs raisons, alors faites correspondre l'apparence de votre extension à celle de Firefox en utilisant le <a href="http://design.firefox.com/photon">Firefox Photon Design System</a>.</p>

<p>En suivant Photon, vous vous assurerez que votre extension s'intègre à l'expérience Firefox et la rendra plus facile à utiliser pour les utilisateurs.</p>

<h2 dir="ltr" id="5._Grande_expérience_d'intégration">5. Grande expérience d'intégration</h2>

<p dir="ltr">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.</p>

<p dir="ltr">Fournir une page d'accueil qui donne aux utilisateurs les informations essentielles dont ils ont besoin pour commencer. Rédigez des informations brèves et précises et proposez des options de configuration simples, le cas échéant. Pour plus d'informations sur la création d'une page d'embarquement, voir <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/onboarding_upboarding_offboarding_best_practices">Bonnes pratiques pour les utilisateurs d'embarquement, d'embarquement, et de débarquement</a>.</p>

<p dir="ltr">Si l'utilisateur saute la page d'embarquement, assurez-vous que votre poste est prêt à être utilisé immédiatement après l'installation. Il devrait être optimisé pour son cas d'utilisation principal et fonctionner comme prévu pour la plupart des utilisateurs sans avoir besoin de personnalisation.</p>

<h2 dir="ltr" id="6._Testez_testez_puis_testez_à_nouveau">6. Testez, testez, puis testez à nouveau</h2>

<p>Le test est une partie essentielle de la création d'un UX exceptionnel pour votre extension. Il y a deux aspects clés du test de votre UX:</p>

<ol>
 <li>Effectuez des tests sur plusieurs appareils et plates-formes pour vous assurer que votre extension fonctionne et qu'elle fonctionne correctement dans le plus grand nombre d'endroits possible. Cela inclut la prise en compte de facteurs tels que la taille de l'écran et la résolution de l'utilisateur —simplement parce que votre extension est bonne et facile à utiliser sur votre écran de bureau ne signifie pas qu'elle fonctionne aussi bien sur un écran d'ordinateur portable, ou, effectivement, vice et versa.</li>
 <li>Testez avec autant d'utilisateurs que possible. Ne supposez pas que vous connaissez votre auditoire, car les antécédents et l'expérience des gens peuvent faire une énorme différence dans la façon dont ils interagissent avec votre extension. Ainsi, permettre les tests utilisateur dans le cadre du développement de votre extension.</li>
</ol>

<p dir="ltr">Conseils de test :</p>

<ul>
 <li>Dans AMO, vous avez la possibilité d'<a href="/fr/Add-ons/Distribution/Submitting_an_add-on#Listing_on_AMO">identifier votre extension comme expérimentale</a> ou publier une  <a href="/fr/Add-ons/Distribution#Beta_versions">version beta ou une autre version non finale</a>.

  <ul>
   <li>Si vous marquez votre extension comme expérimentale, elle est listée dans AMO, mais avec un profil plus bas. Lorsque l'extension est prête pour un public plus large, vous pouvez désactiver le drapeau expérimental dans AMO.</li>
   <li>Si vous avez une extension publiée, vous pouvez utiliser le canal Développement pour proposer une version alpha ou bêta à tester. Vous devrez diriger vos testeurs vers le canal de développement de la liste de votre extension ou indiquer à vos testeurs le lien à utiliser pour installer votre extension.<br>
    <img alt="The development channel section of an extension's listing page, offering access to alpha and beta versions for testing." src="https://mdn.mozillademos.org/files/15273/extensions-development-channel.png" style="display: block; height: 262px; margin-left: auto; margin-right: auto; width: 751px;"><br>
    Lorsque vous êtes satisfait de votre mise à jour, vous pouvez la publier comme la nouvelle version de votre extension.</li>
  </ul>
 </li>
 <li>Si vous souhaitez distribuer votre extension à des utilisateurs extérieurs à AMO, vous trouverez les instructions pour le faire, ainsi que les instructions d'installation que vous devez fournir aux utilisateurs, dans l'article sur les <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Sideloading_add-ons">extensions de chargement latéral.</a> N'oubliez pas que, contrairement à la distribution par l'entremise d'AMO, vous devrez envoyer aux utilisateurs toute version mise à jour de votre extension à mesure que vous apporterez des améliorations.</li>
 <li>Utilisez le <a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode">mode design réactif</a> pour tester le comportement de votre extension sur d'autres tailles d'écran et types d'appareils.</li>
</ul>

<p><strong>Créer une grande extension est un processus itératif. Bien que nous ayons décrit les six étapes ici, vous y reviendrez probablement au fur et à mesure que vous apprendrez ce qui fonctionne et ce qui ne fonctionne pas grâce aux commentaires des utilisateurs, aux tests et au temps. </strong></p>