產品設計必讀:常用反饋方式的分類
用戶將信息操作給系統,系統告知用戶操作的結果或者操作對象狀態的變更。系統反饋給用戶信息的常見方式有哪些?本文作者對此進行了詳細的分類,一起來看看吧。
“交互設計”指的是人機交互方式的設計。人機交互指的是用戶和系統之間進行信息的傳遞——用戶通過操作(例如手動錄入或者選擇)把信息傳遞給系統,系統反饋信息給用戶,告知用戶操作的結果或者操作對象狀態的變更。在這里我們詳細分享一下系統反饋給用戶信息的常見方式。
反饋信息有兩個交互設計的要點:
- 及時性:避免用戶等待產生焦躁情緒或者繼續進行其他無效的操作。
- 簡單易讀:用戶看到(或聽到)反饋能明白結果的含義和指向性。
常見的反饋方式分為6種:彈框、頁面、標簽、紅點、動畫、聲音。
一、彈框
彈框分為模態彈框和非模態彈框,兩者最大的區別是前者強制用戶進行交互。
模態框一般會有一層黑色透明的蒙板,它打斷用戶所屬的主流程,只能到完成模態框的操作,才能返回到主流程中去。非模態框一般沒有那一層蒙板,不會影響所屬的主流程,彈出非模態也能看見底層的主流程,過一定的時間(3~5s)后會自動消失(或者點擊彈框外的其他位置)。
模態彈框屬于重量級反饋,優勢是能夠獲取用戶的關注焦點,對將要操作或者正在操作產生會產生結果進行明確的告知,從而引起用戶的重視和思考,防止用戶誤操作。例如用戶在刪除重要信息時會有“一旦刪除,無法恢復”的彈窗提示。劣勢是會打斷用戶當前的操作。
非模態彈框屬于輕量級反饋,優勢是不會影響用戶當前的操作,干擾非常小。例如用戶關注成功之后會有“關注成功”的toast提示。劣勢是因為視覺效果不夠明顯、顯示時間有限等因素導致用戶容易錯過。所以我們在平時的設計中要根據不同的場景和反饋的重要程度選擇合適的反饋方式 。
1. 模態彈框
模態彈框分為對話框、動作欄和浮層。
對話框一般用在比較重要的系統狀態變化或者重要且不可逆的操作時,需要用戶知曉操作會產生的后果;對一些重要的操作進行繼續或者放棄,方向A或者方向B選擇的詢問;重要信息錄入提交或者驗證等。
底部動作欄是指從頁面底部向上滑出的面板,通常讓用戶對當前的操作進行確認或者展示多個操作項讓其進行選擇。相比較對話框,底部動作欄能承擔數量更多且表現形式更豐富的選項,例如列表、宮格、圖文,可觸發更多的動作等。
對于同樣都為兩個選項的情況,對話框更多的用在讓用戶對接下來的操作進行選擇的場景,底部動作欄用在讓用戶對之前的操作進行二次確認的場景。
浮層可以出現在頁面中的任何位置,對于頁面元素比較多或者頁面有比較多相似元素時,能夠給用戶更具有指向性的提示。浮層展示的內容一般為多種操作的選項。
2. 非模態彈框
非模態彈窗分為toast、snackbar、noticebar。
toast是一種輕量型的反饋方式,不會打斷用戶當前的操作流程,對用戶的打擾是最小。其缺點是容易被用戶忽視,而且不適合展示過多的信息,可能在用戶還沒讀完信息之前就消失了。
常見的toast表現方式為文字或者icon+文字的組合方式。出現的位置會根據場景的不同設計在頁面的頂部、中間或者底部。經過一定的時間間隔(3s~5s)后自動消失,或者用戶點擊其他位置也會自動消失。
注:
- toast是安卓設計規范的組件,當時目前也常用在IOS的設計中,IOS設計規范中的HUD和toast類似。
- 一些安卓用戶會在禁用通知欄消息時把toast通知也給禁用了,這樣就無法接收到toast形式的消息通知了。
- 背景顏色和停留時間都可以設置。
snackbar是比toast稍微重一點的輕量型反饋方式,包含一行與進行中的操作相關的文案&(最多)一個操作,并且snackbar不能包含使其消息的“取消”操作。
常規設計一般出現在頁面的底部,可把snackbar看成可點擊的Toast,用戶可以點擊按鈕進行交互,即使用戶不點擊Snackbar,經過一定的時間間隔(3s~5s)后自動消失,或者用戶點擊其他位置也會自動消失。
注:toast和snackbar的停留時間一般為3~5s,但也可以根據場景的需求設置更長的時間。
noticebar通告欄屬于臨時視圖的范疇,可以在不影響用戶操作的情況下起到持續性提示用戶的作用,適合一些狀態變更的重要通知但又不需要用戶立即去進行操作的反饋提示??梢詢H僅是一個文案提示,也可以增加可點擊的入口。
注:noticebar可以同時在一個頁面出現多個。
二、頁面
頁面的反饋一般用于重要且完整流程的結束,是一個非常重的反饋形式。例如購買支付成功或者提交重要信息之后的頁面反饋。而彈框一般用于完整流其中一個操作節點的反饋。
有兩種特殊的頁面反饋形式:
- 空頁面:要明確有沒有必要使用頁面,如果使用空頁面,要告知用戶這是什么內容的空頁面,為什么是空的,并對希望用戶接下來的操作進行引導。
- 頁面內嵌反饋,常用在網絡切換時(從WIF切換到5G流量)對用戶的提示。同樣是需要用戶知曉要使用比較重的提示的場景,如果使用彈窗就會影響用戶主流程的操作,所以為了達到同樣的目的又考慮到用戶的體驗,使用頁面內嵌反饋是一個更為合適的選擇。
三、標簽
常見標簽為頁面某個操作或者頁面某個元素對象局部反饋的文字標簽提示,例如用戶在進行手勢驗證時,如果手勢錯誤時進行彈窗提示與直接頁面文字標簽提示,前者比后者要增加”關閉彈窗”的操作,而且提示內容較多時也增加了用戶的記憶成本,用戶體驗較差。
在進行注冊郵箱時,填寫的信息如果有錯誤,文字標簽的提示兼顧了反饋的及時性、明確的指向性以及友好的引導性。
四、紅點
一般通知消息使用紅點或者帶有數字的紅點標識來反饋,用戶閱讀完成之后紅點消失或者對應的數值減少。另外紅點標識上也會展示一些文案來表達特定的含義來吸引用戶的關注,此處不再詳解。
五、動畫
動畫的反饋方式是為了更加吸引用戶的注意力,減少用戶等待的焦躁感,例如在加載頁面資源 時展示有趣的動畫?;蛘邽榱烁庇^簡單的展示操作對象狀態的變化,例如點贊、收藏、未關注、已關注icon的變化,一般稱為這種按鈕為多態按鈕。
多態按鈕的優勢是在不影響用戶操作主流程的前提下及時展示操作對象的變化,且變化之后的狀態持續直觀的顯示。
六、聲音
聲音形式的反饋一般用在用戶不方便及時查看頁面且比較重要的信息提示中,例如商家收款到賬具體金額的語音提示,外賣店家收到新單的語音提示。
例如早上大家騎著共享單車到公司樓下匆忙關閉自行車開關趕時間去打卡時收到“關閉成功”的語音提示。
七、小結
上文已經對產品設計中常用的各種反饋類型進行了詳細的介紹,在平時設計反饋機制以及選擇反饋方式時,我們需要明確五點:
- 此操作或者此流程是否有必要進行反饋?
- 反饋的節點在哪里更合適?
- 反饋信息的重要程度如何,如果用戶看不到此反饋會產生什么影響?
- 對于必須使用重量級反饋的方式時,考慮到用戶體驗問題是否能在保證用戶看到時不影響主流程的操作?
- 用戶接收到反饋時,是否需要引導去做些什么,是否需要立刻去操作?
總之,這些問題的答案都要根據具體的使用場景來進行具體分析。因為任何反饋都會對用戶造成干擾,所以為了更好地用戶體驗,應該減少彈框的使用,本著“能不用彈框就不要用彈框,能用非模態彈框就不要用模態彈框”的原則來設計產品。對于有必要使用彈框進行提示的場景,要在合適的時機使用選擇合適的彈框。
好啦,此波分享到此結束~希望本篇文章能幫到需要的小伙伴們~
本文由 @Grace 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于 CC0 協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!