聊一聊不同应用场景下的验证码

最近在做关于验证码的项目的时候,从交互的角度梳理了产品各个平台验证码的应用场景。在一个产品中,会有多个设计师分工协作,不同的设计师做设计迭代。由于验证码在整体设计中太容易被忽略,它在每个场景的显示逻辑可能不尽相同。下面,我们就来聊一聊不同应用场景下的验证码。


最近在做关于验证码的项目的时候,从交互的角度梳理了产品各个平台验证码的应用场景。在一个产品中,会有多个设计师分工协作,不同的设计师做设计迭代。由于验证码在整体设计中太容易被忽略,它在每个场景的显示逻辑可能不尽相同。下面,我们就来聊一聊不同应用场景下的验证码。

聊一聊不同应用场景下的验证码

说到验证码,我们一定会想到12306!12306是验证码网红届的鼻祖扛把子,可以说12306让验证码成为全民娱乐(tu cao)的一种方式。

既然大家觉得验证码是种糟糕的用户体验,为什么我们在设计过程中还是不能缺少它的存在呢?

聊一聊不同应用场景下的验证码

聊一聊不同应用场景下的验证码

(戏谈验证码)

简而言之,验证码的存在是为了验证注册的用户是计算机还是人,许多网络恶意攻击都是恶意的机器程序所导致,验证码能够有效的防止恶意破解密码、刷票、论坛灌水,防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

验证码通过人可以识别而机器无法识别这样的逻辑来设计,无论它以什么形式出现,设置验证码机制都是个必要的门槛。下面总结一下验证码在产品中出现的场景和交互流程。

1、注册

我们通常见到验证码是在注册登录场景,注册时出现在注册流程里。

过去,大多数的网站注册页面往往选择一页填写完所有信息,在主流程中不需要绑定手机号,一键即可提交注册。这种注册方式在老式的论坛很常见。

聊一聊不同应用场景下的验证码

(某游戏开发者论坛注册页)

当绑定手机号在注册流程里时,下面一定会跟随短信验证环节。这个时候图形验证码和短信验证同时存在的设计就有几种情况了。

首先可以确定的是图形验证和短信验证之间有逻辑相关性,他们之间的相关性一般体现在如下三种设计中:

(1)同页面显示

图形验证码放置在手机验证码之前,通过图形验证码后才可触发手机验证码的获取。

聊一聊不同应用场景下的验证码

(京东注册页)

(2)不同页面显示

这种情况发生在注册本身就是分页分步骤进行的,如下图:

聊一聊不同应用场景下的验证码

图形验证会跟在输入用户名之后,一般在第一步出现,在点击下一步后会到达短信验证界面。从用户体验上来讲,运用分步设计引导性更强,一般用在需要输入多种信息的时候,用户会有比较清晰的逻辑,并且对何时完成有一个预判。这个时候,图形验证的结果就影响了用户能否顺利进入下一步短信验证。

(3)弹窗式图形验证

这种交互逻辑是用户输入合规手机号时,点击获取短信验证码,会弹出图形验证请求,验证成功后弹窗消失,系统给用户发出验证短信。在这个逻辑里,图形验证就作为发送短信的触发条件。

聊一聊不同应用场景下的验证码

图形验证作为短信验证的触发点的设计是符合逻辑的。

在围观群众看到图形验证的时候,他们不能了解到这种验证方式与其他信息是否存在内在联系,认为图形验证对于注册过程来说是一种累赘,但是我们在图形验证之后加入短信触发的功能,它就成为一种既有实际功效而同时具有简便操作的东西了。

2、登录

图形验证码在登录时有两种出现情况:

一种是用户第一次登陆的时候就存在,作为顺利登录的必要填写内容。但是这种情况对用户体验而言不太友好,用户本身对于登录的预期并不包含输入验证码这一环节。把图形验证码加到登陆页面上,这相当于多了这样一个“门槛”,如果验证码很难识别,用户会趁早的抛弃你的应用,寻求更好体验的平台。

另一种情况是目前大部分产品采用的设计,在用户输入用户名或登录密码错误超过设定次数时,图形验证码出现。这种设计的内在逻辑是用户输入错误多次,我们会判断是否是机器人在测试数字密码,这时候我们就用图形验证来挡掉机器的攻击。

聊一聊不同应用场景下的验证码

(登录)

3、重置密码

用户在登录页面时会有“忘记密码”的入口,在重设密码流程里也需要输入验证码。

首先重置流程里要求输入已注册用户邮箱或手机号并验证图片验证码,之后在进入找回流程。这里图形验证码可视作后续步骤的触发,二者存在顺序关联性。

聊一聊不同应用场景下的验证码

(重置密码)

4、结论

梳理图形验证码的交互场景,是为了在设计时能做出充分考虑,而不是随意放置。

设计不统一最大的问题是不符合用户心理预期。图形验证码其实并不像绑定手机的短信验证那么具有连贯性,它可以单独存在也可以上下关联,但无论何种设计都应该一致。如果同一个页面上验证码有时出现,有时不出现,会让经常使用产品的用户没有一个统一的体验。这种小的困扰能避免还是要避免的。

聊一聊不同应用场景下的验证码

(设计不统一)

整个产品的交互应该是具有统一性的,包括页面跳转细节。除了样式选择外,验证码的显示逻辑当然也需要统一。到底和短信验证码是怎样的逻辑关系,这个逻辑需要从始至终。许多设计师容易忽略这一点,验证码出现的时机千奇百怪,这样同样会给用户造成一定困扰。

 

作者:Fino(点融黑帮),UX部门交互设计师一枚。

本文由@点融黑帮(ID:DianrongMafia)原创发布于人人都是产品经理,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23434/

(0)
CatherineCatherine
上一篇 2017-05-05 10:47
下一篇 2017-05-05 12:56

相关推荐

  • 【涨姿势】Twitter安卓端体验的全面革新

    手机设计 第一步 我开始设计App所做的第一件事情就是记录一个功能列表作为主要导航,这些功能是由客户所描述的,使用这些功能,我做出了App的基本用户使用流程。然而,在这个项目中上述行为都是不必要的,因为twitt…

    IxD案例 2015-08-27
  • 应届毕业生要从事交互设计,需要具备的3种能力

    这次的文章解决的是一个问题,主要是关于应届毕业生应该具备怎么样的能力才能从事交互设计工作。我从比较浅的入口切入,然后简单谈谈我的认识。(这篇文章会比较有趣)我努力工作,几年后要自己创业。吃得苦中苦,方为人上人。(鸡汤了一下)

    2017-05-08
  • 这个简单粗暴的设计为何是“好设计”?

    作者:UX沐沐(公众号:Liveux)   20世纪著名建筑师史密斯.德罗在总结他成功经验时说“魔鬼藏在细节中”,面对一些习以为常的设计,设计师能否洞察背后的不寻常? 今天想探讨一个我们每天都能见到数十次的“寻常”设计…

    交互专题 2017-08-07
  • 灯塔激光定位技术——多人大空间交互体验的最优选择

    ——映维网——国际影响力VR信息数据平台声明:本文系第三方稿件,非映维网官方稿件,望读者知悉。本文内容涉及任何法律问题均与映维网无关。禁止以“来源映维网(YiVian)”名义转载本文。空间定位是VR 市场中一个非常关键的技术,当今排名前列的VR硬件设备厂商(HTC/Vive和Oculus)分别采用了不同的空间定位方案Oculus 的 Constellation 系统红外摄像头定位HTC/Vive、大朋VR的 灯塔激光定位系统尽管这两种定...

    2018-01-30
  • NO.14 下一站用户体验

    今天要为大家推荐的书是杨艾祥的《下一站用户体验》,用户体验这个词大家并不陌生,但用户体验的定义以及所包含的具体内容有哪些,这个问题,可能并不是很多人都特别清楚的了解,用户体验这个被用“烂”了的词到底具备哪些威力,作为一个设计师又如何去提升产品的用户体验,在《下一站用户体验》这本书中都可以找到答案。目录(简版):一、那些让人讨厌的流氓行为1、这是个烦躁的世界2、这个世界没有新物种3、美丽的错误二、用户究竟在体验些什么1、腾讯为什么那样牛2...

    微信热点 2018-02-25
  • 交互设计师的60日计划第十八天

    今天一直在以龟速写下周要分享的用研总结。写的过程中总是想这么讲老大会不会pk我,这么讲老大会有什么想法…果然是最近看他们做晋级ppt留下阴影了么…但不论怎么说,做一下这个分享还是挺好的,不然一个星期的时间,…

    交互专题 2015-08-20
  • 用户行为预判的交互设计研究

    #交互原型##预判设计#主要有两类目的:一是在用户初次体验某种功能时引导用户,避免用户陷入困惑;二是提前判断#用户行为#,缩短行为路径。 作为“剁手党”,闲暇功夫刷淘宝已经是消磨时间的习惯行为。某天看中了一件…

    2016-11-03
  • 交互设计的五要素:用户、行为、目标、场景、媒介

    在公众号里经常收到朋友的留言,到底什么是交互设计师?交互设计师具体是干什么的?为什么很多互联网公司都没有交互设计师这个岗位?希望通过这篇文章把交互的本质说清道明。

    2017-05-14
  • 这些设计灵感,或许可以改变我们阅读新闻的方式

    在做设计之前,我们都需要很多的灵感,这就是我写这篇文章的目的。本文中我将重点介绍和评论一些新闻类APP或网站中的一些让人眼前一亮的优秀设计。有些是已经上线的,有些则只是概念设计稿。

    2017-05-14
  • 没去过赌场,别谈用户体验

    订 [图片] 阅20———— Jun. ————A大叔说的 第09篇 文章既然最终决策是“人”,就要思考人性什么是好的产品?罗辑思维演讲时提过一个观点:能占用用户时间的产品就是好产品。如果把这个概念加以延伸,应该可以这么说:消耗了用户很多时间,但用户不自知,一段时间未使用就会再次

    微信热点 2018-04-08