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

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


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

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

说到验证码,我们一定会想到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

相关推荐

  • 通过减少认知超载提升用户体验(下)

    “怎样才能改善用户体验设计?这是关于用户体验研究恒久不变的话题。今天给大家推送的是关于运用认知心理学中的相关理论来提升用户体验的研究。希望对大家有帮助。 文章过长,分成上下两篇,上篇可查阅《通过减少认知超载,提升用户体验(上)》。

    2017-05-06
  • 如何辨别一个Banner的好坏?(附案例)

    平时经常会有人问我“什么样才算是好的Banner ?”、“我这个Banner 有什么问题呢?”之类的问题,还有时候大家会分享一些作品但是我觉得并不是特别好,所以就觉得要不写一篇“如何判断一个Banner 的好坏”之类的文章吧,因为我们常说设计师要多看,但是多看的前提是要学会辨别一个东西的好坏,要多看好的而非不好的东西哈,要不然怎么提高审美提高眼界呢?

    2017-05-24
  • 快速开发移动医疗App!开源框架mHealthDroid

    快速开发移动医疗App!开源框架mHealthDroid 嘿嘿,本文偷偷转载自csdn 摘要:移动领域的发展促使了移动医疗的出现,让医疗这一大而重的传统行业逐步走向轻便。但对于移动医疗应用的开发,接触的不是很多,这边向大…

    2014-12-18
  • 设计中的 “潜在过程的外在可见后果”分析

    设计中的 “潜在过程的外在可见后果”分析 ——以第三方账号登录为例 “潜在过程的外在可见后果”,是在勒庞的《乌合之众》一书中看到的文字,这也是心理学家通常的研究切入点。外在结果作为表象,其潜在的发生过程才是更…

    2016-02-25
  • 立足用户体验 “好换灯”助力雷士赢得好口碑

    2018注定是不平凡之年。全面开展质量提升行动,推进与国际先进水平对标达标,弘扬工匠精神,来一场中国制造的品质革命。2018年,雷士照明将迎来20周年庆典。雷士照明正在以此为契机,潜心修练,以促进雷士品牌再上新台阶。2018年被雷士照明定义为“品质服务提升年”,并于近期在全国开展了“诚信3·15,惠民大行动”为主题的“好换灯”主题推广活动,帮助千家万户升级改造居家光环境,传递雷士照明“全国性升级服务”“免费服务”理念。雷士“好换灯”全国...

    2018-03-16
  • 不为动而动!动态效果在体验设计中的应用

    现在在网页和H5中使用动效已经成为一个大的趋势,随便打开一个H5都会看到一大堆跳动的元素在那里向你招手:看这里!看这里!但在这样的滚滚大潮当中我们是否应该思考一下:真的需要这么多的动效么?为什么需要?需…

    2016-07-06
  • 十种正确的可用性度量方法(上)

    现在大家在做产品、谈需求、讲体验时,都说不能拍脑门儿要用说数据说话。好,那问题来了,针对不同的问题我们要什么样子的数据来说话呢?这确实需要我们好好思考,下文将通过一些小栗子为大家做一个简单的梳理。

    2017-05-28
  • 真相:到底什么是交互设计

    数十万互联网从业者的共同关注!作者:Mr汤进,微信公共号ID:chuangshe_space作者原创并投稿早读课,转载请联系作者。一、前话5月1日在我和小伙伴们一起维护的原创微信公共号“创设空间”:chuangshe_space中向关注的…

    2017-08-02
  • 关于用户体验&交互设计的视频分享【日常思考0001】

    (。・∀・)ノ゙嗨这里是Chiki的深夜抽风小记录,做个日常思(bing)考(zheng)收集。公众号取名“Design for What"是希望以后自己做设计的时候可以多思考设计是为什么Find your passion,and let it kill you那么开始今天的开场首秀!今晚本想磕磕榛子垫垫肚子就……就开始做事来着,结果不小心打开平板……看了会视频(明明是好久……都是借口😭)不过视频不错分享给大家👇视频在这:截了有点不一样...

    2018-04-14
  • 又是高分!北京林业大学交互设计专业课143分复习方法分享

    又一个高分!北京林业大学交互设计专业课143分复习方法分享-孙跃桐我决定考研大概是在16年的9月份吧,因为决定的时间比较早,我以为我准备的时间很充足。真正开始准备是在17年我先开始报了新东方的英语政治课,想先将公共课的基础打牢,在后期复习专业课的时候会有更多的精力于是我将上半年的精力全部都用在学习公共课上面。想在9月份招生简章出来之后我就开始专心复习专业课。但是当九月份招生简章出来之后,我就开始慌了。我本身想考的就是本校之前也问过考研的...

    2018-04-22