復盤總結:B端產品操作反饋
操作反饋是軟件產品與用戶很重要的一個交互方式,通過反饋產品才能知道用戶的行為信息。那軟件如何來傳達這些信息呢,就要靠頁面上的反饋信息來實現了。本文作者總結了B端產品操作反饋B端產品操作反饋的經驗,與你分享。
一、操作反饋是什么
操作反饋一般包含三種狀態:正確、提示、異常。
- 正確反饋:保存成功;提交成功
- 提示反饋:是否確認要刪除;是否確認要提交
- 異常反饋:文件格式錯誤;輸入格式錯誤
操作反饋是軟件產品與用戶很重要的一個交互方式。就像你跟一個人溝通,你肯定希望對方能夠給你一些反饋。“我說的對嗎?”“我的信息傳達到了嗎?”如果是面對面的人,那肯定會通過“點頭”或者“嗯,這個我不太理解”之類的來傳達信息。
那軟件如何來傳達這些信息呢,就要靠頁面上的反饋信息來實現了。在操作反饋中,異常情況反饋是其中最重要的。所以本文會側重在梳理工作中碰到的異常情況。
(本文基于Ant Design的設計規范進行示例說明)
二、為什么要重視操作反饋
用戶在使用你的產品時,是不會知道你系統的底層邏輯,也不清楚自己哪一步是對的,哪一步是錯的。所以信息提示就顯得尤為重要,它是引導用戶在產品上順利完成操作的重要途徑之一。
試想一下,用戶在你的系統上提交了一個表單,然后頁面關閉了,沒有任何反饋。用戶心里就是一個問號:我的表單上傳成功了嗎?這個場景真的想想就尷尬。
三、常見的操作反饋匯總
3.1 正確反饋
點擊“確定”按鈕后,有反饋“提交成功”
3.2 提示反饋
點擊“刪除”按鈕時,二次確認
提交“審批”流程時,二次確認
3.3? 異常反饋
3.3.1 界面中有明顯提示,需要用戶了解此情況,并會影響用戶下一步操作
- 服務器訪問相關:404、403
- 空狀態:默認狀態、搜索結果為空、數據為空
- 表單類異常:必填項校驗、正確性校驗、長度 校驗、重復校驗
- 限定值
3.3.2 用戶不太能感受到這種異常,并且對用戶的操作影響不大
針對B端可能出現的同表單多人操作的場景: 意外斷網、意外退出登錄、意外關閉瀏覽器
四、Ant Design常用組件梳理
五、反饋處理方式
5.1 正確反饋
這個屬于提示信息,可以用Message定時提醒后自動消失
用于“保存”“確認”等信息填報成功后的提示信息
5.2? 提示反饋
一般用于在進行操作后可能對后續流程或數據造成比較大影響的情況,所以選用Popconfirm對流程“審批”和數據“刪除”按鈕做二次確認提示框展示。
5.3? 異常反饋
5.3.1 服務器訪問相關
B端常用的兩種異常狀態:
① 404:未找到頁面/鏈接不到相關信息
②403:無頁面訪問權限/數據訪問權限時使用
5.3.2 空狀態
數據產品主要碰到的空狀態場景為:
- 默認空白頁
- 查詢信息為空(無結果)
- 數據加載失敗
在前兩種場景下,都可以用一個“暫無數據”作為提示。
數據加載失敗,需要有對應的信息提示。
5.3.3 表單類異常
首先,表單類型一般會有三種展現形式:
- 全頁面:一般在需要填寫復雜表單或者是步驟表單時使用
- Modal對話框:一般用于新建名稱、備注詳情時使用
- Drawer抽屜:一般用于表單內容較多,但是又不想打斷使用流程的場景
表單異常的情況:
- 必填項校驗:未必填內容,在輸入框失去焦點或者表單點擊“確認”提交時,輸入框下方紅字提示“必填項”
- 正確性校驗:輸入格式錯誤:名稱一般只支持字母/漢字開頭+數字的結構
- 長度校驗:文本輸入需要有一定的字符限制,前端可做字符上限提示,也可在輸入框下做紅字提示
- 重復校驗:多用于表單名稱命名時,名稱不可重復的情況,所以一般在點擊“保存/確認”時才會進行后端校驗,此情況可用notification做前端提示,并寫明錯誤原因
5.3.4 限定值
主要在文件上傳時的場景,校驗內容包括:
- 文件大小不匹配
- 文件格式不匹配
- 文件內容不匹配
- 一次性上傳的文件大于可支持值
【文件大小不匹配】【文件格式不匹配】【一次性上傳的文件大于可支持值】會在文件上傳時就進行校驗,可用message進行提示。
【文件內容不匹配】點擊“確認”按鈕后,notification提示不匹配記錄的條數。
5.3.5 意外退出
此處基于本人實際項目中碰到的需求進行舉例說明。
需求背景:多用戶可能需要對同一份資料進行備注,但是為了減少人力資源浪費的問題,系統對資料的分發需要做一些規則限制。
需求目的:
- 避免多人同時對同一份資料進行操作
- 避免當前用戶因為意外退出導致流程中斷,當前資料未得到及時處理的問題
方案:
- 意外退出(斷網/退出登錄/關閉瀏覽器再次打開/刷新頁面)時,用戶重新登錄到操作頁面下,保留用戶最新的操作結果
- 對資料進行狀態定時鎖定。即,當前用戶打開資料時,該資料即被鎖定,其他用戶對該資料只有查閱功能,編輯按鈕不可點或者編輯按鈕點擊時Message提示“該資料正被處理中………”
六、一些思考
操作反饋的梳理應該分全局和局部。目前總結到的是我日常工作中常會碰到的一些需要提供反饋的全局需求。
針對一些特定業務場景,還會有很多點到點的局部需求需要整理。需要對哪些操作進行反饋,哪些異常進行處理和前端提示,都需要在工作中不斷地思索和總結,與君共勉。
參考文章:
[1] AntDesign前端組件使用文檔
[2] AntDesign設計規范文檔
本文由 @隱君隨記 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
總結的很好,有學習到。??
謝謝~