60 秒決策
先確認使用者要完成的事。
適合使用
- 欄位規則明確,且及早回饋真的能幫助使用者修正。
- 能選擇合理時機,例如離開欄位或輸入到足夠長度後。
不適合使用
- 使用者剛進入空欄位就立刻被紅色錯誤追著跑。
- 伺服器端才知道的規則被假裝成即時可判定。
畫面要說清楚的事
不要只交代外觀,也要交代資料與輸入規則。
先讓人開始輸入
不要在初始空值就顯示錯誤;可在 Blur 或已輸入後驗證。
成功與錯誤都說人話
「帳號可使用」與「至少輸入 4 個字」比只換綠紅色容易理解。
不要取代送出驗證
即時回饋減少小錯,但提交時仍需完整驗證與摘要。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
尚未互動
不顯示錯誤,保留需要的規則。
輸入不足
指出缺少什麼而不是只顯示紅框。
符合規則
以文字確認目前可用。
送出時再驗證
處理跨欄位或伺服器端才能判斷的規則。
操作 Demo
先知道要觀察什麼,再動手操作。
操作前先知道
登入帳號即時驗證
先觀察:初始空欄位不會顯示錯誤,輸入後才給具體回饋。
操作:輸入 abc,再改成 aurora-01,並離開欄位。
預期結果:少於 4 字指出規則;符合後顯示可使用。
可操作 Demo
在合理時機給即時回饋
至少 4 個字元,可使用英文字母、數字與連字號。
開始輸入後,系統會在離開欄位或輸入時提供回饋。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「登入帳號」Inline Validation。使用者離開欄位或輸入完成後才驗證;少於 4 個字時顯示具體錯誤,符合規則時顯示可使用。初次進入空欄位時不要立刻顯示紅色錯誤;錯誤與成功都要有文字,不只換邊框顏色。驗收清單
不要只確認欄位能不能點。
- 初始空值是否不立即顯示錯誤?
- 驗證時機是否符合使用者行為?
- 錯誤與成功是否都有文字?
- 是否仍保留送出時完整驗證?
- 規則是否真的能在前端判斷?