本文中，我們會討論如何通過優(yōu)化錯誤提示信息，來優(yōu)化UI表單的設(shè)計。

在UI界面的設(shè)計中，用戶的操作失誤不可避免，通過錯誤提示將當(dāng)前狀態(tài)傳達(dá)給用戶，這種反饋機(jī)制可以幫助用戶及時作出調(diào)整并找到合理的解決方案。盡管錯誤信息很常見，卻往往不被設(shè)計師重視。草草的處理錯誤信息、制作邏輯混亂的錯誤信息會使用戶感到沮喪，以致最終放棄你的應(yīng)用。相反，處理得當(dāng)?shù)腻e誤提示，卻可以變失敗為驚喜。

一、表單中錯誤信息的設(shè)計方案

用戶不喜歡表單，原因之一就是糾正輸入錯誤信息的成本過高。如何讓用戶通過不同的報錯信息提醒，繞過障礙順利完成表單，是讓用戶體驗流暢順滑的關(guān)鍵所在。

糟糕的錯誤信息在很大程度上是源自于用戶體驗設(shè)計流程上的規(guī)劃失誤。為什么這么說呢？在原型設(shè)計階段，用戶體驗設(shè)計師就需要考慮到可能會出現(xiàn)的錯誤，以及相應(yīng)的錯誤反饋，確保用戶在報錯信息的幫助下，最終能夠完成這個階段的任務(wù)，抵達(dá)他們的目標(biāo)。

1、在當(dāng)前頁面及時反饋

用戶并不喜歡填完一個長表單并提交之后，才發(fā)現(xiàn)哪里填錯了。在錯誤出現(xiàn)之后，界面應(yīng)該在第一時刻將錯誤信息呈現(xiàn)出來，用戶不必等到點擊提交按鈕才看到錯誤，他們能更早改正錯誤。

在上面兩個錯誤信息呈現(xiàn)的案例當(dāng)中，第一個頁面使用了彈出框來呈現(xiàn)錯誤信息，告知用戶需要填寫詳細(xì)信息才能付款。用戶則需要關(guān)閉彈出框之后，再重新填寫，這增加了額外的步驟。而用戶關(guān)閉彈出框之后再填寫的時候，也有一定的機(jī)率會忘記彈出框的具體要求和內(nèi)容，導(dǎo)致無法正確填寫。這種耗時又令人沮喪的用戶體驗，用戶不會喜歡的。

正確的形式是直接在界面中呈現(xiàn)報錯信息，并且報錯信息緊貼著對應(yīng)的輸入框，以醒目的色彩在輸入框下方呈現(xiàn)，用戶能收到即時的反饋，也能清晰的標(biāo)注出所有的要求，便于用戶更正。

2、錯誤信息的最佳位置

在制作表單時，你通常會把錯誤信息放在哪里呢？如果錯誤信息沒有放在用戶期望的位置，那么可能會影響完成表單的效果。

當(dāng)用戶犯錯時，他們需要了解這些錯誤是什么，以便他們能夠糾正錯誤并重新提交表單。如果表單過于復(fù)雜填寫困難，他們會改變主意。

◎頂部錯誤提示vs行間錯誤提示

錯誤消息的兩個最常見的位置位于表單的頂部，和輸入框的行間。哪個位置對用戶來說更直觀呢？

一項研究發(fā)現(xiàn)，在表單頂部顯示所有錯誤消息會給用戶記憶造成較高的認(rèn)知負(fù)荷。這會強制用戶回憶每個錯誤輸入框中的錯誤消息。

減少用戶認(rèn)知負(fù)荷的方法是在輸入框行間顯示錯誤信息。行間的錯誤提示可以幫助當(dāng)場識別錯誤而不是靠回憶錯誤，這讓用戶可以更快更輕松地糾正錯誤。

另一項研究發(fā)現(xiàn)“錯誤字段和錯誤信息之間的距離會影響錯誤糾正的效率”。在表單的頂部和底部放置錯誤信息時用戶反應(yīng)更正的時間最長，而行間錯誤信息可以縮短反應(yīng)時間。

在表單的頂部和底部放置錯誤信息，也導(dǎo)致用戶錯誤率最高，完成時間最長，滿意度。和頂部、行間錯誤信息相比，底部錯誤信息的糾錯成功率。

◎用戶更偏愛的錯誤信息位置

該研究證明，將錯誤信息與錯誤的字段鄰近放置可以獲得最佳性能，并且指出了最直觀的顯示位置。

調(diào)研中讓用戶來選擇把錯誤提示放在上圖的哪個位置更滿意，更多的用戶喜歡輸入框右邊的錯誤提示位置。

位于輸入框左側(cè)的錯誤信息位置被評為最差。對話框上面的位置導(dǎo)致了最高的認(rèn)知負(fù)荷，隨后是字段之下的錯誤消息。

◎為什么右側(cè)的位置是最好的

理解為什么用戶更偏愛將錯誤消息放置在字段右側(cè)是很重要的。通過這種方式，設(shè)計師可以更好地向其他人介紹在制定設(shè)計方案時用戶的行為偏好。

西方的閱讀習(xí)慣是從左到右的。當(dāng)用戶的視線從輸入框移動到錯誤消息時，感覺就像一個自然的過程，需要很少的精力和視覺工作。將他們的眼睛從錯誤消息移回輸入框以進(jìn)行糾正也遵循重新讀取文本的自然流程。

◎為什么左側(cè)的位置是最差的

將錯誤消息放在輸入框的左邊，違背了西方的閱讀習(xí)慣。當(dāng)出現(xiàn)錯誤提示時，用戶的視線朝著與自然閱讀流程相反的方向移動。這種方式很不自然，有悖于用戶習(xí)慣，并且在用戶調(diào)研中得到了證實。

這樣的排布也與我們的直覺相反，因為用戶期望在左側(cè)放置有更高優(yōu)先級的元素。將錯誤消息放置在左側(cè)意味著它比要輸入的字段更重要。但事實上用戶需要專注于糾正他們的輸入，因此輸入框應(yīng)該是更重要的元素。

◎上側(cè)的位置為什么會增加用戶的認(rèn)知負(fù)荷

用戶對輸入框上面的錯誤提示有著更高的認(rèn)知負(fù)荷（例如表格頂部對齊的標(biāo)簽）。這是因為用戶會把錯誤提示和輸入框中的提示文案混淆。

這兩個文本靠得很近會產(chǎn)生視覺噪音，在用戶嘗試讀取錯誤消息或輸入框的提示標(biāo)簽時分散注意力。他們看到兩段文案卻很難專注于其中一個，并且可能混淆它們。

◎移動設(shè)備上表單的最佳錯誤信息位置

手機(jī)屏幕缺少水平空間來并排顯示錯誤消息和標(biāo)簽文案。這意味著把錯誤信息放在右側(cè)不是移動表單上的最佳位置。

對于移動設(shè)備，更好的方式是請將錯誤信息放置在輸入框下方。這是該研究中用戶第二最喜歡的位置。雖然它不符合用戶自然的從左到右的閱讀流程，但它確實與自然的從上到下的閱讀流程相對應(yīng)。

當(dāng)用戶閱讀文本時，他們習(xí)慣將視線從頁面的左側(cè)移動到右側(cè)。錯誤信息低于輸入框，使它遵循垂直閱讀過程。

將錯誤消息放置得太靠近下面的字段標(biāo)簽時，可能會增加用戶閱讀文本時的認(rèn)知負(fù)荷。你可以通過將它們隔開足夠的間隔來防止這種情況。

◎右邊還是下邊，哪個是最好的位置？

錯誤消息的最佳位置在輸入框的右側(cè)和下方。但是你應(yīng)該使用哪個位置？這取決于你有多少時間來實現(xiàn)。

如果你用來實現(xiàn)web端和app端的時間有限，可以選擇在下方放置錯誤信息。在web端實現(xiàn)后，方便在app端進(jìn)行適配。

如果你有足夠的開發(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)雅地表達(dá)出錯誤信息。有效的錯誤提示應(yīng)該提供如下信息：

明確表達(dá)發(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ù)限制而出名，他們會在用戶達(dá)到字?jǐn)?shù)上限之前提出警示。

結(jié)語

從不出現(xiàn)的錯誤信息才是最好的。最佳方式是引導(dǎo)用戶向正確方向前進(jìn)，第一時間預(yù)防錯誤發(fā)生。但當(dāng)錯誤確實發(fā)生時，設(shè)計精良的錯誤處理，不僅能教育用戶按你預(yù)期的方式使用app，還能防止用戶感到茫然。在設(shè)計錯誤信息時應(yīng)遵循以上的方法，好的體驗讓用戶可以以最小的工作量和最少的思考，快速完成表單，讓他們可以有時間來完成他們真正想要做的事情。