一個優秀的錯誤信息長啥樣?

3 評論 9897 瀏覽 53 收藏 12 分鐘

東東推薦:一個優秀的錯誤信息長啥樣?本文通過多個例子來說明,媽媽再也不用擔心我怎么設計錯誤提示啦!

想象一下你坐在辦公室的狹小隔間里,埋頭處理著已經折騰了許久的一個快上線的產品介紹,巨大的工作壓力和沉悶的氣氛讓你快喘不過氣來,真是希望周末快點到來。

但首先你得測試一下新產品的首頁能否在Windows上完美呈現。沒問題,你可靠的蘋果筆記本上有個虛擬機能幫助你運行Windows。

開啟虛擬機,然后Windows跳出一串通知 禮貌地提醒你升級系統,恩沒問題,繼續。

然后你就看到了這個:

呵呵,再加一句就成排比了,如果項目不那么緊張我可能已笑出聲來。

你冷笑了下,按下截屏鍵,準備把這張圖通過Twitter的Mac客戶端分享到網上。

當你點擊發送按鈕時,你看到了這個:

1-NN3x0pHBNq7sUpEb7gjmHw

托那些慵懶無能的程序員和設計師的福,想死的心都有了。在你快對一切感到絕望之際突然想到或許來點美食可以舒緩情緒。

嘿嘿!來點小籠包吧~

不過首先呢,需要回答Postmates(一款同城快遞app)冷不丁向你提出的這個哲學問題:

1-FcqcNfwT_jeJoOf5as_haw

那么什么樣的錯誤信息和對話窗口才算真正有用呢?

在經歷了上周前文所述的那些戲劇性事件之后,我們一起來看看一個優秀的錯誤信息應該是什么樣的。

蘋果公司一直算是用戶界面設計的先驅者,來看看人家是怎么做的。

OS X Human Interface Guidelines(蘋果桌面系統人機界面指南)是如何定義此類對話窗口的:

1-RSGWrWvqA0ubbg7BW8rz8w

在通知窗口內,用明晰、簡潔的語言來描述其內容。類似“一個錯誤發生了”的信息會讓用戶感到困惑,同時也會被那些熟手用戶厭惡。(……)你的文字需要詳盡描述行為的結果,并給出解決方法的建議。告訴用戶他們為什么要留意該問題。(……)在信息文本中包含解決問題的建議。(……)用用戶能理解的語言來表達。務必不要使用那些含義模糊或用戶難以理解的術語,畢竟通知窗口本身就夠讓人不安了。(……)盡可能避免使用“OK”作為默認按鍵?!癘K”這個詞的含義很模糊,特別是當用戶被詢問是否確定做某事之時。舉個例子,“OK,我想要完成這個行動”和“OK,我現在了解了我的行動可能產生的負面后果”中的“OK”是否是一個含義?

我們現在有大致方向了吧?對了,他們甚至還對措辭和語法有所定義:

如果你有請專業的視覺設計師來設計app里的圖標和圖片,那么就別忘了請一位專業的文案幫你琢磨app里的文本內容。

作為產品經理,亦或是app的設計師或開發者,你應該意識到app中“文案”的優先級絕不低于“讓應用正常運作”和“讓用戶界面高效易用”。

1-O72aGnhf1wmk1gACFUb2Fw

下面來看一些關于錯誤窗口的實例,邊看邊想想它們有沒有遵循前面提到的幾點:

1-JWd4UlV9MYA311f2fdKoVw

Windows手機,呵呵,“我們當前無法檢查升級”并沒什么卵用。為什么現在不能檢查升級?用戶又能對此做些什么?

對于這兩個問題,正解應是:手機上的時間未設置正確,導致升級服務器上的SSL證書無法被驗證。這才是錯誤信息之由來。只要調對系統時間,一切就都會恢復正常。

所以為什么Windows Phone就不能把這個彈窗改成:“鑒于安全性的原因,我們無法檢查是否有升級。這可能是因為你的手機時間和日期不正確造成的。檢查你的時間和日期設置并重試一遍!”或甚至更好:“請確保你的操作系統自動同步時間和日期?”

1-LSG1j5kgLal60qz-2ZRIUQ

谷歌,瞧瞧你這彈窗…為什么要在這里使用一個模態窗口來打斷用戶的進程呢(請注意這并不是原生的iOS地理位置授權提醒)?這個OK是什么鬼?到底能給我帶來什么好處?

如果用戶愿意打開共享位置信息的話,發起詢問是沒問題的;對于搜索引擎來說這種提醒也是合理的。但不要濫用那些需要用戶立即作出決定、且通常意味著重大問題的系統級別組件。

1-QgQT2Xu4p4TM0C-eiZE2tA

ESC鍵用來做應用鍵還是取消鍵?不不不,能不能正常點?這個星球上99%的軟件都視ESC為取消,你覺得是默認和人家一致的好,還是彈出個奇怪的模態窗口更合適?

嗯我知道有一些Adobe的軟件默認把ESC作為“應用”——然而即便如此它也應該在其它應用里通過設置實現。對這些厭惡彈窗的專家用戶而言,通過偏好設置進行調整都不是事兒。又或者,咱還是把模態窗口拋到一邊,把默認設置為取消,但在窗口的底部顯示一條“你是否想把ESC鍵作為應用鍵?點擊這里確認改變?!钡耐ㄖ獥l。注意了,這并不需要模態窗口的介入。

Adobe,別把問題都拋給用戶,請在默認項方面表現得更果決一些。

友情提示:最好的錯誤窗口就是不顯示窗口

其實對于上面提到的每一個例子而言,錯誤彈窗都是可以不出現的。我不完全確定Windows10的規范,但目前來看似乎它自己也不確定。

1 對于Twitter的錯誤彈窗而言,完全可以以toast的形式說明哪里出錯了,或可以直接先幫用戶解決問題,再詢問用戶是否處理妥善。在前面舉過的那個Twitter的例子其實真實的版本是這樣的:我想上傳一張高分辨率的圖片(大概有10000px的寬度),而Twitter對圖片有分辨率的限制。那么為什么不在我上傳之前就告訴我呢?為什么不在客戶端就幫我剪裁圖片至規定的尺寸呢?你完全可以那么做,然后給我展示一個小小的非模態信息:“注意:為了符合我們的尺寸限制,該圖片已經被剪裁?!?/p>

2 至于Postmate“簡約至極”的警告窗口:如果它都不能解釋清楚自己是什么,那么顯然就沒有必要跳出這么個彈窗來唬我。畢竟我唯一能確定的是點“No”不會導致什么糟糕的結果。

3 Window手機的升級信息:你的操作系統就不能自行聯網檢查當前時間和日期嗎,哥?更別提相關的技術(NTP)已經有三十多年的歷史了。

4 谷歌Chrome向用戶請求位置信息的方式顯然太過唐突,為什么不把它放到搜索結果或頁面最上方的某個banner里呢?這么一個彈窗真的顯得你對我們用戶的個人隱私饑渴難耐…

5 Photoshop: 默認設置。你可以通過行動條(action banner)的形式告訴用戶如何自定義選項,亦或是一個小教程也是可以的。

*Gmail在發送一封郵件后的“撤銷發送”banner算是一個很好的例子。這比跳出一個“你確定要發送這封郵件嗎?”的模態窗口要好得多。

我為大家準備了一份清單,你們可以打印出來貼在自己的辦公桌前。當你決定要在應用里添加警告或錯誤窗口時可以讀一讀。

對于錯誤信息最重要的三件事

不要濫用警告窗口來展示那些不必要的信息,不然人們會因此而忽視那些真正重要的東西。

不要臆想人們能懂你的信息是什么意思。他們可能在問題發生的好幾天后才看到你的這份“大禮”,因此記得始終包含足夠的信息來讓用戶理解問題發生的前因后果。

使用友好、非技術性、不那么嚇人的語氣。

你的錯誤窗口應該讓外行都能一下看懂。

*對最后一條不確定?找一個不懂技術的人看一下然后讓他用自己的話重述一遍。

1-jGHeYP2AkFz47DKITGKlGg

你們能在評論區里告訴我Medium的這個錯誤信息有哪里可以提升嗎?

本文原作者:Thomas Fuchs;譯者:勵定洲;來源:簡書

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 其實不知道總結的是否正確,但是我們有判斷的去看這個事情。還是在實踐中不斷總結提煉,但是感謝作者給我們提供了站在巨人肩膀上的機會。最后一個問題,感覺還是要告訴我們遇到這個問題可以做點什么。而不是哦我知道了,然后就這樣了。下一次還是如此。而且錯誤是啥,也不清楚。有一個小問題,錯誤信息提示是否精簡,我在設計中有的時候感覺不好概括呀

    來自廣東 回復
  2. 錯誤的引起的原因以及相應的解決措施。

    來自浙江 回復
  3. 有色眼鏡的味道太大

    來自中國 回復