用戶體驗設計的「WTF」比你想像中更為重要

毫無疑問，在設計數碼產品時， 用戶體驗設計 (User Experience Design) 是令你的產品變得更好的關鍵過程之一。

在 用戶體驗設計 過程的多個階段中，都會出現「用戶流程」 (User Flow) ，即通過用戶流程圖表定義最終用戶的目標、操作和期望。這是從用戶角度（還記得用戶為本設計嗎？），確立產品功能和特性的關鍵步驟。

試想一下，當一個潛在買家嘗試在網上商店作一次性購物，卻被要求註冊帳號。這些額外和繁瑣的步驟足以使買家卻步，退出頁面。

因此，在設計任何用戶界面（User Interface）或原型前應先定義What’s The Flow（在標題中縮寫為WTF），即每一步的用戶流程，方可確保所開發的產品能在適當的時間為適當的用戶發揮適當的功能。

用戶流程：

• 用戶為實現有意義的目標而採取的一系列步驟

• 用於傳達用戶在使用應用程式或網站過程中的各種預期頁面流程和操作

• 以直觀的圖表說明每個步驟的操作

繪製用戶流程圖的好處

1. 易於表達和溝通 提供有關界面每一步分工的視圖（例如購買、登錄、註冊等）。 允許產品負責人（Product Owner）或團隊成員以最有效的形式可視化用戶流程。

視像化登入流程，令用戶流程一目了然

2. 評估操作流程以進行改進 通過評估和省卻不必要的步驟來提高流程的易用性，從而提高界面的效率並提高用戶轉化率（例如註冊帳戶或購買產品）。

驗證電子郵件地址和密碼可一步完成

3. 為用戶創建直觀的界面 幫助識別用戶流程中的弱點，方便查看哪些選項可用來幫助用戶省時地完成任務。

登錄失敗後應該轉向到“重置密碼”頁面嗎？ 還是有其他合適的選擇？

用戶流程圖開發階段

1. 用戶故事（User Stories）: 從產品用戶的角度對產品特性進行簡短的描述

2. 操作流程（Task Flow）: 著重於用戶如何執行指定任務的單一流程

3. 線框流程（Wire Flow）: 使用單獨的頁面佈局傳遞頁面到頁面的順序

4. 用戶流程（User Flow）: 用流程和單獨頁面佈局傳達所有的路徑

用戶流程圖的元素

流程圖中的每個節點（Node）都用不同的形狀表示，每個形狀表示一個特定的過程：

流程圖最常用到的元素

繪製流程圖的最佳做法

1. 使用均稱大小和間距盡量使所有流程圖符號的高度和寬度相同（不適用於故意縮小的流程圖符號）。 嘗試使符號之間的水平和垂直間距保持均稱。

2. 一致的流向 流程圖應由上而下或從左至右（如是右至左文字便應從右至左）。避免在同一流程圖中混合從上而下和從左至右的流向。

3. 一致的決策符號分支方向 對於“YES”（決策符號右側）和“NO”（決策符號底部）使用一致的流向。

4. 合併流線以簡化外觀 頁面經常具有多於一條隨後的流線。通過合併流線來提高可讀性，用以傳達層級和次序。

5. 使用子流程（Sub-flows）或連接器節點 如果流程太長而導致用戶流程超出頁面，可使用子流程或連接器節點（標記為圓圈）作為從流程的一部分到另一部分的轉換點。

6. 避免選用過多顏色 使用過多的顏色可能令畫面失去焦點，分散讀者的注意力。 顏色用於幫助讀者識別和分類資源，並重點顯示重要的用戶操作。

7. 避免混亂的用戶流程 通過使用跳線或圓角連接線連接符號，避免混亂。

Hop-line

Rounded corner connectors

8. 提供符號圖例 如果所使用的符號已超出了基本符號（過程，終止符，決策，文檔），則應包括流程圖例以便描述符號、形狀和顏色的含義。

坊間有許多可用於設計用戶流程圖的在線工具。 當中大部分都支援遷距協作功能，以鼓勵團隊協作或允許客戶/團隊共同創建。 以下是一些在線工具讓大家輕鬆繪製流程圖，內建大量免費功能選項，從而幫助 大家入門。

1. Draw.io

2. FlowMapp.com

3. Lucidchart.com

本文章的靈感來自Medium.com上Alexander Handley的文章，並引用了部分內容。GreenTomato Academy現正開辦業務設計證書課程。 通過本課程，您可以通過學習UX設計的實用概念和技術以及設計用戶流程圖來提升UX技能。

其他相關工作坊及課程:

• UX設計原型製作及可用性測試

• Adobe XD UX/UI 設計初階