实例分析拆解:如何设计登录注册?

2018-8-10    博博

实例分析拆解:如何设计登录注册?

人人都是产品经理 2018-08-09 18:42:15

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


最近对我们的APP的账户体系进行了改版,研究了各类产品的设计。账户体系虽然几乎是通用标配功能,但是各APP的都有差别,都是针对当前的产品形态、发展阶段和用户量级做出了符合自己的设计。账户体系的关键点在登录注册流程上。登录注册流程看似简单,实际考量设计功力。网上关于登录注册的综述有很多了,但是从零到一整合分析的很少,以下,将以实际的产品为例,精细分析如何设计账户体系。

实例分析拆解:如何设计登录注册?

一、立项背景

我们的产品第一版账户体系由于历史原因,做的比较生硬。

初期主攻社交,希望可以沉淀用户信息,手机账号会是第一优先选择,当时的方案是手机号注册+账号密码登录/第三登录+立刻绑定手机账号。

如你日常体验那样,第三方登录+立刻绑定手机的方式,直接抵消了第三方登录的便利,比直接手机号注册更麻烦。而且,设计上,手机号注册需要设置两次密码,密码需要一致;设置之后,还得进入登录界面,再次填写账号密码,正确匹配才可以进入APP。

总的来说,用户进入APP的路径相当长,步骤多,用户体验低分。

近况是,产品方向探索,将重点落在商城上。完成交易的流程本身就多步骤,再叠加原来的登录注册,路径过深,对拉新损耗大,急需改进。

二、需求分析

从业务发展趋势来看,微信会是重要的用户来源,后续会布局更多的微信运营活动,和商城小程序,设计引流到APP,需重点突出微信登录。

而商城交易需要保证安全性,同时兼容老用户,手机注册密码登录必不可少。考虑到用户文化水平,和互联网产品使用习惯,需要在常规的基础上做简化。

第三方登录需要在关键点绑定,商城推广员提现时变更银行卡,需加以验证身份。

新用户刚进来,可以先浏览熟悉产品内容,在需要身份信息时,再进行引导登录。

三、功能点梳理

登录注册流程:微信/QQ第三方登录、验证码登录/注册、密码登录、找回密码。

账户体系配套:关键点引导绑定手机、关键点强制绑定手机、验证码验证账号、账号相互绑定。

细节功能点见下方的账户体系功能点梳理图。

实例分析拆解:如何设计登录注册?

四、流程图(登录注册)

未登录用户,到达需要获取用户身份信息的界面(为了平衡效率和体验,一般是除一级界面以外的),则触发注册登录流程。用户完成注册登录之后,才可使用和操作绝大部分的功能。

本流程图需要配合页面交互原型理解。

实例分析拆解:如何设计登录注册?

五、关键页面交互设计

登录注册体系将包含五个部分,主界面、验证码登录/注册、密码登录、忘记密码和新用户注册,在实际流程操作中会根据用户的选择,和系统的判断进行切换。账户体系的配套将会略过,以下是登录注册的页面交互设计、设计考量和功能点介绍。

1.主界面

  • 布局:主界面集合三种登录方式,将微信登录作为主方式。
  • 前提:成功登录的前提条件是必须先勾选同意用户协议,否则报错。
  • 授权:第三方的登录,点击微信orQQ,授权成功后,即可登录进入APP,自动获取用户的昵称性别头像信息填充社交页。
实例分析拆解:如何设计登录注册?

2.验证码登录/注册

(1)设计解析

  • 手机账号登录,考虑简单又快速进行,突出验证码快速登录/注册,辅以密码注册。
  • 密码注册的弊端是很容易忘记密码,忘记之后,找回密码流程也繁琐。
  • 验证码登录,虽然对频繁换手机的用户是个噩耗,短信也有达到率的问题,但考虑到效率跟成本,特别在拉新环节,还是作为主方式。

其实基于验证码到达率和安全性,我考虑过换移动认证,就是手机号码一键登录,无需密码跟验证码。可惜实际接洽的时候行不通,而放弃了,文本会介绍下这个事情。

(2)设计点

  • 验证码登录:登录注册界面为验证码登录,附以密码登录。
  • 按钮:登录注册的按钮合二为一。也就是说,用户不需要选择是登录还是注册,将判断交给了后台。只要用户的手机号码还在,直接凭验证码进入即可。比起选择密码登录之后忘记密码,或者是干脆就不记得自己是否注册过,在错误的界面输入信息之后来回切换,二合一的方式更加友好,也是本次设计的一个亮点。
  • 手机号码:采用更加清晰的的3-3-4数值格式,输入框末尾配清除按钮,错误输入后可一键清除。手机号码输入框也有记忆功能,可获取前一次登录的手机账号,可以获取同一次登录注册已填过的账号信息。
  • 验证码:手机号码位数输入正确类型和位数之后,才激活验证码功能。否则点击会报错。之后,验证码的激活以变色表现,这是个视觉指示。输入完成第一行,人眼会自然而言的落在第二行的开头,如无例外,用户需要寻找一番,才会觉知过来,去点击获取验证码。
  • 加载指示:数据传输到服务端,判断对错,再返回结果。这个流程费些时间,用加载小菊花,表示后台正在处理,舒缓下等待的焦急。
实例分析拆解:如何设计登录注册?

3.密码登录

(1)设计解析

密码登录考虑到向后兼容,老用户的账号以密码登录;也是适应本期的新用户注册。

同时标配忘记密码,也可切换新用户注册,或验证码登录,这些元素的布置考虑,是基于流程的。

密码的输入,其实正如设置密码,应该做格式限制。但是因为第一版没限制,不清楚用户设置了什么,所以此处不能轻易填坑。

数据输入都该考虑下限制的,为什么?在给产品经理讲技术这书里,要是你看到黑科技SQL注入攻击也会很印象深刻的……

(2)流程

跟验证码的简单路径不一样,密码登录因重在流程上逻辑自洽,更需配流程图查看才好理解。

正常流程是:输入手机号->输入密码->点击登录->登录成功。

异常流程是:

  • 输入手机号->输入密码->点击登录->提醒“未注册”->点击新用户注册or返回上一级验证码登录/注册。
  • 输入手机号->输入密码->点击登录->提醒“未注册”->账号或密码不对->重新输入or忘记密码or验证码登录。
实例分析拆解:如何设计登录注册?

4.忘记密码

(1)设计解析

步骤:忘记密码此处分两步,一步验证,一步设置。设置完之后,直接登录进入APP,无需再重复密码登录的步骤。(记不住密码更痛苦的事情是,忘记密码刚找回来,在下一步重新登录的时候又忘记了)。

异常流程:忘记密码此处还有个异常流程,是该账号不存在。有童鞋会说,正是密码输错才会到来这界面,这么还会有账号不存在的情况?对,情理上其实不大可能发生,但是程序逻辑上有这个可能,但是又无法通过前面的步骤过滤掉,是要补充下的。

此处判断账号不存在的提醒,是点击获取验证码之后,亮点之一。这里是考虑辛辛苦苦获取验证码,填写完毕之后才来告诉用户账号不存在,有些不厚道的……

(2)设计点:

验证账号:常规的做法,先验证码验证手机号,再下一步设置密码。

有些APP会将验证账号跟设置密码放在同一个页面,其实拆开会更清晰。而且,验证手机号码步骤复用率是很高的,比如,可以复用到推广员更改绑定银行卡时,作为账号验证。

设置密码:密码设置要限定格式,之后仅需输入一次就可以直接登录进入了。

重复两次数据,再次校验肯定更稳妥,但是登录成本提高了,以我们用户的耐心,我们的产品就没必要承担这个教育成本了。如果说担心手误输错了的,可以用验证码登录的,再不济可以用找回密码的。但是大多数用户其实只考虑本次能快点进入就好。

实例分析拆解:如何设计登录注册?

5.新用户注册

(1)设计解析

新用户注册界面近乎跟忘记密码是一样的流程,区别在点击获取验证码,此处的异常流程是该账号已存在。此处设置优化的流程,判断是已有账号之后,会直接跳转到验证码登录/注册界面处,直接获取已填写的手机号码,验证就行,对新用户尽量友好。

经过前面的界面筛选,此处的账号不存在的发生概率很少,但是作为关键流程而言,完整性是必要的。

实例分析拆解:如何设计登录注册?

(2)移动认证

文内留个悬念要谈谈移动认证,移动认证是什么?最直接的体验是,无需输入任何数据,直接点击授权就登录。是不是很黑科技?! 但是为什么最终放弃了呢,请听细讲。

理想情况

移动认证是运营商移动提供的,基于手机sim卡和移动网络直接认证登录的技术,米家、爱回收跟同花顺应用在了自家APP里。当时上手体验,惊艳,简直零感登录;况且移动官网也有免费的sdk,更是窃喜。以移动认证为主登录的原型设计完毕,就立刻接洽移动认证sdk的接入。

现实情况:

但是呢,很快就被开发文档打脸了,简言之,就是层层筛选之下,能一键登录的用户远没有想象的多。

移动认证的原理是基于移动网络通信的。首先基于sim卡识别本机号码,在移动网络开启的前提下传输信息以授权通过,此时可顺利登陆;但是如果没开移动网络,就没辙了;如果WiFi跟移动网络同开,以WiFi为主,那将强制占道先验证再释放WiFi。如果移动网络通信不成,那就通过短信收发来完成数据传输。

所以,这么流氓的做法苹果肯定是不乐意的;电信不参与;oppo的ROM不支持此流程……层层筛选下来,加上关闭移动网络的,能顺利使用的其实不多;而且,除非付费,否则移动认证的logo说明只能用官方的,简直是给移动打广告….这些阻力远高于收益,所以,果断放弃了,采取了本文讲述的方案。

果然,合适的才是最好的。

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

题图来自 Pexels ,基于 CC0 协议


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档