怎麼規劃一份 User Flow Diagram

最近在研究一些 PM 所需要具備的能力，需要產出的文件很多，諸如：PRD、MRD、Roadmap、User Flow Diagram... 等，為此我參閱了一些文章，綜合統整下才逐漸形成比較完整的認識，或許我們都有做過「類似 User Flow Diagram」的東西，但其實它確切的定義為何？有哪些種類？全部的重點是否我們都抓到了呢？即便是做過多次流程規劃的我也不是非常肯定。

我們今天就來談談如何建構出一份好的 User Flow Diagram 吧！

首先，到底什麼是 User Flow？

1. 羅列所有 user 能夠在你的系統上能完成的操作，以及要完成這些操作會經過哪些步驟？有哪些邏輯判斷？步驟間的因果關係？ 例如當使用者到達你的 APP 進入頁面，先要求他輸入帳號和密碼，才能看到個人專屬的推薦內容，如果還沒有註冊，便引導他去註冊... 等等，但 User Flow 不是用文字，而是用圖像的方式來表示這些資訊。
2. User Flow 可以只是單純的流程邏輯圖，也可以包含比較「低解析度」的 wireframe 來示意，差別是前者只以文字描述動作，但後者則透過 wireframe 示意要觸發後續步驟要點擊哪個介面、介面的形式、介面的位置大概在哪裡... 等規劃（可見本篇最後兩張範例圖）。

為什麼要畫 User Flow Diagram？

1. 透過視覺化的方式，幫你想清楚使用者想透過你的產品達成什麼目的，當中要包含哪些環節（頁面、階段... 等），並協助你自己清點流程當中是否有漏掉的環節。
2. 和開發、UX 團隊的人溝通你對整個使用流程的規劃，視覺化有助於後續的協作。
3. 在動手開發之前藉由此圖和利益相關者討論、蒐集反饋意見，確保你的設計確實能夠有效率地達到使用者想達成的目標，這時候的調整成本會比真正投入開發後低很多。

如何建構 User Flow Diagram？

參考下列步驟：

1. 界定公司的目標和使用者的目標：產品背後都會有公司想達成的戰略目標，並可將其化為想要使用者去做的行為（例如：購買產品、訂閱電子報），這個通常比較清楚，但對比使用者來操作你的產品想達成什麼，兩者是否一致，這個就比較難，需要的是換位思考和數據分析（才能佐證我們的想法正確）。當然，公司設想的產品不能完成使用者想要的，或是根本無此需求也滿常見的，但這就是市場和使用者研究的範疇，這邊先假設使用者要的和我們的認知一致。（延伸話題：使用者歷程和接觸點分析）
2. 分析你的用戶來源：包含直接流量、搜尋、廣告、社群媒體、轉介網站、Email，不同的獲客來源使用者的心態可能不同（User Flow 的起始點也就不同），而這會是設計他們 User Flow 必須要放在心上的。
3. 釐清用戶需要哪些資訊以及在哪個時間點需要：此步驟該思考用戶需要哪些資訊，以及在哪個時間點該提供這些資訊給他最適當。儘管原文沒有說，但從前後文來看，這個步驟不只是思考要提供什麼資訊，也要規劃使用者想達成各種目的主要的途徑，我一般會用「環節」來指稱途徑上的每個步驟（節點），每個環節就是一個系統狀態（如：使用者進入首頁畫面）而當他做了某些動作便會觸發進入下個環節（如：輸入帳密點「登入」便會進入個人主控台），這些環節的終點會導向使用者想完成的動作。
4. 著手繪製 User Flow：在釐清使用者動機、想達成目的以及列舉各種操作的途徑後，便可以開始繪圖，目前線上有很多應用可以用來畫這種圖，像是 Lucidchart 即為一例（7.9 USD/mo），如果不需要太過專業的功能，可以使用 Google Drive 提供的 diagrames.net 即可。不只是界定所有的環節，也要標註哪些時候要提供使用者什麼訊息或驚喜。如果你對於介面設計有一定的概念，這邊甚至可以提供粗略的 wireframe 出來，這樣傳達的就不只是抽象的描述，而是畫面佈局、介面型態、大概的位置... 等近一步的資訊。每當規劃一個頁面時，想想他在這個頁面上必須要進行的操作，而這些操作對應的是哪個流程上的環節。
5. 分享、蒐集反饋意見、結稿：將圖分享給 stakeholder（利益相關者，這邊應指公司內和此案子相關的人，不包括開發團隊），聽聽他們的反饋意見，消化後再去調整，這個視覺化的工具有利於快速讓別人了解你的設計。

以下為單純文字描述的案例：

以下為簡單的 wireframe 應用在 User Flow Diagram 的範例：