日志
实例分析拆解:如何设计登录注册?
2018-08-14 10:37
一、立项背景 我们的产品第一版账户体系由于历史原因,做的比较生硬。 初期主攻社交,希望可以沉淀用户信息,手机账号会是第一优先选择,当时的方案是手机号注册+账号密码登录/第三登录+立刻绑定手机账号。 如你日常体验那样,第三方登录+立刻绑定手机的方式,直接抵消了第三方登录的便利,比直接手机号注册更麻烦。而且,设计上,手机号注册需要设置两次密码,密码需要一致;设置之后,还得进入登录界面,再次填写账号密码,正确匹配才可以进入APP。 总的来说,用户进入APP的路径相当长,步骤多,用户体验低分。 近况是,产品方向探索,将重点落在商城上。完成交易的流程本身就多步骤,再叠加原来的登录注册,路径过深,对拉新损耗大,急需改进。 二、需求分析 从业务发展趋势来看,微信会是重要的用户来源,后续会布局更多的微信运营活动,和商城小程序,设计引流到APP,需重点突出微信登录。 而商城交易需要保证安全性,同时兼容老用户,手机注册密码登录必不可少。考虑到用户文化水平,和互联网产品使用习惯,需要在常规的基础上做简化。 第三方登录需要在关键点绑定,商城推广员提现时变更银行卡,需加以验证身份。 新用户刚进来,可以先浏览熟悉产品内容,在需要身份信息时,再进行引导登录。 三、功能点梳理 登录注册流程:微信/QQ第三方登录、验证码登录/注册、密码登录、找回密码。 账户体系配套:关键点引导绑定手机、关键点强制绑定手机、验证码验证账号、账号相互绑定。 细节功能点见下方的账户体系功能点梳理图。 四、流程图(登录注册) 未登录用户,到达需要获取用户身份信息的界面(为了平衡效率和体验,一般是除一级界面以外的),则触发注册登录流程。用户完成注册登录之后,才可使用和操作绝大部分的功能。 本流程图需要配合页面交互原型理解。 五、关键页面交互设计 登录注册体系将包含五个部分,主界面、验证码登录/注册、密码登录、忘记密码和新用户注册,在实际流程操作中会根据用户的选择,和系统的判断进行切换。账户体系的配套将会略过,以下是登录注册的页面交互设计、设计考量和功能点介绍。 1.主界面
2.验证码登录/注册 (1)设计解析
(2)设计点
3.密码登录 (1)设计解析 密码登录考虑到向后兼容,老用户的账号以密码登录;也是适应本期的新用户注册。 同时标配忘记密码,也可切换新用户注册,或验证码登录,这些元素的布置考虑,是基于流程的。 密码的输入,其实正如设置密码,应该做格式限制。但是因为第一版没限制,不清楚用户设置了什么,所以此处不能轻易填坑。 数据输入都该考虑下限制的,为什么?在给产品经理讲技术这书里,要是你看到黑科技SQL注入攻击也会很印象深刻的…… (2)流程 跟验证码的简单路径不一样,密码登录因重在流程上逻辑自洽,更需配流程图查看才好理解。 正常流程是:输入手机号->输入密码->点击登录->登录成功。 异常流程是:
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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务 标签: 如何设计登录注册 分享到: 新浪微博 腾讯微博 微信 微信 更多 阅读全文 |
上一篇: 玩转Axure:如何制作验证码倒计时?