交互細節研究：錯誤信息提示在表單中的最佳位置

最常見的錯誤信息提示放置位置是表單的上方或內部，那么哪個位置對用戶來說體驗更好呢？

在你的表單設計中，你會把錯誤信息提示放在哪個位置呢？

如果它們不符合用戶預期，就可能成為用戶體驗上的障礙。試想，當用戶輸入錯誤的信息時，他們首先需要理解錯誤是什么，然后才是修正錯誤、重新提交表單。但如果這個過程太費勁，他們可能就會選擇放棄繼續填寫。

表單上方的有效性 VS 內部的有效性

最常見的錯誤信息提示放置位置是表單的上方或內部，那么哪個位置對用戶來說體驗更好呢？

有研究發現，在表單上方顯示錯誤信息提示，會對用戶的記憶產生負擔。當填寫錯誤時，錯誤信息提示在最上方容易讓用戶在改正信息的時候要去回憶，到底是哪里填錯了，怎樣才能填正確。

而把錯誤信息提示放在表單內部可以減少用戶的記憶負擔，用戶主要依賴于即時識別而非回憶，所以會更快更簡單地改正錯誤。

另一個研究發現：“輸入錯誤和錯誤信息提示的距離影響錯誤修正的效率”。把錯誤信息放在表單頂部或者底部，會導致用戶修改錯誤所需的時間最長，而內聯形式的錯誤信息提示所需要修改的時間是最短的。

同時，將錯誤信息放在表單頂部或者底部在用戶側，錯誤率最高、修改時間最長，用戶滿意度也最低。其中，與頂部和內聯相比，底部的提示具有最低的糾錯成功率。

錯誤信息提示位置的用戶偏好

研究證明，內聯形式的錯誤提示可以得到最佳的用戶體驗，同時這項研究還給上下左右四個方向排了優先級（如下圖）。

參與這項研究的用戶，對他們最滿意的信息提示位置進行了評級，顯示出了強烈的用戶偏好。

放置在左側的錯誤消息被評為最差，在上方的被認為難以記憶，下方的被認為比較難記。

輸入框右側是最佳區域

理解為什么放在右側能夠符合用戶習慣與期望是重要的，通過這種方式，設計師可以做出體驗更好的產品。

西方的閱讀習慣是從左到右。當用戶視線從輸入到錯誤反饋，這是一個非常自然的過程，不需要動腦。從看到錯誤信息提示到輸入改正錯誤，也需要遵循閱讀習慣。

輸入框左側是最差區域

把錯誤信息提示放在左側區域，違背了西方的閱讀習慣。當錯誤信息提示出現的時候，用戶的視覺動線需要朝著閱讀習慣的反方向移動。這會讓用戶感覺到不自然，而且這會違反直覺，因為用戶預期高優先級的元素應該是在左側。

把錯誤信息提示放在左側讓人感覺比輸入項更重要。但是輸入內容顯然是更重要的，因為用戶需要聚焦在輸入框上，修正他們的輸入。

輸入框的上方增加識別負擔

當錯誤信息提示放在輸入框的上方，而表格上方有標簽項的時候，用戶會經歷更高的認知負擔。這是因為錯誤信息提示和標簽混在一起，很容易讓用戶產生疑惑。

根據臨近原則，當用戶嘗試去閱讀錯誤信息提示或標簽的時候，這兩個文本會產生視覺混亂，所以結果是難以聚焦而讓用戶分心。

錯誤信息提示在移動端表單的最佳位置

手機屏幕缺少橫向空間去展示輸入框兩側的錯誤信息提示，這就意味著放在右側的錯誤信息提示對于手機端表單來說不是最好的位置。

正確的處理方式是把錯誤信息提示放在輸入框下方，這是用戶第二偏好的位置。盡管這不符合用戶的從左到右的自然閱讀流程，但符合從上到下的閱讀順序。

當用戶閱讀文本時，他們的視線是從左到右、從上到下地看。錯誤信息提示在輸入框的下方是符合垂直的閱讀順序的。需要注意的是，把錯誤信息放在輸入框下方時，不要與表單項目標題靠的太近，會容易形成干擾。

輸入框的右側 VS 輸入框的下方：哪個是最佳位置？

輸入框的右側或下方都是錯誤信息提示的最佳位置。選哪個位置取決于你需要做多少工作。

如果你想節省時間，桌面端和手機端設同一套的話，選下方位置。

如果你有時間和資源為兩端做不同的設計，那手機端選下方，桌面端選右側，這個方案可幫助縮短用戶在電腦端的視覺路徑。

直覺的錯誤信息提示位置

總結一下，錯誤信息提示的位置應該和用戶的閱讀流程保持一致，這樣錯誤改正用到的成本最少。當減少用戶操作和思考的時間精力，用戶就能更快完成表格。沒有人喜歡填寫表單，因此，幫助用戶更快地填寫表單，產品的體驗才能變得更好。

 

原文：https://medium.com/@uxmovement/the-best-place-for-error-messages-on-forms-6e9e84740be8

作者：UX Movement

譯者：胡白白

本文由 @彩云Sky 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議