重新设计『用户登录』

FarBox新的账户系统

习以为常的地方,最能看见设计代表的一种态度。

这次新版本中,我们增加了FarBox自己的账户与同步系统。我们需要介绍下账户系统中的一部分:用户登录。

这是一次极美的设计,也极其大胆。

关于『用户登录』

不论是程序员,还是产品经理,都不可避免地需要处理用户登录系统。看似平常,其实是设计中非常麻烦的一环。

即使是最常见的登录系统,一般也需要包含邮箱地址格式检测、两次密码输入是否一致、密码的(长)强度是否足够、是否在暴力破解密码的可能而需要相应的措施(如验证码)、激活邮件的发送与验证、登录成功后状态的保存、忘记密码的链接、确认忘记密码后重置信息的提交、防止重置信息暴力破解的防范措施、重置密码邮件的发送、重置密码的修改、以及登录状态下密码的修改……

这个流程涉及到了很多环节,实际情况呢,用户对这个系统的使用频率又极其低。你又不能舍弃这个系统,一般来说,一个产品,不能没有用户呀。

设计最困难的地方

一个『用户登录』系统,再怎么难,用常见的逻辑,理清了,就好了。
但站在一个设计师的角度,我们应该能清楚地感受到,这种常见的方式,实际上把流程的代码实现方式,过度地呈现给用户了。虽然,经过了这么长时间的教育,绝大多数用户已经理解了这个系统运行的方式。

只是,设计,意味着要寻找另外一种可能。
咯,我们并不满足于这个现状,所以打算重新设计这个流程。
这个跟KPI没有关系,跟那种无聊的UED游戏也没有关系,纯粹是一种品味上的癖好。

只剩必要的元素


我们只保留了三个元素:Email输入框,Password输入框,Sign-in按钮。
需要实现:登录、注册、忘记密码、修改密码、重置密码等流程。

到了此处,设计,就不言而喻了。
假设是一个新用户,Email+Password输入之后,就会收到一封邮件,内含一个链接,点击之后就会创建一个账户,并且实现登录。
如果是一个老的用户,输入之后,就会自动登录;如果登录失败,则会提示密码错误;如果达到3次以上,则是发送一封可将刚才输入的密码作为新密码的邮件,点击之后自动生效。

为什么这样设计

假设,你忘记了密码。当你意识到这个问题的时候,其实,你已经输入了Email+错误的密码。
然后,你点击忘记密码的链接,然后重新输入这个Email,然后收到一封邮件。点击邮件里的链接,到达重置密码的页面,然后输入新密码,以及重复输入一次进行确认。
以上,就是常见的方式。


现在,冷静地去看待这个场景,这里有多少次重复输入?有没有办法把重复输入去除呢?
另外,你第一次输入的那个错误的密码真的是错误的么?难道不是暗示着,它其实可以作为一个新的密码存在?
最重要的一个假设:掌握了邮件收件箱,也就掌握了你的密码。那为什么不把一些用户已经输入的信息,经过加密之后,作为一个授信链接发出去呢?

在这些反思后,重新获得设计,则是系统运行的逻辑,在界面上基本上是隐藏起来了,而用户在进行界面交互,永远都是(同一个界面内)输入Email+Password,点击按钮;如果失败,则根据提示,去邮箱中确认一次。

真的这么简单么

这个登录系统,第一个雏形的时候(应该是前年时),尚不理想,会产生不可预知的阻碍。分享给几个普通的PM的时候,他们像听故事一样,仿佛说的都是别人的事,有争议,没想法,眼中无光。
后来,一个朋友说,他带的团队在应用这个流程。只是不是太成功,但他的语气里仍然是那种设计师的味道,没有丝毫的挫败感。宽慰之,然后说他也倒激进,相抿一笑。
但最后,意识到,其实,他们在代码实现的逻辑,可能并不是很对。

别的领域,设计,是怎么样的,我们不清楚。只是在我们的领域中,谈及设计,概念最开始生长的时候,就已经预知到了技术的表现形式。
所以,并不算是简单。
比如,在用户点击Sign-in按钮,催生的注册重置密码,并不会在服务器中写入任何数据,经过几个环节的流转,如何保证由用户点击行为而传输的数据是系统可信的呢?

是的呢,从不简单呢。

最后

It just works.


附注

如果你有兴趣实现类似的设计,以下是部分情况判断的代码片段,或许会有些帮助:

{
        'wrong_email': 'Email格式错误。',
        'short_password': '密码的最小长度为6位。',
        'welcome': '欢迎加入FarBox,一封确认邮件已发送,请查收!',
        'welcome_blocked': '无法找到确认邮件?也许它会不小心躺在垃圾邮件里。',
        'dangerous_request': '这是一个危险的请求,被系统禁止了!',
        'ip_blocked': '你当前的IP因为频繁的尝试而被禁止,请等待10分钟后重试。',
        'email_blocked': '当前的邮箱地址因为频繁的尝试而被禁止,请等待10分钟后重试。',
        'wrong_password': '密码错误,请重试。',
        'reset_password': '密码错误,如果你需要使用当前输入的密码为新密码,请查收邮箱。',
        'reset_blocked': '密码错误,请查收邮箱里重置密码的确认邮件。',
        'blank_password': '邮箱的登录密码尚未设定,当前密码可作为登录密码,请查收邮箱。',
        'blank_password_blocked': '密码设置的邮件已经发送,无法找到?也许它会不小心躺在垃圾邮件里。',
        'unkonwn': '未知错误'
    }
@2014-09-22 22:54
  • 嘿俅2014-09-23 09:01

    Simple is Everything,看来这句话真的是你们的准则。

  • vince2015-01-28 01:57

    手动点赞。

    想起我听过的一个更极端的想法:根据你输入密码的速率 + 已输入部分的正确性来判断你是否输入正确,以此做到在你 hit enter 之前让你登入。

  • fuis2015-02-24 12:06

    看了介绍,真的很不错。换服务器的时候考虑把wordpress换成farbox
    (这什么鬼...你这..我就评论发个赞啊.. the comment system thought your behavior like a robot.)

  • yurenchen2015-06-17 02:39

    曾做过类似的 登录/找回密码 设计.
    不过我是因为懒: 开发时懒的设计复杂繁琐的流程, 使用时懒得一堆页面点来点去...

    "sorry, the comment system thought your behavior is like a robot. try again later?"
    orz...

  • 趣味美食2015-07-03 09:05

    的确不错。。

  • 废玉2016-07-13 02:35

    输错第二次就提示重设密码。输错三次就重设输错密码的问题在于,如果三次密码内容都主体一致,个别不同呢?通常这样行为的用户是在尝试记起原密码,如果选择最后一组输错密码,很有可能因为reset密码和原密码的相似性而再次记混,下次继续输错吧。当然这还要根据输入习惯来概率统计分析一下

  • Wray2016-10-31 19:41

    很棒的设计,没想到重置密码还有如此优雅的方式。