Industry

使用者流程:它們是什麼以及為什麼它們在 UX 設計中很重要1 min read

Reading Time: 2 minutes使用者流程幫助 UX 團隊繪製人們如何在產品中移動的圖,在設計開始之前發現摩擦,並創建更清晰的使用者介面。了解它們是什麼,請查看使用者流程範例,並了解如何在 UX 設計中使用它們。

A UX user flow

使用者流程:它們是什麼以及為什麼它們在 UX 設計中很重要1 min read

Reading Time: 2 minutes

偉大的UX不是從像素開始的。首先要了解使用者想要做什麼、他們在哪裡進入產品、他們需要做出哪些決定以及什麼途徑可以讓他們成功的結果。

這條路徑稱為 用戶流量

使用者流程是一個人透過應用程式、網站或特定任務所採取的步驟的可視化地圖。它可以顯示完整的產品體驗,例如加入 SaaS 應用程序,也可以顯示較小的流程,例如註冊、預訂演示、訂閱新聞通訊或完成結帳。

對於 UX 設計師、產品團隊和創辦人來說,使用者流程是在致力於詳細螢幕之前設計更好介面的最簡單方法之一。它們可以幫助您了解用戶可能會感到困惑的地方、流程中的步驟過多以及您實際需要設計的螢幕。

在本指南中,我們將解釋什麼是使用者串流、如何閱讀它們、何時創建它們以及它們如何支援更好的 UX 設計。

嘗試使用人工智慧設計使用者流程

描述您想要設計的使用者流程,然後讓 Anima 將其轉換為 UX、螢幕和程式碼。

什麼是用戶流量?

一個 用戶流量 是一個圖表,顯示使用者在產品內完成目標所採取的路徑。在 UX 設計中,該產品通常是應用程式、網站、網頁應用程式或數位服務。

使用者流程從入口點開始,例如主頁、登陸頁面、搜尋結果、電子郵件連結、登入畫面或購物車。它以最終互動結束,例如建立帳戶、完成購買、提交表單、發布項目或到達確認頁面。

用戶流可以代表:

  • 完整的產品旅程,例如發現、註冊和使用新應用程式
  • 單一任務,例如重設密碼或升級計劃
  • 功能流程,例如建立專案、邀請隊友或匯出設計
  • 使用者介面流程,顯示螢幕如何在產品內部連接

目標很簡單:在詳細設計介面之前先明確使用者的路徑。

基本使用者流程結構範例

基本使用者流程結構範例

使用者流程與使用者介面流程

條款 用戶流量使用者介面流程 密切相關。

使用者流程專注於使用者實現目標的路徑。它回答以下問題:

  • 用戶從哪裡開始?
  • 他們試圖完成什麼行動?
  • 他們一路上做出了什麼決定?
  • 如果他們成功、失敗或採取不同的路線,會發生什麼事?

使用者介面流程更具體地關注螢幕、狀態、按鈕、表單和介面元素如何連接。它回答以下問題:

  • 此畫面之後是哪一個畫面?
  • 當用戶單擊此按鈕時會發生什麼?
  • 這個錯誤狀態會導致哪裡?
  • 用戶提交表單後會看到什麼?

在實踐中,UX團隊經常將兩者一起使用。使用者流程定義了路徑。使用者介面流程使該路徑在產品 UI 內具體化。

如何讀取使用者流程

使用者流程列出了使用者從入口點到最終互動所採取的步驟。每個步驟通常由一個形狀(也稱為節點)表示。節點透過顯示移動方向的箭頭連接。

大多數使用者流程圖使用簡單的視覺語言:

  • 圓形或橢圓形: 起點或終點
  • 長方形: 螢幕、頁面或操作
  • 鑽石: 決策點,例如是/否、成功/失敗或選擇路徑
  • 箭: 步之間的移動方向
使用者流程組件解釋

使用者流程組件解釋

例如,一個簡單的註冊使用者流程可能如下所示:

  1. 使用者登陸首頁
  2. 用戶點擊“免費開始”
  3. 使用者輸入電子郵件和密碼
  4. 系統檢查郵箱是否有效
  5. 用戶確認帳號
  6. 使用者到達登入畫面
  7. 使用者完成設定
  8. 使用者登陸儀表板

這種使用者流程範例可以幫助團隊在設計每個螢幕之前了解體驗。

使用者流程範例

當您將使用者流程與實際產品任務連結時,使用者流程將變得更容易理解。以下是 UX 團隊在產品規劃期間創建的一些常見使用者流程範例。

註冊用戶流程

註冊用戶流程映射了新訪客如何成為註冊用戶。

  1. 造訪登陸頁面
  2. 點擊註冊 CTA
  3. 選擇註冊方式
  4. 輸入帳戶詳細信息
  5. 驗證電子郵件
  6. 完成入職
  7. 到達產品儀表板

此流程有助於團隊減少第一次體驗中的摩擦。如果註冊步驟太多、表單欄位不明確或驗證狀態令人困惑,使用者可能會在看到產品之前就放棄了。

結帳使用者流程

結帳使用者流程映射了使用者如何從產品興趣轉向購買。

  1. 查看產品或定價頁面
  2. 新增項目或選擇計劃
  3. 查看購物車或計劃詳細信息
  4. 輸入付款資訊
  5. 確認購買
  6. 到達成功頁面或收據

此流程對於電子商務、SaaS 和訂閱產品尤其重要,因為每個額外的步驟都會影響轉換。

登入和密碼重設使用者流程

登入流程對應了回訪使用者如何存取其帳戶,包括邊緣情況。

  1. 開啟登入頁面
  2. 輸入憑證
  3. 系統驗證輸入
  4. 使用者登入成功或看到錯誤
  5. 如果需要,用戶開始密碼重置
  6. 使用者確認電子郵件
  7. 用戶設定新密碼
  8. 用戶返回產品
登入過程的使用者流程範例(任務流程)

登入過程的使用者流程範例(任務流程)

入職使用者流程

入職用戶流程映射了新用戶如何達到他們的第一個成功的產品時刻。

  1. 建立帳戶
  2. 回答設定問題
  3. 選擇模板或起點
  4. 完成第一個動作
  5. 查看成功狀態
  6. 繼續進入產品

對於人工智慧產品、設計工具和生產力應用程式來說,入門流程至關重要,因為使用者需要快速了解下一步該做什麼。

何時建立使用者串流

在設計過程的早期建立使用者流程,最好是在初始使用者研究之後和高保真 UI 設計之前。

在此階段,使用者流程可以幫助您:

  • 決定需要存在哪些螢幕
  • 刪除不必要的步驟
  • 識別令人困惑的決策點
  • 圍繞產品結構調整團隊
  • 計劃 原型 快點
  • 避免為破碎的路徑設計拋光螢幕

用戶流在產品生命週期的後期也很有用。如果現有介面表現不佳,使用者流程可以幫助您診斷人們在哪裡放棄、循環或無法完成關鍵任務。

換句話說,用戶流量不僅僅是針對新產品。它們對於改進現有產品也很有用。

使用者串流在 UX 設計中的作用

使用者流程是 UX 設計的核心部分,因為它將使用者目標與產品結構連結起來。在擔心間距、排版、視覺層次結構或組件之前,您需要了解使用者想要實現的目標以及產品如何幫助他們實現目標。

使用者流程幫助 UX 團隊完成三件重要的事情。

1.創造更直覺的介面

清晰的使用者流程使最終介面更易於理解。

在設計之前繪製流程時,您可以及早發現摩擦。也許用戶必須在獲得足夠的資訊之前做出決定。也許表格出現得太早了。也許缺少確認步驟。也許有三個螢幕,一個就足夠了。

如果流程混亂,介面也可能會混亂。

2. 評估現有介面

使用者流程是優化現有產品的好方法,這些產品可能無法如預期進行轉換或保留。如果使用者沒有轉換、啟動或完成重要任務,請繪製目前流程。

您可能會發現用戶被發送到錯誤的螢幕,要求提供太多訊息,或被迫通過與他們的意圖不符的路徑。

3. 向團隊成員和利害關係人傳達您的策略

用戶流非常適合協作。它們為設計師、開發人員、產品經理、決策者和利害關係人提供了共享的體驗地圖。

設計人員可以使用流程來規劃螢幕。開發人員可以使用它來理解狀態和邊緣情況。產品經理可以用它來澄清需求。在團隊投資詳細設計或實施之前,利害關係人可以使用它來審查體驗的邏輯。

用戶流程還可以幫助開發人員了解整體情況 最終原型背後的結構,這使得 不可觸摸 更有效率。

用戶旅程與用戶流量

用戶旅程和用戶流經常被混淆,但它們不是一回事。

一個 使用者旅程 講述使用者與產品關係的更廣泛的故事。它通常包括產品使用之前、期間和之後的使用者目標、情緒、動機、痛點和接觸點。

一個 用戶流量 專注於使用者在產品內完成特定目標所採取的路徑。

主要差異

使用者旅程 用戶流量
注重使用者更廣泛的體驗 重點放在產品內部的步驟
包括想法、感受、動機和痛點 顯示操作、螢幕、決策和結果
通常在使用者進入產品之前開始 從產品入口點開始
任務完成後可以繼續 當使用者到達最終互動時結束
通常與角色或客戶群相關 通常會對應任務或產品路徑

兩者都有用。這趟旅程可以幫助您了解使用者的背景。此流程可協助您設計通過介面的實際路徑。

如何建立使用者流程

您可以使用白板、設計工具、圖表工具或 AI 設計工具來建立使用者流程。格式比路徑的清晰度更重要。

1. 定義使用者目標

從使用者想要完成的操作開始。

  • 建立一個帳戶
  • 購買產品
  • 預約演示
  • 發佈網站
  • 邀請隊友
  • 將設計導出為程式碼

使用者流程應圍繞特定目標而不是模糊的產品領域來建構。

2.選擇切入點

決定用戶從哪裡開始。例如主頁、定價頁面、搜尋結果、電子郵件活動、應用程式儀表板、通知或共用連結。

不同的入口點可以建立不同的流。傳回的使用者和首次訪客可能不需要相同的路徑。

3.繪製幸福路徑

幸福之路是從開始到結束最簡單的成功路線。

  1. 使用者開啟定價頁面
  2. 用戶選擇計劃
  3. 使用者建立帳戶
  4. 用戶輸入付款詳細信息
  5. 用戶確認購買
  6. 使用者登陸成功頁面

這為您提供了基線體驗。

4. 新增決策和邊緣案例

真正的用戶並不總是遵循完美的路徑。新增決策點,例如:

  • 用戶是否已有帳號?
  • 表格有效嗎?
  • 付款成功了嗎?
  • 用戶選擇按月計費還是按年計費?
  • 用戶是否有權繼續?
  • 如果用戶取消會發生什麼事?

這些分支將簡單的路徑轉變為真正的 UX 設計使用者流程。

5.簡化流程

一旦繪製了流量圖,就可以尋找摩擦力。

  • 我們可以刪除一個步驟嗎?
  • 我們可以組合螢幕嗎?
  • 我們索取資訊是否太早了?
  • 下一步行動是否顯而易見?
  • 有死胡同嗎?
  • 錯誤狀態是否清晰?
  • 用戶總是知道發生了什麼事嗎?

最好的使用者流程感覺很明顯,因為複雜性已經在幕後得到解決。

使用者流程簡述

使用者流程是產品設計的結構圖。它們展示了用戶如何透過應用程式、網站或任務從入口點到最終互動。

強大的用戶流量:

  • 從明確的用戶目標開始
  • 顯示使用者的入口點
  • 映射路徑中的步驟、螢幕和決策
  • 包括重要的邊緣情況
  • 幫助團隊在詳細 UI 設計之前識別摩擦
  • 讓設計師、開發人員、專案經理和利害關係人的交接變得更容易

對於UX團隊來說,使用者流程是將使用者研究轉化為介面結構的最實用的工具之一。它們可以幫助您有目的地進行設計,而不是逐屏猜測。

常見問題:使用者流程

什麼是用戶流量?

使用者流程是顯示使用者透過應用程式、網站或產品任務所採取的路徑的圖表。它們通常從入口點開始,例如主頁或登入螢幕,並在使用者完成目標時結束,例如註冊、購買或提交表單。

UX設計中的使用者流程是什麼?

在 UX 設計中,使用者流程映射了使用者為完成目標所採取的步驟、螢幕、決策和操作。 UX 團隊在創建高保真螢幕之前,使用使用者流程來規劃產品結構、減少摩擦並設計更清晰的介面。

使用者流程和使用者旅程有什麼區別?

使用者旅程展示了更廣泛的體驗,包括使用者動機、情感、痛點和接觸點。使用者流程關注使用者在產品內完成任務所採取的特定路徑。

什麼是使用者介面流程?

使用者介面流程顯示畫面、UI 狀態、按鈕、表單和互動如何在產品內部連線。它與使用者流程密切相關,但它更具體地關注介面級路徑。

什麼時候應該創建用戶流?

在初始使用者研究之後和詳細的 UI 設計之前建立使用者流程。您也可以稍後建立使用者流程來審核現有產品、診斷流失或提高轉換率。

使用者流程的範例有哪些?

常見的使用者流程範例包括註冊流程、結帳流程、入職流程、登入流程、密碼重設流程、預訂流程、升級流程和邀請隊友流程。

為什麼用戶流量很重要?

使用者流程可協助團隊在投資詳細設計或開發之前了解使用者如何瀏覽產品。它們揭示了流程早期的摩擦、缺失的步驟、混亂的決策和不必要的複雜性。

如何讓用戶產生流量?

從使用者目標開始,選擇入口點,繪製快樂路徑,加入決策和邊緣情況,然後簡化路徑。使用圓形或橢圓形作為起點和終點,使用矩形作為螢幕或操作,使用菱形作為決策,並使用箭頭來顯示方向。

嘗試 Anima Playground 的使用者流程和 UX 設計

Anima Playground 讓您從產品創意到 UX 流程、設計和瀏覽器中的工作代碼。描述您想要建立的體驗,使用人工智慧進行完善,並將結果轉化為真正的互動式產品。

使用 Anima Playground 開始設計