讓使用者能輕鬆註冊、登入及管理帳戶詳細資料，
如果使用者需要登入您的網站，良好的註冊表單設計非常重要。對於連線品質不佳、使用行動裝置、趕時間或壓力過低的使用者，上述情況尤其明顯。設計不良的訂閱表單會獲得較高的跳出率。 每次跳出都有可能流失且感到不悅的使用者，而不只是錯過註冊機會。
以下提供簡單的申請表範例，當中說明所有最佳做法：
檢查清單
- 如果可以，請避免登入。
- 清楚指明建立帳戶的方式。
- 清楚指明如何存取帳戶詳細資料。
- 裁剪表單過於雜亂。
- 考量工作階段長度。
- 協助密碼管理工具安全地建議及儲存密碼。
- 不允許遭外洩的密碼。
- 允許貼上密碼。
- 切勿以純文字格式儲存或傳送密碼。
- 不要強制更新密碼。
- 輕鬆變更或重設密碼。
- 啟用聯合登入。
- 簡化帳戶轉移程序。
- 考慮提供多重驗證。
- 留意使用者名稱。
- 在實際環境和研究室中進行測試。
- 在各種瀏覽器、裝置和平台上進行測試。
如果情況允許，請避免登入
導入註冊表單並請使用者在網站上建立帳戶前，請先評估您是否確實需要這麼做。請盡可能避免讓登入後才能使用相關功能。
盡量不要填寫申請表單！
是以使用者建立帳戶的方式，有助於您瞭解他們想達成的目標。 您提出要求時希望取得使用者的信任，並要求他們信任您處理個人資料。每一組密碼和儲存的資料都會「負荷」「資料負債」，這會成為您網站的成本和責任。
如果您要求使用者建立帳戶通常是為了在導覽或瀏覽工作階段儲存資訊，請考慮改用用戶端儲存空間。就購物網站而言，強制使用者建立帳戶是促成購物車放棄的主要原因。你必須將訪客結帳機制設為預設付款方式。
讓登入程序顯而易見
請明確指出在網站上建立帳戶的方式，例如頁面右上角的「登入」或「登入」按鈕。避免使用模稜兩可的圖示或語意不明確的用語 (「開始上車！」、 「加入我們」)，不要在導覽選單中隱藏登入身分。可用性專家 Steve Krug 總結網站可用性：「別想不到！」如果需要說服您的網站團隊中的其他人，請使用分析來顯示不同選項的影響。
在比這裡顯示的視窗尺寸時，Gmail 會顯示「登入」連結和「建立帳戶」按鈕。
請務必為透過 Google 等識別資訊提供者註冊的使用者，以及同樣使用電子郵件地址和密碼註冊的使用者。這很簡單，您可以從識別資訊提供者的個人資料資料中存取使用者的電子郵件地址，並比對這兩個帳戶。以下程式碼顯示如何存取 Google 登入使用者的電子郵件資料。
// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
var profile = auth2.currentUser.get().getBasicProfile();
console.log(`Email: ${profile.getEmail()}`);
}
清楚說明存取帳戶詳細資料的方式
使用者登入後，請清楚說明存取帳戶詳細資料的方式。請特別留意如何變更或重設密碼。
裁剪表單內容
在註冊流程中，您的工作是將複雜程度降至最低，並保持使用者專注。讓版面更井然有序。 此刻不容緩
註冊時，請盡可能減少代碼數量。只在必要時收集其他使用者資料 (例如姓名和地址)，以及當使用者認為提供這些資料明顯受益時。請注意，您通訊及儲存的每個資料項目都會產生費用和責任。
請勿以使您輸入的內容重複曝光，只是為了確保使用者能取得正確的詳細聯絡資料。這樣會拖慢表單完成速度，而且如果自動填入表單欄位，就不合理。請在使用者輸入詳細聯絡資料後，改為傳送確認碼，然後在使用者回覆後繼續建立帳戶。這種常見的註冊模式是使用者常用的註冊模式。
建議您考慮在使用者每次透過新裝置或瀏覽器登入時傳送驗證碼，藉此不要輸入密碼。Slack 和 Medium 等網站會使用這個版本。
和聯合登入一樣，讓您不必管理使用者密碼，就能享有額外優勢。
考量工作階段長度
無論您採取哪種做法來識別使用者身分，您都需要仔細決定工作階段長度：使用者保持登入的時間長度，以及可能導致將使用者登出的原因。
考量使用者的使用行動裝置或電腦，以及他們是透過電腦共用，還是共用裝置。
協助密碼管理工具安全建議及儲存密碼
您可以協助第三方和內建瀏覽器的密碼管理工具建議及儲存密碼，這樣使用者就不必自行選擇、記住或輸入密碼。密碼管理工具適用於新型瀏覽器，可在各種裝置、平台專用和網頁應用程式之間同步處理帳戶，以及新裝置。
因此，請務必正確編寫註冊表單的程式碼，特別是使用正確的自動完成值。如果是註冊表單，請使用 autocomplete="new-password" 來設定新密碼，並盡可能在其他表單欄位 (例如 autocomplete="email" 和 autocomplete="tel") 中加入正確的自動完成值。您也可以在註冊和登入表單中，針對 form 元素以及任何 input、select 和 textarea 元素使用不同的 name 和 id 值，藉此協助密碼管理工具。
您也應該使用適當的 type 屬性，在行動裝置上提供正確的鍵盤，並啟用瀏覽器的基本內建驗證。詳情請參閱付款和地址表單的最佳做法。
要求使用者輸入安全密碼
因此最佳做法是啟用密碼管理工具來建議密碼，也建議你鼓勵使用者接受瀏覽器和第三方瀏覽器管理員建議的高強度密碼。
不過，許多使用者會想自行輸入密碼，因此您必須實作密碼強度規則。美國國家標準暨技術研究院 (National Institute of Standards and Technology) 一文說明瞭如何避免使用不安全的密碼。
不允許遭外洩的密碼
無論您選擇什麼密碼規則，一律不得允許因安全漏洞而外洩的密碼。
使用者輸入密碼後，您需要檢查該密碼是否為已遭入侵的密碼。have Ien Pwned 網站提供用於檢查密碼的 API，或者您也可以自行執行該服務。
您也可以使用 Google 的密碼管理工具檢查任何現有密碼是否遭到盜用。
如果您拒絕使用者建議的密碼，請明確告知使用者密碼遭拒的原因。 以內嵌方式顯示問題並解釋如何修正：使用者輸入值後，即不是在他們提交註冊表單後必須等待伺服器回應。
請勿貼上密碼
某些網站不允許將文字貼入密碼。
禁止貼上密碼會造成困擾的使用者、鼓勵記住 (因此更容易遭駭) 的密碼；此外，根據英國國家網路安全中心 (UK NationalCyber Security Centre) 等機構的經驗，確實可能會降低安全性。只有使用者會在嘗試貼上密碼「之後」才知道禁止貼上密碼，因此禁止貼上密碼不會避免剪貼簿安全漏洞。
請勿以純文字格式儲存或傳送密碼
請務必加碼並雜湊處理密碼，請勿嘗試自行開發雜湊演算法！
不強制更新密碼
強制更新密碼對 IT 部門來說可能花費高昂的成本，使用者會感到困擾，而且對安全性沒有太大影響。此外，我們也可能會鼓勵使用者使用不安全且令人印象深刻的密碼，或保存實體密碼。
您應該監控異常帳戶活動並警告使用者，而不要強制更新密碼。 盡可能監控密碼是否因資料侵害事件而外洩。
您也應該要提供使用者帳戶登入記錄的存取權，顯示登入發生的位置和時間。
輕鬆變更或重設密碼
請向使用者清楚說明更新帳戶密碼的位置和方式。在某些網站上 真的是很困難
當然，您也希望使用者在忘記密碼時，可以輕鬆重設密碼。 Open Web Application Security Project 提供如何處理遺失密碼的詳細指南。
為了保護您的企業和使用者安全，當使用者發現密碼遭到盜用時，請務必協助使用者變更密碼。為簡化作業，您應在網站上新增會重新導向密碼管理頁面的 /.well-known/change-password 網址。如此一來，密碼管理員就能直接前往使用者變更網站密碼的頁面。這項功能現已在 Safari 和 Chrome 中導入，其他瀏覽器也將陸續支援。藉由新增可供變更密碼的知名網址，協助使用者輕鬆變更密碼一文提供實作方式的說明。
另外，建議您也確保使用者能視需要輕鬆刪除帳戶。
透過第三方識別資訊提供者提供登入服務
許多使用者偏好使用電子郵件地址和密碼註冊表單登入網站。 不過，您也應該讓使用者能透過第三方識別資訊提供者 (也稱為聯合登入) 登入。
這種做法有幾個優點。如果使用者透過聯合登入功能建立帳戶，則您不必要求、通訊或儲存密碼。
您也可以透過聯合登入存取其他經過驗證的設定檔資訊，例如電子郵件地址。也就是說，使用者不必自行輸入資料，也不需要自行進行驗證。此外，聯合登入也可讓使用者在取得新裝置時更加輕鬆。
將 Google 登入整合至網頁應用程式，說明如何將聯合登入新增至註冊選項。您也可以使用其他多種身分識別平台。
輕鬆切換帳戶
許多使用者會透過同一個瀏覽器共用裝置，以及切換帳戶。不論使用者是否存取聯合登入，建議您盡量簡化帳戶切換。
建議提供多重驗證
多重驗證是指確保使用者可透過多種方式進行驗證。舉例來說，除了要求使用者設定密碼，您也可以利用電子郵件或簡訊傳送的一次性密碼，或使用應用程式一次性代碼、安全金鑰或指紋感應器，強制執行驗證程序。簡訊動態密碼最佳做法和使用 WebAuthn 啟用高強度驗證會說明如何實作多重驗證機制。
如果你的網站會處理個人或機密資訊，請務必提供 (或強制執行) 多重驗證機制。
妥善設定使用者名稱
除非是 (或直至) 需要使用者名稱，否則請勿堅持使用使用者名稱。讓使用者只須輸入電子郵件地址 (或電話號碼) 與密碼或聯合登入就能註冊及登入。請勿強制使用者選擇並記住使用者名稱。
如果網站確實要求使用者名稱，請勿採用不合理的規則，也不要阻止使用者更新使用者名稱。在後端，您應該為每個使用者帳戶產生唯一識別碼，而不是以使用者名稱等個人資料為依據的 ID。
此外，請務必在使用者名稱中使用 autocomplete="username"。
透過各種裝置、平台、瀏覽器和版本進行測試
請在使用者最常用的平台測試註冊表單。表單元素功能可能會有所不同，如果檢視點大小不同，可能會導致版面配置問題。BrowserStack 可針對多種裝置和瀏覽器，提供開放原始碼專案的免費測試。
實作數據分析和即時使用者監控功能
您需要現場資料和研究室資料，才能瞭解使用者對您的註冊表單的體驗。Analytics (分析) 和真實使用者監控 (RUM) 會針對使用者的實際體驗提供相關資料，例如註冊頁面載入時間、使用者與哪些 UI 元件互動 (或不會互動)，以及使用者完成註冊所需的時間。
- 網頁分析：申請流程中每個網頁的網頁瀏覽、跳出率和離開。
- 互動分析：目標漏斗和事件會指出使用者在何處放棄註冊流程，以及點擊按鈕、連結和註冊網頁其他元件所佔的比例。
- 網站效能：您可以透過以使用者為中心的指標，瞭解註冊流程載入速度緩慢或看起來不穩定的情況。
小幅調整可能會影響註冊表單的完成率。您可以透過 Analytics (分析) 和 RUM 來最佳化並排定變更的優先順序，以及監控網站是否有本機測試未發生的問題。
持續學習
- 登入表單最佳做法
- 付款和地址表單最佳做法
- 建立出色的表單
- 設計行動版表單的最佳做法
- 更強大的表單控制項
- 建立無障礙表單
- 使用 Credential Management API 簡化註冊流程
- 使用 WebOTP API 驗證網路上的電話號碼
相片由 @ecowarriorprincess 在 Unsplash 提供。