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

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


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

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

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

相关推荐

  • 人鸡交互 VS 人机交互

    交互就是一名翻译官,一个机器和人类的翻译官。

    2017-05-06
  • 设计高效好用表单的10个技巧

    让问题保持直观的顺序。你应当站在用户的角度按照逻辑提问题,而非按照程序或者数据库的逻辑。如果问题之间没有逻辑存在,那么可以按照字母顺序来排布。
    以直觉的顺序组织选项。比如选项为日期的时候,按照周一周二周三这样的顺序来排布,而非乱序。
    时刻反思从用户那里获得的信息是否必要,如何使用。这样做是为了消除不必要的选项,提升完成率。

    一旦用户点击输入框,标签会消失,用户容易忘记谈需要输入的内容以及形式
    当用户看到输入框中有内容填充的时候,会误解为这个字段已经被填写而无需输入了

    2017-05-21
  • 儿童键盘输入交互方式探讨:为熊孩子设计的输入法

    想必针对婴幼儿用户所设计的产品出发点与普通的产品设计出发点一定有所不同,那么在设计幼儿产品时,应该考虑哪些交互细节点呢?文章以一款儿童输入法为例,为我们解读了在儿童产品设计过程中该注意的一些交互细节点。

    2017-04-27
  • 蘑菇街App改版设计总结

    新版app在短短的一个多月内,完成了从方向调整到开发上线的全过程,而设计在其中仅仅只占一周多,这也是互联网公司面临的共性难题。为了配合产品小步快跑的策略,我们采用敏捷设计的方法:快速地进行竞品分析,根据低保真原型一边进行业务细化和方案讨论,一边进行视觉风格的设计。

    2017-05-12
  • 交互设计之搜索框设计

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Younger NowMiley Cyrus - Younger Now- 期待你的关注和收藏 -耳朵们要好好收藏原文:Behance作者OTT UI  |  编辑:程琳琳在交互设计中,各个不同的场景需要不同的搜索框设计。搜索框一种常见的交互插件,用于精准提取海量信息中的准确内容。搜索框几乎存在所有的网站和App中,尤其是海量内容为导向的产品之中,例如音乐库、电商类网站,做好搜索...

    2018-02-12
  • 6种转化率分析模型,提高产品转化率、用户体验

    在微观层面(实战方法论)通过6种转化率分析模型提高产品转化率、用户体验; 大家如果能掌握好增长方法论和提升转化的秘诀,就一定可以通过实现业务快速增长。以下为数极客CEO @谢荣生 在【起点学院公开课】演讲实录,编辑有修改:1. 为什么转化率越来越重要?1.1 流量红利渐失,竞争日益激烈目前新平台、新应用发展起来的难度比十年前要难数十倍,主要有三方面的原因:增长率下降;流量集中于BAT等少数大平台;同行竞争激烈。根据CNNIC统计报告显示...

    2018-03-28
  • 【原译】迪士尼中的UX(下篇)

    上次有简单介绍迪士尼十二原则的基本概念,这篇文章则是韩国pxd设计小组与迪士尼设计大师Glen Keane先生的一次更加深入的访谈与讨论。 在正式开始这篇文章之前,先给大家稍微展示动画《Duet》中的一个小片段。《Due…

    2015-10-27
  • 转场动效的5个核心规则

    本文作者通过大量的案例分析和过来人的经验,总结了优秀转场动效的5个核心的规则。enjoy~

    2017-04-27
  • 交互设计牛校排行榜 | 卡内基梅隆

    创艺典国际艺术教育之院校介绍有一位老大哥是高校里的老大哥他在艺术、工业、计算机专业非常强势除此之外它还拥有全美顶尖对顶尖的计算机学院和戏剧学院他就是Carnegie Mellon UniversityCMU卡耐基梅隆大学这些看上去毫不相干但都那么强势的学科结合在一起岂不是成了飞机中的战斗机赛车中的四驱兄弟?卡梅这位老大哥还真这么干了他们开设了一个项目那就是——人机交互交互设计中应用最广泛的学科分支卡内基梅隆的人机交互项目是全球的交互项目...

    2018-04-26
  • 小白学Axure,这样学更高效,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第6期开启报名!从第1期到现在,1400多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)先来看看学习效果全程实操,学完高效制作原型,做出高保真认真学完,原型效率提升,更...

    2018-03-04