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

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

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

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

 

像個火狐

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

設計價值

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

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

外觀與感受

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

保持專一

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

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

立刻開始使用

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

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

對症下藥

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

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

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

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

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

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

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

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

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

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

如果你的套件提供用戶會想在快捷選單使用的功能,把它們加到適當的快捷選單。這可能包含在圖片的快捷選單上開啓圖片編輯器、或對選取的頁面內容提供額外的複製功能。

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

我的套件有用戶可以調整的設定嗎?

如果你的套件能讓用戶修改影響套件行爲的設定,用選項頁面來提供一個經由套件管理器進入的標準偏好設定連結。

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

我的套件需要在另外的頁籤集中一堆資訊或顯示內容嗎?

當你需要收集或顯示一定量的資訊(比警示更適合,並且可以提供額外的格式),用集成頁面提供表單與相似的內容。

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

我的套件試圖幫助用戶尋找網頁或內容嗎?

如果你的套件包含搜索網頁或內容的功能,例如,提供一個針對特定網站的的搜索,用網址列建議來傳送這些建議。

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

我的套件提供開發工具嗎?

如果你提供開發者使用的工具,透過開發工具面板把它們加到Firefox的開發者工具裡。

持續地告知用戶

確保用戶知道”會發生什麼事“、”正在發生什麼事“、”發生過什麼事“是替套件建立信任、使用戶愉快的基本。

告知用戶接下來會發生什麼

用戶應該知道當他們按下一個按鈕會發生什麼事情,除了有意義、有描述性質的按鈕標籤外,提供一個描述按鈕會做什麼的工具提示框。

提示框裡不要只寫套件的名字,除非那樣就足以描述按鈕的行爲。

不要用工具提示框呈現套件的詳細數據。讓提示框保持簡單並專注在按鈕被按下時會發生的行爲上。

如果用戶神遊去了別的地方,但真的有重要的訊息,提醒他們

當你的套件完成了一個重要的、長時間執行的背景任務時,透過作業系統原生的通知來提供用戶最新的資訊。當某個處理流程結束而用戶並沒有專注在套件或瀏覽器上時,在這種場景下通知會非常有用。然而,請謹慎的使用。如果用戶回到瀏覽器或套件、自己發現處理流程已經結束就夠了,那你就別用通知了。

節儉地使用工具列按鈕勳章

你可以在工具列按鈕的圖示上加個標誌,但只在告知用戶重要事件時使用。別在一般的、持續性的狀態更新上用它。

當你要替標誌上色,建議使用用下列四種顏色來表示不同的重要性:

  • 一般: 藍色
  • 成功: 綠色
  • 警告: 黃色
  • 異常: 紅色

推薦使用Firefox色系,更多詳情請看Firefox色系。然而,爲了兼容Chrome與Opera。

不斷測試

測試是替套件製作傑出用戶體驗極其重要的環節。測試用戶體驗有兩個關鍵的層面:

  1. 跨平臺、跨裝置地測試可以確保你的套件在儘可能多的地方都能很好地運作。這包含了考慮用戶的視窗尺寸與解析度—就算你的套件在桌機熒幕看起來很棒那也不代表它在筆記型電腦上看起來也會一樣,反之亦然。
  2. 儘可能讓更多的用戶測試。不要假設你理解你的客群,人們的背景與經驗會對他們使用套件的方式有很大的差異。所以,應該把用戶測試視爲套件開發的一部分。

測試小技巧:

  • 在套件市場中,你可以將套件標示爲實驗性質或發佈beta測試版與其他非最終釋出版本。如果你在套件市場將套件標示爲實驗性質,任何用戶都能找到它,但會是一個較低的順位。當你認爲套件準備好讓更多人使用時,你可以關閉實驗性質標籤以讓你的套件在套件市場正常的被排序。如果你有個已釋出的套件,你可以透過開發頻道提供alpha或beta版本共測試。你需要引導你的測試員到開發頻道或是讓他們知道測試套件的安裝連結。The development channel section of an extension's listing page, offering access to alpha and beta versions for testing.
    當你對自己的更新很滿意,你可以把它作爲套件新的釋出版本發佈。
  • 如果你想把套件發佈給市場外的用戶,你可以在強制載入套件找到相關教學以及需要提供給用戶的安裝教學。記住,跟透過套件市場發佈不同,當你做了改動時,必須將新版本傳送給用戶。
  • 適應性測試模式測試在不同視窗尺寸與裝置類型下的行爲。

文件標籤與貢獻者

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