搞定UI中報錯信息設計,輕鬆提升用戶體驗

 

在數字產品的用戶體驗設計中,只有在最理想的情況中,才能做到讓用戶和應用程序百分之百地順暢交互,並且不出現任何錯誤、技術故障以及其他不可預測的狀況。


但實際的情況是,在用戶體驗設計中,總是會或多或少地出現各種不可避免的錯誤。

 

第一部分:常出現的報錯有哪些?

 

當界面或應用無法執行用戶想要的操作時,就會造成錯誤的狀態或條件。通常,界面報錯有三種典型情況:

 

  • 應用無法完成用戶要求的操作(比如運用本身不具備某項功能或沒有某項技術支持時)

  • 應用無法理解用戶的輸入(或輸入無效)

  • 用戶嘗試大幅簡化需要更多不走的複雜操作(這通常是由於用戶不瞭解應用程序內部的流程而導致的)

 

當遇到以上情況,用戶就會感到困惑甚至沮喪。但既然無法避免這些情況,那麼設計師和開發人員則必須要考慮如何在錯誤出現時提供給用戶比較友好和流暢的體驗。

 

第二部分:處理UI中報錯信息的最佳實踐

 

前面提到,最理想的狀態就是不發生錯誤,但是這不現實。對於報錯信息的處理,首先需要根據實際情況而採取不同的預防策略,常用的方式有工具提示、彈框提示、教程、指示性提示、建議、突出顯示、設置限制等等,這些都是在儘量告知用戶不要去進行錯誤操作。但是,如果用戶已經做了呢?錯誤已經產生,又該如何應對?

 

1. 立即告知用戶

 

這時候就不要想什麼三思而後行了,必須立刻讓用戶知道錯誤已發生。關於用戶體驗最糟糕的情況便是用戶完全不瞭解發生了什麼,然後困在某一流程中。要誠實地對待用戶,不要試圖掩蓋錯誤。

 

例如,如果用戶要填寫由10個不同字段組成的表單時,切記不要只告知用戶表單填寫不正確,更不要讓用從第一個字段開始檢查哪裏不正確。必須在用戶輸入錯誤時,就立即告知,並且高亮該字段。

 

 

2. 使用公認的視覺標記

 

採用常規的用戶行爲模式,可以減輕認知負擔。尤其是在錯誤發生這樣的場景下,不要標新立異,使用大多數用戶可以快速識別的標記是最穩妥的做法。

 

就目前來看,紅色和感嘆號仍然是吸引用戶注意錯誤的最佳方式。但還有一點需要注意,不要只使用色彩作爲標記錯誤的唯一元素,如果遇到色盲的用戶怎麼辦呢?此外,還要考慮報錯設計在不同設備上的可讀性。

 

這是在ArtStation標記註冊錯誤的方法:系統用紅色標記該字段,並用文本進行提示。

 

 

3. 解釋錯誤的原因

 

不要以爲發生錯誤時解決了就好了,沒必要告知用戶爲何會出錯,無論錯誤的原因是什麼,都應該對用戶做出解釋。首先,用戶如果不瞭解自己的操作或應用中存在什麼問題,則可能很大概率上會重現同樣的問題;其次,錯誤會造成用戶焦慮的心理狀態,這很大程度上會造成一種錯誤的交互模式。

 

總之,當錯誤發生時,一定要快速對用戶做出解釋,並及時通知用戶。例如,當用戶登錄時遇到問題,不僅要通知“您無法登錄到應用程序”,還要解釋其原因,比如“用戶名和密碼不匹配”。

 

4. 不要添加多餘操作

 

一些交互設計師會把不同的錯誤放在單獨的頁面或彈出窗口中,儘管這樣的方式有其優勢,也足夠顯眼,但過度使用的話就會產生極大的副作用。在大多數情況下,其實只需要在交互區域中創建一個顏色對比標記就足夠了,使用消息框則顯得臃腫繁瑣,用戶還要再次點擊才能回到頁面。想象一下,如果你正在填寫註冊表,然後彈出了錯誤提示窗口,是不是很多餘?此時只需要提供一些驗證,並在字段附近顯示錯誤消息即可。

 

但是,如果由於錯誤而需要將用戶重定向到另一個頁面,這時候就需要使用彈出窗口了。

 

當用戶遺漏添加郵箱提交表單時的報錯設計:

 

 

5. 使用簡潔的提示語

 

提示錯誤時文案必須簡單明瞭,不要使用長句子,要讓用戶一眼可見。此外,也不要使用術語,例如“發生錯誤4.7”或“語法錯誤”,這些設計人員和開發人員使用的語言,對於用戶而言並不是很好理解。

 

6. 不要責怪用戶

 

很多產品人員會忍不住吐槽:用戶爲什麼這也不懂那也不懂。用戶體驗設計中有本好書,叫做《don’t make me think》,用戶就是用戶,是不能抱怨甚至期待的神奇羣體。此外,要注意報錯提示中的語言使用技巧,不要暗示用戶“很笨”,比如當用戶輸入了錯誤的字段時,客觀地提示“輸入有效的電子郵件地址”即可,不要提示“您輸入了無效電子郵件地址”。

 

7. 給出建設性的解決方案

 

出錯時,僅以正確的方式告知用戶遠遠不夠,如何幫助用戶解決纔是更關鍵的步驟。必須迅速讓用戶知道如何解決問題:

 

  • 瀏覽網頁時:引導用戶去往其他頁面,首頁往往是最佳選擇;

  • 在移動界面中:可以讓用戶進行返回操作,或者快速鏈接到錯誤點;

  • 表單或其他流程中:在出錯時立即告知,不要在所有流程結束時才提示。

 

8. 使用圖像和圖標

 

用戶接收視覺信息比文字信息快速很多,因此可以嘗試在報錯界面上使用圖標或圖像,此外,圖片還具有很大的情感吸引力,可以緩解用戶處理錯誤的緊張心理。

 

9. 測試與分析

 

無論設計階段如何仔細,也不可能排查全部的報錯場景,報錯是一個持續的過程,來自真實用戶的反饋是改善用戶體驗設計的最佳方法。如果想快速測試,可以採用A/B test測試不同的方案。

 

10. 適當增加趣味性

 

報錯頁面也可以不枯燥無聊,適當增加設計趣味性可以很大程度上減少負面影響。比如Dribbble上的404頁面就是非常好的例子。由於其目標受衆是設計師,故而使用了設計師的作品組合成爲數字404,讓設計師用戶誤以爲在查看一種新奇組合的作品集。這裏還有更多404報錯頁面的創意設計,一定會給你很多靈感。

 

Dribbble的404頁面設計:

 

 

以上就是本次的全部內容了,最後進行一個簡單的小結,在進行UI中報錯信息設計時,秉承以下理念,則可以很大程度上完成對錯誤信息的有效處理:

  • 使用簡潔的提示語,保持信息和文案清晰可讀

  • 立即告知用戶,快速引起用戶注意

  • 提出有建設性的解決方案,幫助用戶快速解決

  • 不要添加多餘的操作,不要花費用戶的精力和時間

  • 不要責怪用戶,報錯信息也要傳達禮貌友好的態度

  • 使用圖像和圖標,並增加一些富含情感的趣味性設計,緩解用戶焦慮。

作者:Marina Yalanska

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章