交互設計筆記(下):流程設計
優秀的流程設計不僅能幫助用戶更好的完成任務,還能幫助設計師更充分的思考錯誤,本文從定義出發,深入淺出地闡述流程設計的步驟及交互原型的畫法。
1. 流程設計是什么
流程設計既要兼顧業務需求,也要兼顧用戶需求,是以不干擾用戶使用流程的方式完成業務需求。
交互設計師輸出的雖然是頁面,但實際是設計用戶完成任務的方式。頁面流程圖展示的是頁面之間的跳轉關系,明確用戶當前的所處狀態,及下一步的操作。用戶通過某種流程完成任務,舉個簡單的例子,支付寶轉賬主要流程如圖所示,這是最簡單且正常情況下的流程。
2. 流程設計怎么做
2.1 理解業務需求,明確核心功能主線
工作中,交互設計師接到需求后,首先要進行需求分析,充分理解業務需求和功能邏輯,根據業務流程梳理出主要的頁面流程。此時需要考慮業務目標是什么,受到哪些技術限制,輸出的設計才能被公司和用戶接受。
2.2 細化場景,尋找所有接觸點
任務與流程是一對多的關系,用戶完成同一個任務可能通過不同的流程。所以需要找到用戶完成任務時的所有接觸點。接觸點是用戶和產品發生交互的關鍵點,比如用戶點擊了轉賬按鈕,就是一個接觸點。
接觸點來自于用戶場景(基于用戶模型、經驗,用戶調研的體驗故事)。設計師要擁有用戶場景的構思能力,根據用戶畫像,思考所有可能出現的場景?;蛘呋谧约旱慕涷瀯摻ㄖ安淮嬖诘膱鼍?,在腦子里模擬出來并把它記錄下來。
在用戶場景中,通過接觸點的模式找出用戶看到的信息和所做的事情。
如圖所示為轉賬流程中的接觸點。用戶完成轉賬這一任務,可能經過不同的流程,如點擊首頁轉賬按鈕/ 朋友頁面手指向下滑動,可以觸發找人轉賬的提示 / 聊天界面輸入數字也可以觸發給對方轉賬的提示等等。
注意:
- Tip1: 合并同類項,為了完成流程設計,需要構建的用戶場景有多個,但有些接觸點是重復的;
- Tip2: 顧及頭尾,考慮第一個和最后一個接觸點,因為他們是最容易被遺漏的接觸點;
2.3 梳理接觸點,制作流程圖
接觸點指用戶做了某件事或看到某個信息,梳理接觸點有以下三種模式:
- 模式一:做事-看信息-做事 ?是最舒服的模式,能對用戶起到良好的引導作用;
- 模式二:做事-做事 ?用于用戶經驗足以支撐的場景下,如輸入賬號-輸入密碼
- 模式三:看信息-看信息 ?用于信息量大,需要用戶理解的場景;如看淘寶促銷活動大致流程-具體參與規則
利用三種模式將接觸點串聯起來,明確每個頁面的核心元素,理清頁面之間的邏輯關系,也就是頁面的來源和去處。
一個轉賬流程如圖所示,由于用戶場景不同,流程會出現分支,所以梳理接觸點時考慮清楚,哪些是需要判斷的關鍵節點,將接觸點串聯起來。
簡言之,流程設計就是在理解業務需求的基礎上,構思用戶使用一個功能或完成一個任務的場景,找到所有接觸點,再對接觸點進行梳理,考慮各種狀態,將接觸點串聯起來,完成頁面流程圖的設計。
3. 如何根據流程設計交互原型
在交互稿上體現用戶操作流程,通過觸發點的虛擬表示和箭頭,把頁面橫向串聯起來,展示用戶一步一步完成任務會發生怎樣的頁面跳轉和操作行為。如圖所示,通過紅色點擊區和箭頭展示用戶的操作步驟。
注意:
- Tip1:如果流程出現分支時,不要制作在一個頁面中,這樣會使交互稿的可讀性變低,更好的做法是體現在站點對圖上,通過站點地圖拆分子流程。保證每個頁面是一條流程走到底的,遇到較長流程分支時可以建立跳轉,鏈接到子頁面。
- Tip2:注意前后頁面的關聯性和一致性,如當前頁面的button和下一頁面的title要一致。
- Tip3:完成交互稿后,對照接觸點流程檢查一遍交互,確認每個接觸點的過度是自然的。提供完成一個接觸點所需要的全部信息。
4. 處理異常流程
為了保證流程設計的全面性,需要預判用戶或系統可能出現的錯誤。
交互稿中,異常頁面位于正常頁面的下方,橫向是正常流程,縱向是異常流程補充,需要開發和測試注意的,處理這個頁面的一些異常情況。
必須考慮的異常流程:
- 用戶網絡故障/服務器資源不足時,不要造成不可挽回的損失,設置自動保存機制;
- 預判用戶可能出現的錯誤(錯誤的點擊),對于造成重大損失的按鈕,提供二次確認的對話框;
處理異常流程的方式:Toast和Alert
- Toast:提示文字少,出現2秒左右會自動消失。用于輕提示,馬上可以重試的;
- Alert:提示文字較多,有按鈕,需要用戶確認。用于業務的確認,當業務邏輯比較復雜時,用戶的操作存在違規或者造成重大損失,用Alert提示。
5. 總結
中篇所講的信息架構關注產品的全局性,考慮將多條流程整合在一起;本篇流程設計關注每一條流程的合理性,幫助用戶更好更快的完成任務。
流程設計步驟可歸納為:
- 理解業務需求,明確核心功能主線;
- 細化場景,尋找所有接觸點;
- 梳理接觸點,制作流程圖;
然后根據流程圖設計交互稿,注重流程設計的全面性,思考異常流程的處理。
讓人頭疼的,碎片化接觸點!
非常受用~希望作者能留下聯系方式,想和您深入探討
你還想深交?