UX設計案例與無障礙設計
表單錯誤訊息設計❶：如何設計能讓更多人容易理解？
總結錯誤訊息的三大設計原則與設計四個注意點
在這個系列中，我們將介紹一些常見的UX設計pattern，並嘗試從Accessbiltiy的角度去講解這些pattern的優缺點，讓各位開發者在設計產品與網站的時候能夠有參考資料。
不論簡單或是複雜的系統，只要填表單就會有使用者出錯的環節。小至密碼輸入不相同，大至複雜的訂票系統等，我們都需要透過錯誤訊息的反饋來引導使用者填寫正確的資訊以能夠順利完成操作。
壞的錯誤訊息會增加使用者的認知負荷，也因為在系統出現錯誤的時候使用者的情緒都不會太好（你記得上次填表出錯的時候的心情嗎？），如果此時無法有有效引導的話，會對使用者體驗是一個很大的扣分項目。反過來說，好的錯誤訊息能夠快速促進使用者更有效率地完成任務。因此，錯誤訊息可以說是表單設計中非常重要的一環。
這篇文章總結了錯誤訊息的設計原則，以及在設計上面的一些注意點，希望對大家有幫助✨
錯誤訊息的目的
根據表單UX設計專書《Designing UX: Forms: Create Forms That Don’t Drive Your Users Crazy (Aspects of UX)》，表單錯誤訊息必須要達到三個目的：
- 告知使用者有錯誤發生
- 告知使用者什麼錯誤發生
- 告知使用者需要做什麼來修正或迴避錯誤
錯誤訊息設計四大原則：易發現，易理解，易定位，易修正
在Norman Group發布的《如何回報表單的錯誤（How to Report Errors in Forms: 10 Design Guidelines）》一文中，有明確指出設計錯誤訊息需要遵守的原則，我試著在此基礎上將各個大原則進行更詳細的解說：
易發現：錯誤訊息必須要容易被使用者發現
易發現原則在於確保明眼人與低視能使用者能夠發現錯誤訊息，以及能夠產生適當的反饋，讓螢幕閱讀器使用者得知有錯誤發生；在時間點上，盡量能夠在使用者完成任務的時候給予即時反饋，這樣就可以在發生錯誤的當下即時修正錯誤。
易理解：錯誤訊息必須要讓使用者容易理解
易理解主要在於錯誤訊息的文字本身。常見不易理解的例如：
- 敘述模糊：「填寫錯誤」（哪裡錯誤？）
- 使用系統語言而非一般常見語言：「錯誤代碼：GIAI4001」（GIAI4001是什麼意思？）
- 未提供適合的解決方案：「密碼未符合格式」（所以正確格式是什麼？）
易定位：使用者需要能夠輕易定位錯誤欄位
常見的定位問題如不知道哪裡產生錯誤，或是因為錯誤訊息的顯示的距離離錯誤欄位太遠導致需要使用者自行去尋找錯誤欄位。
易修正：使用者不應需要記得如何去訂正錯誤
易修正問題會在當錯誤訊息沒有顯示在欄位附近時，例如當系統統一顯示錯誤訊息在頁面上方或下方時，使用者必須要上下參照錯誤訊息，或是使用記憶來改正欄位。這會造成使用者的認知負荷，以及工作效率變低。
錯誤訊息設計注意點
🥳 不只依賴顏色做錯誤提示的區分
表單的錯誤提示常常分為兩個部分：
- 欄位框線有別於一般欄位的提示
- 錯誤訊息文字本身
由於最常見的錯誤提示是紅色的，而對部分色盲使用者而言紅色難以辨別，因此需要要搭配不同的表現方式來一起呈現。以欄位框線而言，除了用紅色框選出來之外，也可以將框線加粗顯示或是顯示符號。
也有設計是在確保對比度差異下把整塊欄位的背景色變成淺紅色，這樣色盲使用者也能察覺到背景顏色變灰，而錯誤訊息文字也可以透過加上icon與一般的提示文字進行區分。
🥳 將錯誤訊息擺在錯誤欄位附近
比起只統一顯示在其他地方（例如只顯示在頁面上面、下面、彈跳對話框中），將錯誤訊息顯示在欄位附近更能夠最佳說明錯誤訊息跟欄位之間的關係，從而讓使用者更有效率地理解錯誤內容，使用者也不需要一直上下滑動來回確認錯誤訊息並到欄位更正。
關於應該要把錯誤訊息擺在欄位的下面或是右邊，一般在網路上能找到蠻多說法。從無障礙的角度來說，我們會覺得把錯誤訊息擺在欄位下面比較適合。對於使用放大功能的使用者而言，上下滑動就能看到的內容是非常重要的操作要點，也因為錯誤訊息是在表單操作中很重要的回饋，如果放在螢幕右邊，很可能會被遺漏或是難以察覺，進而無法做有效修正。
🥳 不使用disabled送出按鈕來呈現錯誤
有些設計會在使用者沒有填寫表單的必填欄位或是出現錯誤的時候使用 disable 狀態的送出按鈕來表示錯誤。這樣的設計原本用意在於避免使用者在還沒有正確填寫完畢的時候遞交表單，但是這會產生幾個問題：
- disabled 狀態無法有效說明發生什麼問題。根據上述的易發現與易理解原則，我們可以發現 disabled 狀態其實沒有提供發生錯誤的任何提示。也許在簡單的表單，例如登入表格等只有兩格的表單還可以偵測，但是總體來說還是需要使用者自己去猜測問題來源。
- disabled 狀態的按鈕時常採用不滿顏色對比度的顏色（如淺灰色），且使用者光看外表可能難以辨別是二級按鈕還是 disabled 按鈕（尤其在二級按鈕也是灰色的狀態下）
- disabled 狀態的送出按鈕會使得動作無法觸發，難以得知使用者想送出的意圖，進而給與回饋。這個問題尤其適用於觸發訊息通知螢幕閱讀器使用者表單有誤的情境：當主動點擊按鈕時，我們可以很明確給予螢幕閱讀器回饋，但如果僅是使用焦點的移入或移出等較被動的條件成立就給予回饋，很可能會誤判使用者的意圖導致閱讀上的干擾。
🥳 注意螢幕閱讀器是否有適當錯誤訊息提示
通常錯誤訊息是在填寫完輸入格並檢查資料後會出現的內容。我們要確保這些錯誤訊息出現當下，是否有正確使用焦點的移動或訊號的發送來讓錯誤訊息被螢幕閱讀器使用者發覺。如果這個錯誤訊息僅是指出與表單中特定單一輸入格錯誤有關的話，留意將該錯誤訊息與輸入格關聯起來能讓焦點移到該輸入格時螢幕閱讀器就讀出關聯的錯誤訊息增強定位。
哈佛大學的 DIGITAL ACCESSIBILITY 研究中有關於螢幕閱讀器與錯誤訊息的資料。大家如果看下面影片，會發現在提交表單之後，螢幕閱讀器跟使用者說明：「你的表單出現錯誤」，且當回到填錯的欄位時，螢幕閱讀器也會告訴使用者：「錯誤內容，請填寫正確 email。」等與視覺上一致的回饋。
在這裡附上哈佛大學的表單錯誤相關頁面，裡面除了上述影片之外，還有在程式碼上要怎麼實踐的教學，有興趣的人也可以去看看唷！
關於表單的錯誤訊息要怎麼呈現，其實還有很多 pattern（例如應該要在送出表單之後統一呈現？還是在每輸入完一行就出現？），這些 pattern 的詳細講解我們會到下篇繼續說明唷！
