登录页面——请不要这么设计

WeYunx
本文翻译自:http://bradfrost.com/blog/pos...

原文作者:Brad Frost

译文原地址:https://weyunx.com/2019/03/17...

随着 1Password 以及 Chrome 的密码管理越来越普及,有些网站的登录页面的弊端就显现出来了,本文就来总结一下有哪些不好的设计,同时来看一下如何改进。

首先网站开发人员需要明白的是用户是怎样去登录他们的网站,然后基本的一个原则就是简单、直接、不突兀以及适配密码管理器。

让我们先看几个例子吧:

不要这么做

下面是几个反例,我认为需要避免的:

不要弹出登录页面

img

Hertz 以及它一系列的网站使用的是弹出窗口或弹出层来跳转登录页面,这样会有如下两个问题:

  • 额外的登录步骤 - 「1.点击菜单按钮,2.选择登录,3.填写信息」。以往的用户可以直接通过搜索、历史记录、书签、密码管理器等来直接跳转,进而填写登录信息,只需要 2 步。
  • 登录页面没有链接 - 这对客服来说是致命的,因为他们需要提供一系列的操作介绍来指引用户如何登录,这比直接提供一个登录链接麻烦的多。同时这也让密码管理器无法自动填充,毕竟登录页面是隐藏的。

不要隐藏输入项

img

Delta 官网的登录页面将 “Last Name” 输入项给隐藏了,原因应该是为了让页面看起来更简洁。但问题是这个输入项是必输的,而因它的隐藏又导致了密码管理器不能自动填充。

MacOS 的登录也隐藏了密码输入项来简化 UI,这可能是为了鼓励使用 TouchID,但是这同样可能会给用户带来一些使用上的困惑。

不要异想天开

img

这种使用邮箱验证码登录的方式先后在 Slack 、Notion 上出现。这种方式完美的避免了忘记密码的烦恼,但是:

  • 这种方式及其愚蠢 - 「1、输入邮箱。2、打开邮箱应用。3、打开收件箱。4、寻找邮件。5、打开邮件。6、拷贝密码。7、回到登录页面。8、粘贴密码。9、登录。」可见步骤之繁琐。
  • 不适配密码管理器
  • 强制用户去适应新的习惯 - 用户长久以来通过潜移默化的形式来学习例如登录、导航、退出等操作。不是说不应该去创新,但是我们需要明白用户进入我们的网站或产品的时候,他们对网络操作已经有了自己的一个认知和习惯,我们不能自作聪明,让他们去熟悉新的流程,况且这操作流程更繁琐了。

不要将登录拆分为多个页面

img

img

img

Shopify 有个烦人的操作就是会把登录页面分成两页。当然,本意是好的:他们想让页面更简洁,但是这种方式其实更适合特定的场景,比如电商的某些页面,像账单信息、物流信息、配送地址和信用卡信息这些,显然如果用在登录页面上就有些用力过猛了:

  • 需要额外的步骤来登录 - 同样的三个输入项的登录页面,结果用户需要三个页面才能完成,显然多此一举。
  • 不适配密码管理器

这么做

所以,好的登录页面应该是什么样的呢?我认为经典的登录页面就是最好的,如:

img

以及:

img

你看,简单明了不花哨,完美适配密码管理器。

OK,让我们看一下结论:

  • 一个可以直接跳转的登录页面
  • 展开所有的输入项
  • 一个页面搞定
  • 不要异想天开,经典就好
阅读 618

23 声望
1 粉丝
0 条评论
23 声望
1 粉丝
宣传栏