浅析手机产品中的登录和注册(一)

sign in for mobile

1   前言

手机产品上的登录和注册看似简单,其实非常复杂,并且在流程、逻辑以及展现形式与传统web端有着较大的差异。对于一个App产品来说,登录或注册往往是和新用户互动的关键环节。如何在手机上设计登录和注册,也是需要认真斟酌和考虑的。

手机与web端的差异,是我们首先要考虑的因素。有些原则只适用于手机端,所以非常有必要针对移动平台进行差异化的重新设计。下表是手机端和web端的在使用和设计上的对比。

mobie versus web基于此,本文尝试了多款知名的国内外iOS App,揣摩这些App在登录和注册中的设计思路,从中以小窥大,提炼出值得汲取的移动产品设计经验,并总结出适用于的移动端的流程和原则。根据以上的对比分析,由于移动设备的使用场景不固定、屏幕小、输入不便等特点,产品的设计不适合太多、太复杂的流程和逻辑呈现,相反需要深入思考如何做到「简单易用」。

2   登录

2.1  登录界面剖析

2.1.1  视觉

以下4组图分别列出了部分较流行iOS 客户端的登录界面。图1依次是:微信、新浪微博、QQ、网易云音乐、淘宝网。

mobile01

图1

    图2依次是:QQ音乐、LOFTER、天猫、支付宝钱包、有道云笔记。

mobile02

图2

    图3依次是:Wunderlist、Instagram、facebook、LinkedIn、Pocket。

mobile03

图3

    图4依次是:LINE(连我)、Tumblr、Zite、印象笔记、Twitter。

mobile04

图4

    以上应用的登录界面,绝大多数在视觉上能传递给用户简单易用的心理感受。此界面上的焦点是登录框,所有用户都知道这是登录框,无复杂元素的干扰,是易于操作的。从以上几组截屏可以看到,支付宝钱包的登录界面采取了拟物化的设计,加上切换标签,以及各种元素拥挤在促狭的空间里,给人一种复杂的印象。LINE从上至下排列的同样宽度的输入框以及几个按钮,略显拗口的提示文字,让人产生迟疑的感觉。

2.1.2  布局

布局的核心是能让用户快速的聚焦于登录框,继而顺利完成登录任务。整体的布局可以归类为以下几种形式:

1) 从欢迎或引导页面进入登录,显示导航栏,右侧放置登录按钮(如:淘宝、QQ音乐、Instagram、Twitter):

  •  导航栏左侧有返回或取消按钮,中间显示任务名称或应用名称;
  •  账号和密码框多靠近导航栏,少数置于屏幕中间(QQ音乐);
  • 密码框下显示「忘记密码?」文字链接或放置「注册」按钮。

2) 从欢迎或引导页面进入登录,显示导航栏,右侧无按钮(如:微信、网易云音乐、Lofter、天猫、支付宝钱包、LINE、Zite):

  • 导航栏左侧有返回或取消按钮,中间显示任务名称或应用名称;
  • 账号和密码框靠近导航栏;
  • 登录按钮置于密码框下:a.登录按钮与密码框等宽;b.登录(宽度小)按钮置于密码框右下;c.登录按钮与注册按钮并排放置,一般注册在左,登录在右。
  • 密码框下显示「忘记密码?」文字链接或放置「注册」按钮。

3) 从欢迎或引导界面进入登录,无导航栏(如:Wunderlist、印象笔记、Pocket、LinkedIn):

  • 通过丰富色彩或简洁的风格突出产品的品牌形象,通过页面翻转效果、滑动切换等进入登录界面和返回;
  • 根据产品的定位和风格要求放置账号和密码框。在展现产品logo的情况下,输入框一般会置于屏幕中间或偏下的位置;
  • 登录按钮等宽放置在密码框下或置于屏幕右下角;
  • 密码框下显示「忘记密码?」文字链接或放置「注册」按钮。

4) 打开应用后,直接展示登录界面(如:QQ、facebook、有道云笔记):

  • 通过色彩和设计突出产品形象,一般通过深色的背景突出白色或浅色的登录框,造成一定的视觉差,吸引人的视线;
  • 在展现产品logo的情况下,账号和密码框会在屏幕中间。
  • 登录注册按钮并排摆放,或采取登录按钮在上,注册按钮在下的方式;
  • 在空间内合理摆放第三方登录按钮。

5) 在当前内容上调用浮出层显示登录框(如:Tumblr)。

2.2  登录交互细节分析

这里主要从提示文案、交互反馈、易用性三个方面分析移动产品的登录操作。只有登录的用户会在App产品上创造内容,丰富信息,形成互动,才能体现产品的更大价值。用户每次只会花极少的时间在登录和注册上,但这个短短的时间内,却承载着吸纳更多用户的使命。虽然手机屏幕很小,但是在产品的体验过程中,还是可以感受到产品设计者的对细节和体验的思考。

2.2.1  提示文案

mobile05

图5

    图5标出了登录界面上常见元素的文案提示:

1)导航栏标题,提示用户当前所在位置;

2)按钮操作提示;

3)宣传文案,体现登录后带来的好处;

4)输入提示,提示输入域信息如何填写;

5)文字链提示,引导用户进入其他功能。

那么,优秀的登录提示应具备以下特点:导航栏标题要明确位置、按钮提示要明确操作、宣传文案要体现价值、输入提示要明确可输入的账号信息(用户名,手机,邮箱等)。可以看到,以上的产品登录提示都有共同的特点:表述简洁,导向明确。

mobile06

图6

再展开分析以上图6的给出的产品文案提示信息:

1)「6-20位之间的半角字母及数字」,半角字母这种表述对普通似乎有点复杂了,6-20位之间的字母和数字会产生歧义,是6-20位的字母?还是数字?还是字母和数字的组合?

2)「确认」在此处的用法是合适的吗?确认正式的表述是:通过提供客观证据对特定的预期用途或应用要求已得到满足的认定。确认往往包含着不肯定,持有怀疑的意思。在登录操作中,最终的目的是让用户登录,既然是登录操作,直接使用预期的目标动作表述会更清楚。

3)「若您尚未绑定邮箱地址」,这句表述让人生疑,目的是什么?紧接着上面的确认按钮,起到什么作用?点击此按钮,切换的界面如图7所示:大量的文字,拗口难懂的描述,让人一头雾水。

mobile07

图7

    4)新浪微博在输入框之上采取标签来引导用户应填何种信息,但输入框内没有任何提示。「登录名」是什么?用户该填写自己的会员账号,电子邮箱还是手机号?熟悉新浪微博的用户应该知道,微博注册是可以以几种方式注册的。对于有多个账号或长期不登录的用户,输入框没有任何提示,用户面对此处会产生很多疑问:可以输入哪些账号?哪个账号可以登录?哪种又不能支持?繁琐的思考打断了用户操作的流畅性。这里举个例外的产品:手机QQ的登录框,如图8所示:

mobile08

图8

    QQ手机客户端登录框也只是提示账号和密码?用户会产生疑惑吗?答案是不会。因为QQ有很广大的群众基础和很长时间的用户积淀,它的账号只有一种,就是QQ号码,事实上已经成为身份和联络的标准。用户的习惯已经养成,看到登录框的条件反射自然是QQ号码。而新浪微博作为媒体化轻社交平台,用户可使用多种方式进行登录。手机客户端应该明确给出可登录方式的提示信息。

5)登录和注册按钮并排放置的情况下,要思考下这里的逻辑呈现是否有问题?如下图9所示,注册和登录在密码框下分别左右排列。

左侧的产品图中,导航栏明确告知用户当前处于登录状态,输入账号和密码点击登录按钮完成即可完成流程,浅色调的「快速注册」暗示将用户引导到注册界面中。

而右侧的产品图中,导航栏标题为「新浪微博」,输入框的标签为「登录名」,然后并排的注册和登录按钮。这里的逻辑不够清晰,用户会认为只要直接填写了登录名和密码,点击了「注册」就可以直接进行注册了。而事实并非如此

mobile09 图9

web端及PC桌面端软件有很多采用注册和登录共用输入框的方式。如图10所示的mac desktop版Wunderlist:

mobile10

图10

从web或桌面端延续来的用户习惯,如果移动产品不能以明确的提示文案引导用户,就会产生以上所述的理解错误。所以,将导航栏中「新浪微博」改为「登录」,是不是逻辑表现的更清楚一些?由此可见,导航栏的标题信息也是很重要的。

6)输入框中的提示文案「淘宝会员账号」和「密码」的表述已经非常清楚了,可前面的标签「账号:」和「密码:」提示就显得非常多余。虽然并不影响用户的操作,但是会给人一种画蛇添足的感觉。

从以上的总结中,我们可以看出,简单的文案提示也体现出了对产品细节和逻辑的考虑,文案提示包括界面的各个元素,清晰的文案,能够引导用户进行下一步操作,是产品流畅操作的前提条件。

2.2.2  交互反馈

1)焦点自动停留在帐号输入框,自动调用键盘,减少用户一次点击。如图11所

mobile11

图11

2)在输入前,登录按钮置灰不可点击。输入后,登录按钮变色并可点击。如下图:

mobile12

图12

3)当登录框位于屏幕中间时,点击输入框后,登录框整体上移,确保键盘不会遮挡输入框。

 mobile13

图13

4)自动纠错是把「双刃剑」。 iOS系统「设置」->「通用」->「键盘」->「自动改正」默认是启用状态。在此状态下,某些应用在输入时可以辅助用户进行纠错。但在某些情况下,也会起到适得其反的作用。如下左图,当只想输入「mobiweb」时,自动纠错成「mobileweb」,用户不得不点击「x」取消自动纠错的结果,但往往容易误操作导致非预期的结果。而在输错的情况下,自动纠错又是非常实用的功能,如下右图所示。所以很多应用在输入时并不会进行自动纠错。

mobile14

图14

5)可切换密码显示方式。一般情况下,用户当前输入的密码以明文显示,在继续输入下一位时将上一位密码转换为替换符。如下图所示:

mobile15

图15

移动端输入成本要比PC上高很多,触屏虚拟键盘带来的出错率比实体键盘放大了很多。而以上的设计也存在一些问题,只有当前输入以明文显示,而之前输入的密码依旧为替换符,用户需要在虚拟键盘上找寻所需要输入的字符,缺乏连续性,会导致用户容易忘记之前的输入。所以,在密码输入区域放置密码显示的开关,密码可在明文和隐藏之间切换,可提高输入效率,降低出错率。如下图所示:

mobile16

图16

6)自动登录+记住密码。

mobile17

图17

  • 在密码输入框下,只有「自动登录」选项。当勾选此选项后,应用会保存用户已登录的账号和密码。当用户退出后下次再登录会直接进入;
  • 在密码输入框下,有「自动登录」和「记住密码」选项。当只勾选「记住密码」登录,应用会记录用户输入后的密码。当用户退出后下次进入登录界面,账号和密码自动填充,无需再次输入账号和密码,用户只需点击登录按钮后就可进入。对于需要在多个账号切换的用户比较方便。当勾选「自动登录」时,会自动勾选「记住密码」;
  • 虽然界面不显示选项,应用会保存账号和密码,每次会直接进入已登录状态。

7)账号快速切换。对用户使用的登录账号保存,在登录账号框可进行快速选择或删除。

mobile18

图18

8)邮箱自动补全。

mobile19

图19

9)反馈提示。在用户与产品进行交互的过程中, 产品对于用户的每一次行为都要有清晰的、及时的提示和反馈,从而使用户获得操作行为结果的信息。以下为常见的几种登录反馈提示:

mobile20 图20

  • 暂态视图提示错误,在屏幕上显示2-3s后消失(图20-1);
  • 与iOS系统风格统一的警告框(图20-2);
  • 自定义样式的警告框(图20-3);
  • 气球状通知,如上图4中的信息提示,用来告知用户所指向的账号输入错误(图20-4);
  • 导航栏下浮出条幅显示,使用与当前登录界面对比强烈的色彩,吸引用户视线,3s后消失(图20-5);
  • 当输入错误时,文字提示在输入框附近出现(图20-6);
  • 动效化提示,如上图7所示,用户点击登录后验证,不通过文字性提示,而是通过动画效果表现,如左右摇动后归位。随享微博客户端登录也采用了此种方式(图20-7).

10)登录反馈提示的一致性。

mobile21

图21

可以从图21中看到,前后的反馈提示警告框风格不一致。在没有输入密码时,点击登录后是iOS的默认风格,而输入密码后点击登录,却是自定义的风格样式。

mobile22

图22

上图中可以看到,登录的标签是「帐号」,而反馈提示警告框却是「帐户名」。这细微的差别或许不会引起用户的注意,但是文案提示的不一致,也说明了对产品细节体验的把控做的还是不够细致严谨。

11)登录中的状态反馈。下图23列出了常见的登录中的状态。

mobile23

图23

  • 以暂态视图给出登录操作的提示(图23-1);
  • 以动画效果显示进度(图23-2);
  • 图23-3与图23-1类似,只是提示文案不同;
  • 登录按钮状态变为「登录中…」,同时右侧出现网络活动指示器(图23-4);
  • 将登录按钮状态变为「登录中…」(图23-5);
  • 在登录按钮中出现连接状态图形(图23-6);
  • 上图7与图6一样;
  • 状态栏中出现网络活动指示器(图23-8);
  • 在登录框下自定义网络活动指示器图形(图23-9);
  • 透明框浮现在程序中央,覆盖在主程序之上(图23-10);
  • 状态指示覆盖主界面,与图23-10类似。

12)登录失败后的焦点返回。发现多数移动产品在登录失败后,不会再次获取焦点,需要用户再次点击,有些甚至直接将用户上一次输入的密码直接清空。此处的设计相比web端过于简化,显得非常简单粗暴。移动客户端登录的验证设计比较简单,登录失败后,往往给出的提示为「账号或密码错误」或「账号或密码不匹配」等,不能更进一步明确是账号还是密码输入错误。一些产品在登录失败后,如下图所示:

  • 焦点自动回到登录前焦点所在位置;
  • 焦点自动切换到输入的账号之后。

所以,如果不能根据验证的结果进行焦点切换,实际作用并不大,形似鸡肋。

mobile24 图24

13)登录安全引导。一般为防止恶意登录,应用会在登录失败若干次后出现验证码或校验码输入请求。另外,可以直接弹出对话框,引导用户进入「忘记密码」流程。如图25所示:

mobile25

图25

2.2.3  易用性体验

1) 淘宝iOS客户端在登录失败4次以上后,会出现验证码保护账号安全。由于验证码为一组无规律可循的字母组合,应当在输入的时候,能够屏蔽iOS系统的「自动更正」功能。如前文所述,「自动更正」是双刃剑,在输入单词时可以自动纠错,辅助用户输入,也会在用户无规律输入的时候,干扰用户,阻断了流畅性。尤其是在输入验证码时,「自动更正」非常影响输入的效率。

mobile26

图26

2) 支付宝钱包iOS客户端采用了拟物化设计,使用的材质像我们常见的牛皮钱包,界面的隐喻,给用户一种安全感的信息。再来仔细观察一下支付宝的登录界面:

mobile27

图27

形似牛皮的材质和卡槽,界面元素主要集中在导航栏下的卡片上。通过标签页来切换支付宝和淘宝账号,个人猜测这样的设计,是为了模拟钱包卡槽的效果,将「支付宝会员」和「淘宝会员」登录生硬的凑在一起,让整个界面略显复杂和拥挤。

那么,取消以上的两种会员标签页,并整合在一起,有没有可能?从上图中可以看到,要求输入的账户名包含邮箱、手机号、淘宝会员名。可以在账户输入框内进行明确的文字提示,将两者要求输入的账号整合于同一个登录框内。当然,也可以考虑通过独立的按钮将以上两者引导到不同的登录界面上。

由于通过标签页进行切换,在体验上存在以下两种问题:

  • 标签页靠近屏幕的顶部,尤其「支付宝会员」选项卡与导航栏的「返回」按钮距离过近,且标签选项卡的高度过窄;
  • 「淘宝会员」选项卡与它下方的「详情显示」按钮距离过近。

那么用户在单手操作的情况下,尤其在移动不稳定的环境中,非常容易误操作,在点击「支付宝会员」的情况下,误触到它上方的「返回」按钮。在点击「淘宝会员」的情况下,误触到它下方的「详情显示」按钮。而在两种选项卡中点击「找回登录密码」,支付宝通过手机号码找回,淘宝会跳转到手机web页面找回。逻辑和显示都一致,让人费解。关于找回密码,在后面进行解读。

3)LINE(连我)在中国大陆地区,由360独家代理和运营,不知道是否由360进行本地化工作。正如上文「提示文案」中所描述的问题,整个登录的提示让人匪夷所思,非常让人难以理解。不否认LINE本身是非常有自己特色的一款应用,但整个注册登录流程的体验很差。尤其当登录后无法退出账号,且只能选择「删除账号」,删除帐号后所有聊天记录、好友列表、购物记录等均被删除。只能重新注册,且绑定邮箱的作用究竟是什么,也很难让人理解。从体验的结果看,登录基本没起到任何作用,形同鸡肋。

4)一旦用户登录成功后,也要能够清晰的指引用户退出或注销当前账号。不要强迫用户总是保持登录状态,不给用户选择的余地。比如QQ网购iOS客户端,给用户充分的选择权,既可选择「自动登录」也可同时选择「记住密码」,方便多账号用户的账号切换。即便没有明确的给出选择的情况下,应用也应该在逻辑上帮助用户记录密码并自动登录。当用户手动退出当前账号时,默认应该保留上一次登录的账号名,减少用户输入的成本。

新浪微博iOS客户端在手动退出当前账号后,没有保留用户上一次登录的账号名,需要用户重新输入一次。这里面的逻辑值得斟酌,假设用户注销当前账号,希望用的时候再登录,如果保留账号名,用户直接输入密码即可。否则,就需要再次输入账号;假设用户注销当前账号,希望切换账号再登录,如果保留账户名,用户直接点击输入框右侧的清除即可输入。如果账户输入框为空,用户同样需要再次点击输入框,启动输入。在输入效率和成本上几乎是一样的。所以,可见在用户手动退出后,最好默认保留上一次登录的账号,方便输入。

5)越来越多的客户端产品在登录设计时,采取独立账号+第三方账号的方式。很多工具类应用完支持第三方社交产品账号登录,并省却了注册环节。如:拍照应用-啪啪,旅行应用-蝉游记。这样极大简化了操作,省却了用户填写表单的烦躁感,也使产品信息的分享变得更加容易。那些社交账号后登录后还需要再填信息的应用除外。

2.3  重置密码

在登录操作中,还有一个重要的环节就是忘记密码,或称之为找回密码,通过此流程辅助用户重设密码。从2.1.1视觉这一章节,可以看出,绝大多数产品都在登录框下,使用文字链的形式,引导用户进入重设密码的环节。

mobile28

图28

重置密码主要有这几种方式:1.通过E-mail找回密码;2.通过手机号码找回密码;3.通过注册用户名找回密码。

引导用户重置的界面,归结起来基本有几种:1.通过原生应用界面直接输入邮箱或者手机号等;2.应用内集成web页面;3.点击「忘记密码」后,直接激活浏览器,这种方式体验稍差,用户要回到应用中,需要多几步操作,所以尽量不要让用户跳出当前应用主界面进行操作。

图28第1张截屏,新浪微博客户端「找回密码」其实是在应用内集成了web页面,通过点击短信号码,激活短信程序。这里的设计实在让人存疑:通过短信修改密码,暂且不说需要用户跳出当前应用,用户只能以本机号码「找回密码」,用户不能随意修改号码。如果不是非注册的号码进行此操作,新浪微博会直接以该手机号码开通微博账号,这种方式有绑架用户之嫌。

微信在引导用户重置密码这一点上做的比较好。用户在重置密码的过程中,不会离开当前程序。

mobile29

图29

但同时也看到,微信以上3种重设密码的方式,色彩和布局方面都有很大差异,显得非常凌乱,尤其导航栏左上角的按钮使用了不同的描述和样式 ,一致性体验比较差。

在应用内的操作,尽量要保证操作体验的一致性。文章前面已经谈到支付宝钱包在「找回密码」上不一致的问题。如下图:

mobile30

图30

在支付宝和淘宝登录框下,点击「找回登录密码」后,呈现的逻辑完全不同。一个是原生界面,另一个通过加载web 页面。而最右侧的「找回登录密码」显示的却是淘宝会员登录界面。用户本希望通过此找回密码,这里却显示登录表单,且只在登录按钮下的一行小字提醒用户「忘记密码:请用电脑登录xxxx找回」,用户在不留意的情况下,很难发现这段提示。这意味着,在此处「找回登录密码」功能在手机端根本就无法完成,与用户预期完全不一致,是个很糟糕的设计。

米聊在此处的设计非常到位,通过原生应用界面提供了统一的操作体验,简洁的文案和操作使用户有效率的完成任务。

mobile31

图31

看起来似乎「找回密码」的设计都千篇一律,没有新意可言。那么,我们看看LinkedIn、Tumblr、抬扛是否能给我们一些启发:

mobile32

图32

LinkedIn客户端采用了两种方式引导用户进入「重置密码」:1.登录按钮下的「忘记密码」链接;2.在多次登录失败后,弹出对话框来引导用户进入「重置密码」流程。

mobile33

图33

Tumblr和抬扛iOS客户端的「重置密码」过程非常相似。Tumblr整个登录过程都是在弹出层中完成,非常的简洁。也没有「忘记密码」这样文字提示,通过点击密码输入框右侧的「?」图标,对话框翻转后,用户的邮箱地址已经自动填充在输入框内,非常的方便,无需用户再次输入。抬扛点击「忘记密码」链接后,与Tumblr采取的方式一样,这里就不再赘述。

2.4  登录架构流程

2.4.1  登录页面架构图

mobile34

图34

2.4.2  登录流程图

mobile35 图35

2.4.3  密码重置流程图

mobile36 图36

 –END–
原创文章,转载请注明: 转载自移动互联网2.0,本文链接地址: 浅析手机产品中的登录和注册(一)