協助使用者註冊
註冊表單通常是使用者第一次與網站上的表單互動。 良好的註冊表單設計極為重要,同時也應提供安全的表單。
讓我們來看看申請表單,以及如何協助使用者在網站上完成註冊。
盡量簡化註冊表單,只顯示建立帳戶所需的表單控制項。 請勿將表單控制項加倍,讓使用者能正確取得帳戶詳細資料。 請改為傳送確認電子郵件。
協助使用者填寫帳戶詳細資料
您可以使用適當的 autocomplete
屬性,協助使用者填寫帳戶詳細資料。在電子郵件欄位使用 autocomplete="email"
,使用 autocomplete="new-password"
做為新密碼欄位。
進一步瞭解自動填入輸入控制項。
您也可以提供顯示密碼 (<button>
) 協助使用者輸入安全的密碼。
進一步瞭解解鎖密碼模式。
確認註冊表單安全無虞
請勿以純文字格式儲存或傳送密碼。 請務必加上鹽和雜湊密碼,請勿嘗試自行開發雜湊演算法。
提供多重驗證功能,尤其是儲存個人或機密資料時。簡訊動態密碼最佳做法與使用 WebAuthn 啟用高強度驗證會說明如何實作多重驗證機制。
確保使用者未使用遭外洩的密碼。 舉例來說,您可以使用 I Been Pwned 提供的 API 偵測遭外洩的密碼,並建議使用者填入其他新密碼,或在密碼遭駭時警告使用者。
協助使用者登入
一起來瞭解如何建立登入表單,確保使用者能輕鬆登入網站。
將註冊按鈕和登入按鈕的位置顯而易見。 請確認您的表單可在觸控裝置上使用:
- 按鈕的輕觸目標大小至少為 48 像素。
- 表單元素的
font-size
大小夠大 (20px
就適合在行動裝置上使用)。 - 表單控制項之間有足夠的空間 (
margin
),且輸入內容夠大 (在行動裝置上至少要有padding: 15px
)。
協助使用者輸入電子郵件地址和密碼
協助瀏覽器和密碼管理工具自動填入帳戶詳細資料。
使用 autocomplete="email"
做為電子郵件欄位,使用 autocomplete="current-password"
做為目前的密碼欄位。
如要協助使用者手動填入帳戶詳細資料,請在電子郵件欄位使用 type="email"
,在行動裝置上顯示適當的螢幕小鍵盤。
在電子郵件和密碼欄位中使用 required
屬性,以便在使用者提交表單時發出警告。
建議您使用即時驗證,在使用者輸入無效資料後立即加以修正,而不需等待表單提交。
確保使用者可以看到自己輸入的密碼
為維護使用者隱私,根據預設,您為 <input type="password">
填入的文字會經過模糊處理。
顯示 <button>
來切換所輸入文字的顯示設定,協助使用者輸入密碼。
進一步瞭解如何實作密碼提示 <button>
。
確認您的登入和註冊表單可用
定期與真人測試您的登入和註冊表單,確認驗證能正常運作。 您可以透過數據分析和實際使用者評估 (RUM) 收集實際資料,並透過 Lighthouse 和 PageSpeed Insights 等工具自行執行測試。進一步瞭解如何測試可用性及收集數據分析資料。
確保您的表單可以在不同瀏覽器和平台上正常運作。 只要使用鍵盤或螢幕閱讀器 (例如 Mac 上的 VoiceOver 或 Windows NVDA),即可在各種螢幕大小上測試表單。
協助使用者變更帳戶設定
請確保使用者可以變更每項帳戶設定,包括電子郵件地址、密碼和使用者名稱
請清楚說明您儲存的資料類型,並協助使用者隨時下載所有個人資料。 確保使用者可以視需要刪除自己的帳戶。 某些地區的帳戶管理功能 (例如這些功能) 可能需要法律要求。
確保使用者可以更新密碼
讓使用者輕鬆更新密碼。
變更密碼前,先要求使用者提供目前的密碼,並傳送電子郵件有關密碼變更的電子郵件,並選擇還原並鎖定帳戶。
新增要求新密碼的選項,並考慮提供用來申請新密碼的 .well-known
網址。