用戶體驗設計清單

在設計過程中，您的產品中的一些缺陷會被忽視。 這些小（或有時是大）的事情會對用戶在使用您的軟件時的體驗造成很大影響。 我們整理了一份要點清單，供您在設計簽署之前檢查。

請注意，並非所有這些要點都適用於所有產品，但通常，這些是最相關的。

交互設計

01 – 重複動作或頻繁活動感覺輕鬆

重要性：針對相同輸出的重複操作（例如，用相同的信息填寫不同的表單）是一項艱鉅的任務，無助於用戶更快或更好地實現目標。 用戶也可能會嘗試找到解決方法：例如，尋找可以幫助他們更快/更好地做到這一點的競爭對手。

如何測試它：您應該從分析所有產品的流程並觀察用戶的行為開始。 您要確保，如果存在重複操作，有一種方法可以促進它們：使用以前輸入的信息的選項。

02 – 用戶可以輕鬆地從錯誤中恢復

重要性：通常情況下，用戶會執行非預期的操作或未帶來預期結果的操作——允許他們返回並重試意味著他們不會感到沮喪，並且會輕鬆恢復並繼續前進。

如何測試它：首先，確保您的導航系統允許返回，並且可以撤消操作。 然後，在進行可用性測試時，創建用戶最有可能執行錯誤操作的場景，並檢查他/她是否可以輕鬆恢復。

03 – 用戶根據他們的專業水平得到充分支持

重要性：確保產品中的新手用戶擁有流暢的學習體驗非常重要。 但是，一旦他們已經熟悉了產品，就應該讓工具來幫助他們更快地通過流程。 這兩種情況都提高了可用性和保留率。 例如，專家用戶的快捷方式，新手用戶的工具提示等。

如何測試它：首先，檢查你是否有適合這兩種受眾的工具。 然後，對新手和專家用戶進行可用性測試，看看這些工具是否被正確使用。

04 – 訪問幫助不會妨礙用戶進步

為什麼重要：用戶在遇到產品的某個部分時會尋求幫助。 重要的是在線或離線幫助是額外的，並允許用戶從他們離開的地方繼續工作。

如何測試它：創建測試場景，用戶會在其中尋求幫助並查看他們的工作流程和進度是否被中斷。

視覺設計

05 – 不超過三基色

為什麼重要：這不是一個固定的規則——有時，對於特定情況，可以使用三種以上的原色。 但是，請記住，組合三種顏色已經很困難，因此在大多數情況下，應該避免更多。

如何測試：確保您在設計產品時使用的調色板不超過三基色。

06 – 僅顏色不用於傳達層次結構、內容或功能

為什麼重要：擁有可訪問的產品並不是一個優點——這是必須的。 色盲等視覺障礙人士僅依靠顏色來傳達層次結構、內容或功能。 這意味著他們將無法使用您的產品，並且將被排除在外。

如何測試： colorfilter.wickline.org 將讓您在網頁頂部放置一個顏色過濾器，並針對不同類型的色盲進行測試。 您還可以截屏您的產品並將其轉換為圖像編輯器上的灰度，看看您是否可以輕鬆區分顏色。

07 – 視覺層次結構將用戶引導至所需的操作

為什麼重要：用戶依靠產品的層次結構和線索來知道該做什麼和去哪裡——理解這一點並正確引導他們使用該層次結構是至關重要的。

如何測試它：了解產品內部的流程是如何工作的，以及它的關鍵操作是否受到視覺層次結構的激勵。

08 – 視覺層次結構頂部的項目是最重要的

為什麼重要：視覺層次結構允許用戶快速瀏覽信息，根據他們的即時需求對內容進行優先級排序。 靠近視覺層次結構頂部的項目必須對業務最重要並且與用戶最相關。

如何測試它：截屏您的數字產品，然後將該屏幕截圖高斯模糊到大約 5px 的半徑。 查看結果時，您會立即看到層次結構並註意到哪些元素脫穎而出。 這些對企業和用戶來說是最重要的嗎？

09 – 主要動作在視覺上與次要動作不同

重要性：擁有不同的主要和次要操作意味著用戶在與您的產品交互時不會感到困惑，並且不太容易出錯。 例如，“提交”和“取消”必須明確區分。

如何測試它：在進行可用性測試時，觀察常見的錯誤，這些錯誤不是由用戶的意圖引起的，而是由於主要和次要操作的區別不大。 此外，在審查設計時，請確保顏色、大小、位置和其他元素能夠區分操作。

10 – 交互元素不是抽象的

重要性：在使用新產品時，用戶會根據以前使用其他數字產品的經驗產生一系列期望——例如，按鈕應該是什麼樣子以及它們應該如何工作。 滿足這些期望意味著您不會製造不必要的摩擦。

如何測試它：首先，檢查您的產品，尋找不使用常見模式的區域。 例如，看起來不像鏈接的鏈接。

11 – 以視覺上不同的方式確認表單提交

為什麼重要：必須讓用戶確認操作是否成功執行。 例如，在提交表單後，以彩色橫幅形式顯示的明確確認消息將意味著用戶可以繼續下一個任務。

如何測試：檢查產品中用戶輸入信息的所有區域。 用戶輸入完成後，觸發有關該操作是否成功的確認。 確保關於最終狀態的反饋非常清楚。

12 – 警報消息一致

它是什麼：警報消息具有相同的視覺風格，並以相同的方式出現在相同的位置。

為什麼重要：擁有一致的警報消息意味著用戶將始終了解立即值得關注的內容。 與警報不一致意味著每次彈出新警報時都會產生額外的心理負擔。

如何測試：確保警報消息具有相同的視覺風格，並且它們的位置相似或相同。

13 – 警報消息在視覺上是不同的

為什麼重要：通過確保警報消息與其他屏幕元素明顯區分開來，用戶實際上可以注意到它們並/或對其採取行動。

如何測試它：在自己檢查視覺差異之後，看看用戶如何對可用性測試中的警報消息做出反應。

信息架構

14 – 導航是一致的

重要性：用戶定位和瀏覽您的產品的方式直接影響他們是否能夠完成他們的目標，而不管他們當前的頁面如何。

如何測試它：檢查您的信息架構文檔並確保導航在每個頁面上都可以訪問，並且它不會更改或消失。 在深入了解視覺設計之前，請嘗試卡片分類或樹測試，以確保您的信息架構路徑盡可能直觀。

15 – 成長空間

為什麼重要：每次出現新功能或內容時，您都無法重新設計產品的導航和信息系統。 導航菜單和整體佈局需要在不中斷的情況下支持更多類別/主題。 具有增長空間的設計意味著主要的設計和開發工作可以輕鬆地跨界面擴展。

如何測試它：向所有利益相關者詢問內容如何隨著時間的推移在產品中增長。 你會支持更多的靜態內容嗎？ 該架構是否需要支持視頻？

排版

16 – 使用的不同類型族不超過兩個

為什麼重要：這不是一個固定的規則：有時可以完成兩個以上。 但一般來說，匹配兩個以上並不是一件容易的事。 出於可用性和視覺目的，堅持兩個可以簡化您的排版層次結構，從而提高理解力。

如何測試它：確保您的設計沒有混合兩個以上的類型系列。 如果您還確保您選擇的家庭是正確匹配的，這將有所幫助（在此處了解更多信息）。

17 – 用於文本內容的字體大小至少為 12 像素

為什麼重要：同樣，這不是一個固定的規則——理論上，你可以為特定目的使用較小的尺寸——但一般來說，12 像素以下的尺寸會嚴重降低可讀性。

如何測試它：檢查所有內容並確保用於它們的字體大小至少為 12 像素。

18 – 為標籤、標題或首字母縮略詞保留大寫單詞

重要性：眾所周知，限制大寫單詞的使用有助於理解——它在視覺上不那麼繁重，更容易讓用戶消化。 它應該專門用於強調或非常有限的情況——例如首字母縮略詞。

如何測試它：運行徹底的內容檢查並確保大寫單詞僅限於標題、標籤或首字母縮略詞。

19 – 使用不同的字體樣式或系列將內容與控件分開

為什麼重要：需要有明確的指標來說明什麼是內容和什麼是控件——即用戶可以與之交互的內容。 這些指標可以是大小、顏色、定位、字體等。字體是一個重要的指標：使用不同的樣式或系列意味著用戶不會感到困惑，並且很容易識別可以與之交互的內容。

如何測試它：識別產品中的所有控件，並確保它們從內容中脫穎而出。 在運行可用性測試時，請注意用戶是否在與控件交互時遇到困難。

20 – 字體大小/重量區分內容類型

為什麼重要：它嚴重影響可讀性和理解力。 明確區分標題、副標題和段落可以減少消化該內容時的心理負擔。 它還具有視覺上的好處——它看起來和感覺更好。

如何測試：在查看產品內容時，確保標題、副標題和段落使用不同的字體大小和粗細。

用戶界面

21 – 接近和對齊

重要性：用戶傾向於對彼此靠近的項目進行分組（功能或上下文）。 導航欄就是一個很好的例子。 遵循這種模式並對連接的項目進行分組意味著用戶可以立即理解您的界面。

如何測試它：尋找功能相似的項目並檢查它們是否（如果可能）組合在一起。

22 – 多步驟工作流程的進度指示器

重要性：特別是對於多步驟工作流程，用戶很容易感到不知所措或想知道要多久才能最終完成。 進度指示器可以幫助他們定位自己，但更重要的是，它可以創造成就感並降低掉率。

如何測試它：檢查產品內部的所有流程，其中有不同的步驟來完成某事，然後確保通過指示器指示進度。

23 - 前景元素（如內容和控件）很容易與背景區分開來

為什麼重要：對視力障礙者很重要。 它還改善了用戶的學習曲線和理解力。 清晰的區別有助於導航，增加對按鈕的關注，並總體上提高可用性。

如何測試它：截屏您的產品並將該屏幕截圖的高斯模糊到大約 3px 到 5px 的半徑。 查看結果時，您能否輕鬆分辨前景中的內容和背景中的內容？

恭喜您通過列表！ 然而，這還不是結束。

您的產品現在更加穩固，並且您可能在幾個方面有所改進——例如，它現在更易於訪問——但請記住始終保持測試、收集用戶反饋並繼續迭代。