重新设计『用户登录』

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

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

  • daftar agen bola terbaik2019-02-27 16:51

    Mainbolajalan Agen SBOBET Terpercaya di Indonesia. Kami Resmi ONLINE 24 Jam siap melayani daftar Judi Bola , SBOBET, dapatkan BONUS 50%

  • hesper2020-04-20 17:13

    这样的设计是简洁的,但是大众已经被各种各样的产品登录功能 “教育”了。
    说不上好坏

  • 0mniartist2021-04-12 03:59

    You're so interesting! I do not believe I
    have read through a single thing like this before.

    So wonderful to discover someone with some original thoughts on this
    issue. Seriously.. thank you for starting this up. This web
    site is one thing that's needed on the internet, someone with
    a little originality! asmr 0mniartist