01

選擇與資料相符的輸入類型

email、tel、url、number 和日期類型會影響手機鍵盤、驗證和輔助技術。電話號碼通常不適合 number,因為前導零、加號和空格都有意義;金額亦應按業務規則處理小數與地區格式。

搭配 inputmode 和 autocomplete 提供額外提示,但伺服器仍必須驗證。不要只依賴鍵盤外觀限制使用者輸入。

02

確認鍵盤不會遮擋目前任務

在 iOS Safari 和 Android Chrome 實際聚焦頁面底部的欄位,確認目前輸入框、錯誤訊息和下一步按鈕仍可見。固定於底部的 CTA、Cookie 橫幅及聊天按鈕很容易在鍵盤出現後重疊。

  • 測試第一個和最後一個欄位
  • 測試直向及橫向
  • 測試頁面縮放及較大文字
  • 確認鍵盤的下一項、完成和返回行為
03

以真實自動填寫資料測試

自動填寫會一次改變多個欄位,可能繞過只監聽按鍵的驗證邏輯。使用測試姓名、地址、電話和密碼管理器,確認標籤不會被內容遮蓋,國家和地區欄位亦能同步更新。

登入和付款流程要特別測試密碼管理器、一次性驗證碼及貼上。禁止貼上通常會降低完成率,也會妨礙安全密碼的使用。

04

讓錯誤訊息可見、具體且可恢復

提交失敗後,把焦點移到錯誤摘要或第一個無效欄位,並在欄位附近說明如何修正。只用紅色邊框不足以讓色覺障礙或螢幕閱讀器使用者理解問題。

保留已輸入的正確資料,避免一次錯誤令使用者重新填寫整張表。伺服器錯誤、逾時和重複提交亦要有清楚狀態。

05

完整走一次最慢的成功路徑

使用較慢網絡、較長姓名、國際電話、複雜地址和附件完成一次提交。記錄每一步的 viewport、鍵盤狀態、預期結果及實際結果,並確認成功頁不會因重新整理而重複提交。