关于登陆注册设计,你需要注意这7个要点
登录注册这件事说大也不算大,说小也能研究出诸多道理。这个流程的设计,也能侧面反应出整体产品的认真程度。本文从登录注册的流程方式、交互体验、设计细节等方面,分析登录注册这个流程的设计要点。
一、从最简单的部分开始
最基本的板块包括“登录”、“注册”、“密码找回”这三大功能。其中每一项也包含有多种不同的方法,将我见过的所有的类型总结如下:
那么,我的产品要包含哪几种呢?是不是所有的登录注册方式都要包含,以给用户最多的选择?为什么还见到有的产品包含有“邮箱登录”这种上古时代的登录方式?为什么有时第三方登录以后却还要绑定手机号?
这些问题都没有确定的答案,需要根据产品的各种需求确定:
- 可能自家产品在pc时代就出现了,因此很多用户只有或习惯用邮箱登录的账号,因此为了照顾老用户提供了邮箱登录;
- 可能产品中正好要体现性别、地区等信息,微信登录即快捷又能自动获取信息自是大好,要特别突出;
- 可能产品排斥用户拥有太多账号,因此在第三方后边加了手机号绑定,把多个第三方账号结合在一起。
选用什么方式,设置什么流程,都是根据产品的特征和以后的需求确定的,需要仔细权衡,做出适合自己的选择。
下面就从多个角度,分析这个过程中经常见到的问题,以及可能的优化方案。
二、什么时候登陆?登陆完以后做什么?
那么第一个问题就是,在什么时刻提示用户摆脱游客身份去登录?
概括的来说,一些对用户ID没有要求的内容性的功能(例如浏览文章、商品等)是游客身份;一些 需要定位到某一个用户ID才能进行的功能 (例如收藏、关注、评论、发布内容等)需要用户登录。
除此以外,运营需求也对此有要求。例如游客只开放基础功能, 更核心的付费功能需要注册 ;参与产品活动之后 领取活动奖励到账号时 ,必须注册账号领取等等。
最后就是细节的“时机”了——登录转化应该放在一系列连续过程的最后/最关键一步,例如用户浏览了很久商品,添加了购物车,生成了订单,在最后准备付款的时候,让用户去登录,这里就是最佳时机。
利用“沉没成本”效应,用户前边付出了那么多步骤,眼看就要成功了,这时的转化率是最高的。
第二个问题,在游客去登录的过程中需要注意什么?
这个过程步步都是转化的关键点,流程尽量精简,尽量偏重用户体验。
提供随时退出的按钮。 在登录注册板块中,也有流程性比较强,分很多页的地方(例如密码找回),这时要给用户一键跳出此流程的选择。
因为有可能用户是点击比较无关紧要的功能进入了登录流程,用户陷入了麻烦不想登录,就放过他吧,一层层跳出挺麻烦的。
上面的一条也不是绝对的, 如果产品很想在此处捞一把注册数量,或者这个功能对用户很有吸引力很重要 ,就要千方百计把用户锁在里面。例如点击退出登录时出现弹窗,询问“真的要放弃注册吗?”。
第三个问题,登录完之后怎么办?
首先必须要做到的是,不论是走完了流程还是中途退出流程,都要回到进入流程之前的那个页面,让用户继续之前的任务。
从游客身份进入正式用户身份后,以游客身份进行过的操作要同步到正式用户的账号中。
例如成为正式用户后,在“浏览记录”功能下,曾经作为游客浏览过的东西还是要显示出来的(做法是用户ID一直不变,只更换一下“未注册”和“已注册”的标签就好)。
三、“注册”还要不要
现在越来越多的产品没有了注册流程,我认为这样总体上来说还是优大于劣(但还是要根据业务的需求做取舍),原因包括:
- 降低用户对注册的反感,减少注册过程中用户流失的概率。
- 减少了过程中的步骤,界面更简洁流程性更强,出错概率降低。
- 使用手机验证码而不是密码,企业和用户的安全性均更高。
- 没有了设置密码和输入密码的过程,用户忘记密码;密码输入时的种种限制和提示;找回密码流程等全部被精简,使用和开发都更简单。
但是这也会带来一些问题,总结出了下面这些问题以及应对措施。
四、“输入密码”这个小过程
虽然使用密码登录已经不再是主流方式,但是你想想啊,用户一旦被逼迫到使用密码登录了那很可能是别的途径走不通被逼无奈了,这个时候若再不带给用户便利那真是要把用户逼走了。
但密码这个东西,本身就很容易忘记;为了避免忘记,用户就使用同一套号码,反而又失去了保密的初衷;那你让用户设置一串巨复杂无比的密码并且要定期更改,又被骂太麻烦……下面就总结了一下目前的优化方案。
也不能说做到上述优化就OK了,体验感和安全性很难两手抓,需要做出权衡和牺牲。
如果产品本身不涉及到非常需要保密的信息(例如工具类产品,娱乐类产品),密码设置可以放宽,不必要非常严格的位数、符号、大小写组合的规定,甚至不提供密码登录;
至于对用户隐私十分重要的产品(金融类、理财类等),使用强硬的方式保证安全登录就显得很重要;至于中间地带的产品,目前大部分还是使用具有一定格式规定的的密码,降低被破解的可能性。
下面用两种指纹登录的方式来举例说明:
1. 京东指纹填入密码
- 在初次登录时询问是否开通指纹输入密码;
- 记住上一次登录的手机号,在再次登录时自动填入手机号,并询问“是否使用xxxxxx手机号对应的密码”;
- 点击确认后,使用指纹,自动填入密码(类似开启锁屏);
- 若选择不使用指纹填入密码,还可以用开启锁屏的密码代替指纹输入(类似开启锁屏);
这是种用户体验优先的做法,“打开手机和打开APP方式的统一”的方式,恰到好处地带给用户帮助,甚至有那么点“万物互通一个身份走天下”的未来感~~
2. 招商银行强制指纹登录
- 为了保证安全,每次打开全部不保留登录状态;
- 然而首页基本上全是敏感功能,点啥都要登录,出现指纹识别登录;
- 识别指纹登录;
- 若选择了取消指纹识别,还会再一次提示指纹登录;
这个流程其实挺讨厌的,操作步骤十分复杂。然而作为资产类的产品,如此用心地保护用户安全,甚至给人一种使起来越复杂用户越宽心的受虐感。
上述两个例子可以看做“体验”和“安全”的两个极端,自家产品要做到什么程度靠实际状况权衡。
五、第三方登录后要不要绑定手机
第三方登录之后,还要绑定手机号,这种行为从用户的角度出发是十分不友好的:“我明明选择第三方登录就是为了简便快捷,你居然还要我再绑定手机号?是在逗我吗。”
但产品其实并不是做错了流程,绑定手机号是基于以下几点顾虑:
- 政策原因,必须获得用户真实身份信息;
- 如果没有用户手机号,之后的运营活动,与用户的联络反馈都比较难进行;
- 如果没有手机号作为账号的绑定联结,多次第三方登录会产生多个账号,出现一人多号的状况,后续运营上和功能上带来一系列麻烦。
所以,如果自家产品真的很看重上面这些点,考虑加入用户手机号的绑定,可以尝试优化:
- 在第三方登录后,出现绑定手机号的界面,但是可以选择性跳过,以后再找机会引导。
- 通过运营,后期引导用户绑定,比如绑定后得到什么实惠啊,运营一个活动必须先绑定账号啊之类的。
- 像京东这种“你不绑定手机号就别想使用产品,我就是厉害。你现在不想用总会有一天来用~”的大厂自信……也就没啥话说了,直接在第三方登录页之后强制绑定手机号就OK。
六、一页只做一件事
登录注册过程的表单其实并不多,就两三步,为什么还非要分页进行?原因可以分为业务和体验两类。
1. 业务原因
- 有的产品先输入手机号,判断这个手机号是否已经注册过,如果注册过就进入输入验证码登录页面;如果未注册过就进入设置密码注册页面。手机号的第一步作为分叉口,因此自己必须独占一页;
- 分步的流程可以提升转化率,这是经过实验验证的,相信科学就是了~
2. 体验原因
- 如果一页中有很多个输入框,用户每次进行下一项的输入就要伸手点击,键盘又在页面下方,上上下下的增加了流程上的复杂。分步输入可以在进入该页时就自动获取焦点弹出键盘,减少点击次数;
- 有些产品注册时需要提供的信息很多(例如keep在注册后跟着一大串体质测试),此时可以将必要的信息(手机号验证码,可能还有性别之类的)和非必要的信息(爱好、标签、个人描述之类的)分开页面,让用户自选填写。
分步式流程的可以分为“拆分输入框”和“分类大量信息”两种(名字自己取的),在下面分别举例说明需要注意的tips。
第一个例子是鲨鱼记账,是比较典型的“ 拆分输入框 ”的类型。
另一个是keep,因为在注册以后要填写大量的冷启动信息,因此使用了“ 分类大量信息 ”的类型。
七、登录/注册过程中有哪些错误和异常处理?
东西比较零碎,直接总结成表格展示。
有关错误提示本身,也有很多需要注意的点:
- 提示的形式采用toast,并且能自动消失。因为用户的失败只是暂时的,产品需要做的是在不打扰用户任务进行的前提下,提示用户异常情况,所以如果是弹框的话就太生硬了。(相对应的,如果是任务完成/成功提示,可以采用弹框,甚至是一整个页面来展示)
- 提示语要温和、容易理解、简短,不要采用生硬的词汇和专业词汇。
- 提示语不能只告诉用户“错了”,还要告知“错在哪里”,以及“该怎么办”。
其实文章内容写的都比较概括,很多板块单独拿出来就能写一篇文章了~后续会找机会写更加深度的分析的,给自己加个油。
笔者目前还处于自主学习阶段,文章中一些观点若有差错,感谢各位前辈多多指点。
本文由 @雏 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自 Unsplash,基于 CC0 协议。
作者暂无likerid, 赞赏暂由本网站代持,当作者有likerid后会全部转账给作者(我们会尽力而为)。Tips: Until now, everytime you want to store your article, we will help you store it in Filecoin network. In the future, you can store it in Filecoin network using your own filecoin.
Support author:
Author's Filecoin address:
Or you can use Likecoin to support author: