注册登录功能设计(一):全面的逻辑分析

6 评论 7314 浏览 31 收藏 15 分钟

编辑导语:我们下载一个APP、登录一个网站往往都需要进行注册或者登录,由此可见,注册登录功能的设计有多么重要。本文作者对此进行了全面的逻辑分析,看看注册登录功能如何设计才能提升用户的体验感吧。

很多to B端平台,由于用户量不大,对注册登录功能也就不太重视。

就我而言,在没研究注册登录功能时,觉得它很简单,想着几乎每个应用都有,能有多难。就算运用中有疑问,也只会针对当前问题分析,也因此没有一个系统的概念和认知。

通过这几天的深入挖掘,发现做好登录注册界面真的没有想象中简单。本文主要以pc端界面为案例分析注册登录,相比注册,登录写的不那么全面。

1. 注册

常见的注册共有2种,分别是手机号注册和邮箱注册。邀请码注册登录通常在产品内测阶段启用,用户名注册几乎已经销声匿迹。

注册登录功能设计(一):全面的逻辑分析

1.1 手机号注册

目前大部分APP都采用手机号为主要注册登录的方案,主要是因为手机号本身的特性,手机号具有高渗透率、唯一性、真实性(实名认证)、可联络性,手机号不仅可以确认用户身份,还可以在必要时联系用户、通过通讯录导入社交关系等。

1.1.1 分步和非分步注册

注册界面一般设计表现形式有两种,分步注册和非分步注册。

据facebook数据统计,分步注册的用户留存率大大高于非分步注册。当然也不能一概而论,但是分步注册确实能屏蔽干扰信息,让用户按照引导顺序来操作,减少了用户犯错率,不过分步步骤最好不要超过3步,否则会让用户感觉操作复杂。

注册分类思维导图如下,测试了花瓣、ui中国、站酷、bilibili、人人都是产品经理、京东、天猫等web网站发现前三种注册方式都有,关于设置登录名/昵称、支付方式的注册输入项这里暂不提及。

注册登录功能设计(一):全面的逻辑分析

1.1.2 注册流程图

忽略“下一步显示”或“触发显示”这些交互,“分步”和“非分步-全部显示”流程相同,全部显示中没有验证安全码而点击”获取短信验证码”会报错,“非分步-全部显示”同“分步”:

1.1.3 toast提示

toast提示应该简单明了,一般用于错误发生时。

比如:输入信息不完全、输入错误(登录)、输入不合法(注册)、已注册/未注册(手机号)等,注册操作中,最好能实时提醒,不要等到用户输入所有信息后,再提示错误。

提示明细如下:

注册登录功能设计(一):全面的逻辑分析

1.2 邮箱注册

邮箱注册属于pc时代的常见做法,现在多见于国外网站注册,比方说dribbble、twitter、facebook。如果用户是第一次使用邮箱注册登录,那么会发送邮箱验证码或是验证链接到邮箱,然后需要用户到邮箱中进行操作,这样用户体验会非常差。

不少企业从pc时代一路走过来,会考虑没有绑定手机号的老用户,而设置邮箱/密码登录方式。

1.2.1 分步和非分步注册

以上测试的几款web网站中,只有天猫设置了邮箱注册方式,还是在手机号被占用的情况下,通过提示链接中进入。同类电商京东并没提供邮箱注册方式,只是提示手机号已超过关联上限数量,请更换。

由此可见,邮箱注册已被大多数国内企业弃用。

这里分类分步和非分步是基于忽略激活步骤的前提下,思维导图如下:

注册登录功能设计(一):全面的逻辑分析

激活邮件常用的有两种:链接和数字验证码两种,如下图:

注册登录功能设计(一):全面的逻辑分析

1.2.2 注册流程图

相比手机号注册,邮箱注册多了邮箱激活过程,这让它的注册流程相对偏复杂,这里通过流程图特意说明下。

1.2.3 toast提示

注册登录功能设计(一):全面的逻辑分析

1.3 注册成功后流程图

注册登录功能设计(一):全面的逻辑分析

2. 登录

目前主流的登录方式是短信登录和第三方授权登录,手机端和web端都有其特有登录方式,手机端中的一键快速登录、手势密码、指纹登录,web端的二维码登录。

注册登录功能设计(一):全面的逻辑分析

2.1 toast提示

登录操作有很多应用会在点击登录button时才提示错误信息,当然个别诸如安全码类的提示会第一时间反馈。下表中整理的提示信息登录方式为密码登录、短信登录。

注册登录功能设计(一):全面的逻辑分析

2.2 切换登录界面

在测试中,发现有的平台同时为用户提供了两种登录界面:独立界面和弹窗;独立界面跳转方式有两种,本页打开方式、新开窗口。

  • 只提供一种:参考站酷,跳转登录注册界面使用在本页打开方式,登录成功后自动跳转到登录操作前所浏览的界面。
  • 提供两种:视频播放类平台bilibili,在首页触发登录时新开窗口打开独立界面,在播放界面触发登录时打开弹窗。

3. 交互要点

3.1 表单交互要点

注册登录过程中涉及的要素通常是五种,分别是手机号、邮箱、安全码、短信验证码、密码,这些要素都有其作用和优化方案。

掌握并运用得当,会大大的节省用户操作时间,提高账户的安全性和用户体验。

注册登录功能设计(一):全面的逻辑分析

3.2 其它交互要点或概念剖析

3.2.1 输入框提示

输入框提示语是必不可少的,措辞要简洁,现在普遍做法是输入框中提示,获取焦点时提示消失,如果输入项少,这种做法是可取的。

当然最好是在输入的过程中保留提示,如下图3种方式。后两种比较炫,每行输入后,提示会上移显示,其开发难度也会稍大。

注册登录功能设计(一):全面的逻辑分析

简单标注补充说明:大多数用户是产品小白,*表示必填项只有高段位用户才理解。

因此,在设计表单界面过程中,选填项、必填项最好用文字标注。简短的操作说明也建议使用文字表述,图标隐藏说明文字虽然视觉效果好,但一定程度消耗了用户体验。

一方面,图标类提示得点击图标后才显示,增加了用户操作步骤;另一方面,图标也容易被用户忽略。

3.2.2 短信验证码

系统下发的短信一般会设定有效期,有效期设定在5-10分钟为宜,短信码获取间隔为1分钟,短信码若有必要,可设定一天下发次数验证,或者在有效期内用户多次点击时下发相同验证码。

这样不仅可以节省成本(下发短信需要付费),也不会因为同时受到多条短信而分不清。

3.2.3 安全码

3.2.3.1 验证码目前主要有四种

滑动验证、按图片提示选字、图形验证码、旋转图片;目的是为了确认是人为注册,防止软件恶意注册。图片码支持随时刷新切换,不做次数限制。

注册登录功能设计(一):全面的逻辑分析

3.2.3.2 验证顺序说明

发送短信验证码之前用安全码验证,通常有以下3种顺序:

  1. 先隐藏,点击“发送短信验证码”时显示并验证,验证成功后,提示发送短信成功,或点击“发送验证码”获取短信,此种安全码多以弹窗显示。如:左1—滑动验证(上)、左2-按提示选字或图片;
  2. 先显示并隐藏短信验证码行,验证通过后显示“短信验证码”输入栏,如:左1—滑动验证(下);
  3. 显示并验证,若未验证,点击“发送短信验证码”时提示“请输入验证码”,如左3,这种方式大型网站很少见了。

3.2.3.3 安全码界面样式

有非弹窗和弹窗两种,非弹窗安全码样式如下:

注册登录功能设计(一):全面的逻辑分析

弹窗类安全码,看图选图/选字、滑动、旋转安全码这三种类型均有,触发条件为点击“发送短信验证码”或者如下图。

注册登录功能设计(一):全面的逻辑分析

3.2.4 用户协议

用户协议出现在注册界面的情况居多,早期一般是默认被选中状态或是点击注册即视为同意协议条款。

但是支付宝新闻事件提醒我们,用户协议最好是需要用户自己去点击确认,现在很多应用也开始这样做,如下右图,未勾选协议前,下一步按钮不可点。

注册登录功能设计(一):全面的逻辑分析

3.2.5 密码眼睛开合

出于使用场景考虑,比如:用户在注册时身边有人,为了保护用户的密码隐私,可以在输入密码时关闭眼睛icon。开启眼睛是为了让用户清楚的看见自己密码,避免密码输入错误。

注册登录功能设计(一):全面的逻辑分析

3.2.6 一键删除账户名/密码

这个功能是给用户在注册登录页面输入有误或是切换账户时使用,可以有效减少用户点击次数,提升用户体验。

3.2.7 保留账户名数据

如果用户曾登录过,可以保留用户的账户名数据,这样用户重新登录时只需输入密码或者验证码即可。当然,用户如果想重新输入账户名,一键删除数据的功能就显得很有必要,例如:QQ邮箱登录。

注册登录功能设计(一):全面的逻辑分析

3.2.8 多账户之间的登录切换

在登录时可以选择多个账号,这个功能在to C端应用比较少,一般是to B类应用可能会用到,因为企业可能会拥有多个账号,这个功能就显得很重要。

注册登录功能设计(一):全面的逻辑分析

3.2.9 去除鸡肋操作

注册登录过程中,一些鸡肋的操作会影响用户体验,从而导致用户流失,比方说密码重复输入,完善个人资料等。这些操作可以放在个人中心或是设置中让用户自行填写,在注册登录页面只保留必填的内容。

图片来自网络或截图,仅供学习交流。

 

本文由 @windy 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Pexels,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 写的不错,挺全面的,详细。

    回复
    1. 谢谢

      回复
  2. 流程图有问题

    回复
    1. 哪一个??

      回复
  3. 22

    回复
  4. 11

    回复