如何寫出優(yōu)秀的錯誤提示

沒有任何系統(tǒng)百分百沒有錯誤。錯誤來源可能是用戶也可能是系統(tǒng)錯誤。在這兩種情況下,正確的處理對用戶體驗是至關重要的。

優(yōu)秀的錯誤提示必備的三個組成部分:

  • 清晰的文字

  • 正確的位置

  • 良好的視覺設計

清晰的文字

1. 錯誤提示應該是簡潔清晰的

錯誤提示應該清楚的指出問題在哪里,為什么發(fā)生,應該怎么處理這個問題。把錯誤提示想象成是與用戶對話——它應該讓人感覺是給人看的(避免一些專業(yè)用語)。也請確保你的錯誤提示是有禮貌的、易理解的、友好的、易懂的。

image

2. 錯誤提示應該是有用的

僅僅描述發(fā)生的錯誤是不夠的,還要告訴用戶如何簡單的解決這個錯誤。

例如,微軟描述了什么是錯誤的并在錯誤提示中提供了解決方案,方便用戶能立馬解決問題。

image

3. 錯誤提示針對具體情況

很多時候網(wǎng)站對驗證狀態(tài)都只用同一個錯誤提示:沒填寫郵箱信息——“輸入一個有效的郵箱地址”,你少輸了個“@”——“輸入一個有效的郵箱地址”。

MailChimp使用了另外一種方法,他們?yōu)槊糠N驗證狀態(tài)提供三種錯誤提示:1,提交表單時檢查輸入字段是否為空。2,檢查是否有“@”和“.”字符(不論如何,“請輸入一個有效信息”不是一個好的錯誤提示,它不夠清晰的表明你需要輸入的是什么。)告訴你的用戶確切的提示而不是用一個通用的提示。

image

4. 錯誤提示應該是有禮貌的

不要因為你的用戶做錯了而責怪他們。對你的用戶更有禮貌點,讓他們感覺方便舒適。這是一個絕佳機會,可以向你的用戶展示品牌和通過錯誤提示添加產(chǎn)品個性。

image

5. 如果可以的話,幽默一點

謹慎在錯誤提示中運用幽默。首先這個錯誤提示應該是有實際意義的,然后你可以為了用戶體驗增加一些幽默元素。

image

錯誤提示的正確顯示位置

一個好的錯誤提示是你在需要的地方看到他。避免錯誤的摘要,將錯誤提示放在與它相關的UI元素旁。

image

為錯誤提示制造好的視覺引導

錯誤提示應該在視覺上清晰。利用文字和背景色的對比,用戶可以非常輕松的注意到這個提示信息。

通常紅色被用來做錯誤提示,但在某些例子里,黃色或者橘色也會被用在警示中。在這兩種情況下,一定要保證錯誤文字清晰可辨,與背景色對比明顯。同時不要忘記特殊人群,為了色盲患者我們在文字旁邊提供相關的UI圖標。


image

結論

錯誤提示是個提升用戶體驗的好機會,展示你們的產(chǎn)品和品牌個性。注意語言、放置位置、視覺設計,這些影響著錯誤提示優(yōu)劣。


原文地址

翻譯:空格鄭

作者:Vitaly Dulenko

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 簡評:網(wǎng)站 / app 的 UI 設計必然要考慮如何展示出錯消息。1.說人話,讓用戶知道具體哪兒出錯了、正確操作是...
    極小光閱讀 1,782評論 3 22
  • 文/曼 這次我們談談婚姻 ,談談愛情。 剛剛看完綜藝節(jié)目-《一路上有你》看第一集的時候,忍不住吐槽,哎,李湘的老公...
    愛旅行Lolo閱讀 356評論 0 0
  • *A.自由分享的Ulord 【有需求,無極限】 從互聯(lián)網(wǎng)到移動互聯(lián)網(wǎng),再到當下風光初現(xiàn)的區(qū)塊鏈時代,從面的鋪設、線...
    圍城_169f閱讀 505評論 4 49
  • 我是一名再普通不過的二本生,兩年半的大學時光讓我難忘,我覺得大學應該過得這么充實才對。 大一那年剛剛來到陌生的城...
    周學文閱讀 620評論 1 2
  • 炎熱初夏,憂傷的開始,傷感的秋天已逝去,寒冰刺骨的冬天如期而至,而你不知歸期。
    時光末路L閱讀 296評論 0 1

友情鏈接更多精彩內(nèi)容