帮助您的用户轻松完成注册、登录和管理账号详细信息。
如果用户需要登录您的网站,那么设计良好的注册表单 关键。对于网络状况不佳、使用移动设备或 时间紧迫或压力很大设计不佳的注册表单会获得较高的跳出率。 每次跳出都可能意味着用户流失和心怀不满,而不仅仅是错过注册 优化建议。
下面是一个非常简单的注册表单示例,其中演示了所有最佳做法:
核对清单
- 尽可能避免登录。
- 明确如何创建账号。
- 明确说明如何访问账号详情。
- 告别表单混乱。
- 考虑会话时长。
- 协助密码管理工具安全地建议和存储密码。
- 不允许使用已泄露的密码。
- 允许粘贴密码。
- 切勿以纯文本形式存储或传输密码。
- 不强制更新密码。
- 让用户可以轻松更改或重置密码。
- 启用联合登录。
- 简化账号切换过程。
- 考虑提供多重身份验证。
- 谨慎使用用户名。
- 在现场和实验室中测试。
- 在各种浏览器、设备和平台上进行测试。
请尽可能避免登录
在您实施注册表单并要求用户在您的网站上创建账号之前,请考虑以下事项: 是否确实需要您应尽可能避免需要登录才能访问的功能。
最好不用注册表单!
要求用户创建账号,就相当于他们想要实现的目标。 您是在请求帮忙,并且要求用户信任您来处理个人数据。每个密码和每个项 的数据承载着隐私和安全方面的“数据债务”,成为企业面临的成本和责任 。
如果您要求用户创建账号的主要原因是在导航之间保存信息,或 浏览会话,不妨考虑使用客户端存储功能。适合购物 强制用户创建账号来购物是他们购物的主要原因 放弃购物车。您应该将“访客结账”设置为默认选项。
确保登录清晰醒目
明确说明如何在您的网站上创建账号,例如使用登录或登录功能 按钮。避免使用不明确的图标或含糊的措辞(“立即加入!” “加入我们”),不要在导航菜单中隐藏登录信息。易用性专家 Steve Krug 总结道 提高网站易用性的方法:如果您需要 说服网络团队中的其他人,可以使用分析来展示不同 选项。
<ph type="x-smartling-placeholder">![在 Android 手机上显示了一个模拟电子商务网站的两张屏幕截图。左侧按钮使用的登录链接图标有点模糊;右侧显示的是“登录”](https://web.developers.google.cn/static/articles/sign-up-form-best-practices/image/two-screenshots-a-mockup-62ee25473e20e.jpg?authuser=7&hl=el)
![Gmail 登录屏幕截图:一个页面,显示了“登录”按钮;用户点击后会转到包含“创建账号”链接的表单。](https://web.developers.google.cn/static/articles/sign-up-form-best-practices/image/screenshots-sign-for-gm-52c4c6c94532a.jpg?authuser=7&hl=el)
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()}`);
}
明确了解如何访问账号详情
用户登录后,应明确说明如何访问账号详情。具体而言,请确保 更改或重置密码的分步说明。
告别表单杂乱
在注册流程中,您的职责是尽可能降低复杂性并让用户保持专注。告别杂乱。 这时可不要分心和诱惑!
<ph type="x-smartling-placeholder">注册时,请尽可能少索要。收集其他用户数据(例如姓名和地址) 并且用户能够明确看到提供相应数据的好处时。注意事项 您通信和存储的每一项数据都会产生费用和责任。
不要仅仅为了确保用户能够准确输入详细联系信息,就重复输入信息。这会减慢 表单字段,如果自动填充表单字段,那就没有意义。而应发送确认 将代码发送给用户,然后继续创建账号 看到这些提示这是一种常见的注册模式,用户已经习惯了。
您可以考虑在用户每次登录时都发送一个验证码,从而实现无密码登录 新的设备或浏览器Slack 和 Medium 等网站使用的是此版本。
<ph type="x-smartling-placeholder">与联合登录一样,这种方式还有一个好处,即您无需管理用户密码。
考虑会话时长
无论您采用何种方法识别用户身份,都需要针对会话 长度:用户保持登录状态的时长,以及可能导致您将其退出的原因。
考虑您的用户使用的是移动设备还是桌面设备, 他们是在桌面设备或共用设备上分享内容
帮助密码管理器安全地建议和存储密码
您可以协助第三方和内置的浏览器密码管理工具建议和存储密码, 用户无需自行选择、记住或输入密码。密码管理工具在 现代浏览器、跨设备、跨平台所需的应用和 Web 应用同步账号,以及 。
因此,正确编写注册表单代码极其重要,尤其是要使用正确的
自动填充值。若要注册表单,请使用 autocomplete="new-password"
输入新密码,并将新密码添加到
尽可能将自动填充值更正为其他表单字段,例如 autocomplete="email"
和 autocomplete="tel"
。您还可以使用不同的 name
和 id
来帮助密码管理工具
注册和登录表单中的值、form
元素本身的值以及任何 input
、select
值
和 textarea
元素。
您还应使用相应的 type
属性
,以便在移动设备上提供合适的键盘,并启用浏览器进行基本的内置验证。
有关详情,请参阅付款和地址表单最佳做法。
确保用户输入安全的密码
最好启用密码管理器来建议密码, 用户接受浏览器和第三方浏览器管理器建议的安全系数高的密码。
不过,许多用户希望输入自己的密码,因此您需要实施密码规则 强度。美国国家标准与技术研究院解释说, 如何避免使用不安全的密码。
不允许使用已泄露的密码
无论您为密码选择何种规则,都绝不能允许 安全漏洞。
用户输入密码后,您需要检查确认您输入的密码不是已经输入过的密码 遭到入侵。have I Been Pwned 网站提供了一个密码 API 也可以自行将其作为服务运行
借助 Google 的密码管理工具,您还可以检查是否已有密码被盗 遭到入侵。
如果您拒绝了用户建议的密码,请明确说明拒绝密码的原因。 内嵌显示问题并说明解决方法, 在用户输入了值之后(而不是在他们提交注册表单并且必须 等待服务器响应。
<ph type="x-smartling-placeholder">不禁止粘贴密码
某些网站不允许将文本粘贴到密码输入框中。
禁止粘贴密码会令用户反感,鼓励他们使用容易记住的密码( 而且根据 UK National 网络安全中心实际上可能会降低安全性。 用户只有在尝试粘贴密码后,才会知道不允许粘贴内容,因此 禁止粘贴密码无法避免剪贴板漏洞。
不以纯文本形式存储或传输密码
请务必对密码进行加盐和哈希处理,并且不要试图自行编造哈希处理算法!
不强制更新密码
强制更新密码对 IT 部门来说代价高昂,让用户感到厌烦,而且 对安全性的影响。这还有助于鼓励人们 使用不安全的易记密码,或实际记录密码。
您应该监控是否有异常账号活动并向用户发出警告,而不是强制更新密码。 如果可能,您还应监控是否因数据泄露而遭到泄露的密码。
您还应为用户提供其账号登录历史记录的访问权限,让他们了解 以及登录的时间
<ph type="x-smartling-placeholder">![Gmail 账号活动页面](https://web.developers.google.cn/static/articles/sign-up-form-best-practices/image/gmail-account-activity-pa-c70c73f9a3264.jpg?authuser=7&hl=el)
简化更改或重置密码的操作
向用户明确说明在何处以及如何更新账号密码。在某些网站上 非常困难
当然,您还应该让用户在忘记密码时能够轻松重置密码。 开放 Web 应用程序安全项目提供了有关如何处理丢失情况的详细指导 密码。
为保障您的业务和用户的安全,请务必帮助用户
密码。为简化操作,您应该添加
/.well-known/change-password
的网址
重定向到您的密码管理页的网站。这样,密码管理工具就能
将用户直接转到可以更改网站密码的页面。此功能
现已在 Safari 和 Chrome 中实现,并将在其他浏览器中推出。帮助用户更改密码
来轻松更改密码一文介绍了如何
来实现这一点。
您还应确保用户可以根据需要轻松删除其账号。
通过第三方身份提供方提供登录服务
许多用户更喜欢使用电子邮件地址和密码注册表单来登录网站。 不过,您还应该允许用户通过第三方身份提供方(也称为 联合登录。
<ph type="x-smartling-placeholder">![WordPress 登录页面](https://web.developers.google.cn/static/articles/sign-up-form-best-practices/image/wordpress-login-page-b16b91f2dcb13.jpg?authuser=7&hl=el)
这种方法具有诸多优势。对于使用联合登录创建账号的用户,您需要 而无需索要、传达或存储密码。
您或许还能通过联合登录访问其他已通过验证的个人资料信息,例如 电子邮件地址,这意味着用户无需输入相应数据,您也无需 您需要自行完成验证联合登录还可以使用户 新设备。
将 Google 登录功能集成到您的 Web 应用中 介绍了如何将联合登录添加到您的注册选项。您还可以使用许多其他身份平台。
简化账号切换
许多用户使用同一浏览器共用设备并切换账号。用户是否可以访问 是否使用联合登录,都应简化账号切换。
<ph type="x-smartling-placeholder">![Gmail,显示账号切换](https://web.developers.google.cn/static/articles/sign-up-form-best-practices/image/gmail-showing-account-sw-452d02090bac6.jpg?authuser=7&hl=el)
考虑提供多重身份验证
多重身份验证是指确保用户以多种方式提供身份验证。 例如,除了要求用户设置密码之外,您还可以强制执行验证 使用通过电子邮件或短信发送的一次性密码,或使用基于应用的一次性密码 安全密钥或指纹传感器。有关短信动态密码的最佳做法和 使用 WebAuthn 启用强身份验证 介绍了如何实现多重身份验证。
如果您的网站会处理个人或 敏感信息。
谨慎使用用户名
除非(或直到)您需要,否则不要强求用户名。允许用户注册和登录 仅电子邮件地址(或电话号码)和密码,或联合登录 自行选择。不要强迫他们选择并记住用户名。
如果您的网站确实要求使用用户名,请不要对用户名施加不合理的规则,也不要阻止用户 禁止更新自己的用户名您应在后端为每个用户账号生成一个唯一 ID, 而不是基于个人数据(如用户名)的标识符。
此外,请确保使用 autocomplete="username"
作为用户名。
针对一系列设备、平台、浏览器和版本进行测试
在用户最常使用的平台上测试注册表单。表单元素功能可能会有所不同 和视口大小的差异都可能会导致布局问题。BrowserStack 针对 开源项目。
实现分析和真实用户监控
您需要实测数据和实验数据 了解用户使用您的注册表单的体验。Google Analytics 和真实用户监控 (RUM) 提供有关用户实际体验的数据,例如注册页面经过多长时间 负载、用户与(或未与哪些界面组件交互)以及用户完成操作所需的时间 注册。
- 网页分析:注册流程中每个网页的网页浏览量、跳出率和退出次数。
- 互动分析:目标漏斗 和事件 可以表明用户在哪个环节放弃了注册流程,以及点击按钮所占的比例; 链接和注册页的其他组件。
- 网站效果:以用户为中心的指标 告知您注册流程是否加载缓慢或看起来不稳定。
只需稍作调整,就能显著提高注册表单的完成率。分析和 RUM 让您能够优化更改并确定更改的优先级,并监控网站是否存在 进行过本地测试的结果
继续学习
- 有关登录表单的最佳实践
- 有关付款和地址表单的最佳做法
- 创建出色的表单
- 设计移动表单的最佳做法
- 更强大的表单控件
- 创建可访问的表单
- 使用 Credential Management API 简化注册流程
- 使用 WebOTP API 验证网络上的电话号码
照片由 @ecowarriorprincess 提供,由 Unsplash 用户发布。