关于注册流程的想法

如果一个注册流程需要以下三个信息,手机号、验证码以及密码,该如何去设计。最粗暴的方式无非就是想下图这样,直接在一个页面内搞定所有内容。

这样从设计的工作量以及开发的工作量来说似乎都是最小的,一个页面内搞定所有内容,对用户来说似乎也是挺好的。但是如果说这个用户的手机号已经注册了呢?我们该怎么办,弹出一个这样的对话框,让用户去点击[登录],跟着就跳转到登录页面?如果他不知道自己注册过,而且也忘记了密码呢?他需要在登录页面再点击一次[忘记密码]?

仅仅为了一个重置密码就需要让用户跳转两个页面的成本缺失有点高,注册登录本身就是一个验证身份的过程,验证码以及密码都是一种验证身份的过程,验证码仅仅是为了验证你是手机的持有者,密码则是为了不让用户每次都要等验证码,从另一方面来讲其实也是为了节省公司的短信费。

目前为止,我遇到唯一不使用密码登录,而仅使用验证码登录的应用,大概就只有 What’s app 了,What’s app 本身就是短信的替代者,而短信如何验证你是你,是通过 SIM 卡来验证的,你的手机插入了对应的 SIM 卡,你就可以使用短信功能了,What’s app 当然无法使用这样的方式去验证,那么它就只能通过短信去验证你是你了,而短信又和 SIM 卡绑定,也就是通过一种间接的方式验证了 SIM 卡。我不能说这种方法适用于所有的应用,但是对于多数应用来说,短信验证就是验证你是你的最后一道关,如果你的手机丢了,那么即使是两步验证这样看起来很安全的方式也会不堪一击。

回归正题,上面也是说了,注册登录本身也就是验证你是你的一个过程,验证码可以验证,同样密码也可以验证,那么只要有任何一个验证方式通过了,都可以算是验证了你是你。如果你同意这个观点,那么我们就继续往下说。

既然密码和验证码可以以二选一的方式来进行验证,那么既然用户都已经触发了[获取验证码]这个操作,那么就不要打断用户去完成这个操作,就给他发送一个验证码,等他输入了验证码之后,就让用户直接登录,登录进去之后再提醒用户是否忘记了密码,并可以直接修改密码。我还是忍不住要去想密码还有没有必要存在,前提是那点短信费你一点都不在意。

这样做的好处无非就是,没有打断用户的流程,也没有多余的页面跳转,成本无非就是短信费。如果按照前面的那张图的话,下面多出来的密码,在这部分用户看来就很奇怪,因此十分有必要把密码下放到第二页面,于是页面就变成了下面这个样子。

两个页面搞定,但是怎么看怎么奇怪

这样看来,对于需要注册的用户来说,就无端端的多出了一个页面,降低了完成注册的效率。不过,说到效率,那就不能不说另外一个问题,那就是报错。首先,没有人喜欢这玩意儿,程序出错就好像你去超市挑了一大堆东西然后排队买单,终于到你的时候发现自己买带钱。这种感觉会让用户觉得自己很蠢,这会让用户很不开心,我们先不提什么习得的挫败感,光是这样的弹窗或者提示语就让人觉得很讨厌了,你都说错了,那你告诉我正确的是什么啊。

如果用户第二次有填错了会怎样,手机号还好,在填写验证码的时候每一次我都是非常小心的去记住验证码,要在心里把这 6 个数字背下来,因为很担心自己会出错,有时候甚至需要用笔写下来才行。总之是一个非常令人不愉快的体验,结果还是遇到了弹窗,我想我会放弃的。

其实设计师在使用弹窗的时候应该看看自己是不是在 Chrome 里面安装了广告拦截插件,如果装了的话,那么想想为什么当初要装这玩意。连多数的浏览器都默认阻止弹窗,你怎么好意思在自己的设计中让用户去接受一个弹窗呢?不是说任何时候都不能用,弹窗就像是大招,一定要攒着,除非逼不得已,没事天天放的大招就不叫大招了。

这个时候大家可能会想到使用提醒文本。OK,那么我重新输入了验证码,不幸的是这次依旧没有填写正确,这个时候对用户来说发生了什么?……?什么也没有发生,因为用户还是填错了,所以那几个字就是还停留在那里啊,这个页面什么也没有改变啊,是不是死机了?用户可能会这样想,唉,算了吧……

所以这里的问题是,怎么才能不让用户出错?通过限制性方法,当用户没有输入完整的手机号的情况下[获取验证码]按钮为灰色的不可点击状态。那么对于这个逻辑设计师自己是非常清晰的,但是作为一个用户,我怎么知道为毛这玩意就是按不下去呢?是不是死机了?唉,算了吧……

但是如果你使用提醒,那么上面的问题又来了,弹窗烦人,红字死机,什么都不说也死机,左右都是个死,那就死的痛快点吧。手机号输入不完整,无非就是少了几个数字,或者多了几个数字,再或者就是第一个数字是以 9 开头的。那么对于第一个问题,少了几个数字,我们可不可以通过这样的方式来提醒用户少写了几个数字呢。或者可以将手机号的格式通过视觉表现出来,让用户意识到这个号码是不完整的。

对于第二个问题,多输入了,完全可以直接限制用户只能输入 11 位数,如果用户是国外的用户,或者像我这样有强迫症,非得在手机号前面加个 +86 的话……如果用户输入的不完整,可以在后面添加相应数位的「?」来提醒用户输入完整的数字。可能应用在手机号这里并不合适,因为手机号只有 11 位数,而且有固定的格式,如果在界面上通过固定格式来呈现,用户可能会很容易看出问题,而没有必要在这个地方下这么大的力量,但是在其它用户可能不太熟悉的输入项,可以通过这样的方式来提醒用户缺少的内容。

说回到说效率,关于效率有这个一个法则,叫根据费茨法则(Fitts’s Law),说的是用户到达目标的时间取决于目标的位置和大小。那么在这个注册页面,用户最终的目标是最下方的[完成注册]按钮,看着也在用户可操作范围内,而去按钮也挺大的,看起来完全符合费茨法则的说法啊。但是我们再看看从最上面页面规划下用户是如何交互的,不知道大家有没有看出一些问题来。

那么从上图中可以看出,用户在整个页面的交互中实际上手指移动了相当长的距离,所以费茨法则说的不是某个按钮的距离,而是整个操作过程和最终目标的距离,那么这里就浪费了用户的很多时间。如果根据费茨法则来进行修改的话无非就是做两件事情,一个是减少手指移动的距离,另一件就是让按钮变得很大。

如果我们要在一个页面内同时做好这两件事情,反正我是没有什么好办法。既然在一个页面内无法满足要求,那么我就尝试着来拆分成好几个不同的页面。于是就有了下面的这个图:

一个页面被拆分成了三个页面,而用户效率真的有提高很多么?我就懒的画用户手指的移动距离了,各位脑补一下吧。用户所有的操作基本上都固定在屏幕最容易触碰的地方,整个所有页面的输入框都是被自动激活,用户根本不用去管输入框,每个页面都是在键盘上按下按键,然后点击键盘上方一点点的按钮就可以。这个流程 YY 起来似乎是很爽的。

如果用户输入错了手机号会发生什么问题,用户会收不到短信,但是如果提示太小,用户可能注意不到是自己输入了错误的手机号,而觉得是软件本身的问题。

即使用户发现了错误,还是要返回到上个页面去进行修改,然后再重新获取验证码,那么能不能不让用户返回呢,就在这个页面修改呢?但这样做就违背了我们把页面拆分开来的目的,又回到了最开始的状态。于是我们就进入了一种设计师模式,我们一味想要让事情变的简单,让用户的操作更方便,结果却更复杂了。因为用户根本不明白这种反类人逻辑。所以真的有必要这样去做吗?让用户返回一次真的很困难吗?用户会经常性的返回吗?很明显不会,那么既然如此,一个返回的操作应该也不会增加太多用户的负担。

而且对于已经注册的用户,在第二个页面,也就是输入完成验证码之后就可以直接让用户登录进去,然后再提醒用户是否需要修改密码,如果用户此时想起了密码,那么便可以不去修改,如果忘记了,则可以直接修改。整个登录过程中并没有打断用户的任何思路,而是尽快的完成认证用户的这个过程,而「忘记密码」是用户的下一个可能要完成的操作,因此可以在完成认证之后才去修改。

到此为止,似乎有了一个很明确的答案,但是真的就这么简单?拆分成三个页面就一定好过一个页面?恐怕不是这样。三个页面,到第三个页面的时候用户可能还会怀疑是不是还有第四个第五个,如果真的还有的话那就更糟了,我根本就不知道后面还有多少页面要走,用户或许会放弃注册。一个页面的好处显而易见,用户一次性看到了所有的信息,一次性的输入完所有的内容,然后就成功了。但是上文所说的用户手指的移动距离的问题,可以使用一些其它的方式解决。

在注册流程中,Pinterest 使用拆分页面,好在只有三步,因此也非常高效,而 Swarm 只有一个页面,但是在键盘上添加了[下一个]&[上一个]这样的按钮让操作更方便。但是也正如前面所说的,如果用户填完了信息,结果却提醒用户已经注册了,而不是直接让用户登录,这样的体验似乎并不好,那么问题是,碰到这种情况的用户会有多少?有多少人是注册了,但并不知道自己注册了,为这么些用户优化是否值得呢?很多时候我们会 YY 出来用户觉得很爽的功能,但实际上用户在使用的时候根本爽不起来,只是设计师自己爽了。简单不仅仅是方便,同时也是逻辑上的简单,怎样能用最短的语言来概括这个功能,这才是最好的。对于一个用户界面,重要不是他看起来有多么简洁,而是用起来是不是很简单,或者说很容易理解。简单并不是复杂的对立面,相反,有些时候复杂才是一种简单。