（翻译）简化注册和登录操作的新技术

  注册表单和登录表单的设计方式有很多，大部分设计人员只熟悉常规设计方法，应用一些新技术可以使表单更便于填写。

注册操作的简化方式

  所有注册表单的目的都是让用户成功填写并提交给应用程序，如果他们填写的表单冗长且繁琐，会使他们的情绪从兴奋转为不快。以下新技术有助于用户更便捷地填写表单。

注册成功后再创建用户名

  注册表单通常要求用户创建网站中唯一的用户名，但想出这么一个用户名很费时间，需要反复尝试。不要让用户在注册时因用户名而烦恼，将创建用户名的动作放在注册过后。 这样不仅不会让受挫的用户放弃注册，还能防止用户创建随意的、很容易忘掉的用户名（这些用户名可以满足注册表单的用户名要求）。

让用户只输入一次密码

  很多注册表单要求用户在两个文本框中输入密码，由于表单屏蔽了密码，让用户输入两次密码可以确认密码的准确性。
  虽然表单屏蔽密码能防止其他人看到密码，但这样也有缺点，用户自己也看不到输入的密码，这使得他们很难知道每次输入的密码是否正确。
  更有效的方法是仅让用户输入一次密码，同时在密码框附近增加复选框，用户勾选复选框即可查看密码原文，检查输入的密码是否正确。该复选框能够减少文本框数量，降低用户注册工作量。

• 屏蔽密码的jQuery插件。
  

基于邮政编码自动填写省、市信息

  如果注册表单需要用户填写个人地址，可以考虑基于用户的邮政编码自动填写省、市信息。用户不用手动从下拉框中选择省、市信息，他们输入邮政编码后，与之相关的省、市信息会自动出现，提高了表单填写速度。

• 带原型的AJAX教程；
• 使用AJAX基于邮政编码获取省、市信息。
  

自动完成国别信息

  用户选择国别的传统方式是从下拉框中选择，而更高效的方式是使用带自动完成功能的文本框。用户不用在按字母顺序排序的世界各国名称列表中滚动选择国别，随着用户在带自动完成功能的文本框中输入内容，他们只需在与之匹配的小范围国家列表中选择国别。用户只需输入几个字母就可以在文本框的下拉菜单中看到他们的国家。

• AJAX自动完成功能。
  

支持用户从发货信息中提取信息自动填写支付信息

  用户购买产品时需要提供支付信息和发货信息，大部分时候，这两类信息的内容相同，因此可以相互复用。可以在支付信息填写模块添加一个“与发货信息相同”的链接，点击链接，即可将发货信息填写在支付信息对应的字段中。

• 使用jQuery复制支持信息和发货信息；
• 使用jQuery把表单中的数据复制到另一个字段中。
  

默认不要勾选邮件通讯选项，为用户提供预览

  很多网站默认勾选邮件通讯复选框，意图获得更多订阅。这么做可能有用，但如果用户仅仅因为忽略或误解了选项而订阅，那么订阅就毫无意义。如果用户不感兴趣，他们迟早会取消订阅。从长远来看，强迫用户订阅没什么好处，而且在没有明确要求的情况下迫使用户订阅会让用户对网站敬而远之。
  更有效的方法是向用户展示时事通讯的预览或摘录，让他们清楚不订阅的话会错过什么，促使他们主动订阅。知道订阅的用户确实对内容感兴趣，这样你就可以安枕无忧了。[1]

不要使用验证码，用隐藏的JavaScript文本框对抗垃圾邮件

  如果收到很多垃圾邮件，那有必要在表单上放置验证码。没必要因验证码使用户望而却步。传统的验证码——让用户重新输入扭曲的字母，已被证明会影响表单转化率，因此它们带给用户额外麻烦也就不足为奇了。

• 验证码之于转化率；
• 验证码。
    不影响表单转化率的简单方法是用客户端Javascript生成的隐藏的文本框。垃圾邮件程序无法与客户端JavaScript对象交互，因此无法填写文本框，只有用户可以填写。该方法简单、干扰少，可以减少垃圾邮件，同时不会影响表单转化率。[2]
  

登录操作的简化方式

  所有登录表单的目的是让用户进入他们的账号，有些表单做的相对好一些。以下新技术有助于用户更有效地登录。

支持用户以邮箱地址登录

  邮箱地址比用户名更容易记住，后者难以管理和记忆。人们一直使用电子邮箱，因此能记住邮箱地址。
  支持用户选择邮箱地址登录或使用用户名登录，这样既节省用户时间。用户也不用发愁忘了用户名该怎么办。

不用离开页面就能登录

  登录属于常见操作，用户想在网站任意地方都可以进行登录。用户登录完，能重定向到当前页面， 这使登录更快，并允许用户回到任务当中。
  有多种方式能做到这点：下拉框或模态窗口。
  下拉框出现在当前页面之中，不需要用户离开当前页面。下拉框属于快速、轻量级的登录选项。它仅占据页面的一小部分区域，

• 简单高效的jQuery下拉框登录表单；
• jQuery下拉框登录表单。
  
    模态窗口也会让用户停留在当前页面，它出现在页面的中间区域，使重点完全放在登录表单上。模态窗口支持在登录表单上增加补充信息。
• 如何在模态窗口中用jQuery实现登录表单；
• 简单的jQuery模态窗口教程。
  

显示登录表单时自动将焦点放在第一个文本框上

  一旦用户看到登录界面，他们就准备进行登录操作。自动将焦点放在第一个文本框上，不用用户移动并点击鼠标，节省了他们的时间，提高登录效率，用户直接使用键盘输入内容即可。 自动焦点功能应该突出显示文本字段，以便用户知道可以开始输入内容。

允许用户查看密码

  该技术在用户登录和注册时都有用。如果用户看不到密码框中的内容，就很容易输错密码。 如果表单否决了用户的密码，他们就会知道输入的密码有误，必须重新输入密码，直到输入正确密码为止。

  问题是用户不知道哪个字母输错了。在首次提交表单前无法修正错误密码，这会增加非必须的工作，降低用户的输入速度。为避免该问题，在登录表单中增加复选框，允许用户在提交表单前查看输入的密码原文。

• 不要屏蔽密码。

密码恢复链接上使用问号图标

  用户应能在登录表单中找到密码恢复链接。不要使用“忘记密码”链接，考虑使用带问号图标的按钮，既不会占据太多空间，也不会与其它链接混淆。问号图标是通用的帮助图标，用户遇到密码问题时能够直接点击该图标。

登录按钮与文本框一样宽

  登录按钮不仅是为了执行操作，它还让用户清楚将要执行什么操作。尺寸小的按钮，可见性也弱，会使用户对登录操作感到不确信。[3]

  宽的登录按钮，让用户更有信心登录，不容易错过。 按钮名称也更具可见性，以便用户更清楚地了解正在执行的操作。

允许用户使用Facebook,、Twitter或OpenID账号登录

  几乎所有人都有Facebook,、Twitter或OpenID账号，让用户使用这些账号登录能带来巨大好处。用户不用注册，立马就能使用网站。此外，用户不用操心多个网站中使用的用户名和密码。

  注册表单和登录表单不能折腾用户，没人喜欢费时费力地填写表单。上述新技术能让用户简单高效地填写表单，用户可以快速注册和登录网站，然后就能享受网站之旅了。

  本文发表在SmashingMagazine网站：简化注册和登录操作的新技术

原文地址：https://uxmovement.com/forms/innovative-techniques-to-simplify-sign-ups-and-logins/

[1]原文：A more effective approach is to make users want to subscribe by showing them a preview or excerpt of the newsletter. This way they’ll know what they’re missing if they don’t subscribe. You’ll also sleep well knowing that users who subscribe have done so because they’re genuinely interested in your content.
[2]原文：A simpler approach that won’t hurt the conversion rate of your form is to use a hidden and required textfield generated with client-side Javascript. Spambots can’t fill in this textfield because they can’t interact with objects in client-side Javascript; only users can. This method is simpler and less intrusive, so that you can reduce spam without hurting your conversion rates.
[3]原文：The login button isn’t just for taking action. It also lets users know what action they’re about to take. A small login button has as a weak affordance and can make users feel uncertain about logging in.