正在翻譯中。

好的 Firefox 套件讓用戶使用新功能或解決他們的需求。解決需求讓用戶能更聰明、更有效率地做事,或者可以讓他們有更愉悅的瀏覽體驗。

你會希望使用你套件的用戶有很好的體驗,並且在 addons.mozilla.org(AMO)  上給你很好的回饋與評價。

已經有很多關於軟體可用性的文章。如果你對這塊很陌生,建議你可以從 Jakob Nielsen 的 可用性啓發。不論你是菜鳥或千錘百鍊的老手我們都建議,當你測試用戶體驗(UX) 時把那作爲檢查表。

好的,我們來聊聊跟 Firefox 以及瀏覽器套件UX功能有關的細節,給你些能幫助你做出滿足用戶的忠告或建議。

 

像個火狐

你的用戶基於某種原因選擇了 Firefox,所以把你的套件哲學、功能、外觀以及感受設計得符合 Firefox。

設計價值

滿足 Firefox 用戶,符合 Firefox價值。

Firefox設計價值提到尊重用戶隱私及權力、絕不擅用。我們讓用戶能夠選擇想要的功能、自訂自己的偏好,如此一來他們能完全掌控自己的使用體驗。我們的設計是幽默、與衆不同的,並且把精力放在細節、質量以及效能。部分與全體的差異對我們來說至關重要,我們幫助人們用清晰的語言使網路井然有序。

外觀與感受

讓你的套件總是適合 Firefox 以及Firefox光子設計系統。遵循光子可以保證你的套件跟 Firefox 整合在一起並且更易用。

保持專一

套件最好圍繞著單一用途,解決目標用戶群的需求或。它應該替瀏覽器增加一個或一組緊密相關聯的功能、修改原有的功能或是修改頁面內容。如果你能透過三句(或更少)話來傳達這個套件的功能與目標,表示你做到了。

簡短的套件概述在你在AMO建立列表時也很有幫助,更多詳情,請查看確保你的概述長得剛剛好

立刻開始使用

確保你的套件能夠在安裝完後立刻使用。它應該要針對主要的用途去特化,且不需要任何設定就能夠如預期般運作。

別期待你的使用者會詳細閱讀教學或其他內容或要求他們作設定。如果你這麼做,他們永遠也不會開始使用你的套件,而如果他們真的做了,你的評價可能不會太好。

對症下藥

選擇對的方式或組合來使你的套件功能對用戶來說是好用的。透過幾個關於套件功能的問題來指引你做對的選擇:

我的套件在大部分的網站/頁面都是可用的嗎?

如果你套件提供的功能可以在幾乎每個網站或頁面使用,讓用戶透過工具列按鈕使用它。像是開啓圖片編輯器或是打開你的網站的頁面。

在你想提供多個功能的地方,你可以在按鈕處添加一個彈出視窗

我的套件只能在某些網站及頁面使用嗎?

如果你的套件功能僅限某類型的網頁或網域運作,讓你的用戶透過網址列按鈕使用。像是使用頁面的RSS閱讀器或提供頁面的擴充功能。

在你想提供多個功能的地方,你可以在按鈕處添加一彈出視窗

我的套件需要與頁面平行地顯示資訊或提供功能嗎?

如果你的套件包含了用戶會想在任何頁面立刻存取的資訊或功能,用側邊欄。這可能包含了對頁面內容做筆記或提供各種字形更換以增強可讀性的功能。

我的套件提供針對頁面內容或瀏覽器增強的功能嗎?

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.

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

文件標籤與貢獻者

標籤: 
此頁面的貢獻者: 0711kps
最近更新: 0711kps,