2018-5-17 資深UI設計者
本文中，我們會討論如何通過優化錯誤提示信息，來優化UI表單的設計。
在UI界面的設計中，用戶的操作失誤不可避免，通過錯誤提示將當前狀態傳達給用戶，這種反饋機制可以幫助用戶及時作出調整并找到合理的解決方案。盡管錯誤信息很常見，卻往往不被設計師重視。草草的處理錯誤信息、制作邏輯混亂的錯誤信息會使用戶感到沮喪，以致最終放棄你的應用。相反，處理得當的錯誤提示，卻可以變失敗為驚喜。
一、表單中錯誤信息的設計方案
用戶不喜歡表單，原因之一就是糾正輸入錯誤信息的成本過高。如何讓用戶通過不同的報錯信息提醒，繞過障礙順利完成表單，是讓用戶體驗流暢順滑的關鍵所在。
糟糕的錯誤信息在很大程度上是源自于用戶體驗設計流程上的規劃失誤。為什么這么說呢？在原型設計階段，用戶體驗設計師就需要考慮到可能會出現的錯誤，以及相應的錯誤反饋，確保用戶在報錯信息的幫助下，最終能夠完成這個階段的任務，抵達他們的目標。
1、在當前頁面及時反饋
用戶并不喜歡填完一個長表單并提交之后，才發現哪里填錯了。在錯誤出現之后，界面應該在第一時刻將錯誤信息呈現出來，用戶不必等到點擊提交按鈕才看到錯誤，他們能更早改正錯誤。
在上面兩個錯誤信息呈現的案例當中，第一個頁面使用了彈出框來呈現錯誤信息，告知用戶需要填寫詳細信息才能付款。用戶則需要關閉彈出框之后，再重新填寫，這增加了額外的步驟。而用戶關閉彈出框之后再填寫的時候，也有一定的機率會忘記彈出框的具體要求和內容，導致無法正確填寫。這種耗時又令人沮喪的用戶體驗，用戶不會喜歡的。
正確的形式是直接在界面中呈現報錯信息，并且報錯信息緊貼著對應的輸入框，以醒目的色彩在輸入框下方呈現，用戶能收到即時的反饋，也能清晰的標注出所有的要求，便于用戶更正。
2、錯誤信息的最佳位置
在制作表單時，你通常會把錯誤信息放在哪里呢？如果錯誤信息沒有放在用戶期望的位置，那么可能會影響完成表單的效果。
當用戶犯錯時，他們需要了解這些錯誤是什么，以便他們能夠糾正錯誤并重新提交表單。如果表單過于復雜填寫困難，他們會改變主意。
◎頂部錯誤提示vs行間錯誤提示
錯誤消息的兩個最常見的位置位于表單的頂部，和輸入框的行間。哪個位置對用戶來說更直觀呢？
一項研究發現，在表單頂部顯示所有錯誤消息會給用戶記憶造成較高的認知負荷。這會強制用戶回憶每個錯誤輸入框中的錯誤消息。
減少用戶認知負荷的方法是在輸入框行間顯示錯誤信息。行間的錯誤提示可以幫助當場識別錯誤而不是靠回憶錯誤，這讓用戶可以更快更輕松地糾正錯誤。
另一項研究發現“錯誤字段和錯誤信息之間的距離會影響錯誤糾正的效率”。在表單的頂部和底部放置錯誤信息時用戶反應更正的時間最長，而行間錯誤信息可以縮短反應時間。
在表單的頂部和底部放置錯誤信息，也導致用戶錯誤率最高，完成時間最長，滿意度。和頂部、行間錯誤信息相比，底部錯誤信息的糾錯成功率。
◎用戶更偏愛的錯誤信息位置
該研究證明，將錯誤信息與錯誤的字段鄰近放置可以獲得最佳性能，并且指出了最直觀的顯示位置。
調研中讓用戶來選擇把錯誤提示放在上圖的哪個位置更滿意，更多的用戶喜歡輸入框右邊的錯誤提示位置。
位于輸入框左側的錯誤信息位置被評為最差。對話框上面的位置導致了最高的認知負荷，隨后是字段之下的錯誤消息。
◎為什么右側的位置是最好的
理解為什么用戶更偏愛將錯誤消息放置在字段右側是很重要的。通過這種方式，設計師可以更好地向其他人介紹在制定設計方案時用戶的行為偏好。
西方的閱讀習慣是從左到右的。當用戶的視線從輸入框移動到錯誤消息時，感覺就像一個自然的過程，需要很少的精力和視覺工作。將他們的眼睛從錯誤消息移回輸入框以進行糾正也遵循重新讀取文本的自然流程。
◎為什么左側的位置是最差的
將錯誤消息放在輸入框的左邊，違背了西方的閱讀習慣。當出現錯誤提示時，用戶的視線朝著與自然閱讀流程相反的方向移動。這種方式很不自然，有悖于用戶習慣，并且在用戶調研中得到了證實。
這樣的排布也與我們的直覺相反，因為用戶期望在左側放置有更高優先級的元素。將錯誤消息放置在左側意味著它比要輸入的字段更重要。但事實上用戶需要專注于糾正他們的輸入，因此輸入框應該是更重要的元素。
◎上側的位置為什么會增加用戶的認知負荷
用戶對輸入框上面的錯誤提示有著更高的認知負荷（例如表格頂部對齊的標簽）。這是因為用戶會把錯誤提示和輸入框中的提示文案混淆。
這兩個文本靠得很近會產生視覺噪音，在用戶嘗試讀取錯誤消息或輸入框的提示標簽時分散注意力。他們看到兩段文案卻很難專注于其中一個，并且可能混淆它們。
◎移動設備上表單的最佳錯誤信息位置
手機屏幕缺少水平空間來并排顯示錯誤消息和標簽文案。這意味著把錯誤信息放在右側不是移動表單上的最佳位置。
對于移動設備，更好的方式是請將錯誤信息放置在輸入框下方。這是該研究中用戶第二最喜歡的位置。雖然它不符合用戶自然的從左到右的閱讀流程，但它確實與自然的從上到下的閱讀流程相對應。
當用戶閱讀文本時，他們習慣將視線從頁面的左側移動到右側。錯誤信息低于輸入框，使它遵循垂直閱讀過程。
將錯誤消息放置得太靠近下面的字段標簽時，可能會增加用戶閱讀文本時的認知負荷。你可以通過將它們隔開足夠的間隔來防止這種情況。
◎右邊還是下邊，哪個是最好的位置？
錯誤消息的最佳位置在輸入框的右側和下方。但是你應該使用哪個位置？這取決于你有多少時間來實現。
如果你用來實現web端和app端的時間有限，可以選擇在下方放置錯誤信息。在web端實現后，方便在app端進行適配。
如果你有足夠的開發時間，在web端請選擇輸入框的右側，而移動端考慮放在輸入框的下面。這樣不僅可以提供比較好的用戶瀏覽體驗，還能縮短表單的長度。
3、在視覺上要足夠突出
如果出錯之后，用戶無法迅速注意到報錯信息，這不僅僅浪費了時間，也耽誤了事情。正如 Jakbo Nielsen 所說：“最糟糕的報錯信息是那些對用戶而言根本看不到的報錯信息。”然而，難點也就在這個地方，加粗字體和彈出框對于用戶而言過于具有壓迫感，那么你要如何確保信息能被用戶注意到又不會顯得太過呢？不難，使用正確的色彩來輔助顯示。
色彩是用戶識別信息的重要途徑，它也是設計師向用戶傳遞信息的可靠工具。出于對比的目的，在白色的背景下，使用紅色的錯誤提示信息，會足夠醒目，又不會太過喧賓奪主。在某些情況下，紅色對用戶的壓力較大，也可以使用黃色或橙色來作為錯誤提示。在這兩種情況下，請確保錯誤文本清晰可辨，且與其背景的顏色有顯著的對比。
值得注意的是，色彩不應該是報錯信息呈現的唯一標準。考慮到網頁和移動端應用本身的可用性和可訪問性，設計師應該考慮到色盲用戶的需求，提供色彩以外的視覺提示，例如錯誤icon等，確保他們也可以看明白。
二、注意錯誤信息的文案推敲
從某種程度上，你能把上面幾條做好，你的報錯信息在美學特征和體驗上就沒有太多問題了。不過，要想設計最佳體驗的錯誤信息，文案的重要性也是顯而易見的，需要在言簡意賅的同時友好地幫助用戶解決問題。
10條可用性啟迪（經典的尼爾森十大可用性原則）中建議，要清晰優雅地表達出錯誤信息。有效的錯誤提示應該提供如下信息：
明確表達發生了什么
描述用戶應該如何應對
盡可能多地保留用戶輸入的信息
下面是文案設計的幾個小技巧。
1、確保錯誤信息是可理解的
把你的錯誤信息視為與用戶的對話——讓它聽起來像是為人類編寫的。確保你的錯誤信息是有禮貌，可理解的，而不是錯誤代碼和數據（諸如出現了錯誤43這樣的信息）。
2、清晰明確的指出錯誤
一些電子郵件的網站會在所有的錯誤場景使用同一個錯誤提示，如下圖。你不能只是簡單的提示用戶“輸入有效的電子郵件地址”，而應針對用戶的問題明確的指出錯誤所在，例如“缺少@字符”等。而MailChimp則以另一種方式來判斷錯誤——他們對于每個電子郵件的驗證包含3個錯誤信息：檢查輸入字段是否為空、是否有“@”字符、是否有“.”字符。針對用戶輸入的錯誤方式會提供相應的提示文案。
3、提供解決方案
錯誤信息應該明確定義問題是什么，為什么會發生，以及如何處理。只寫出錯誤是不夠的。應該向用戶盡可能簡單的展示如何盡快解決問題。
例如，Microsoft描述錯誤并在錯誤消息中提供解決方案，以便用戶可以立即解決此問題。
正如同Jonathan Colman 所說，正確的報錯信息通常使用簡明而清晰的文字，而失敗的報錯信息通常不會提供關于錯誤發生的具體狀況以及解決方案，更丑陋的做法是將錯誤信息完全隱藏起來。
下面的設計，就是很明顯的對比：
4. 錯誤信息應該禮貌
不要責怪你的用戶，即使他們做錯了。對用戶要有禮貌，讓他們感到舒適隨和。可以使用你的品牌聲音，來添加個性化的錯誤提示。
5. 如果恰當盡可能地幽默
在你的錯誤信息中小心使用幽默。首先，錯誤信息應該是提供信息和幫助。如果適合，在錯誤消息中添加一些幽默，可以改善用戶體驗。
三、如何有效的預防錯誤
設計過app的同學，應該很熟悉各種限制條件。例如網絡狀況差的情況下，很難填寫表單，而且幾乎沒法同步數據。要考慮到這些限制，設計更易使用的app，將錯誤減到最少。換句話說，應該提供建議、加上限制、保持靈活，第一時間預防用戶犯錯。
Twitter因推文的字數限制而出名，他們會在用戶達到字數上限之前提出警示。
結語
從不出現的錯誤信息才是最好的。最佳方式是引導用戶向正確方向前進，第一時間預防錯誤發生。但當錯誤確實發生時，設計精良的錯誤處理，不僅能教育用戶按你預期的方式使用app，還能防止用戶感到茫然。在設計錯誤信息時應遵循以上的方法，好的體驗讓用戶可以以最小的工作量和最少的思考，快速完成表單，讓他們可以有時間來完成他們真正想要做的事情。
