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