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