We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

アドオン

ユーザー体験の成功事例

この翻訳は不完全です。英語から この記事を翻訳 してください。

最良の Firefox 拡張機能はユーザーにとって、ニーズに対処する新機能や能力を与えます。ニーズへの対処が、ユーザーがよりスマートに、より効率的に働いたり、そのブラウザー体験をもっと楽しむのに役立ちます。

またユーザーが拡張機能を使うのにすばらしい体験をして、その結果すばらしいフィードバックを返したり、addons.mozilla.org (AMO) で高評価したりするのを確実にしたいでしょう。

ソフトウェアを使えるものにすることについていろいろ書かれています。この主題について初めての場合、始めるのに良い場所は Jakob Nielsen’s Usability Heuristics. です。拡張機能開発が初めてでも熟練のプロでも、Nielsen’s Heuristics をtユーザー体験(UX)をテストする時に使うのをお勧めします。

つまり、ここでは Firefox 固有のブラウザー拡張機能 UX 機能についての詳細を扱い、あなたのユーザーを喜ばせるような拡張機能の作成に役立つ助言や提言を提供します。

Firefoxらしくする

ユーザーはFirefox をある理由ために選んでいて、拡張機能の哲学、機能、ルックアンドフィールがFirefoxのそれとマッチしているために選んでいるかもしれません。

デザインの価値

Firefox ユーザーのニーズに最も合わせるには、Firefox の価値に合わせます。

Firefox Design Values では、ユーザーのプライバシーと主権を尊重して驚かさないと述べています。ユーザーが望むスマートなデフォルト機能で開始して、体験をフルコントロールできるような個人設定にカスタマイズできるようにしています。デザインにユーモアと斬新性を与えて細部、品質、パフォーマンスにも注意を払っています。我々にとってグローバルな世界のローカルな違いは重要で、明確な言語でウェブが理解できるように手助けします。

ルックアンドフィール

拡張機能ができるだけ長い間 Firefox にフィットするには、Firefox Photon Design Systemに従います。Photon に従うことで、拡張機能が Firefox の体験と統合されて人々に使いやすくなるのが確実となります。

焦点をあわせ続ける

拡張機能は1つのユースケースを中心にしており、ユースケースがターゲット顧客の方向をなるべく向いているのがベストです。1つの関数か、ブラウザーに密に関連した関数や、ブラウザーの1つの機能やウェブページを変更するものであるべきです。拡張機能の機能や目的が3つの(短い)文かそれ以下で簡単に通信できるかを問い詰めることで判断してください。

拡張機能の短い要約は AMOに掲載する時にも大変便利です。詳しくは Make sure your summary is just long enough を見てください。

すぐ始められる

拡張機能がインストール後すぐに使えるのを確実にしてください。主なユースケースに最適化されているべきで、大半のユーザーがカスタマイズの必要なく期待通りに使えるべきです。

ユーザーが詳しいマニュアルや、その他のコンテンツを読んだり、それらを見て拡張機能を設定して使うのを期待しないでください。それをすることは拡張機能が始められてないことになり、そうなると悪いレビューの結果となるかもしれません。

ユーザーが必要なものを必要な場所で得られるようにする

Choosing the right way or combination of ways to make your extension's functionality available to the user can have a significant impact on usability. Asking a few simple questions about your extension’s functionality can quickly guide you to the right choices:

拡張機能はほとんどのウェブサイトとウェブページで動作しますか?

If your extension provides the user with features they can use on almost every website or page, give the user access to it from a toolbar button using the browser action. This might include providing access to your image editor or opening a page from your website.

Where you have several features you want to give the user access to, you can add a popup to the button.

拡張機能は一部のウェブサイトとページだけで動作しますか?

If your extension offers a feature for a type of web page or specific domains, give the user access to it from an address bar button using a page action. This might include providing access to your RSS reader on pages with RSS feeds or providing an extended feature to pages on your website.

Where you have several features you want to give the user access to, you can add a popup to the button.

拡張機能は複数のウェブページで情報を表示したりアクションを提供しますか?

If your extension includes information or actions that a user would want immediate access to while viewing any web page, use a sidebar. This might include notes the user can make about a page’s content or a feature offering various font substitutions to improve readability.



拡張機能は特定のページコンテンツ、またはその他のブラウザー機能だけに機能を提供しますか?

If your extension offers features the user might want to access in context, add them to an appropriate context menu. This might include offering access to an image editor on the image context menu or offering extended copy features on the context menu for selected page content.

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

拡張機能はユーザーが調節できる設定を持ちますか?

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

拡張機能は情報をたくさん取得したり現在のタブ以外でコンテンツを表示したりしますか?

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.

拡張機能はユーザーがウェブページやコンテンツを検索するのを助けますか?

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.

拡張機能は開発者にツールを提供しますか?

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

ユーザーに情報を与え続ける

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.

ユーザーに何かが起こる前に、それを知らせる。

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

ブラウザーアクションのバッジは控えめに

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
  • Warning: yellow
  • Error: 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.

テスト、テスト、またテスト

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.

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3
最終更新者: Uemmra3,