看看實際效果
使用者流程圖範例
同一款工具，四種需求。下方每張圖都是實際產生的成果。
輸入內容
建立由上而下的行動銀行重設密碼使用者旅程：開啟應用程式、選擇「忘記密碼」、輸入客戶 ID，並收到一次性密碼。若一次性密碼無效，導向銀行客服與帳戶復原審查。若有效，建立新密碼、選擇性註冊 Face ID 或指紋、登入、收到安全性警示，並恢復帳戶存取權。
接著試試在傳送一次性密碼前加入裝置辨識檢查。將一次性密碼失敗流程改為嘗試三次後鎖定帳戶。
流程圖 · Sugiyama layered DAG + orthogonal routing · schematex-flowchart
產生的圖表
什麼是使用者流程圖
使用者流程圖呈現使用者在產品中達成目標所經過的路徑，將畫面或操作與選擇、錯誤、迴圈及成功結果連結起來。
設計與產品團隊會使用使用者流程，在開發前確認每條路徑都容易理解。流程圖能讓團隊更容易討論死路、遺漏狀態與意外分支。
- Standard
- Sugiyama layered DAG + orthogonal routing
- Engine
- schematex-flowchart
- Editable
- Double-click text, drag nodes
- Export
- SVG · PNG · PDF
適用對象
誰會使用使用者流程圖
在線框稿或原型定稿前，檢視導覽路徑與畫面狀態。
規劃易用性研究時使用任務路徑，並記錄參與者可能卡住的位置。
定義功能時，共同檢視結帳選擇、錯誤與結果。
運作方式
三個步驟製作使用者流程圖
01
描述需求
寫一段話就能開始。
“建立由上而下的行動銀行重設密碼使用者旅程：開啟應用程式、選擇「忘記密碼」、輸入客戶 ID，並收到一次性密碼。若一次性密碼無效，導向銀行客服與帳戶復原審查。若有效，建立新密碼、選擇性註冊 Face ID 或指紋、登入、收到安全性警示，並恢復帳戶存取權。”
02
查看圖表
由合適的繪圖引擎產生。
03
提出修改
每次修改都會保留版本。
在傳送一次性密碼前加入裝置辨識檢查。
V2 · DRAWN FROM V1, NOTHING RETYPED常見問題
常見問題
什麼是使用者流程圖？
這是呈現使用者在網站或應用程式中完成任務時所經歷步驟與決策的流程圖，可以包含畫面、操作、錯誤與結束狀態。
使用者流程圖應包含哪些內容？
包含起點、每個重要畫面或操作、決策點、替代路徑、錯誤，以及使用者想要達成的結果。
使用者流程和使用者旅程地圖有什麼不同？
使用者流程著重於產品導覽與決策；使用者旅程地圖範圍更廣，通常也包含產品外的目標、感受與接觸點。
什麼時候應該製作使用者流程圖？
設計新任務、變更複雜流程、準備易用性研究，或向工程團隊與利害關係人說明導覽時，都適合製作使用者流程圖。
相關工具
