申請表單最佳做法

協助使用者註冊、登入及管理帳戶詳細資料，盡量減少麻煩。

Sam Dutton

如果使用者需要登入貴網站，則良好的註冊表單設計至關重要。對於連線不佳、使用行動裝置、急忙或處於壓力下的使用者來說，這一點尤其重要。設計不良的註冊表單會導致跳出率偏高。每個跳出事件都可能代表失去一位不滿的使用者，而非只是錯失註冊商機。

試試看： 如果您想透過實作教學課程瞭解這些最佳做法，請參閱註冊表單最佳做法程式碼研究室。

以下是簡單的註冊表單範例，其中展示了所有最佳做法：

注意： 本文將說明表單的最佳做法。本文不會說明如何透過第三方身分識別提供者 (聯合登入) 實作註冊功能，也不會說明如何建構後端服務來驗證使用者、儲存憑證及管理帳戶。將 Google 登入整合至網頁應用程式一文說明如何在註冊選項中加入聯合登入功能。「管理使用者帳戶、授權和密碼的 12 項最佳做法」一文概述了管理使用者帳戶的核心後端原則。

檢查清單

• 盡量避免登入。
• 清楚顯示建立帳戶的方式。
• 清楚顯示如何存取帳戶詳細資料。
• 減少表單雜訊。
• 考量工作階段長度。
• 協助密碼管理工具安全地建議及儲存密碼。
• 不允許使用遭到外洩的密碼。
• 允許貼上密碼。
• 請勿以純文字格式儲存或傳送密碼。
• 不要強制更新密碼。
• 簡化密碼變更或重設程序。
• 啟用聯合登入。
• 簡化帳戶切換程序。
• 考慮提供多重驗證。
• 使用者名稱的注意事項。
• 在實地和實驗室進行測試。
• 在各種瀏覽器、裝置和平台上進行測試。

盡量避免登入

在導入註冊表單並要求使用者在網站上建立帳戶前，請先考慮是否真的需要這麼做。盡可能避免將功能設為登入後才能存取。

最佳的註冊表單是沒有註冊表單！

要求使用者建立帳戶，就會讓您與使用者之間產生阻礙，導致使用者無法達成目標。您是請使用者幫忙，並要求他們信任您會妥善處理個人資料。每個密碼和儲存的資料項目都會產生隱私權和安全性「資料債務」，成為網站的成本和責任。

如果您要求使用者建立帳戶的主要原因，是為了在導覽或瀏覽工作階段之間儲存資訊，建議您改用用戶端儲存空間。對於購物網站而言，強制要求使用者建立帳戶才能購物，是購物車放棄率的主要原因。你應該將訪客結帳設為預設值。

讓登入流程一目瞭然

明確說明如何在網站上建立帳戶，例如在頁面右上方顯示「登入」或「Sign in」按鈕。避免使用模稜兩可的圖示或模糊不清的文字 (例如「加入我們！」)，「加入我們」)，且不要在導覽選單中隱藏登入功能。可用性專家史蒂夫．克魯格 (Steve Krug) 曾對網站可用性提出以下建議：「不要讓我思考！」如果需要說服網頁團隊成員，請使用數據分析功能，說明不同選項的影響。

讓使用者清楚瞭解登入程序。圖示可能會造成誤解，但「登入」按鈕或連結則很明顯。

注意： 您可能會想知道是否要新增按鈕 (或連結)，以便使用者建立帳戶，並讓現有使用者登入。許多熱門網站現在只會顯示單一「登入」按鈕。使用者輕觸或點選該按鈕時，系統也會提供建立帳戶的連結 (視需要而定)。這也是目前常見的模式，使用者可能會瞭解這種模式，但您可以使用互動分析來監控單一按鈕是否最適合。

Gmail 登入頁面上有建立帳戶的連結。
如果視窗大小大於此處顯示的大小，Gmail 會顯示「Sign in」連結和「Create an account」按鈕。

請務必為透過 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 等網站就採用了這類版本。

在 Medium.com 中無須密碼登入。

與聯盟登入功能一樣，這項功能還有另一項優點，就是您不必管理使用者密碼。

考量工作階段時間長度

無論您採用何種方法處理使用者身分，都必須謹慎決定工作階段長度：使用者可保持登入多久，以及可能導致您將他們登出的因素。

請考量使用者是使用行動裝置還是電腦，以及他們是在電腦上或共用裝置上分享。

注意： 您可以針對敏感功能 (例如購物或帳戶更新) 強制重新驗證，解決共用裝置的部分問題。如要進一步瞭解如何實作重新驗證機制，請參閱「您的第一個 WebAuthn 應用程式」程式碼研究室。

協助密碼管理工具安全地建議及儲存密碼

您可以協助第三方和內建的瀏覽器密碼管理工具建議及儲存密碼，讓使用者不必自行選擇、記住或輸入密碼。密碼管理工具在現代瀏覽器中運作良好，可在不同裝置、不同平台和網路應用程式之間同步帳戶，並支援新裝置。

因此，正確編寫註冊表單的程式碼，尤其是使用正確的自動完成值，就顯得格外重要。如果是註冊表單，請使用 autocomplete="new-password" 輸入新密碼，並盡可能在其他表單欄位 (例如 autocomplete="email" 和 autocomplete="tel") 中加入正確的自動完成值。您也可以在註冊和登入表單中使用不同的 name 和 id 值，為 form 元素本身以及任何 input、select 和 textarea 元素提供協助。

您也應使用適當的 type 屬性，在行動裝置上提供正確的鍵盤，並啟用瀏覽器內建的基本驗證功能。如需進一步瞭解，請參閱付款和地址表單最佳做法。

注意： 登入表單最佳做法提供許多提示，說明如何改善表單設計、版面配置和無障礙功能，以及如何正確編寫表單程式碼，以便充分利用內建的瀏覽器功能。

確保使用者輸入安全的密碼

最佳做法是啟用密碼管理工具，讓系統提供密碼建議，您應鼓勵使用者接受瀏覽器和第三方瀏覽器管理工具建議的高強度密碼。

不過，許多使用者都想自行輸入密碼，因此您必須實施密碼強度規則。美國國家標準暨技術研究院 (NIST) 說明如何避免使用不安全的密碼。

警告： 部分網站的註冊表單設有密碼驗證規則，不允許使用瀏覽器和第三方密碼管理工具產生的高強度密碼。請確認您的網站不會這樣做，因為這會中斷表單填寫作業、讓使用者感到不便，並要求使用者自行設定密碼，而這類密碼的安全性可能不如密碼管理工具產生的密碼。

不允許使用遭到外洩的密碼

無論您為密碼設定何種規則，都絕對不應使用在安全性違規事件中遭到外洩的密碼。

使用者輸入密碼後，您需要確認密碼是否已遭到入侵。Have I Been Pwned 網站提供 API 供您檢查密碼，您也可以自行以服務形式執行這項作業。

您也可以使用 Google 密碼管理工具檢查現有密碼是否遭到入侵。

如果您拒絕使用者提出的密碼，請具體說明拒絕的原因。在輸入欄中顯示問題並說明如何修正，但請在使用者輸入值後立即顯示，而不是在使用者提交註冊表單後，等待伺服器回應時才顯示。

說明密碼遭拒的原因。

不禁止貼上密碼

部分網站不允許在密碼輸入框中貼上文字。

禁止使用者貼上密碼會讓他們感到困擾，並鼓勵使用者使用容易記住的密碼 (因此可能更容易遭到入侵)，根據英國國家網路安全中心 (National Cyber Security Centre) 等機構的說法，這可能會降低安全性。使用者只有在嘗試貼上密碼後，才會知道系統不允許貼上密碼，因此禁止貼上密碼並不會避免剪貼簿的安全漏洞。

切勿以純文字格式儲存或傳輸密碼

請務必使用鹽值和雜湊加密密碼，並不要嘗試自行設計雜湊演算法！

不強制更新密碼

請勿強制要求使用者隨意更新密碼。

強制更新密碼對 IT 部門來說可能會造成成本，也會讓使用者感到困擾，而且對安全性並沒有太大影響。這也可能會鼓勵使用者使用不安全的易記密碼，或保留實體密碼記錄。

請監控帳戶是否有異常活動，並提醒使用者，不要強制要求使用者更新密碼。如有可能，您也應監控密碼是否因資料侵害事件而外洩。

您也應提供使用者存取帳戶登入記錄的權限，讓他們查看登入的位置和時間。

Gmail 帳戶活動頁面。

讓使用者輕鬆變更或重設密碼

請清楚告知使用者如何更新帳戶密碼。在某些網站上，這項工作難度出乎意料。

當然，您也應讓使用者在忘記密碼時，能輕鬆重設密碼。Open Web Application Security Project 提供詳細指引，說明如何處理遺失密碼的問題。

為了保護您的商家和使用者，如果使用者發現密碼遭到入侵，請務必協助他們變更密碼。為簡化這項操作，請在網站中加入 /.well-known/change-password 網址，將使用者重新導向至密碼管理頁面。這樣一來，密碼管理工具就能直接將使用者導向可變更網站密碼的頁面。這項功能現已在 Safari 和 Chrome 中實作，並將陸續推出至其他瀏覽器。新增知名的密碼變更網址，讓使用者輕鬆變更密碼說明如何實作這項功能。

您也應讓使用者輕鬆刪除帳戶 (如果他們有此需求)。

透過第三方識別資訊提供者提供登入功能

許多使用者偏好使用電子郵件地址和密碼註冊表單登入網站。不過，您也應讓使用者能夠透過第三方身分識別資訊提供者 (也稱為聯合登入) 登入。

WordPress 登入頁面，顯示 Google 和 Apple 登入選項。

這種方法有幾個優點：如果使用者是透過聯合登入建立帳戶，您就不需要要求、傳送或儲存密碼。

您也可以透過聯合登入功能存取其他已驗證的個人資料，例如電子郵件地址，這表示使用者不必輸入這類資料，您也不必親自進行驗證。使用者在取得新裝置時，也可以透過聯合登入功能輕鬆登入。

將 Google 登入整合至網頁應用程式一文說明如何在註冊選項中加入聯合登入功能。您也可以使用其他身分驗證平台。

注意： 使用者拿到新裝置後的「第一天體驗」越來越重要。使用者預期可透過多種裝置登入，包括手機、筆記型電腦、電腦、平板電腦、電視或車輛。如果註冊和登入表單無法提供順暢的使用體驗，您可能會因此流失使用者，或至少會失去與使用者的聯繫，直到他們重新設定帳戶為止。您必須盡可能讓使用新裝置的使用者快速輕鬆地在您的網站上開始使用。這也是聯合登入功能可發揮作用的另一個領域。

簡化帳戶切換程序

許多使用者會共用裝置，並使用同一個瀏覽器切換帳戶。無論使用者是否使用聯合登入功能，您都應簡化帳戶切換程序。

在 Gmail 中切換帳戶。

考慮提供多重驗證

多重驗證功能可確保使用者提供多種驗證方式。舉例來說，除了要求使用者設定密碼，您也可以強制使用者透過電子郵件或簡訊傳送的一次性密碼驗證，或是使用應用程式中的一次性密碼、安全金鑰或指紋感應器進行驗證。簡訊動態密碼最佳做法和透過 WebAuthn 啟用強式驗證說明如何導入多重驗證。

如果您的網站會處理個人或私密資訊，建議您提供 (或強制執行) 多重驗證功能。

謹慎使用使用者名稱

除非 (或直到) 您需要使用者名稱，否則請勿強制要求使用者名稱。讓使用者只需使用電子郵件地址 (或電話號碼) 和密碼註冊及登入，如果他們偏好聯合登入，也可以使用這項功能。請勿強迫使用者選擇並記住使用者名稱。

如果您的網站確實需要使用者名稱，請勿對使用者名稱設下不合理的規則，也不要禁止使用者更新使用者名稱。在後端，您應為每個使用者帳戶產生專屬 ID，而非根據使用者名稱等個人資料產生 ID。

此外，請務必使用 autocomplete="username" 做為使用者名稱。

注意： 如同個人姓名，請確認使用者名稱不限於拉丁字母的字元。付款和地址表單最佳做法說明如何使用 Unicode 字母比對驗證，以及為何要這麼做。

在各種裝置、平台、瀏覽器和版本上進行測試

請在使用者最常使用的平台上測試註冊表單。表單元素的功能可能會有所不同，且可視區大小的差異可能會導致版面配置問題。BrowserStack 可讓您在各種裝置和瀏覽器上免費測試開放原始碼專案。

導入數據分析和真實使用者監控功能

您需要實地資料和實驗室資料，才能瞭解使用者如何體驗註冊表單。Analytics 和真實使用者監控 (RUM) 會提供使用者的實際體驗資料，例如註冊頁面載入所需的時間、使用者與哪些 UI 元件互動 (或未互動)，以及使用者完成註冊所需的時間。

• 網頁分析：註冊流程中每個網頁的網頁瀏覽、跳出率和離開率。
• 互動分析：目標漏斗和事件會指出使用者在哪個階段放棄註冊流程，以及有多少使用者點選按鈕、連結和註冊頁面的其他元件。
• 網站效能：以使用者為中心的指標可讓您瞭解註冊流程的載入速度是否緩慢，或視覺效果是否不穩定。

即使是細微的調整，也能產生巨大的影響，您可以使用 Analytics 和 RUM 進行最佳化及變更優先順序，並監控網站是否有本機測試無法顯示的問題。

持續學習

• 登入表單最佳做法
• 付款和地址表單的最佳做法
• 建立出色的表單
• 行動表單設計的最佳做法
• 功能更強大的表單控制項
• 建立無障礙表單
• 使用憑證管理 API 簡化註冊流程
• 使用 WebOTP API 在網路上驗證電話號碼

相片來源：@ecowarriorprincess 在 Unsplash 上提供。