文章將從以下幾個方面進行總結:
為什麼需要反饋?在尼爾森十大可用性原則中,第一個原則說的就是系統狀態的可見性,即系統狀態需要反饋給用戶,不讓用戶因對系統狀態的未知而產生焦慮。系統狀態可見性包括讓用戶知道自己在做什麼,系統在做什麼,系統進行到了哪一步以及用戶當前處在系統中的哪一個環節等等,應始終為用戶提供適當且及時的消息,以幫助他們了解他們是否正在朝著自己的目標邁進。若系統沒有及時的反饋信息,用戶不僅僅會產生焦慮,很有可能會執行錯誤的操作。
舉個簡單的例子,在線上支付興起之前,我們常去銀行取現金,銀行的atm機在取款時會發出唰唰的點鈔聲,就算只有一張鈔票,點鈔機的聲音也像是在點很多鈔票,這反饋聲告訴用戶,你的錢正在準備中,就算機器出現故障或者請求時間比較長,只要這個反饋聲在,你就不會因此感到焦慮不安。如果atm機不發出點鈔聲,你就會特別緊張,「機器是壞了嗎?是卡住了嗎?還是請求沒有提交上去?我的錢是不是還在?」
有效的反饋機制可以幫助我們更加安心安全的使用產品。
反饋的作用反饋的方式有很多,根據用戶操作的各階段,將反饋分為三種:行為反饋,過程反饋和結果反饋。
針對用戶某個操作行為,如滑鼠hover、點擊按鈕等操作進行反饋,能夠及時有效的讓用戶感知到當前正在操作的這個組件的狀態。
過程反饋可以幫助用戶增強掌控感,讓用戶了解任務進程。相對於較注重用戶體驗的toC 產品來說,B端後臺管理系統更注重效率,多以任務為主,用戶在執行一個複雜任務的過程中,可能由於某些操作不當引起錯誤,導致任務中斷難以進行,此時一個準確及時的反饋可以及時的將用戶重新拉回任務流中。
結果的反饋可以幫助用戶了解操作產生的結果或引導用戶進行下一步的操作,提升整個操作流程的完整性和流暢度。
反饋相關的組件以下是我最近整理到的與反饋相關的組件,從吸引程度、停留時間和信息量三個維度進行對比:
message(全局提示);notification(消息通知);alert (警示);popconfirm 氣泡確認框;表單校驗提示 ;dialog對話框 ;獨佔式頁面 。
定義:對用戶的操作作出輕量的全局反饋。
何時使用:
在完結某個獨立頁面後的反饋(如:提交某個落地頁表單)
在一個操作區域或一系列操作完成之後的總體反饋(如:提交分步驟表單中的某個表單)
在某個操作點之後的反饋(如:點擊關閉某個功能的結果反饋)
(示例:因為網絡原因,點擊「編輯」時加載出錯)
定義:輕量級的全局消息提示和確認機制,出現和消失時需要有緩動動畫。
何時使用:
1.需要提醒用戶來自系統的消息,且不打斷用戶
2.帶有解釋描述的提醒內容
3.需要用戶進行相關交互時(如:確認操作等)
(示例:來自平臺的帳戶實名認證通知)
定義:警告條用於承載需要用戶注意的信息。
何時使用:需要告知用戶需要關注的信息時,提示作用較強。
(示例:雲伺服器到期提醒,出現在頁面內容區頂部)
定義:氣泡確認框通常用於不會造成嚴重後果的二次確認場景,其會在點擊元素上彈出浮層進行提示確認。氣泡確認框沒有蒙層,點擊確認框以外的區域即可關閉
何時使用:
1.需要用戶進行二次確認、需要給用戶展示反饋信息時
2.不會造成嚴重後果的二次確認場景
(示例:刪除二次確認)
何時使用:
1.用戶輸入的內容不符合欄位或表單的要求;
2.必填欄位未填寫;
(示例:集群創建表單校驗)
定義:對話框是一種臨時窗口,通知用戶需要關注的信息或需要獲得用戶響應時,在頁面中打開一個對話框承載相應的信息及操作
何時使用:
需要展示操作反饋或提示信息
需要填寫或展示某些信息,但不方便中斷當前流程時
對於脫離當前頁面內容的獨立線程,內容較少時也可以使用對話框
(示例:刪除結果反饋)
何時使用:
長流程表單結束後提供結果反饋
需要展示失敗詳情
(示例:騰訊雲訂單支付成功反饋)
上文提到,根據用戶的操作進程,將反饋分為行為反饋、過程反饋和結果反饋三種,下面結合以上七種反饋組件,分析各個組件在反饋進程中的使用方式。
1.行為反饋頁面中可進行操作的元素在用戶操作之後應該提供行為反饋,例如hover、點擊、拖拽動作、複製信息、刪除等,幫助用戶增強掌控感。
(示例:上傳組件拖拽反饋)
對於較為敏感的操作,需要二次確認的反饋,建議使用氣泡確認。
(示例:刪除函數時二次確認)
用戶進行操作後如果後臺處理需要一定時間,需要給用戶提供過程反饋,減少用戶等待的焦慮感。處理時間非常短的可以忽略,需要較長時間的可分為短時間反饋和長時間反饋:
1.較短時間反饋
指幾秒就可以處理完的操作,建議使用短時間反饋,直接在組件上進行反饋。
較短時間的反饋方式通常出現在會觸發需要時間處理過程的控制項/組件上,例如按鈕、開關;或者出現在表格、表單等承載處理結果的組件中,常見場景如下所示:
場景1:按鈕/開關上的過程反饋,顯示loading動畫
場景2:表格中的過程反饋
場景3:表單中的過程反饋
2.長時間過程反饋
指需要幾十秒甚至更長時間才能處理完的操作,最好能夠顯示進度,若前端無法拉取到進度,建議提供大致時長預估且支持異步操作。
長時間的處理過程分為「處理時可以異步操作」和「處理時不能異步操作」兩種
• 在處理時可以異步操作的情況下,需要保證用戶去到其他頁面也能了解到操作結果
• 在處理過程中不能進行異步操作時,這種情況下最好提供取消的途徑
• 如果可以最好給用戶提供處理進度
場景1:對於有單獨頁面承載的功能操作需要長時間處理時,使用下方樣式展示:
在處理時可以做其他操作,需要保證在其他頁面也能了解到操作的結果,可以使用消息提示承載進度和操作結果。
對於某些需要長時間處理的操作,但又沒有單獨的頁面承載時,使用右上角的loading提示,用戶可以手動關閉:
場景2:在處理時不可以異步操作,建議給用戶提供取消操作的途徑。
用戶操作後無法直接看出操作結果,或還需要有進一步引導的時候,需要給用戶提供反饋結果,幫助用戶了解產生的結果,並了解下一步應該如何操作,能夠直接看到操作結果時,不需要提供結果反饋,例如刪除操作、開關操作等。
結果反饋的形式有以下幾種:
• 就近反饋:在頁面中進行的局部操作,可以在局部操作附近就近反饋,例如複製操作、輸入框反饋等
• 全局反饋條:會對全局頁面產生影響的操作,反饋可以用右上角的全局反饋條進行反饋,全局反饋條有自動消失和手動關閉兩種
• 彈窗反饋:對於操作後反饋內容多且內容必須讓客戶看到,或者還有下一步操作指引時,建議使用彈窗反饋結果
• 落地頁反饋:用於某個任務流結束後的結果反饋,且用戶非常關注此任務的結果時,建議使用落地頁反饋結果。
3.1 就近反饋後臺管理系統頁面多以表單為主,且表單結構複雜冗長,對於表單的信息反饋需要做到及時且準確,因此,表單多採用就近反饋。
局部的表單操作,在表單組件離開focus態時立即判斷輸入是否合法,如果不合法,則立即在組件下方反饋錯誤提示:
操作後對整個頁面會有影響的操作,結果反饋建議使用全局反饋來反饋
場景1:反饋結果較簡單,且沒有更多信息/操作的入口時,使用message,4.5s後自動消失。
(示例:提交局部表單,提示提交結果)
場景2:反饋結果需要更多的解釋,或包含下一步操作入口時,使用需要手動關閉的notification。
錯誤提示建議都使用手動關閉的提示條,且提供錯誤更詳細的原因說明入口
場景3:反饋結果需要用戶關注到,如網絡異常或者有伺服器過期等,建議使用alert
(示例:雲伺服器到期提醒,出現在頁面內容區頂部)
彈框反饋的主體是操作行為,對於操作後反饋內容多且內容必須讓客戶看到,或者還有下一步操作指引時,建議使用彈窗反饋結果。
(示例:在刪除操作之後提醒用戶操作結果)
彈窗反饋是後臺管理系統反饋機制中最常用的反饋方式,因其阻斷式的反饋效果能夠有效的傳遞需要用戶關注的信息,但注意不要輕易使用彈窗,更要避免二次彈窗的使用。彈窗容易打斷用戶在執行複雜任務時的心流,若不是非常高危的提示,可以考慮使用alert等警示效果明顯的非模態反饋方式。
3.4 落地頁反饋獨佔式落地頁反饋的主體是操作流程,是種強度較高的反饋方式,通常用在長流程步驟表單的最後告知用戶操作結果需要展示較複雜的補充信息,例如配置信息詳情、購買流程結束後的購買結果反饋等。
(示例:騰訊雲訂單支付成功反饋)
以上介紹了反饋機制中較常使用的幾種反饋方式,下面來討論反饋機制的設計原則。
好的反饋機制會讓人們感到正在和系統的設計者進行對話。作為設計師,我們可以通過反饋機制來回答人們可能提出的問題,為他們提供指引,或是幫助他們了解行動的結果。因此,在設計時,不妨設想你正在和使用它的人進行面對面的交流;想想看,你會在哪些環節,以怎樣的方式說些什麼?
原則一:輕量化一個愉快的交談應該是輕鬆的,自然的,所以,反饋機制的第一個原則是輕量化。
絕大多數的反饋機制應該遵循著「告知但不打擾」的基本規則,過於頻繁或破壞性的通知會帶來負面的體驗。讓用戶的神經系統收到信息,確保操作的正確性,如果錯了,應該從反饋和提示中獲得正確操作的提示,儘量柔和且不要讓人覺得煩躁。
輕量的反饋方式上面提到很多,如message,notification和就地反饋,可在工作實踐中,經常會遇到產品跟我說,我們這個信息很重要,這種提示用戶看不到,要強一點,我問,那你覺得多強的提示合適呢?他說:彈窗啊,或者用什麼背景色比較明顯的。然後就會出現下面這樣的頁面:
其實頁面中強提示太多,視覺焦點反而不集中,提示效果也會大大降低。文本、圖片、動態元素的視覺焦點依次遞增,因此,可以考慮在反饋中加入合適的動效以達到吸引用戶注意力的目的。
後臺管理系統多以複雜任務為主,及時的引導和清晰的文案提示能防止用戶在任務流中迷失,反饋內容的主要說明文字需明確表達其目的及操作的後果,錯誤提示需說明清楚錯誤的原因及改正方式。
表單校驗:
如圖所示,CIDR填寫內容範圍廣泛,若不及時告知錯誤原因,會導致用戶一直試錯。
彈窗:
如圖所示,刪除操作若會引起某些後果,需明確寫出正在進行是刪除操作以及刪除操作所導致的後果。
一致性即保持系統中所有相同的事件反饋方式是一致的,有利於培養用戶的使用習慣和心理預期,當用戶注意到並且學會了這種呈現方式,看一眼就能知道發生了什麼。
如騰訊雲控制臺中橙色提示條的使用,通常是用來告知用戶一些較為重要的警示信息,若不處理可能會影響業務正常運行。如主機過期等信息提示,當所有相同等級的信息都用這樣的提示條反饋時,用戶在頁面出現相同的提示時就會引起關注。
菲茨定律指出:使用指點設備到達一個目標的時間,與當前設備位置和目標位置的距離(D)和目標大小(S)有關。用數學公式表達為:時間 T = a + b log2(D/S+1),在設計中的應用之一就是就近原則,反饋出現在操作點最近的地方是最容易被發現且容易被操作的。
如騰訊雲控制臺中的信息複製成功的反饋有兩種,就近反饋和全局反饋,全局反饋出現在屏幕中央頂部,與相關的操作距離較遠,且出現的時間較短,用戶很難注意到,因此,表單中對於欄位信息的複製反饋建議使用就近反饋。
反饋在用戶界面設計中是很基礎也是十分重要的一環,B端後臺管理系統與C端產品不同,B端更講究效率和嚴謹,因此反饋應該儘量克制且有效。讓反饋做到最好並不容易,這需要設計師拿捏好對的時間,對的速度,並且傳遞對的信息。通過這次反饋規範的整理,鞏固基礎知識的同時,讓我對一些區別比較模糊的組件有了更加深刻的理解。希望通過我的分享能夠給大家帶來一些啟發。