好吧,我讨厌冗长的介绍,所以:这是创建可用注册和登录表单的一些最重要的 UX 技巧清单。
它基于我查看数百个初级设计师登录流程的经验,这要归功于我的学习UI设计学习UX设计课程。

1. 自动对焦第一个字段

具有讽刺意味的是,交互设计的基本规则是:去除交互。去除点击,去除阅读,去除等待,去除思考。
一个简单的例子:如果你知道95%的人在打开注册表单时会立即点击第一个字段,那么就可以省去他们的麻烦并自动关注它。
first-field-autofocus
请注意,自动对焦对使用屏幕阅读器的用户来说可能是一种不好的感觉,因此值得测试这种体验

2. 使用专门的移动键盘

生活中唯一确定的事情是 (a) 死亡和 (b) 电子邮件地址有一个@和一个.
幸运的是,手机有专门的电子邮件输入键盘来显示这些字符——但你必须type=email用 HTML标记你的文本框。这是一个如此简单的改变,让移动用户的生活更轻松。
注意:也适用于注册流程中的电话号码type=tel、URLtype=url 和数字type=num
mobile-email-keyboard

3. 立即验证字段

在您指出任何错误之前,与其等待用户填写整个表单,不如在您的系统发现有错误时立即通知他们。
对于像电子邮件这样的东西,在模糊上进行验证是有意义的(比如:当其他字段获得输入焦点时)。
通常我会尝试同时捕获空白和无效的电子邮件地址。
validate-immediately

4. 可以点击的标签

创建的每一个带标签的文本框都应该有可点击的标签。奇怪的是默认情况下这不是由 HTML 完成的,而是简单地将 input 元素添加到其各自的 label 元素中就可以了。这不仅 (a) 允许我漫不经心地点击标签开始输入,而且 (b) 如果我笨拙的手指不小心错过了文本框,它也能帮助我。
clickable-label
注意:屏幕阅读器label不能很好的配合input使用。
因此还要将描述输入的文本单独span用唯一的包装起来id,然后添加aria-labelledby="my-unique-id"到input中。

5. 用户选择密码时显示密码要求

没有用户应该猜测密码要求是什么,所以在用户正在输入密码时,尽量给出提示。(PS:当用户不再输入密码时,去掉提示)。
password-req-before

6. 让用户看到他们的密码

允许用户查看他们输入的密码将防止在选择他们不想要的密码时出现棘手的 UX 问题,这比要求用户输入两次密码更轻松。
(话虽如此,后一种方法仍然比没有好得多)
check-password

7. 按钮文字使用明确的描述

按钮上的标签是一个机会,当然,可以吸引用户点击。如果你给它们贴上无聊的、非描述性的东西(例如继续提交),好吧,这种做法很像国内垃圾软件的做法。
但问问自己:在另一边等待用户的价值是什么?是不是我的免费帐户已经创建了?我距离完成登录继续干活的还有30秒吗!?告诉我,该死!
cta

8. 允许一键登录

为什么要强迫用户选择另一个用户名和密码来处理我们的小服务?为什么不允许用户使用现有的名称和密码?例如他们的Gmail或Twitter帐号!
疯了吧?
但这正是我们所有人都可以做的。除非您有非常具体的理由不这样做,否则强烈建议您这样做。
(现在网站只需要在用户点击此选项时提醒他们)
sso

9. 通过通知用户他们同意服务条款来保存点击(不需要他们的明确许可)

好的,首先是第一件事:这在任何地方都不合法。例如,欧盟要求网站要求其用户明确勾选表示他们同意网站条款的框。
我的看法?隐私剧院,以及糟糕的用户体验。为用户保存一次点击——当你被允许时。
terms-of-service

10. 对登录和注册使用不同的术语

你想让你的登录简单一点? 甚至连村里的白痴也能不假思索的在半睡半醒的时候完成。
为此,请不要使用Sign inSign up之类的词,这需要我思考半秒钟是要in还是up
相反,请使用registersign in等选项,或其他辨识度更高的描述。它可能只节约用户 半秒的时间,但是如果您不节约这半秒,那么您的应用程序的其余部分用户可能就不再关注了。
sign-up-vs-register

11. 允许用户在登录和注册之间快速切换

如果有人确实点击了错误的选项,您希望他们从注册登录之间快速切换,反之亦然。
最常见的是做法,在表单底部增加对应的链接(而不是按钮,初学者经常犯的一个奇怪的错误)。
switch-register-login

12. 使用电子邮件而不是用户名登录

每个单独的服务都很难记住用户名,而且您可能不得不选择生僻的名字,电子邮件是一种更简单的登录方式。
email-not-username

13. 如果用户猜到一个无效的密码,说明为什么它是无效的

如果用户猜测的密码 (a) 错误且 (b) 不符合密码要求,请说明密码不符合哪个要求。这比显示密码不正确有用得多,但不会向用户提供有关如何修复它的线索。
invalid-password

14. 记住两次密码尝试之间输入的值

如果用户输入了错误的密码,他们就不必再次输入他们的电子邮件(帐号)。事实上,如果您允许他们查看他们的密码,不清除密码,用户可能想检查一下他们的密码是否打错了。
remember-password

15. "重置密码"界面应该记住用户已经输入的电子邮件

很多时候,如果您点击忘记密码,您将被迫重新输入您在 30 秒前输入的电子邮件。当用户用尽他们对密码的猜测并想要重置时,不要纠缠他们您已经知道的信息。
reset-password

其他注册用户体验问题?

在查看了来自初级设计师的数百个注册流程后,这些技巧解决了我看到的一些最常见的问题。采纳这些建议,您的用户登录体验会更好。
请记住:没有人是以登录为目的,哎呀,用户甚至可能不是为了自己而打开这个登录界面。在所有的可能性,除非你的应用程序是为了娱乐,否则大多数用户可能想尽快的完成登录操作,然后继续他们之前的工作。
作为优秀的用户体验设计师,让我们尊重用户的不耐烦,让这些东西尽可能简单。

原文链接