UX的登录表单和流程设计

虽然通常情况下登录页面组成的“墙壁”不是一个很好的做法，但他们在我们的数字生活中仍然是非常常见的。然而，即使他们如此普通，他们也是设计师在创造伟大的用户体验时最棘手的部分，设计师要不断考量各个元素应保留还是去除~~...



虽然通常情况下登录页面组成的“墙壁”（即要求用户必须注册或登录才能完全访问一个ａｐｐ或网站）不是一个很好的做法，但他们在我们的数字生活中仍然是非常常见的。很可能你日常生活中经常花时间在登录过程上。然而，即使他们如此普通，他们也是设计师在创造伟大的用户体验时最棘手的部分，设计师要不断考量各个元素应保留还是去除。

确保您的登录页面不是用户的障碍，通过以下这些设计技巧可以获得一个更出色的登录过程。

显示输入文本字段

如果登录是网站或应用程序所必须的，那么它应是该页面的主要功能。用户不该花费额外精力探索如何登录。例如，Mint登录后才能享用服务，但登录表单隐藏在按钮控件后面。当注册用户来到某个网站或者打开应用程序时，应该立刻知道从哪里登录。Twitter在服务主页上显示了登录的输入框，这使得用户很清楚登录入口在哪。Takeaway: 相比于“登录”按钮，显示输入区域更好，用户可以直接登录。

不要同时使用“Sign in”和“Sign up”

你能迅速分辨“Sign in”和“Sign up”吗？



坏设计: ‘Sign in’ 和 ‘Sign up’ 太相像

“Sign In”和“Sign up”是相当接近的。当两者的按钮看起来很相似，并且标签使用了相同的动词时，很容易把用户弄糊涂。用户可能点击了错误按钮，这让用户在登录时感到挫败。即使用户没有犯错，也会花额外时间来区分这两个按钮。

用户不应该被迫停下来思考他们应该点击哪个按钮。如果你想在登录时提供一个良好的用户体验，就应该避免同时使用“Sign in”和“Sign up”按钮。而是要使用不同动词的标签，并用不同的视觉外观区分按钮。好设计 : “登录”和“注册”要区分清楚。

如果你想有所改变 —— 试着在产品中给“Sign up”按钮添加一些额外的元素。这有助于防止按钮被忽视。



好设计: Mailchimp使用了相同的介词，但登录和注册使用了不同的图样。

Takeaway: 不要同时使用‘Sign in’ 和‘Sign up’。使用不同的视觉外观的按钮（颜色和风格的不同）并使差异明显些。

区分登录注册表单

许多网站和app的登录和注册表单使用几乎相同数量的输入字段（电子邮件/用户名和密码），而且并列显示两个表单：坏设计: 并列两个表单

然而，清楚区分注册和登录是非常重要的，而且也要尽量降低用户错误地从注册表单尝试登录的概率。Twitter的登录和注册表单不只是看起来不同，而且用了不同的颜色和适当文本来修饰CTA按钮。

允许用户通过Facebook, Twitter或Google登录

用户越来越厌恶传统的注册流程。如果用户可以通过外部帐户如Facebook，Google或Twitter登录时，为何要创建另一组登录的详细信息呢？此功能可以减少用户网上注册时的烦恼，但相对于标准的用email注册的表单，它有利有弊。优点：用户不必填写登记表来创建新的用户名/密码和通过邮件验证，因此可以在10秒而不是10分钟内注册。最重要的是，用户不必记住新的用户名/密码。

缺点：用户信息的自动加载功能引起一个关于用户隐私的隐患，而并非所有人都乐意分享个人资料。这种情况下，你应该使用传统的登录系统。

让我们来看看密码

在登录过程中输入密码时有一个常见问题，即密码字段可以被屏蔽（当然由于安全原因）。人们不是完美的打字员所以他们经常输错密码，尤其是在移动设备上。在iCloud输入密码也是我在苹果iOS遇到的头号问题，这也是很令人厌恶的事，因为你只能在多次尝试后访问服务。很容易实现“显示密码”选项。你可以在密码字段附近放置一个复选框或图标按钮。当用户点击它，它会显示输入字符。这是一个很好的移动登录页面，因为在小型移动端键盘上很容易出错。

Takeaway: 当用户在填写表单却不能看到他们的输入时会犯更多的错误。因此，他们感到不那么自信。所以对用户最好的做法就是允许用户控制显示密码。

使用电子邮箱或电话登录

如果使用用户名为登录数据，有可能遇到以下问题：

· 由于用户名必须是唯一的，用户可能需要花费几分钟来选择合适的名字，因为首选用户名可能已经被其他用户使用了。

· 用户终于注册了新的用户名，但一段时间之后就可能忘记了。



通过为用户提供多个登录选项来简化这一进程，并允许他们进行选择，而不是通过错误方法让用户尝试申请多次用户名并导致额外的挫折感。你的网站或应用应该允许用户用他们的电子邮箱或电话来登录。Takeaway:采用多种登录方式（电话，电子邮箱或用户名），而不是只用户名。

注册后保持用户登录状态

UX设计应使新用户登录注册后，整体用户体验更流畅。与其设置“保持登录”选项，不如自动使用户登录网站或应用。

警告用户大写锁定开启（桌面端）

这个想法很简单，当用户在一个带有大写锁定的密码域输入时显示一个警告。可以是一个文本通知或警告图标。这是一个简单的增加密码可用性的方式，防止用户的到意料之外的结果。

自动对焦第一个输入字段（桌面端）

用户往往在看到登录表单后就开始准备登录了。通过自动聚焦于第一输入字段可以使这个过程更有效。这个小功能节省用户的徘徊和点击时间。自动对焦还应该突出显示文本字段，这样用户就知道他们可以开始输入了。

结论

你的登录表单不应该给用户的生活添加困难。花时间填写表单是给用户附加工作。这些简单技术可以使你的表单更加高效，让用户顺利登录并开始享受你的服务。

    关注 设计夹