如何優雅的設計錯誤反(ti)饋(shi)?
近年來,隨著互聯網的發展,用戶會在各種各樣的應用場景和環境中去使用產品。站著、坐著還是躺著?公交上、地鐵上還是在廁所里?
在使用互聯網的產品過程中,相信任何一個用戶都難以避免遇到錯誤,或是輸入信息錯誤,或是網絡不好等等。這些復雜多樣的使用場景使得針對用戶操作錯誤而進行的錯誤反饋設計變得尤為重要。
本文是筆者根據以往遇到的各種類型的反饋設計例子做的一些分析,希望能為大家在設計錯誤反饋提供一些幫助。
一、輸入錯誤信息
手控類型錯誤。
這類型的錯誤主要是在使用手機或平板的時候會遇到,比如前些天我遇到的一個健身類型的APP,里面有個設置體型的環節,界面如下:
?
看到這個頁面,我第一反應就是點擊刻尺上的刻度位置,發現沒反應。于是又試著按住“肌肉”模塊移動,發現還是沒有反應。到后來,因為不小心劃到刻尺里的內容,才發現這個東西原來要這樣操作的。
PS:多鬧心的一個設計!應該把設計師拉去槍斃一百次…
筆者認為這個界面比較好的反饋信息設計應該是這樣的:
- 首次進入的時候應該有個引導指引是通過滑動刻尺內容進行設置。
- 用戶在點擊刻尺的內容時,應該提供設置的指引。
- 用戶在按住“肌肉”或“脂肪”模塊移動時,也應該提供設置的指引。
- 最簡單的方法是在頁面提示“請滑動刻尺”,但筆者不知道怎么融入這個界面(有建議的可知會下筆者,謝謝)。
詞語/拼音錯誤。
這類型的錯誤主要是在使用搜索引擎/輸入法遇到的。先來看看搜索引擎的例子(以百度為例):
筆者搜索“拖拉及”,百度根據關鍵詞判斷用戶意圖,首先對用戶搜索關鍵詞時發生的可能拼寫錯誤提供糾錯幫助。然后,給出了搜索拖拉機的結果頁面,并在搜索下面提供文案告訴用戶這是關鍵詞拖拉機的搜索結果,同時也提供給用戶繼續想要搜索“拖拉及”的鏈接——如果用戶輸入的關鍵詞并沒有出現錯誤,那么就可以通過鏈接快速的重新進行搜索。
為什么這邊不先提供搜索“拖拉及”的結果,然后在提供文案給出搜索“拖拉機”的鏈接呢?我想這邊的原因在于,百度的搜索結果是根據熱詞和熱度優先搜索的,這也符合一個搜索引擎的產品形態。所以說,產品設計也要跟產品形(ce)態(lie)相結合。
接下來說說輸入法(以搜狗輸入法為例):
如第一張圖,筆者想輸入“相信”兩個字,把g和n對換;或如第二張圖筆者想輸入“產品”兩個字,把n和b輸入。這在快速敲鍵盤的時候是經常能遇到的事情,這時輸入法給出的結果中,包括了“錯誤的結果”但卻是用戶本來想輸入的。
以上兩種產品的設計,不僅提高了產品的容錯能力,提高了用戶搜索/輸入效率,還會給用戶帶來驚喜的感覺(特別是第一次使用的時候),對產品產生潛在的好感。
PS:為什么是百度和搜狗!因為筆者常用的就是這兩個= =!
內容不符合規則。
這類型的錯誤常見于表單的填寫,最經常接觸的我想莫過于登錄和注冊了,以下就注冊模塊舉一個例子分析:
如上圖,我想再也沒有比這個更簡單的注冊頁面了,輸入賬號和密碼即完成注冊。筆者根據頁面提示內容,在帳號輸入125467,然后輸入密碼,點擊注冊,出現圖二和圖三的提示。有經驗的童鞋可能猜到我要說什么了,但我還是要說…
首先說說提示信息的問題。第一張圖明明告訴筆者帳號的限制只是“英文或英文+數字”,而用戶密碼好像沒啥限制,提示信息卻又告訴筆者帳號“需為4-13個字符,不能為純數字”,密碼“需為6-16個字符,區分大小寫”。
另外,同時輸入帳號和密碼時,先提示密碼有問題,然后點擊注冊后,又提示帳號有問題。
- 大部分用戶1:字符是啥?跟字有區別嗎?
- 大部分用戶2:哥,你不要只提示部分內容,一次性說明白會死???
- 大部分用戶3:哥,你能不能一次性提示完錯誤信息?
PS:筆者簡直無法忍受了!還是應該把設計師拉去槍斃一百次…
觀察了下帳號/密碼輸入框的長度,筆者認為這邊比較好的反饋信息設計應該是這樣的:
- 進入注冊頁面時,帳號輸入框默認顯示“4-13個字的英文或英文+數字組合”,密碼輸入框默認顯示“6-16個字符,區分大小寫”——提示規則要全面。
- 用戶在點擊密碼輸入框時,如帳號信息輸入有誤就應該馬上給予提示——操作要最便捷。
二、訪問錯誤
這類型的錯誤大概有3情況:某個功能不能使用,某個頁面不能打開,加載數據失敗。
功能不能使用。
我們來看兩個例子的對比:
第一張圖是筆者在公眾平臺申請多客服失敗時的提示,既沒有告訴筆者失敗的原因又沒有告訴筆者遇到這種情況的解決方案,害的筆者以為是不滿足申請多客服的條件,還反復檢查了好幾次。
第二張圖是筆者訪問某個視頻網站,無法播放時的提示,筆者覺得這個反饋就非常到位(必須給36個贊),既讓筆者知道為什么無法播放還提供想要完成播放的解決方案。
兩個對比起來,筆者忍不住吐槽下第一張圖:真的不能告訴哥哥為什么出錯,你給個可以讓我反饋問題的聯系方式也好??!
頁面不能打開。
這種類型的反饋筆者遇到的優秀設計太多了,以下就以筆者認為最好的一個為例:
Ps:第一眼到這個頁面的時候,筆者還沒發覺這個是404頁面
可愛吧~清新吧~正常情況下訪問到404頁面總是不會有什么好心情,但是看到這個完全沒有這個感覺(即使有也被沖淡了),還會有種新奇的感覺,然后頁面又提供了“Q我吧”的解決方案,簡直帥呆了啊!不信看看以下幾個雖然也很有趣的設計:
加載失敗。
原本是沒有考慮過要寫這種情況的,但微信有個地方忍不住想吐槽下。事情是筆者的網絡信號不知什么情況總是不太好(呃…手機用的比較差= =!),然后每次在“發現-朋友圈”上會有紅點,但是進入朋友圈頁面,看著那個“圈圈”轉完后…
咦?尼瑪這還不是剛才的那些內容嗎?剛才更新的消息哪去了?。。?/p>
這邊就不能設置成“圈圈”轉完后,拉個“橫幅”出來告訴筆者,你的網絡太差勁了,敢不敢換個能愉快玩耍的網絡…
最后,說說設計這回事:
你可以靠模擬用戶場景、可以用數據分析、又或者用戶行為觀察等等方法來發現用戶容易出現的錯誤,然后根據錯誤給出提示或解決方案。但是筆者認為這種發現錯誤的方法太笨了,筆者比較追崇平時多看別的作品,因為從作品中你不僅也能發現問題(用戶容易出現的錯誤),同時還能學學別人設計的藝術,為自己的設計積累添磚加瓦。
隨意聊聊,謝謝欣賞!
本文由 @W_joker(微信公眾號:cpsyll)原創投稿,并經人人都是產品經理編輯。未經許可,禁止轉載。
”然后每次在“發現-朋友圈”上會有紅點,但是進入朋友圈頁面,看著那個“圈圈”轉完后…“
———–這是因為你的朋友發了狀態又刪除的緣故,如果這也提示,就違背人性了,我之所以把狀態刪了,就是不希望被別人知道我發過狀態。。。
我說的這種情況是網絡刷新不出來,不是因為狀態刪除的。 切換到好的網絡環境下,重新刷新就出來了。
用戶在點擊密碼輸入框時,如帳號信息輸入有誤就應該馬上給予提示——操作要最便捷。
上面這句不完全贊同,用戶在輸入的時候不能打擾,因為用戶還沒有輸入完成!試想條件是要輸入大于8位的英文和數字的組合,那么用戶在輸入過程中一直受到提示的干擾,而且提示一般很顯眼,這種體驗簡直是要抓狂的?!拔覜]輸完你怎么知道我輸錯了??!”當然還有一種情況,在同樣的條件限制下我輸入了中文,這種情況下直接限制輸入,同時提示還是可以接受的。
你看錯啦,我說的是“輸入帳號信息”去點擊“密碼輸入框”,這時可以先判斷“帳號信息”
噢~那你說的是分步判斷。抱歉啦~我太粗心 ??
還不錯,有點用