如何優(yōu)雅的設(shè)計(jì)錯(cuò)誤反(ti)饋(shi)?

6 評論 7040 瀏覽 31 收藏 12 分鐘

近年來,隨著互聯(lián)網(wǎng)的發(fā)展,用戶會在各種各樣的應(yīng)用場景和環(huán)境中去使用產(chǎn)品。站著、坐著還是躺著?公交上、地鐵上還是在廁所里?

在使用互聯(lián)網(wǎng)的產(chǎn)品過程中,相信任何一個(gè)用戶都難以避免遇到錯(cuò)誤,或是輸入信息錯(cuò)誤,或是網(wǎng)絡(luò)不好等等。這些復(fù)雜多樣的使用場景使得針對用戶操作錯(cuò)誤而進(jìn)行的錯(cuò)誤反饋設(shè)計(jì)變得尤為重要。

本文是筆者根據(jù)以往遇到的各種類型的反饋設(shè)計(jì)例子做的一些分析,希望能為大家在設(shè)計(jì)錯(cuò)誤反饋提供一些幫助。

一、輸入錯(cuò)誤信息

手控類型錯(cuò)誤。

這類型的錯(cuò)誤主要是在使用手機(jī)或平板的時(shí)候會遇到,比如前些天我遇到的一個(gè)健身類型的APP,里面有個(gè)設(shè)置體型的環(huán)節(jié),界面如下:

?練練

看到這個(gè)頁面,我第一反應(yīng)就是點(diǎn)擊刻尺上的刻度位置,發(fā)現(xiàn)沒反應(yīng)。于是又試著按住“肌肉”模塊移動(dòng),發(fā)現(xiàn)還是沒有反應(yīng)。到后來,因?yàn)椴恍⌒膭澋娇坛呃锏膬?nèi)容,才發(fā)現(xiàn)這個(gè)東西原來要這樣操作的。

PS:多鬧心的一個(gè)設(shè)計(jì)!應(yīng)該把設(shè)計(jì)師拉去槍斃一百次…

筆者認(rèn)為這個(gè)界面比較好的反饋信息設(shè)計(jì)應(yīng)該是這樣的:

  • 首次進(jìn)入的時(shí)候應(yīng)該有個(gè)引導(dǎo)指引是通過滑動(dòng)刻尺內(nèi)容進(jìn)行設(shè)置。
  • 用戶在點(diǎn)擊刻尺的內(nèi)容時(shí),應(yīng)該提供設(shè)置的指引。
  • 用戶在按住“肌肉”或“脂肪”模塊移動(dòng)時(shí),也應(yīng)該提供設(shè)置的指引。
  • 最簡單的方法是在頁面提示“請滑動(dòng)刻尺”,但筆者不知道怎么融入這個(gè)界面(有建議的可知會下筆者,謝謝)。

詞語/拼音錯(cuò)誤。

這類型的錯(cuò)誤主要是在使用搜索引擎/輸入法遇到的。先來看看搜索引擎的例子(以百度為例):

拖拉及1

拖拉及2

筆者搜索“拖拉及”,百度根據(jù)關(guān)鍵詞判斷用戶意圖,首先對用戶搜索關(guān)鍵詞時(shí)發(fā)生的可能拼寫錯(cuò)誤提供糾錯(cuò)幫助。然后,給出了搜索拖拉機(jī)的結(jié)果頁面,并在搜索下面提供文案告訴用戶這是關(guān)鍵詞拖拉機(jī)的搜索結(jié)果,同時(shí)也提供給用戶繼續(xù)想要搜索“拖拉及”的鏈接——如果用戶輸入的關(guān)鍵詞并沒有出現(xiàn)錯(cuò)誤,那么就可以通過鏈接快速的重新進(jìn)行搜索。

為什么這邊不先提供搜索“拖拉及”的結(jié)果,然后在提供文案給出搜索“拖拉機(jī)”的鏈接呢?我想這邊的原因在于,百度的搜索結(jié)果是根據(jù)熱詞和熱度優(yōu)先搜索的,這也符合一個(gè)搜索引擎的產(chǎn)品形態(tài)。所以說,產(chǎn)品設(shè)計(jì)也要跟產(chǎn)品形(ce)態(tài)(lie)相結(jié)合。

接下來說說輸入法(以搜狗輸入法為例):

1

2

如第一張圖,筆者想輸入“相信”兩個(gè)字,把g和n對換;或如第二張圖筆者想輸入“產(chǎn)品”兩個(gè)字,把n和b輸入。這在快速敲鍵盤的時(shí)候是經(jīng)常能遇到的事情,這時(shí)輸入法給出的結(jié)果中,包括了“錯(cuò)誤的結(jié)果”但卻是用戶本來想輸入的。

以上兩種產(chǎn)品的設(shè)計(jì),不僅提高了產(chǎn)品的容錯(cuò)能力,提高了用戶搜索/輸入效率,還會給用戶帶來驚喜的感覺(特別是第一次使用的時(shí)候),對產(chǎn)品產(chǎn)生潛在的好感。

PS:為什么是百度和搜狗!因?yàn)楣P者常用的就是這兩個(gè)= =!

內(nèi)容不符合規(guī)則。

這類型的錯(cuò)誤常見于表單的填寫,最經(jīng)常接觸的我想莫過于登錄和注冊了,以下就注冊模塊舉一個(gè)例子分析:

QQ20150813161510

如上圖,我想再也沒有比這個(gè)更簡單的注冊頁面了,輸入賬號和密碼即完成注冊。筆者根據(jù)頁面提示內(nèi)容,在帳號輸入125467,然后輸入密碼,點(diǎn)擊注冊,出現(xiàn)圖二和圖三的提示。有經(jīng)驗(yàn)的童鞋可能猜到我要說什么了,但我還是要說…

首先說說提示信息的問題。第一張圖明明告訴筆者帳號的限制只是“英文或英文+數(shù)字”,而用戶密碼好像沒啥限制,提示信息卻又告訴筆者帳號“需為4-13個(gè)字符,不能為純數(shù)字”,密碼“需為6-16個(gè)字符,區(qū)分大小寫”。

另外,同時(shí)輸入帳號和密碼時(shí),先提示密碼有問題,然后點(diǎn)擊注冊后,又提示帳號有問題。

  • 大部分用戶1:字符是啥?跟字有區(qū)別嗎?
  • 大部分用戶2:哥,你不要只提示部分內(nèi)容,一次性說明白會死啊?
  • 大部分用戶3:哥,你能不能一次性提示完錯(cuò)誤信息?

PS:筆者簡直無法忍受了!還是應(yīng)該把設(shè)計(jì)師拉去槍斃一百次…

觀察了下帳號/密碼輸入框的長度,筆者認(rèn)為這邊比較好的反饋信息設(shè)計(jì)應(yīng)該是這樣的:

  • 進(jìn)入注冊頁面時(shí),帳號輸入框默認(rèn)顯示“4-13個(gè)字的英文或英文+數(shù)字組合”,密碼輸入框默認(rèn)顯示“6-16個(gè)字符,區(qū)分大小寫”——提示規(guī)則要全面。
  • 用戶在點(diǎn)擊密碼輸入框時(shí),如帳號信息輸入有誤就應(yīng)該馬上給予提示——操作要最便捷。

二、訪問錯(cuò)誤

這類型的錯(cuò)誤大概有3情況:某個(gè)功能不能使用,某個(gè)頁面不能打開,加載數(shù)據(jù)失敗。

功能不能使用。

我們來看兩個(gè)例子的對比:

7a899e510fb30f24f292ece0ca95d143ac4b03cc

30adcbef76094b366a8f804ea2cc7cd98d109d70

第一張圖是筆者在公眾平臺申請多客服失敗時(shí)的提示,既沒有告訴筆者失敗的原因又沒有告訴筆者遇到這種情況的解決方案,害的筆者以為是不滿足申請多客服的條件,還反復(fù)檢查了好幾次。

第二張圖是筆者訪問某個(gè)視頻網(wǎng)站,無法播放時(shí)的提示,筆者覺得這個(gè)反饋就非常到位(必須給36個(gè)贊),既讓筆者知道為什么無法播放還提供想要完成播放的解決方案。

兩個(gè)對比起來,筆者忍不住吐槽下第一張圖:真的不能告訴哥哥為什么出錯(cuò),你給個(gè)可以讓我反饋問題的聯(lián)系方式也好??!

頁面不能打開。

這種類型的反饋筆者遇到的優(yōu)秀設(shè)計(jì)太多了,以下就以筆者認(rèn)為最好的一個(gè)為例:

5711652_163357763322_2

Ps:第一眼到這個(gè)頁面的時(shí)候,筆者還沒發(fā)覺這個(gè)是404頁面

可愛吧~清新吧~正常情況下訪問到404頁面總是不會有什么好心情,但是看到這個(gè)完全沒有這個(gè)感覺(即使有也被沖淡了),還會有種新奇的感覺,然后頁面又提供了“Q我吧”的解決方案,簡直帥呆了??!不信看看以下幾個(gè)雖然也很有趣的設(shè)計(jì):

220751dw3jn0iin6yf57k6

201105171815M42610F01010P00001231

D42B46DBA46308B6454DF265F531A049

20131122113427-527473239

20111020195257-1228575758

加載失敗。

原本是沒有考慮過要寫這種情況的,但微信有個(gè)地方忍不住想吐槽下。事情是筆者的網(wǎng)絡(luò)信號不知什么情況總是不太好(呃…手機(jī)用的比較差= =!),然后每次在“發(fā)現(xiàn)-朋友圈”上會有紅點(diǎn),但是進(jìn)入朋友圈頁面,看著那個(gè)“圈圈”轉(zhuǎn)完后…

咦?尼瑪這還不是剛才的那些內(nèi)容嗎?剛才更新的消息哪去了?。?!

這邊就不能設(shè)置成“圈圈”轉(zhuǎn)完后,拉個(gè)“橫幅”出來告訴筆者,你的網(wǎng)絡(luò)太差勁了,敢不敢換個(gè)能愉快玩耍的網(wǎng)絡(luò)…

最后,說說設(shè)計(jì)這回事:

你可以靠模擬用戶場景、可以用數(shù)據(jù)分析、又或者用戶行為觀察等等方法來發(fā)現(xiàn)用戶容易出現(xiàn)的錯(cuò)誤,然后根據(jù)錯(cuò)誤給出提示或解決方案。但是筆者認(rèn)為這種發(fā)現(xiàn)錯(cuò)誤的方法太笨了,筆者比較追崇平時(shí)多看別的作品,因?yàn)閺淖髌分心悴粌H也能發(fā)現(xiàn)問題(用戶容易出現(xiàn)的錯(cuò)誤),同時(shí)還能學(xué)學(xué)別人設(shè)計(jì)的藝術(shù),為自己的設(shè)計(jì)積累添磚加瓦。

隨意聊聊,謝謝欣賞!

 

本文由 @W_joker(微信公眾號:cpsyll)原創(chuàng)投稿,并經(jīng)人人都是產(chǎn)品經(jīng)理編輯。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. ”然后每次在“發(fā)現(xiàn)-朋友圈”上會有紅點(diǎn),但是進(jìn)入朋友圈頁面,看著那個(gè)“圈圈”轉(zhuǎn)完后…“
    ———–這是因?yàn)槟愕呐笥寻l(fā)了狀態(tài)又刪除的緣故,如果這也提示,就違背人性了,我之所以把狀態(tài)刪了,就是不希望被別人知道我發(fā)過狀態(tài)。。。

    來自江蘇 回復(fù)
    1. 我說的這種情況是網(wǎng)絡(luò)刷新不出來,不是因?yàn)闋顟B(tài)刪除的。 切換到好的網(wǎng)絡(luò)環(huán)境下,重新刷新就出來了。

      來自福建 回復(fù)
  2. 用戶在點(diǎn)擊密碼輸入框時(shí),如帳號信息輸入有誤就應(yīng)該馬上給予提示——操作要最便捷。
    上面這句不完全贊同,用戶在輸入的時(shí)候不能打擾,因?yàn)橛脩暨€沒有輸入完成!試想條件是要輸入大于8位的英文和數(shù)字的組合,那么用戶在輸入過程中一直受到提示的干擾,而且提示一般很顯眼,這種體驗(yàn)簡直是要抓狂的。“我沒輸完你怎么知道我輸錯(cuò)了??!”當(dāng)然還有一種情況,在同樣的條件限制下我輸入了中文,這種情況下直接限制輸入,同時(shí)提示還是可以接受的。

    來自廣東 回復(fù)
    1. 你看錯(cuò)啦,我說的是“輸入帳號信息”去點(diǎn)擊“密碼輸入框”,這時(shí)可以先判斷“帳號信息”

      來自福建 回復(fù)
    2. 噢~那你說的是分步判斷。抱歉啦~我太粗心 ??

      來自廣東 回復(fù)
  3. 還不錯(cuò),有點(diǎn)用

    來自福建 回復(fù)