您的位置:彩经彩票 > 新闻资讯 > 3种不友好的注册登录设计,账号体系设计

3种不友好的注册登录设计,账号体系设计

发布时间:2019-09-24 05:50编辑:新闻资讯浏览(138)

    一、架构设计和流程设计

    几乎每个产品都有注册登录的模块,然而即使是这么普遍的一个设计模块,也是需要精雕细琢的,设计师需要根据不同的产品情境来设计不同的流程。比如有些产品不想投入过多的资源来维护账号,因此着重强调第三方登录甚至只提供第三方登录,比如medium早期只允许通过twitter登录,国外几乎人人都有twitter账号,因此这样不用自己维护账号系统,用户也可以很方便的使用产品。国内有很多的产品特别是创业公司的产品注册登录流程体验非常不好,这样无疑会影响产品的注册率。这篇文章我想讨论一下国内的应用关于登录注册3种不友好的设计方式,在创业期的公司产品中非常普遍:

    目录

    导语

    一、自建账号体系

    1.1 注册和登录统一

    1.2 注册和登录分开

    1.3 注册和登录结合

    二、第三方账号

    2.1 QQ登录

    2.2 新浪微博登录

    小结

    我一直追求简单而高效的设计,尤其欣赏臭鱼这一篇文章《为产品结构的设计,为用户任务的设计》。他用图1很好的诠释了这个观点:首先要保证产品逻辑结果清晰、准确,其次要为用户任务架起一些快捷操作的桥梁。

    1,权重相同的俩个注册登录按钮放到一起

    图片 1

    试想一下这样的场景:用户从上一个界面点击登录到达这个界面,如果用户第一次使用这个产品,他就知道自己需要先注册,于是他先在第一个文本输入框填了用户名,接着在下一个密码框填了密码,于是点击注册按钮期待注册成功,可是令用户没有想到的是,点击注册会将他带到下一个注册页面,他所填的信息全部丢失。因为事实上在这个页面只能登录,而注册按钮与上面的俩个文本框没有任何关系

    问题是用户怎么知道这个界面只能登录呢?注册与登录俩个按钮一样大都并排放在俩个文本框的下面为什么只有登录按钮才响应用户输入的数据呢?用户认为输入完用户名和密码点击注册就能注册难道有错吗?也许有的设计师会说标题栏不是写的很清楚这个界面是登录界面吗,可是既然是登录界面为什么把注册的按钮做成那么大和登录放在一起,更何况用户从来不看标题栏。

    类似的设计样式在初创产品中经常遇到,我想这个一定会极大的影响产品的注册率吧。

    导语

    根据目前的「注册/登录」方式,可以将账号体系分为两类:自建账号体系、第三方账号。

    自建账号体系,是公司自己控制和维护用户的相关信息,对找回密码或发送消息都有一定的方便性、对账号和相关数据的控制更具主动性。支付理财类应用比较偏向自建用户账号体系,因为对于此类应用,用户账户数据是至关重要的信息。

    第三方账号,一般会通过微信、微博、QQ等第三方常用社交账号登录,能够快捷方便的登录体验产品,也方便后续通过社交账号对APP进行分享宣传推广。照片资讯类应用比较偏向第三方账号,甚至有些应用直接不提供自建账号功能。

    图片 2

    账号体系类型


    =====

    图片 3

    2,保存用户在输入框的输入数据

    a)不知道大家在注册国内的一些论坛时有没有想要砸电脑的冲动,好不容易填完了长长的表单结果某个输入框不合规范需要重填,于是所有的表单数据都变为空,再重新来过。如此重复数十次想死的心都有了。因此当用户把注册表单的某个输入框填错时不要把所有的数据都置为空。

    b)现在网站太多了,app太多了,用户的账号太多了,密码太多了,用户到达一个网站可能会想自己之前好像注册过这个网站,于是在登录界面输入用户名和密码点击登录但提示没有此账号,用户便可能会点击注册准备去注册,此时如果在注册表单自动填好用户刚刚输入的用户名(和密码)用户一定会感激你的。(登录可能会通过邮箱,手机号,第三方登录,手机号也可能有多个手机号,邮箱也会有多个邮箱,这种用户确实注册过但忘记了具体哪个账号注册的情况经常存在)

    c)记住用户是一种特别懒惰的生物,大段的小段的文字都不会看,标题栏不会看,甚至按钮上的文字都不会认真看,用户经常把注册界面当成登录于是输入完账户名和密码准备登录才发现自己填的是注册表单。此时用户会再去登录表单,这时系统就应该把用户刚刚在注册表单填写的用户名和密码自动在登录界面填写好。

    图片 4

    在电脑上安装好大象笔记第一次打开的是这个界面,于是会有部分已注册的用户见到俩个输入框就填写用户名和密码准备登录,会认为这就是登录界面(这个在心理学上可以这样解释:我们想要什么,大脑就尽力把我们实际看到的解释成我们想要的不惜欺骗,当然你可以用理智压倒大脑),注意此时“注册”也是灰色的看不清楚,等填写完才发现这是注册界面。于是又得切换到登录界面登录,好在毕竟是曾经的独角兽企业,当你切换到登录界面时默认已经填好了你刚刚输入的用户名和密码。

    一、自建账号体系

    自建账号体系,注册登录的三种常见方式:注册和登录统一、注册和登录分开、注册和登录结合。

    图1 产品结构设计和为用户任务设计的关系

    3,关于第三方登录

    第三方登录诞生之初我想是为了方便用户登录的,可是毕竟中国什么都有特色,有不少应用采用下面的流程(流程从左到右一一进行):

    图片 5

    想在该网站进行一个操作让我登录,看到下面有第三方登录甚喜,于是点击扣扣登录到达第二个界面,我想此时点击绿色的登录按钮就应该登录成功了,谁知又到达第三个界面问我关联新账号还是已有账号,用第三方登录当然没有已有账号啊,于是点击了关联新账号,看到接下来的第四个界面让我差点用锤子把我的锤子手机给砸了……

    既然自始至终都要用户的手机号注册为什么还提供第三方登录啊!产品经理为了自己的小心思置用户的智商于不顾这样真的好吗?要是让用户提供一些第三方账号给不了的数据还可以理解,但是这样还真不能理解。

    其实采用这种手段的产品真的挺多的,不知道他们是觉得自己聪明还是觉得用户真的傻瓜!

    1.1 注册和登录统一

    1、要素:手机号、验证码

    2、流程: 通过手机号验证码快速注册或登录。

    3、优点:

    ① 流程简单,能快速进入应用。

    ② 登录时无须记住密码,通过手机号及收到的验证码即可。

    ③ 手机号保证了账号的安全性,因为是一般是本机登录、本机收到验证码。

    ④ 一般每个用户拥有1-2个手机号,使得恶意注册的几率大大降低,提高了用户的质量。

    4、缺点:

    ① 每次都需要通过短信验证码登录,无形中给登录操作带来一定门槛。

    ② 多平台登录会收到多条短信验证码,相对比较麻烦。

    5、举例:典典养车APP

    ① 我的:提示未登录并引导登录。

    ② 注册登录页:是弹窗的形式,点击右上角关闭按钮即可关闭。通过手机号、验证码直接注册或登录。

    - 当没有输入手机号、验证码其中之一时,登录按钮都为不可点击状态。

    - 当输入非11位的手机号或手机号不正确时,登录按钮为不可点击状态。

    - 当输入错误的验证码时,登录按钮点击无响应。

    - 当获取验证码倒计时30秒,当倒计时到第15秒时,出现“没有收到验证码?”的提示入口。此时,可以转为语音提示获取验证码。

    - 验证码在1分钟后未输入即失效;新获取的验证码会覆盖旧的验证码,即最新获取的验证码才有效。

    - 收到的验证码没有自动显示在输入框中,需要手动输入。

    - 当手机号、验证码都正确,但是未勾选“服务条款”时,登录按钮都为不可点击状态 。

    - 只有在手机号、验证码都正确,且勾选“服务条款”时,才能成功登录。

    ③ 注册/登录成功后,对新用户,立马送上新手礼包。

    ④ 个人信息,包括默认头像(可修改)、默认昵称(可修改)、用户名(手机号,不可修改)、用户等级。其中,默认头像图为男性,可能与产品的用户群体多数为男性有关。

    ⑤ 可以选择退出登录,用其他手机号登录。

    ⑥ 下次登录时,输入框已记住了上一次登录时的手机号。

    图片 6

    典典养车APP(4.0.0)

    好的流程设计能使产品具有更清晰的架构,更良好的体验。我的老大曾经举过一个串珠子的例子,说PM给我们的功能列表都像是一堆零零散散的珠子,而我们要做的,就是把这些珠子串起来,把功能串起来,最后呈现给用户的才是一个完整的东西,有着清晰的架构和流程。

    总结:

    上面是自己在使用产品中觉得注册登录模块一些不友好的设计模式,并且在国内应用大肆流传,希望负责产品的产品经理和设计师们在设计时能注意到那些问题。推荐阅读:《6个输入框,47个设计点》,讲的是作者对一个注册流程的思考:

    http://www.woshipm.com/pmd/182496.html?nocache=1

    图片 7

    1.2 注册和登录分开

    1、要素:手机号/邮箱、密码

    2、流程:通过手机号/邮箱和密码注册;通过账号名(手机号/邮箱/用户名/ID)和密码登录。

    3、优点:

    ① 拥有账号密码体系,多平台登录体验更好

    ② 无须短信验证码,登录门槛相对较低

    4、缺点:

    ① 注册流程的繁琐容易受到用户的厌烦,增大了流失率

    ② 需记住密码,忘记时再走流程找回或重设

    5、举例:简书APP

    ①未登录情况下,只能看到“发现”tab下的内容。

    - 在“发现”tab下的导航,只有“登录”或“注册”入口。

    - 在“发现”tab下,用户可以用到的功能只有“搜索”,其他都是官方推荐的内容而非个性化推送内容。

    - 官方推送内容有:运营专题(轮播图)、热门专题、热门文章、签约作者、招聘、出版、新上榜等内容。

    ②登录时,通过手机号/邮箱、密码登录,或通过社交账号直接登录。

    - 忘记密码时,可通过注册时的邮箱/手机号,获取验证码以重置密码;或直接通过手机验证码登录。

    - 登录页无页头,直接可关闭,同时底下设有注册、随便看看、登录遇到问题的不同需求的入口。

    ③注册时,通过手机号、密码注册,同时为自己设置一个个性化昵称。

    - 在昵称、手机号的输入框中,有一个直接清除框中内容的功能;在密码输入框中有显示/隐藏功能。

    - 注册页也无页头,直接可关闭,同时底下设有登录、随便看看的入口。

    ④注册与登录在设计上明显区分开。

    - 该APP把登录、注册功能直接放置在首屏底部,并只提供了部分热门内容,这使得深度用户不等不登录/注册。

    - 注册和登录功能在设计上是分开的,让已有账号的用户与新用户可以清晰的按需选择。

    图片 8

    简书APP(2.4.3)

    这话说起来还是有一些抽象,我想尝试着通过手机产品登录界面的设计,来跟大家分享我对架构设计和流程设计的思考过程。

    1.3  注册和登录结合

    1、要素:手机号/邮箱、密码

    2、流程:将前两种方式结合起来,用户可以自主选择登录方式。

    3、优点:集成了前两种方式的优点

    4、缺点:提供方式比较多,用户选择成本的提高

    5、举例:美团外卖APP

    ①未登录情况下,可以看到所有功能入口

    ②登录时,有“账号密码登录”、“手机号快捷登录”,以及下方的“第三方账号登录”三种选择。

    - 账号密码登录,即通过“手机/邮箱/用户名”和密码进行登录,需记住密码或者“忘记密码”找回处理。

    - 手机号快捷登录,即通过“手机”和短信动态密码登录,新手机号在登录时将自动创建新美团账号。

    - 第三方账号登录,即通过QQ或微信号直接登录。

    ③注册时,通过手机号、验证码注册,且同时设置密码。

    - 已注册过的手机号,之后可以通过“手机号+密码”或“手机号+短信动态密码”登录。

    - 未注册过的手机号,在登录时需输入验证码验证后才可登录。

    - 短信验证码发送过于频繁,需要等待1分钟以防刷账号。

    图片 9

    美团外卖APP(5.7.5)

    二、一个例子

    二、第三方账号

    “第三方”,是建立在第一方和第二方的基础上的另一方。所谓第三方账号,就是由一些具备一定实力和信誉保障的第三方独立机构提供的面向商家和用户实现账号登录的支持体系。

    一般会通过微信、微博、QQ等第三方常用社交账号登录。借助社会化媒体的影响力提高用户粘度,增加网站流量,提升转换率。

    国外的社交登录如JanRain、Gigya第三方社会化登录服务商已2013年已经上线。国内社交登录概念首先由灯鹭引进国内互联网。灯鹭通过对腾讯QQ、人人网、开心网、新浪微博、搜狐微博、腾讯微博、网易微博、淘宝、支付宝、豆瓣、天涯、MSN、Google、百度、Yahoo15家社会化开放平台的API进行重新抽象和封装,为网站站长和开发者们提供全方面的产品设计、解决方案与技术支持,使更多网站站长、开发者们可以快捷地为其站点或应用有机添加丰富的社会化和互动属性。

    社交账号登录,对网站而言,可将自身的产品和服务与广大社交网络完好对接,接入社交网络将给其带来流量、用户资源,并让自身站点得到更有效的推广;对用户而言,省去了注册账号的操作成本,以及后续记忆各网站账号、密码的成本;对开放平台而言,通过的中小网站汲取了丰富的优质内容。

    要说一下的是:只要是通过第三方账号登录,就代表用户拿着别人给的钥匙进了自己家门,一旦这钥匙被拿走了,用户也就没了。

    图片 10

    第三方账号登录

    简单的介绍下QQ、新浪微博的第三方账号登录流程:

    (注:本段节选自

    首先我们来看一个例子,见图2:

    2.1 QQ登录

    1、在页面部署qc_loader.js

    图片 11

    2、调用JSSDK访问api接口

    图片 12

    3、放置qq按钮

    图片 13

    4、调用QCapi,获取数据

    图片 14

    5、退出登录

    图片 15

    图片 16

    2.2 新浪微博登录

    1、在页面的HTML标签中增加XML命名空间

    图片 17

    2、在页面部署wb.js

    图片 18

    3、调用JSSDK访问api接口

    图片 19

    4、放置新浪微博登录按钮

    图片 20

    5、部署微博组件

    图片 21

    6、退出登录

    图片 22


    =====

    图2 一个小朋友做的登录界面

    小结

    站在公司的角度,如果是比较轻量级的、重娱乐、重社交,并不定位于做企业的标杆,那就可以选择放弃自建账号体系。但如果是重内容、重资源,拥有较强独立性,那还是应该拥有属于自己的用户群。

    站在用户的角度:希望简单的登录,但是第三方暴漏了过多的隐私;渴望安全的应用,但又被获取了太多的信息。

    所以是否选择第三方账号登录,要结合自身产品的定位,但无论何种选择,希望永远都可以做到尊重用户。

    上一篇:账号体系设计(1):意义、要素与分类

    这个页面非常有代表性,它很像PM提出的需求列表,杂乱的堆在了界面上。先来挑挑问题所在:

    文案不太准确,帐号密码的文案用密码就行了,登录账号按钮的文案用登录就可以了,离线使用按钮,他想表达的是匿名登录(不需要账号、密码)。

    界面上元素太多,需要分辨哪些是自己需要的

    层级关系不明,没有一条清晰的任务主线

    没有考虑到虚拟键盘遮挡的问题

    相关操作可以离得再近一些,比如忘记密码跟登录按钮

    三、研究一下架构

    那么我们架构上进行分析,架构上来讲,这个界面,主要有三个模块:登录、匿名和注册,其中匿名可能有两种情况,这里表现的是不需要用户名和密码的情况,如图3.

    图片 23

    图3 登录页面架构图

    我们先来分析一下登录和注册这两个功能模块。如果用户要登录,那么需要输入用户名和密码,如果用户希望以后不用再输入密码了,可以选择记住密码,如果用户忘记了密码,那么可以给一个入口让他去执行找回密码操作。当然,这些如果都是建立在用户要执行登录操作之后。所以可以把这些元素藏起来。所以,既然登录和注册是平级的,那么我们可不可以把这个页面设计成图4这样子呢?

    图片 24

    图4 登录页面采用2个入口的形式,可以选择登录或注册

    参考案例是Foursquare和16Fun,见图5。

    图片 25

    图5 Foursquare的登录页面,只有两个选项,登录或者注册

    这个方案的优点非常明显,就是架构清晰,不会有太多的干扰因素,但是缺点也是有的,登录和注册两个按钮还是需要区分一下的,而且这两个功能过于平级,在不同的产品阶段应该有侧重才对,比如新产品上线,要更合理的引导注册,成熟产品,要突出登录。

    再来看看匿名这个功能,前文提到,匿名有两种情况:

    1、不需要用户名和密码,就可以登录

    2、需要提交用户名和密码,但是匿名登录,不让别人看到

    情况1,既然不需要用户名和密码就可以登录,那为什么还要先进入登录页面而不是内容页面呢?如果你的产品是侧重于社区类的,需要用户登录的,那么还是要引导用户登录,如果你的产品是工具类的、内容类的,希望用户能看到内容,那么可以让用户直接进入到软件里,先看到内容,等需要执行一些登录之后才能进行的操作时,才提示用户登录。

    情况2,往往是用在论坛、贴吧等需要匿名发表帖子的情况下,那么我们只需要在发帖页面给出匿名发贴的复选框就行了,不需要让用户在登录界面就直接选择了。如果是想登录某些论坛,却又不想暴露在线状态,则可以在登录按钮按钮上面增加一个状态选择,如图6,QQ客户端。

    图片 26

    图6 iPhone版QQ客户端,登录按钮上方可以选择状态

    因为我们这个登录页面属于情况1,所以就把匿名登录功能从登录页面拿掉了。

    四、研究一下流程

    那么这个时候,我们要对产品的流程来进行一次深入的思考了,我们的产品,是希望用户从哪里来?到哪里去呢?希望用户在我们的产品里完成怎样一个任务流呢?我简单分析了一下,如果是以引导登录为目的的流程,用户必须有账号,只能登录访问产品,那么流程大概如图7这般。

    图片 27

    图7 手机产品登录流程

    那么我们知道了,我们是希望用户刚进入软件就遇到这个界面,完成登录之后,到达内容的。如果是这样,我们是否应该让用户可以更快速的执行登录过程,也就是说,把账号和密码提到一级,方便用户快捷的操作。于是我把设计改成了图8的样子:

    图片 28

    图8 暴露出账号、密码输入框的登录页面

    参考案例是街旁网的登录页面,见图9。

    图片 29

    图9 街旁网的登录页面,突出登录功能

    跟密码相关的选项,比如记住密码,忘记密码,需要放在哪里合适呢?一般情况下,相关性较大的最好要离得 较近。于是我把记住密码和忘记密码都放在密码输入框底下,但是这时候,又会显得信息较乱,解决的办法是什么呢?就是给信息分组,如图10。

    图片 30

    图10 把信息区隔成登录和注册两个模块,强化登录

    而如果是以内容为主的,登录的目的是完成某些操作,那么登录页面往往出现在导航栏上、菜单里,或者是执行某个需要登录的操作之后,以论坛回帖为例,流程如图11:

    图片 31

    图11 当执行发帖操作的时候,提示登录的流程图

    此时,明显可以分析出,流程的终结应该不是登录成功,而是执行接下来的操作。与其上来就让一个注册门槛,击垮了一部分用户的积极性,还不如,先把内容暴露出来,当你需要执行一些登录用户才能执行的操作的时候,再引导你去登录页面,就顺理成章,没有强迫登录的感觉了。这种情况下,可以采用浮层的形式,完成简单快捷的登录操作,如图12。

    图片 32

    图12 Vimeo的登录页面,采用浮层的设计方式

    当然,也可以调用统一的登录页面,即降低成本,又保持统一。

    五、需求,还是需求

    之所以碎碎念这么多,是因为,这一个看似简单的页面,包含了很多的架构、流程上的思考,包含了产品逻辑,最重要的,包含了设计师对需求的把握。

    登录页面,到底要设计成什么样子,肯定没有一个统一的标准,但是,根据你的产品需求,你可以推断出,该是怎样一个流程,该突出哪些功能,让我们来总结一下,我感悟颇深的一些点:

    告诉我为什么(为什么登录?为什么注册?)

    不要给用户太多的选择(太多的选择意味着太多的思考时间)

    让用户一条路走到底(流程要有始有终,且不能有太多分支)

    跟某个选项相关的东西要跟随这个选项(比如密码输入框和忘记密码)

    内容为主的要弱化登录(在合适的时候提示用户登录就行了)

    架构和流程是两回事(清晰的架构是基础,快捷的流程是保证)

    进入论坛讨论:

    本文由彩经彩票发布于新闻资讯,转载请注明出处:3种不友好的注册登录设计,账号体系设计

    关键词:

上一篇:没有了

下一篇:没有了