60 秒決策
先確認使用者要完成的事。
適合使用
- 欄位目前的輸入不符合明確規則，且使用者需要知道怎麼改。
- 錯誤可對應到單一欄位或單一群組。
不適合使用
- 只畫紅框或只用驚嘆號。
- 以「輸入錯誤」這類沒有修正方向的文字結束。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
說出問題與修法
「請輸入含有 @ 的公司 Email」比「格式錯誤」少一次猜測。
放在欄位附近
使用者應在看見錯誤欄位時，就能找到對應訊息。
以文字搭配狀態
可用 aria-invalid 與 aria-describedby，但畫面上的錯誤也要可讀。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
尚未驗證
剛進入空欄位時不需要急著顯示錯誤。
格式錯誤
保留原值，指出格式與範例。
必填未填
說明缺少哪一項資料。
已修正
移除過期錯誤，不留紅框讓人懷疑。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
公司 Email 格式錯誤
先觀察：錯誤文字是否指出欄位、原因與修正範例。
操作：輸入 eric-example.com，再改成 [email protected]。
預期結果：原值保留並能修正；有效後錯誤狀態消失。
可操作 Demo
欄位附近的錯誤訊息
目前 Email 格式不正確。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「公司 Email」的 Error Message。輸入格式錯誤時保留使用者原值，在欄位附近顯示「請輸入含有 @ 的公司 Email，例如 [email protected]」；設定 aria-invalid，並用 aria-describedby 關聯錯誤訊息。不要只寫「格式錯誤」。驗收清單
不要只確認欄位能不能點。
- 訊息是否說出具體問題？
- 是否給出修正方向或範例？
- 欄位是否標示 aria-invalid？
- 錯誤訊息是否與欄位關聯？
- 修正後是否清除舊錯誤？