Modules

Expérience utilisateur bonnes pratiques

Les meilleures extensions de Firefox fournissent aux utilisateurs une nouvelle fonctionnalité ou une fonctionnalité qui répond à un besoin. Répondre à ce besoin aidera les utilisateurs à travailler de manière plus intelligente ou plus efficace, ou plus de plaisir à partir de leur expérience de navigation.

Vous voudrez également vous assurer que vos utilisateurs ont une excellente expérience en utilisant votre extension et, par conséquent, leur donner de bons commentaires et une bonne note sur addons.mozilla.org (AMO).

Beaucoup a été écrit sur ce qui rend le logiciel utilisable. Si vous êtes nouveau sur le sujet, un bon endroit pour démarrer est l'Heuristique d'usabilité 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 test de votre expérience utilisateur (UX).

Alors, nous discutons des fonctionnalités UX de Firefox plus spécifiques et des extensions du navigateur, offrant des conseils et des suggestions qui vous aideront à créer une extension qui enchantera vos utilisateurs.

Etre Firefoxy

Vos utilisateurs ont choisi Firefox pour une raison, peut-être plusieurs raisons, afin de faire correspondre la philosophie, les fonctionnalités et l'apparence de votre extension à celle de Firefox.

Valeurs de conception

Pour mieux répondre aux besoins des utilisateurs de Firefox, alignez-vous sur les valeurs de Firefox.

Les valeurs de conception de Firefox indiquent que nous respectons la confidentialité et la souveraineté de l'utilisateur et ne les surprendrons pas. Nous commençons les utilisateurs avec les défauts intelligents sur la fonctionnalité qu'ils souhaitent utiliser et leur permettent de personnaliser ceux à leurs préférences personnelles afin qu'ils maîtrisent pleinement leur expérience. Nous ajoutons de l'humour et de la fantaisie à notre conception et faisons attention aux détails, à la qualité et aux performances. Les différences locales dans un monde global sont importantes pour nous, et nous aidons les gens à comprendre le Web en langage clair.

Regarde et ressent

Pour fournir à vos extensions le meilleur ajustement à long terme à Firefox, alignez-vous avec le Firefox Photon Design System. Suivant Photon veillera à ce que votre extension s'intègre à l'expérience Firefox et facilitera l'utilisation des personnes.

Gardez-le concentré

Une extension est meilleure lorsqu'elle est centrée autour d'un cas d'utilisation principal, en abordant ce cas d'utilisation aussi bien que possible pour le public cible. Il devrait ajouter une fonction ou un ensemble de fonctions étroitement liées au navigateur, modifier une fonction du navigateur ou modifier des pages Web. Jugez-vous si vous l'avez réalisé en vous demandant si vous pouvez facilement communiquer les fonctionnalités et le but de l'extension en trois phrases (courtes) ou moins.

Une brève description sommaire de votre extension est également très utile lorsqu'il s'agit de créer sa liste sur AMO, voir Assurez-vous que votre résumé est suffisant pour plus de détails.

Commencez tout de suite

Assurez-vous que votre extension est prête à être utilisée 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.

Ne vous attendez pas à ce que vos utilisateurs lisent des instructions détaillées, d'autres contenus, ou demandez-leur de configurer l'extension pour l'utiliser. Cela pourrait signifier qu'ils ne commencent jamais avec votre extension et, s'ils le font, pourraient entraîner de mauvaises critiques.

Donnez aux utilisateurs ce dont ils ont besoin, où ils en ont besoin

Choisir la bonne façon ou la combinaison de façons de rendre la fonctionnalité de votre extension accessible à l'utilisateur peut avoir un impact significatif sur la convivialité. Poser quelques questions simples sur la fonctionnalité de votre extension peut vous guider rapidement sur les bons choix:

Est ce que mon extension fonctionne sur la pluspart des sites Web et des pages web ?

Si votre extension fournit à l'utilisateur des fonctionnalités qu'il peut utiliser sur presque tous les sites Web ou les pages, accédez à l'utilisateur à partir d'un bouton de la barre d'outils à l'aide de l'action du navigateur. Cela pourrait inclure l'accès à votre éditeur d'image ou l'ouverture d'une page de votre site.

Lorsque vous avez plusieurs fonctionnalités auxquelles vous souhaitez donner accès à l'utilisateur, vous pouvez ajouter une fenêtre contextuelle au bouton.

Est ce que mon extension fonctionne uniquement pour certains sites web et pages ?

Si votre extension offre une fonctionnalité pour un type de page Web ou de domaines spécifiques, donnez-lui l'accès à partir d'un bouton de la barre d'adresse en utilisant une action de page. Cela pourrait inclure l'accès à votre lecteur RSS sur les pages avec des flux RSS ou la fourniture d'une fonctionnalité étendue aux pages de votre site.

 

Lorsque vous avez plusieurs fonctionnalités auxquelles vous souhaitez donner accès à l'utilisateur, vous pouvez ajouter une fenêtre contextuelle au bouton.

Est ce que mon extension doit afficher des informations ou proposer des actions en parallèle avec les pages web ?

Si votre extension comprend des informations ou des actions auxquelles un utilisateur souhaiterait un accès immédiat lors de l'affichage d'une page Web, utilisz la barre latérale. Cela pourrait inclure des notes que l'utilisateur peut faire sur le contenu d'une page ou une fonctionnalité offrant diverses substitutions de polices pour améliorer la lisibilité.



Est ce que mon extension offre des fonctionnalités spécifiques au contenu de la page ou à d'autres fonctionnalités du navigateur ?

Si votre extension offre des fonctionnalités, l'utilisateur souhaitera accéder au contexte, les ajouter à un menu contextuel approprié. Cela pourrait inclure l'accès à un éditeur d'image dans le menu contextuel de l'image ou l'offre de fonctionnalités de copie étendue dans le menu contextuel pour le contenu de la page sélectionné.
 

Example of content menu items added by a WebExtension, from the context-menu-demo example

Est ce que mon extension a des paramètres que l'utilisateur peut ajuster ?

Si votre extension permet à l'utilisateur de modifier et d'enregistrer les paramètres qui affectent le comportement de l'extension, utilisez une page d'options pour fournir un lien de préférences standard aux paramètres du gestionnaire de modules complémentaires.

Typical preferences button, to access an extension's settings, from the Add-on Manager

Est-ce que mon extension doit rassembler beaucoup d'informations ou afficher du contenu en plus des onglets actuels ?

Lorsque votre extension doit rassembler ou afficher des quantités significatives d'informations (plus que ce qui convient à une alerte ou bénéficierait d'un formatage supplémentaire) utilisez les pages Web groupées pour fournir des formulaires et du contenu similaire.

Example of a simple bundled page displayed as a detached panel.

Est ce que mon extension essaie d'aider l'utilisateur à trouver des pages Web ou du contenu ?

Lorsque votre extension inclut un cas d'utilisation pour rechercher des pages Web ou du contenu, par exemple, proposer une recherche spécifique à un site, utilisez les suggestions de la barre d'adresse pour diffuser ces recommendations.

Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.

Est ce que mon extension offre des outils pour les développeurs ?

Lorsque vous fournissez des outils aux développeurs, ajoutez-les aux outils de développement Firefox à l'aide des panneaux d'outils de développement.

Tenez l'utilisateur au courant

S'assurer que l'utilisateur sait ce qui va se passer, ce qui se passe,  et s'est passé dans dans votre extension est une partie essentielle de la construction de la confiance et d'assurer un utilisateur heureux.

Dites à l'utilisateur ce qui va se passer, avant qu'il ne se produise

Les utilisateurs doivent comprendre ce qui se passe lorsqu'ils cliquent sur un bouton. En plus d'une étiquette de bouton significative et descriptive, fournissez des info-bulles décrivant l'action que le bouton va effectuer.

Ne mettez pas le nom de l'extension seul dans l'info-bulle, à moins qu'il ne soit descriptif de l'action que le bouton va effectuer.

En outre, n'utilisez pas l'info-bulle pour d'autres types d'informations, telles que des statistiques détaillées sur votre extension. Gardez le contenu de l'info-bulle simple et concentré sur ce qui se passera lorsque l'utilisateur clique sur le bouton.

Si c'est vraiment important et que l'utilisateur s'est égaré, informez-le

Si votre extension a terminé une tâche d'arrière-plan critique à exécution longue, lorsque la tâche est terminée, utilisez les notifications natives du système d'exploitation pour mettre à jour l'utilisateur. Cela peut être utile lorsque l'utilisateur ne se concentre pas sur l'extension ou le navigateur lorsque le processus se termine. Cependant, utilisez avec parcimonie. S'il est suffisant que l'utilisateur découvre qu'un processus est terminé lorsqu'il retourne au navigateur ou à l'extension, n'utilisez pas les notifications.

Utilisez les badges browserAction avec parcimonie

Vous pouvez ajouter un badge sur l'icône de la barre d'outils de browserAction, mais le faire avec parcimonie pour informer les utilisateurs sur les événements importants. Ne les utilisez pas pour fournir des mises à jour d'état régulières ou persistantes.

Quand il s'agit de colorier un badge, il est recommandé d'utiliser l'une des quatre couleurs pour les notifications de gravité différentes :

  • Décontracté : bleu
  • Succès : vert
  • Erreur : jaune
  • Attention : rouge

L'utilisation des couleurs de Firefox est suggérée, pour plus de détails voir les couleurs Firefox. Cependant pour la compatibilité avec Chrome et Opera, la sélection des couleurs est prise en charge.

Testez, testez, puis testez à nouveau

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:

  1. 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.
  2. 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.

Conseils de test :

  • Dans AMO, vous avez la possibilité d'identifier votre extension comme expérimentale ou publier une  version beta ou une autre version non finale. Si vous marquez votre extension comme expérimentale, elle est répertoriée dans AMO, de sorte que tout utilisateur peut la trouver, mais avec un profil inférieur. Une fois que vous êtes satisfait que l'extension soit prête pour un public plus large, vous pouvez désactiver le drapeau expérimental et votre extension sera répertoriée comme normale dans AMO. 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 Development Channel de la fiche de votre extension ou indiquer à vos testeurs le lien à utiliser pour installer votre extension.The development channel section of an extension's listing page, offering access to alpha and beta versions for testing.Une fois que vous êtes satisfait de votre mise à jour, vous pouvez la publier en tant que nouvelle version de votre extension.
  • Si vous souhaitez distribuer votre extension à des utilisateurs en dehors d'AMO, vous pouvez trouver les instructions pour le faire, ainsi que les instructions d'installation que vous devez fournir aux utilisateurs, dans l'article sur les modules complémentaires Sideloading. N'oubliez pas que, contrairement à la distribution via AMO, vous devrez envoyer aux utilisateurs des versions mises à jour de votre extension à mesure que vous apporterez des améliorations.
  • Utilisez le mode de conception responsive pour tester votre extension pour son comportement sur d'autres tailles d'écran et types d'appareils.

Étiquettes et contributeurs liés au document

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