申請表單最佳做法

讓使用者輕鬆註冊、登入及管理帳戶詳細資料。

Sam Dutton

如果使用者需要登入您的網站，最好的註冊表單設計是 至關重要尤其是當網路連線品質不佳、使用行動裝置或來自行動裝置 時間緊迫，或是處於壓力之中。設計不良的註冊表單獲得高跳出率。 每次跳出可能就代表使用者流失而感到不滿 (而不只是錯過的註冊使用者) 商機。

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

檢查清單

• 盡可能避免登入。
• 瞭解如何建立帳戶。
• 清楚說明如何查看帳戶詳細資料。
• 剪下表單內容。
• 考量工作階段長度。
• 協助密碼管理工具安全地提供及儲存密碼。
• 禁止遭外洩的密碼。
• 允許貼上密碼。
• 請勿以純文字儲存或傳送密碼。
• 不要強制更新密碼，
• 讓使用者輕鬆變更或重設密碼。
• 啟用聯合登入。
• 簡化帳戶切換程序。
• 考慮提供多重驗證。
• 請謹慎處理使用者名稱。
• 在實際操作與研究室中進行測試。
• 在各種瀏覽器、裝置和平台上進行測試。

盡可能避免登入

在您導入註冊表單並要求使用者在您的網站上建立帳戶之前，可以考慮之前， 或配合需求請盡可能避免限制登入後才能使用的功能。

請勿填寫申請表，但還是建議您填寫此表單！

在請使用者建立帳戶的情況下，你可能會認同他們想達成的目標。 您詢問使用者的意見，希望他們信任您提供個人資料。所有密碼和項目 您所儲存的資料，其維護隱私權與安全性「資料債」，因而成為 你的網站

如果您要求使用者建立帳戶的主要原因，是儲存使用者在瀏覽期間提供的資訊，或是 請考慮改用用戶端儲存空間。購物用 網站強迫使用者建立帳戶才能購買，這背後是其主要原因 放棄購物車您應該將訪客結帳功能設為預設選項。

簡化登入程序

明確說明如何在網站上建立帳戶，例如登入或登入 按鈕。避免使用模糊不清的圖示或籠統的用語 (例如「開始使用！」、「 可用性專家 Steve Krug 總結 因此網站可用性的原則：別讓我思考！如果需要 利用分析資料，向網路團隊中的其他人說服他們 只要設定成「自動重新啟動」 和「在主機維護期間」選項即可

請務必為透過 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"。您也可以使用其他name和id協助密碼管理工具 設定值，form 元素本身和所有 input、select 和 textarea 元素

您也應使用適當的 type 屬性 為行動裝置提供合適的鍵盤，並讓瀏覽器啟用基本內建驗證功能。 詳情請參閱付款及地址表單最佳做法。

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

啟用密碼管理工具來建議密碼是最佳選項， 使用者接受瀏覽器和第三方瀏覽器管理員建議的高強度密碼。

然而，許多使用者會想自行輸入密碼，因此您需要使用密碼規則。 。美國國家標準暨技術研究院 (National Institute of Standards and Technology) 解釋 如何避免使用不安全的密碼。

不允許遭外洩的密碼

無論您選擇何種密碼規則，一律不得允許暴露在 安全漏洞。

當使用者輸入密碼後，您必須檢查該密碼並非已無密碼 遭到入侵的漏洞「Make I Been Pwned」網站提供密碼的 API 也可以自行執行。

你也可以透過 Google 的密碼管理工具檢查是否已有任何現有密碼 遭到入侵。

如果您確實拒絕使用者建議的密碼，請清楚說明密碼遭拒的原因。 以內嵌方式顯示問題及解釋解決方法， 在使用者輸入值後立即傳送 (而非使用者已提交註冊表單)， 等待伺服器回應。

不要禁止貼上密碼

部分網站不允許將文字貼到密碼中輸入。

禁止使用密碼貼上討厭的使用者，鼓勵使用者簡單好記 (因此) ) 且根據英國全國性機構的組織資料， 網路安全中心實際上可能會降低安全性。 使用者在嘗試貼上密碼「之後」才明白不允許貼上， 禁止貼上密碼無法避免剪貼簿安全漏洞。

請勿以純文字儲存或傳送密碼

請務必加鹽和雜湊密碼，切勿嘗試自行研發雜湊演算法！

不強制更新密碼

請勿強制使用者任意更新密碼。

強制更新密碼可能會導致 IT 部門所費不貲，對使用者造成困擾， 對安全性的影響還可能鼓勵使用者 使用令人印象深刻的密碼，或保存密碼的實體記錄。

建議您監控異常帳戶活動並警告使用者，而不是強制更新密碼。 如果可以的話，您也應該監控因資料侵害事件而外洩的密碼。

您也應授予使用者帳戶登入記錄的存取權，讓他們在此處 以及使用者登入的時間

。

可輕鬆變更或重設密碼

讓使用者清楚瞭解更新帳戶密碼的位置和方式。在某些網站上 出乎意料之外

當然，您也應設法讓使用者在忘記密碼時能輕鬆重設密碼。 開放式 Web Application Security Project 提供關於如何處理遺失問題的詳細指南 密碼。

為了確保您和使用者的安全，請協助使用者 或密碼。為方便起見，建議您加入 /.well-known/change-password 網址至 重新導向至密碼管理頁面的網站密碼管理工具 直接將使用者帶到可以變更你的網站密碼的頁面。這項功能 現在已在 Safari、Chrome 中提供，並即將在其他瀏覽器上推出。協助使用者變更密碼 方便使用者變更密碼，說明如何 我們會執行這些作業

建議您也確認使用者能夠輕鬆刪除帳戶。

透過第三方識別資訊提供者提供登入服務

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

。

這種方法有幾個優點。對於使用聯合登入建立帳戶的使用者，您 使用者不必要求、進行通訊或儲存密碼。

您也能透過聯合登入存取其他已驗證的個人資料，例如 做為電子郵件地址，使用者就不需要輸入這些資料，也不需要 驗證。如此一來，當使用者 。

將 Google 登入整合至網頁應用程式 說明如何在註冊選項中新增聯合登入。您也可以使用許多其他身分識別平台。

輕鬆切換帳戶

許多使用者會使用相同的瀏覽器來共用裝置，並在不同帳戶間切換。使用者是否可存取 無論是否使用聯合登入，都應簡化帳戶切換程序。

考慮提供多重驗證

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

如果你的網站會處理個人或團隊 私密資訊

處理使用者名稱

除非您需要 (或直到) 有需要的使用者名稱，否則請勿主張其使用者名稱。允許使用者註冊和登入 只提供電子郵件地址 (或電話號碼) 和密碼，或是聯合登入 可以採用其他方式請不要強制使用者選擇並記住使用者名稱。

如果您的網站會要求使用者輸入使用者名稱，請勿採取不合理的規則，也不要阻止使用者 更新使用者名稱。在後端，您應為每個使用者帳戶產生專屬 ID 而非依據個人資料 (例如使用者名稱) 的 ID。

同時請務必使用 autocomplete="username" 做為使用者名稱。

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

在使用者最常用的平台上測試註冊表單。表單元素功能可能有所不同 以及可視區域大小的差異可能會導致版面配置問題。BrowserStack 讓使用者免費測試 開放原始碼專案。

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

您需要現場資料和研究室資料 ，瞭解使用者對於註冊表單的體驗。數據分析和真人使用者監控 (RUM) 提供使用者實際體驗的資料，例如註冊網頁需要多久時間 載入、使用者與 (或不互動) 的 UI 元件，以及完成使用者花費的時間 使用者。

• 網頁分析：註冊流程中每個網頁的瀏覽量、跳出率和離開次數。
• 互動分析：目標程序 和事件 指出使用者在何處放棄申請，以及他們在哪個比例按下按鈕。 以及註冊網頁的其他元件
• 網站成效：以使用者為中心的指標 可讓你瞭解註冊流程是否載入速度緩慢，或是視覺上不穩定。

稍微調整一下註冊表單的完成率，可能會大幅改變。Analytics 和 RUM 幫助您進行最佳化、決定變動的優先順序，並監控網站，找出修正網站等問題 暴露在風險中。

持續學習

• 登入表單最佳做法
• 付款和地址表單最佳做法
• 建立令人驚豔的表單
• 製作行動版表單的最佳做法
• 更強大的表單控制項
• 製作無障礙表單
• 使用 Credential Management API 簡化註冊流程
• 使用 WebOTP API 驗證網路上的電話號碼

@ecowarriorprincess 提供 Unsplash 相片。