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

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


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

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

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

相关推荐

  • 破局在即,用户体验将成银行翻盘利器?

    今年,BATJ纷纷与国有四大行牵手,这种破冰式的历史性合作传递了两个信息,一是专注线上的互联网巨头们开始重视线下场景的价值,这也表明在未来的金融行业中,我们将能看到更多线上线下相结合的产品和服务场景;二是在与互联网巨头的磨合中,银行的角色即将产生质的突破,也彰显了银行在当前金融局势下的求变决心。当然,银行们寻求自我突破的决定必然不是空穴来风。众所周知,在互联网+潮流下,以线下为主的银行们失去了对部分年轻用户的影响力,而且银行基因中强大的...

    2018-03-03
  • iPhone X 交互设计官方指南

    编译|覃云北京时间 9 月 13 日凌晨,苹果发布了带刘海的 iPhone X,这个屏幕需要 iOS 开发者做新的适配,会后苹果发布了 iPhone X 的适配指南,我们将它翻译出来供大家参考。本文首发于 InfoQ 垂直号移动开发前线,ID:bornmobileiPhone XiPhone X 拥有一个宽大的、高分辨率、圆角的、扩展到边缘的屏幕,提供了以前从未有过的沉浸式、内容丰富的体验。屏幕尺寸在纵向方向上,iPhone X 显示屏...

    2018-01-31
  • 交互设计中的“无意识错误”:如何帮助用户防错?

    在提高可用性的建议中,如何优雅、清楚的告知用户哪里出错了是非常重要的。当然,如果能够一开始就避免他们犯错是最好的。在讨论用户错误时,一个重要问题是在什么情况下指出用户的错误。「用户错误」这个词似乎暗示用户做错了某些事情,但不仅如此,设计师也犯下了错误,因为他们让用户轻易的做出了错的行为。所以,解决用户错误的方法不是指责用户,让用户再认真一些,或者给他们更多的指导练习,而应该是重新设计软件,让犯错变得困难。两类用户错误在讨论如何避免犯错之...

    2018-03-02
  • 用户体验和可用性之间的联系和差异,你都知道吗?

    本文转自本文由优设网作者 :Amy Smith,版权归作者所有阅读需 5 分钟Amy Smith – 最近几年来,用户体验设计逐步成为了目前设计圈中广泛认同的重要设计环节。而“可用性”这一词也作为改善用户体验设计的重要度量而发挥着无与伦比的作用。于是乎,除了“用户体验设计师”这一职位,在欧美的产品和设计团队当中还诞生了“可用性工程师”这样的专业职位。另一方面,这些相互关联,在含义和功能上有所重叠的专业词汇,让许多设计师和相关的从业者感到...

    2018-03-03
  • 用户体验设计(UED)内功心法开山篇(附案例研究)

    何为UED?在产品定义阶段,它是一种关乎如何解决问题的思维模式,在产品迭代期,它又是一种关乎如何思辨方案真实体验水平的科学验证。更具体一点,到底是什么样的思维模式和科学验证,近一年的时间我们通过大量案例逐渐将其解构出来,并将导图成“UED内功心法”,期望能够帮助交互设计师在具体实操过程中有的放矢,更有针对性地发挥设计的价值。

    2017-04-29
  • 微信Axure原型练习和资源分享

    “我根本没把你放在眼里。”“因为你一直在我心里。”▼这是咸冬日的第叁篇文章这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。首先需要准备基本素材,可以从我的源文件中获取。1.设置手机主页和home热键用例。2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。3.设置主页交互:1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;...

    2018-03-10
  • 在交互稿中,应重视「键盘类型」的标注

    在交互稿的标注中,我们经常会忽略键盘的说明,这是不对的。键盘在用户的交互过程中起到了非常重要的作用,尤其在多个输入框的场景下。

    2017-05-13
  • 百度用户体验总监刘超下课,HR内部贴称其“给百度同学造成严重伤害”

    百度用户体验总监刘超因演讲太low被嘘事件又有了进展,就在刚刚,又有网友晒出一张百度内网的帖子,告知员工“公司决定将刘超从百度管理团队除名”等信息,发帖者为“BaiduHR”:截图很快在微信朋友圈流传,但百度公关在相关朋友圈下面没有辟谣。以上帖子,可能是今天(7月3日)早间流传的、刘超在百度内网道歉原帖的最新回复,刘超在百度内网的道歉信如下:刘超在信中称,由于个人重视程度不足、演讲语言和穿衣不恰当的问题,导致在IXDC会议上演讲被嘘,后...

    2018-02-03
  • 教你掌握27种图层混合模式的用法

    嗯,让我们从最最基础的说起——像素。你就把他当成一个个五颜六色的小色块.这些小色块们都有一个特定的标记值,比如,RGB值,CMYK值了。当然透明色块也是像素,不过值是零罢了。我们的计算机就是靠识别这些数值来认识颜色的。

    2017-06-05
  • 交互设计师的60日计划之第十天

    今天一直处于多线程高并发的状态,所以大脑目前已经死机了。一上午的用户访谈,今天的用户很专业,所以得到很多有用的信息;下午和产品经理过wiki优化的事情,确定大致的方向,然后开了一下午周会;回来和视觉一起…

    交互专题 2015-08-20