【转载】体验设计师如何优化注册与登录

作者:Polygon_Vision 
链接:http://www.jianshu.com/p/7912058e9f47

登录和注册过程往往是产品和用户的 first sight,因此登录注册入口是给用户留下好的第一印象的关键。遵循「所有的设计都应有据可循」的原则,下面通过对登录与注册几个关键问题的探讨,来思考登录与注册界面的设计逻辑。

1.注册页面的需求是什么?

2.默认注册还是登录?

3.邮箱注册一定要验证通过么?

4.关于手机登录与第三方账号登录

5.iOS 11 带来的新登录方式

6.为什么需要注册?

1.注册页面的需求是什么?

登录页面比较好理解,我们重点来看注册页面,以 Spotify 为例,以下是一个非常典型的传统注册页面。

Spotify 网页注册

由此试图分析,在注册场景下,用户和产品两个维度上的需求如下。

用户需求:

1)进入应用;

2)获得应用完整功能(评论、点赞、收藏等)。

产品需求:

1)获取、验证用户的账号与密码信息;

2)获取用户个人信息、联系方式;

3)告知用户协议;

4)订阅邮件。

首先总体上我们可以发现,用户与产品在注册场景下存在需求冲突。用户对于注册界面的需求非常简单明确,就是为了快速进入应用或者获取完整功能。不会有用户想要主动阅读成百上千字的用户协议,也不太愿意主动提供个人信息或是订阅邮件。因此,产品角度的第 (2)(3)(4)需求在注册场景中,都是对用户体验的破坏。所以,尽量避免产品需求对用户体验的破环,更多地给予用户情感安慰,这是设计注册界面的大原则。

2. 默认注册还是登录?

豆瓣默认是登录,Airbnb 默认是注册,而锤子的系列软件将注册与登录按纽都并列在下面,不做默认。

豆瓣、Airbnb、锤子便签登录页


考虑到目前 App 普遍采取的「长久性登录」策略,默认为「注册」也不失为一个具有概率意义的选择。毕竟大家都通常只会在换机、重置系统、登录失效、主动退出这些低频时刻来登录。但其实这个问题,没有通行的做法,更没有绝对意义上的好坏。每个产品根据各自定位和情况的不同,会有不同的侧重点。比如说,约 8 亿用户量的国民级社交应用 QQ,绝大多数场景下都已经没有了「注册账号」这一需求,默认为「登录」操作,同时将「注册」入口极大弱化是比较合适的。而定位于垂直领域的社交应用脉脉,目前拥有约3000 万用户量,目标用户群体中仍然有非常大的潜在用户量增长空间。因此,第一次进入脉脉,在并列给出注册和登录入口的同时,默认引导用户进行「注册」操作。

QQ、脉脉登录页


想到这一步,笔者突然想到,如果是同一产品面对不同市场,注册登录会不会有针对性的侧重点呢?比如说,instagram 在海外用户基数庞大,而在大陆则较为小众,会不会出现海外区 ins 默认为登录,国区 ins 默认为注册呢?笔者特意找到身处海外验证,遗憾的是,两者除了语言的变化之外,并没有其他不同。

instagram 中区版 VS 海外版


其实,默认注册还是登录并不重要,无论做何种默认都无法完全避免用户的误操作,即在登录界面填写注册信息,或者反之。那么怎么避免这种情况呢?

在错误的页面填写大量信息,给用户带来强烈的挫败感


首先,不要急于让用户填写登录/注册表单,可以先让用户确认选择。

不要急于让用户填写表单,可先让用户确认选择


其次,可以在文字和样式上对二者进行比较显著的区分。文字方面,英文语境下,Sign up 与 Sign in 容易产生混淆。比较好的解决方案是用 Sign up / Log in,或者 Register / Sign in 等方案。

英文语境下,在用词与形式上进行区分


用词混淆的情况,中文语境下情况会好一些,「登录」与「注册」天然具有区分度,但是仍然可以在文字样式上设定足够的差异,给以足够的提示,引导用户进行正确操作。

钉钉(老版本)、星巴克登录注册界面


此外,可以输入信息后及时反馈,避免全部表单填写完毕再给出反馈。(没找到比较合适的案例,自己动手做了一个...)

其实不管怎么避免,用户依然有将登录与注册弄混淆的可能。关键在于,在用户在错误的界面花费了时间与精力填写信息之后,如何降低用户的纠错成本,也就是说:如何解决「登录」与「注册」两种界面切换时,发生的数据丢失。相比较在注册页面粗暴地告诉用户「这个手机号已注册」,更好的解决方案可以是「询问用户是否需要登录,并在登录界面自动转填已填写的信息」,确保用户即使犯错了,也可以辅助其跳往正确的目标,这能大大减轻用户的犯错成本,也可以给人一种产品很「聪明」的印象。

在知乎的注册界面填写已注册的账号后,会引导使用该账户登录

或者,不给用户犯错的机会,弱化「登录」和「注册」,只给出一个「登录身份」的输入框,附带一个「下一步」的按纽。后台验证用户输入的「登录身份」,来判定是登录还是注册。

印象笔记在输入电子邮箱后,自动判定下一步是注册还是登录

3. 邮箱注册一定要验证通过么?

从用户体验的角度而言,产品应在用户注册后自动登录。而不是通过验证后,再次由用户登录。因此,可以将验证放置在注册完成之后的某个时刻,利用虚拟奖励、功能限制、安全恐吓等方式激发用户去完成验证。

长久以来,为了避免用户注册时输入了错误密码,要求用户输入两次密码也是一种惯例。然而事实上,「注册时输入错误密码」与「忘记密码」并没有本质上的区别,「输入错误密码」并非十分严重的错误。此外,用户容易输错密码的原因是密码通常隐藏显示,而加入「显示密码」选项,也能从根本上更好地防止输入错误。

网页端常常使用「输入两次登录身份」的方法,来避免登录信息的输入错误,但是面对移动设备的输入压力,确认两次「登录身份」的做法并不友善。但是,如果不及时确认登录身份正确的话,在「注册后立即自动登录」的大前提下,「输入错误登录身份」会带来不可逆的后果。一旦在注册时填写错误登录身份,在账户验证期限内无法验证账户,轻则需要重新注册,重则丢失在验证期内产生的所有用户数据。

进一步思考,抛开问题看本质,验证的本质是确认「登录身份」是正确的,可联络的。从这个角度看,验证账户更像是一种事后的纠错机制,而并不能避免用户犯错。那么,怎么降低用户犯错的可能性呢?

可能的解决方案有:

1)增加注册确认界面,降低确认成本。放大「登录身份」信息,让用户无法忽视,并只需点击即可确认。

2)账户未验证时,允许用户修改一次登录身份,并要求输入两次登录信息,在前端验证一致性。

4. 关于手机登录与第三方注册

手机 + 验证码登录与第三方登录是目前 App 最为流行的做法,免去了注册过程,改变了账户密码的登录方式。WhatsApp 是最早将手机号码和账户绑定在一起的 App 之一。通过手机号码一键注册/登录是 WhatsApp 获得巨大成功的关键。其创始人 Jan Koum 曾经说到: 「有过传统通讯 app 的痛苦体验,再看看如此简洁的界面,你就明白我们的初衷了。只需要短信就能解决的事,我们有什么理由不做呢?」

UC 头条、Tinder 登录页面


此外,对于产品而言,通过第三方登录,产品还可以获取用户的个人信息,甚至是好友关系。

Facebook 登录应用权限


5. iOS 11 带来的新登录方式

iOS 11 为 iCloud 钥匙串进行升级,在原本 Safari 保存和自动填写密码的基础上,也为 App 提供此项功能。在需要帐号密码的页面输入时,系统键盘会显示 🔑 符号,通过 Touch ID 验证后会自动填入,同时该功能还支持匹配提醒,优先为你显示和该应用有关的密码信息,非常方便。如果你完全生活在苹果的生态中,那么你可以使用这一功能来替代 1Password 和 LastPass。

iCloud 钥匙串登录


1Password 等密码工具在 iOS 11 也有了更大的可能性,现在可以直接在注册登录表单中调用了。

使用 1Password 等密码工具登录


6. 为什么需要注册?

跳出「如何设计」的思维框架来进一步思考「为什么设计」,不难发现,其实从用户的角度而言,注册登录更像是「为了正常使用产品,而不得不做的一个步骤」。尤其在接触一款新产品时,注册流程都会在一定程度上打击用户的积极性。那么问题来了,是否所有产品都需要注册,才能使用或是正常使用呢?

1)登录才能使用的产品,需要采用「立即注册」的方式,最典型的例如社交应用

2)不需要登录也能开始使用的产品(如浏览内容),可采用「稍后注册」的方式

微博类产品不用登录也能使用                                           

首先是内容为主的产品:比如微博,知乎,站酷等,无需注册登录便可以浏览,但是回复、收藏、发帖这类操作必须注册或者登录账号;再其次是有同步和备份需求、有用户数据沉淀的工具类产品,比如记事、记账、todo、日历等等。

不过,其实利用苹果的 iCloud Drive 同步功能,大多数工具类应用也可以避免注册登录操作。当然前提是完全生活在苹果的生态中。

工具类 App 可使用 iCloud 进行数据同步

3)无需注册就能正常使用的产品,尽量不要要求用户注册。

比如大部分纯粹的工具类应用,比如时钟、计算器等。以及部分没有同步或备份需求的工具类应用,比如说便签、私密相册等。即使是便签与私密相册这类有特殊用户数据沉淀,也可采用密码(数字密码/手势密码)或是指纹识别的方式来保证数据的安全性,避免注册程序破坏用户体验。

采用密码、指纹识别而不是注册账户的方式来保证数据的安全                                           

此外,有时候限制注册、提高注册难度这类看似对用户不友好的方式,在特殊的情况下也是一种很好的策略。比如早期的知乎、Dribbble 的发帖权限采用的邀请制、还有 B 站的 up 主考试,虎扑的答题考试,这类 UGC 内容较为丰富的产品,通过提高创作权限的门槛,能有效地保证核心用户和内容的质量。同时,用户由此产生的「付出感」,也有利于其对产品及其使用权利的珍惜,进而触发「特权」的感受。

设置考试提高发布内容门槛                                           

以上是针对注册与登录界面的几个关键问题展开的引申探讨。其实笔者写到一半时,发现注册登录的水特别深,除上述内容之外,还有非常多的场景与细节值得挖掘与思考。不过设计就是如此,很多看起来似乎非常基本的内容,但是背后需要大量的思考和打磨,绝非一句「好看」就算完成。设计的复杂性,也让我始终保持着一颗敬畏之心。说得不好,希望大家多多批评指正,感谢各位。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容