Modules

Expérience utilisateur bonnes pratiques

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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

Does my extension have settings the user can adjust?

If your extension enables the user to change and save settings that affect the behavior of the extension, use an options page to provide a standard Preferences link to settings from the Add-on Manager.

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

Does my extension need to gather a lot of information or display content in addition to the current tabs?

Where your extension needs to gather or display significant amounts of information (more than is suitable for an alert or would benefit from additional formatting) use bundled web pages to deliver forms and similar content.

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

Does my extension try to help the user find web pages or content?

Where your extension includes a use case to locate web pages or content, for example, offering a site specific search, use address bar suggestions to deliver those recommendations.

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

Does my extension offer tools for developers?

Where you are providing tools for developers, add them to the Firefox developer tools using developer tools panels.

Keep the user informed

Ensuring the user knows what will happen, is happening, and has happened in your extension is an essential part of building trust and ensuring a happy user.

Tell the user what will happen, before it happens

Users should understand what will happen when they click a button. In addition to a meaningful, descriptive button label, provide tooltips that describe the action that the button will perform.

Do not put the name of the extension alone in the tooltip, unless it is descriptive of the action the button will perform.

Also, do not use the tooltip for any other types of information such as elaborate statistics about your extension. Keep the tooltip content simple and focused on what will happen when the user clicks the button.

If it is really important and the user has wandered away, notify them

If your extension has completed a critical, long running background task, when the task completes use the operating system’s native notifications to update the user. This can be useful where the user may not be focusing on the extension, or the browser, when the process finishes. However, use sparingly. If it is sufficient for the user to discover that a process has completed when they return to the browser or extension, do not use notifications.

Use browserAction badges sparingly

You can add a badge over the toolbar icon of a browserAction, but do so sparingly to inform users about important events. Do not use them to provide regular or persistent status updates.

When it comes to coloring a badge, using one of four colors for notifications of different severity is recommended:

  • Casual: blue
  • Success: green
  • Error: yellow
  • Warning: red

Use of Firefox colors is suggested, for more details see Firefox Colors. However, for compatibility with Chrome and Opera free color selection is supported.

Test, test, and then test again

Testing is a vital part of creating an outstanding UX for your extension. There are two key aspects of testing your UX:

  1. Test across devices and platforms to ensure your extension works and performs well in as many places as possible. This includes considering factors such as the user’s screen size and resolution—just because your extension looks good and is easy to use on your desktop monitor does not mean it looks as good and works as well on a smaller laptop screen, or, indeed, vice versa.
  2. Test with as many users as possible. Do not assume that you know your audience, as people’s backgrounds and experience can make a huge difference to how they interact with your extension. So, allow for user testing as part of your extension’s development.

Testing tips:

  • In AMO you have the option to identify your extension as experimental or publish a beta or other non-final release. If you flag your extension as experimental it is listed in AMO, so that any user can find it, but with a lower profile. Once you are happy that the extension is ready for a wider audience, you can turn off the experimental flag and your extension will be listed as normal in AMO. If you have a published extension, you can use the Development channel to offer an alpha or beta version for testing. You will need to direct your testers to the Development Channel of your extension’s listing or let your testers know the link to use to install your extension.
    The development channel section of an extension's listing page, offering access to alpha and beta versions for testing.
    Once you are happy with your update, you can publish it as the new release version of your extension.
  • If you want to distribute your extension to users outside AMO, you can find the instructions for doing so, and the installation instructions you need to provide users, in the article on Sideloading add-ons. Remember that, unlike distribution through AMO, you will need to send users any updated versions of your extension as you make improvements.
  • Use the Responsive Design Mode to test your extension for its behavior on other screen sizes and device types.

Étiquettes et contributeurs liés au document

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