从可用到易用的一次思考|手机获取验证码那点体验

我们做用户体验的不能将系统过失/产品过失迁就于我们的用户。因为用户永远不会错,用户也没有必要为产品和过失负责。我们要做的就是穷尽我们解决问题的能力帮助用户获得最佳的使用操作,并能带来一丝的惊喜。


我们做用户体验的不能将系统过失/产品过失迁就于我们的用户。因为用户永远不会错,用户也没有必要为产品和过失负责。我们要做的就是穷尽我们解决问题的能力帮助用户获得最佳的使用操作,并能带来一丝的惊喜。

从可用到易用的一次思考|手机获取验证码那点体验

问题根源

最近在做公司某个PC端项目时涉及到企业要获得权限必须进行一次资格认证。而在这个过程中,其中要紧的一步是进行手机号的验证。但是,最近公司网站频繁被黑,考虑到用户手机号会受到骚扰,同时短信平台也会增加无谓的流量压力。因此凡是涉及到用户进行手机号码验证的地方,都额外增加了输入随机验证码的步骤。

从可用到易用的一次思考|手机获取验证码那点体验

图1 登录输入验证码

流程分析

从逻辑上来讲这个操作并不复杂,对照随机验证码内的字符输入即可,如果看不清楚,点击换一张(刷新)即可。而且放到整个操作流程上来说也只是多一步操作而已。

从可用到易用的一次思考|手机获取验证码那点体验

图2 任务流程分析

用户操作行为分析

看似只是增加了一个简单的输入验证码的步骤,但是实际上进行用户行为分解时其实是复杂了很多。其中微动作的分析下可以发现:

从可用到易用的一次思考|手机获取验证码那点体验

图3 用户操作流程分析

  1. 企业用户在平台上的上一步操作中点击提交下一步,来到手机验证这一步时,手机号是不用再次输入的,因为这个必须而且是必要的从用户中心获取;
  2. 实际上输入随即验证码是这个页面操作的第一步,但是这个步骤中因为验证码规则安全性的考虑,采用字母+数字组合的方式。殊不知在键盘上数字区域和字母区域相距较远,操作切换过程花费时间会比较长。(用户目标是企业用户,台式机占大部分);
  3. 另外获取手机验证码时用户行为需要从键盘上切换到鼠标上从而获取手机验证;
  4. 输入手机验证码是6位数字,又需要切换到鼠标。

明确问题

看似简单增加一个验证码,实际上在第2步操作以及切换到第3步操作的过程上给用户操作带来不必要的繁琐和时间冗长。

虽然添加随机验证码有这样的缺点,但是其简单的逻辑以及被带坏的用户操作习惯造成我们在设计上的思维定势。误以为这就是最合理的解决方案,虽然不是最佳的,但是确实最稳妥,最没有争议的而且对于技术实施来说也相对容易。

那么还有没有更好的操作方式,或许在看到上述表述,你的心里已经有了更好的解决方案。但是不要着急,因为我也找到了一种比较合理的方法。慢慢看来,是不是和你的一样。

分析问题

解决一个问题之前首先要做的是这个问题的来源是什么。

我在前面讲到了这个问题的来源是因为平台频繁被黑,无法判断获取手机验证码的是来自于真实的用户还是程序下的黑客们。

那这样做的目的又是为了什么呢?

  • 为了让我们的系统认定这个操作是人为的;
  • 为了防止黑客恶意获取对短信平台造成影响;
  • 为了保护用户信息的安全;
  • 为了提高用户操作效率(优化的最重要目的)。

产品案例分析

知道问题是什么以及要做什么了,那么我们看看有什么好的可以借鉴的操作方式么。

首先想到的是某付宝,我们来看看这个据说是互联网信息安全最厉害的公司是怎么做的。

从可用到易用的一次思考|手机获取验证码那点体验

图4 拖动滑块验证方式(1)

这个一滑到底的操作方式想必很多人都用过。其延伸的操作方式有:

从可用到易用的一次思考|手机获取验证码那点体验

图5 拖动滑块验证方式(2)

这个是比较有趣味的解决方式,利用大家熟知的拼图方式(建立简单的认知模型)结合卡通形象做一个趣味性的验证方式。

从可用到易用的一次思考|手机获取验证码那点体验

图6 拖动滑块验证方式(6)

除了卡通形象外,另外像人人网登录验证时,用户拖动滑块到指定位置并且成功后提示用户拖动滑块的时间并做了一个百分数的排名,转移用户的对因安全验证而增加的滑动验证的抱怨,增加趣味性并且通过排名激励用户下次对使用滑块的期待。这种方式也是极为不错的。

方案设计

结合当前比较流行的滑动验证的方式,首先我先做了一个流程上的优化分析。

  1. 原始流程中输入随机验证码-获取手机验证码-输入手机验证码,对应着动作操作为键盘输入-鼠标点击-键盘输入;
  2. 优化流程为拖动滑块获取验证码-输入验证码,对应着动作操作为鼠标拖动-键盘输入。

流程上优化方案确定后,接着进行原型页面设计,如下图:

从可用到易用的一次思考|手机获取验证码那点体验

图7 设计优化方案

优化方案提出后,经过产品评审和技术评审讨论,这个方案从开发逻辑上来说相对于随机验证码方式复杂了许多,因为这里需要前端去控制滑块的移动,移动位置数据的随机规则会比验证码随机生成的规则不同。虽然在一定程度上增加开发周期,但是能够满足产品安全策略并且提供一个良好的用户体验。所以方案评审通过,并且进入开发。

总结

  1. 这个方案能够实施推进的前提条件是手机号码必须要先输入正确;
  2. 简单的交互,能够满足可用性,但是还不够易用性;
  3. 用户体验也是可以迭代的,综合考虑开发成本、上线时间等因素,用户体验在版本迭代中慢慢提升;
  4. 当产品处在功能快速迭代的时候,产品的用户体验会在上线时间紧迫的压缩下损失一部分,但是对于细节的体验要保持持续的关注。

 

作者:Nick Chen,微信号:Chen_YonWei,从事某互联网行业,3年交互设计,擅长场景分析和产品品牌分析。曾主导过智能硬件,Web后台管理等多端的用户体验工作。偶尔做做平面设计和3D建模设计。

本文由Nick Chen原创 发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-17 17:56
下一篇 2017-05-17 19:51

相关推荐

  • “创造完美的用户体验。” 中国最当红工业设计师 —— 杨明洁

    Designer100是+86设计共享平台推出的中国高端设计师第一推广品牌,致力于设计师推广的全球巡展、设计师大奖、视频计划、沙龙论坛的社会公益项目。杨明洁YANG DESIGN及羊舍创始人福布斯中国最具影响力设计师同济大学及南京大学客座教授融合了德意志逻辑思维与中国人文精神的设计理念,也使得杨明洁成为了包括波音、奥迪、宝马、博世、飞利浦、英菲尼迪、可口可乐等众多国际顶尖品牌的合作伙伴,从眼镜箱包到飞机内舱,从消费电子到交通工具,从茶具...

    2018-02-26
  • 写在 [ 交互设计小厨房 ] 一周岁

    时光荏苒,感谢无情岁月!感谢大家容忍这个公众号『隔三差五』抽疯式的更新;感谢太太长期战斗在『丧偶式育儿』的第一线;感谢各位『互联网老炮』容忍洒家在微信群里污力十足的飚车;最后还要感谢这个优雅的排比句。当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放金平糖の精の踊り~カチューシャ浜口史郎 - 『ガールズ&パンツァー』オーケストラ・コンサート~Herbst Musikfest 2015~产品厨子的运营总结2017年3月24日,『交...

    2018-03-24
  • 从“注意力”的角度,谈交互设计如何避免入坑

    前段时间UIMAX团队在做“新浪新闻客户端用户画像项目”时,用研人员访谈用户的过程中,发现一个这样的问题:多数用户完全没注意到过页面上的“长按可排序或删除”这段文字,反馈“不知道可以对新闻频道进行排序” 设计师…

    2017-06-05
  • 在交互稿中,应重视「键盘类型」的标注

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

    2017-05-13
  • 为什么用户会无视网站首页的轮播图?

    数据显示:在三百万个网站中只有大约1%的网站首页上的轮播图会被点击。一个在首页上如此之醒目的元素竟然只有这么低的点击率……到底怎么回事?个中原因相比会让你大吃一惊。

    2017-05-19
  • 【交互体验】让你事半功倍的交互体验自查清单

    点击上方“蓝字”可以订阅哦!小编推荐:刚画完的原型自我感觉良好,当到了评审的时候发现在用户体验槽点非常的多。如果你遇到上面的情景,那么这篇文章对你绝对有用。事不宜迟,请看下文。体验清单起因去年底看朋友出国前用‘穷游清单’给自己列清单,她说列的清单可以帮她在出行前检查一下是否有遗漏东西,避免因遗漏东西使整个旅行变得很糟。既然旅游清单可以使旅游提前避免问题发生,是不是我们在工作中也可以采用这种方式使自己的产出物交付前保证万无一失。在平时设计...

    2018-01-30
  • 【案例】菜鸟裹裹如何打造双11极致物流体验

    作者:CNUX设计实验室(菜鸟无线UED团队)   如往年一样,2016年的双十一如期而至。当大多数人都在关注、鼓励你买买买的时候,有多少人关心你盼望包裹的那种期待?有多少人能体会你等待包裹时的焦虑?有多少人理解…

    交互专题 2017-08-07
  • 新手学交互----必看书籍之《微交互》

    最近有很多童鞋想学习交互设计,问我有什么好的书籍可以看看,今天小编为大家推荐一本好书《微交互》---细节设计成就卓越产品。由Smart Design的交互设计总监Dan Saffer所创作的,通过这本书展示怎么设计微交互,即…

    交互设计 2015-04-29
  • 在Sketch中直接画流程图?现在你可以梦想成真了

    静电说:许多小伙伴对Sketch的期许是更多的,他们不仅希望Sketch是一个绘图工具,更希望它能变成一个交互工具,一个动效设计工具。比如这样一个需求:“在Sketch中画流程图箭头”,之前是不可以的,但插件为我们带来了无限可能性。今天静电就要来介绍这款User Flows插件。User Flows可以来创建图层到页面(Artboard)之间的连线,也可以用它来导出设计流程图,User Flows提供多种语言选择,为我们提供了不少方便。...

    2018-04-17