長城上的貓

小編:在網絡信息迅速發展的時代,用戶體驗也越臻完善。但是很多情況下,我們還是無法避免遇到錯誤難測的時候。那么作為設計師的我們遇到這樣的情況該怎么處理呢?來看看以下這篇文,作者用實際案例圖文并茂的細細闡述。

 

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

但實際的情況是,在用戶體驗設計中,總是會或多或少地出現各種不可避免的錯誤。報錯幾乎是用戶體驗設計中不可或缺的一部分,關鍵在于設計師和開發工程師如何處理這些錯誤信息。

?

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

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

  • 應用無法完成用戶要求的操作(比如運用本身不具備某項功能或沒有某項技術支持時)
  • 應用無法理解用戶的輸入(或輸入無效)
  • 用戶嘗試大幅簡化需要更多不走的復雜操作(這通常是由于用戶不了解應用程序內部的流程而導致的)

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

?

第二部分 處理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,讓設計師用戶誤以為在查看一種新奇組合的作品集。

Dribbble的404頁面設計

 

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

  1. 使用簡潔的提示語,保持信息和文案清晰可讀
  2. ?立即告知用戶,快速引起用戶注意
  3. ?提出有建設性的解決方案,幫助用戶快速解決
  4. ?不要添加多余的操作,不要花費用戶的精力和時間
  5. ?不要責怪用戶,報錯信息也要傳達禮貌友好的態度
  6. ?使用圖像和圖標,并增加一些富含情感的趣味性設計,緩解用戶焦慮。?

?

寫在最后

為助力企業順利復工,保障產品設計協作高效流暢,摹客為產品設計團隊免費提供以下福利,助力產品經理、設計師、開發人員快速調整工作狀態,高效設計協作:

● 摹客在線設計協作 團隊版,免費贈送30天;

● 摹客在線設計協作 企業私有部署,免費部署30天。

點擊鏈接即可領?。?a target="_blank" rel="noopener noreferrer">https://www.mockplus.cn/anti-2019-ncov?hmsr=uicn?

 

原文地址:tubik?

譯文地址:摹客Mockplus

作者:Marina Yalanska

譯者:摹客

 

轉載請注明:學UI網 » 搞定UI中報錯信息設計,輕松提升用戶體驗

登錄收藏
 
你可能喜歡的:
大廠方法論|彈窗設計的5條原則大廠方法論|彈窗設計的5條原則
網頁頭部設計居然有這么多講究網頁頭部設計居然有這么多講究
為什么我做的頁面總是很“土”?為什么我做的頁面總是很“土”?
插畫手繪入門教程插畫手繪入門教程
創造有價值的“我的” | 讓設計有效且有趣創造有價值的“我的” | 讓設計有效且有趣
來自世界各地的平面設計:法國設計來自世界各地的平面設計:法國設計
從「數的物化」到「物的數化」 – 阿里云數字設計先驅從「數的物化」到「物的數化」 – 阿里云數字設計先驅
網易有道詞典交互策略思考網易有道詞典交互策略思考
為什么web的表單設計總是這么難?為什么web的表單設計總是這么難?
UI、UE都應該掌握的6條專業知識點UI、UE都應該掌握的6條專業知識點
?
街机捕鱼城金库券