60 秒決策
先確認使用者要完成的事。
適合使用
- 使用者在輸入前需要知道格式、上限、用途或不可逆後果。
- 說明短而直接，能放在欄位附近。
不適合使用
- 把欄位名稱藏在輔助文字裡。
- 說明很長又有複雜結構，應改為可展開說明或獨立頁面。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
規則在需要前出現
格式或字數上限放在輸入前看得到的位置，而不是送出後才揭曉。
一段只說一件事
說「工作用 Email，邀請信會寄到這裡」比堆滿系統背景容易讀。
與欄位建立關聯
短文字說明可用 aria-describedby 與對應欄位連結。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
輸入前
格式、限制或用途清楚可讀。
有值
原本規則仍保留，避免使用者輸入後失去參考。
規則被違反
由錯誤訊息接手指出目前問題與修正方式。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
公司 Email 說明
先觀察：Label、輔助文字與欄位各自是否只負責一件事。
操作：閱讀說明後輸入一個 Email。
預期結果：在輸入前就知道邀請信會寄往哪裡與該填什麼。
可操作 Demo
輸入前的欄位說明
請輸入工作用 Email，邀請信會寄到這裡。
說明已與欄位關聯。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「公司 Email」欄位的 Helper Text。Label 下方說明「請輸入工作用 Email，邀請信會寄到這裡」，並以 aria-describedby 與欄位關聯。說明要在輸入前看得到，不要拿 Placeholder 當規則。驗收清單
不要只確認欄位能不能點。
- 是否在輸入前說明真正需要的規則？
- 是否沒有取代 Label？
- 內容是否短且具體？
- 是否以 aria-describedby 正確關聯？