交互設計筆記(下):流程設計

3 評論 17298 瀏覽 147 收藏 9 分鐘

優秀的流程設計不僅能幫助用戶更好的完成任務,還能幫助設計師更充分的思考錯誤,本文從定義出發,深入淺出地闡述流程設計的步驟及交互原型的畫法。

1. 流程設計是什么

流程設計既要兼顧業務需求,也要兼顧用戶需求,是以不干擾用戶使用流程的方式完成業務需求。

交互設計師輸出的雖然是頁面,但實際是設計用戶完成任務的方式。頁面流程圖展示的是頁面之間的跳轉關系,明確用戶當前的所處狀態,及下一步的操作。用戶通過某種流程完成任務,舉個簡單的例子,支付寶轉賬主要流程如圖所示,這是最簡單且正常情況下的流程。

2. 流程設計怎么做

2.1 理解業務需求,明確核心功能主線

工作中,交互設計師接到需求后,首先要進行需求分析,充分理解業務需求和功能邏輯,根據業務流程梳理出主要的頁面流程。此時需要考慮業務目標是什么,受到哪些技術限制,輸出的設計才能被公司和用戶接受。

2.2 細化場景,尋找所有接觸點

任務與流程是一對多的關系,用戶完成同一個任務可能通過不同的流程。所以需要找到用戶完成任務時的所有接觸點。接觸點是用戶和產品發生交互的關鍵點,比如用戶點擊了轉賬按鈕,就是一個接觸點。

接觸點來自于用戶場景(基于用戶模型、經驗,用戶調研的體驗故事)。設計師要擁有用戶場景的構思能力,根據用戶畫像,思考所有可能出現的場景?;蛘呋谧约旱慕涷瀯摻ㄖ安淮嬖诘膱鼍?,在腦子里模擬出來并把它記錄下來。

在用戶場景中,通過接觸點的模式找出用戶看到的信息和所做的事情。

如圖所示為轉賬流程中的接觸點。用戶完成轉賬這一任務,可能經過不同的流程,如點擊首頁轉賬按鈕/ 朋友頁面手指向下滑動,可以觸發找人轉賬的提示 / 聊天界面輸入數字也可以觸發給對方轉賬的提示等等。

注意:

  • Tip1: 合并同類項,為了完成流程設計,需要構建的用戶場景有多個,但有些接觸點是重復的;
  • Tip2: 顧及頭尾,考慮第一個和最后一個接觸點,因為他們是最容易被遺漏的接觸點;

2.3 梳理接觸點,制作流程圖

接觸點指用戶做了某件事或看到某個信息,梳理接觸點有以下三種模式:

  • 模式一:做事-看信息-做事 ?是最舒服的模式,能對用戶起到良好的引導作用;
  • 模式二:做事-做事 ?用于用戶經驗足以支撐的場景下,如輸入賬號-輸入密碼
  • 模式三:看信息-看信息 ?用于信息量大,需要用戶理解的場景;如看淘寶促銷活動大致流程-具體參與規則

利用三種模式將接觸點串聯起來,明確每個頁面的核心元素,理清頁面之間的邏輯關系,也就是頁面的來源和去處。

一個轉賬流程如圖所示,由于用戶場景不同,流程會出現分支,所以梳理接觸點時考慮清楚,哪些是需要判斷的關鍵節點,將接觸點串聯起來。

簡言之,流程設計就是在理解業務需求的基礎上,構思用戶使用一個功能或完成一個任務的場景,找到所有接觸點,再對接觸點進行梳理,考慮各種狀態,將接觸點串聯起來,完成頁面流程圖的設計。

3. 如何根據流程設計交互原型

在交互稿上體現用戶操作流程,通過觸發點的虛擬表示和箭頭,把頁面橫向串聯起來,展示用戶一步一步完成任務會發生怎樣的頁面跳轉和操作行為。如圖所示,通過紅色點擊區和箭頭展示用戶的操作步驟。

注意:

  • Tip1:如果流程出現分支時,不要制作在一個頁面中,這樣會使交互稿的可讀性變低,更好的做法是體現在站點對圖上,通過站點地圖拆分子流程。保證每個頁面是一條流程走到底的,遇到較長流程分支時可以建立跳轉,鏈接到子頁面。

  • Tip2:注意前后頁面的關聯性和一致性,如當前頁面的button和下一頁面的title要一致。
  • Tip3:完成交互稿后,對照接觸點流程檢查一遍交互,確認每個接觸點的過度是自然的。提供完成一個接觸點所需要的全部信息。

4. 處理異常流程

為了保證流程設計的全面性,需要預判用戶或系統可能出現的錯誤。

交互稿中,異常頁面位于正常頁面的下方,橫向是正常流程,縱向是異常流程補充,需要開發和測試注意的,處理這個頁面的一些異常情況。

必須考慮的異常流程:

  1. 用戶網絡故障/服務器資源不足時,不要造成不可挽回的損失,設置自動保存機制;
  2. 預判用戶可能出現的錯誤(錯誤的點擊),對于造成重大損失的按鈕,提供二次確認的對話框;

處理異常流程的方式:Toast和Alert

  • Toast:提示文字少,出現2秒左右會自動消失。用于輕提示,馬上可以重試的;
  • Alert:提示文字較多,有按鈕,需要用戶確認。用于業務的確認,當業務邏輯比較復雜時,用戶的操作存在違規或者造成重大損失,用Alert提示。

5. 總結

中篇所講的信息架構關注產品的全局性,考慮將多條流程整合在一起;本篇流程設計關注每一條流程的合理性,幫助用戶更好更快的完成任務。

流程設計步驟可歸納為:

  1. 理解業務需求,明確核心功能主線;
  2. 細化場景,尋找所有接觸點;
  3. 梳理接觸點,制作流程圖;

然后根據流程圖設計交互稿,注重流程設計的全面性,思考異常流程的處理。

相關閱讀

交互設計筆記(上):設計需求分析

交互設計筆記(中):信息架構設計

 

本文由 @產品負一歲 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 讓人頭疼的,碎片化接觸點!

    來自美國 回復
  2. 非常受用~希望作者能留下聯系方式,想和您深入探討

    來自廣東 回復
    1. 你還想深交?

      來自湖北 回復