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

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


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

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

问题根源

最近在做公司某个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

相关推荐

  • 【用户体验.春节特辑】我的家史馆,我的“义务”馆(总第267期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第267期使用我的家史馆APP以来,起初家谱树状图深深吸引了我,在不断完善添加家族成员的同时,越来越觉得只是单纯的成员图像和姓名显得很单薄,已不能满足我对家族每个成员的情感。想到我的后代、我的子孙后代将来看到的只是家族长辈的照片、姓名,这和见到一些陌生的照片姓名难道不一样吗?越想越觉得应该让家族人物更丰富起来。之后就仔...

    2018-02-21
  • B2B、SaaS等企业软件中的交互设计总结

    我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇文章是我在过去几年里的一些经验梳理,希望能够帮助那些想去或者已经在企业软件团队工作的设计师们。一、什么是企业软件?下面是维基百科中的定义:企业应用是一种计算机程序,主要用来满足企业的需求,而非独立的用户。一些大家可能用过或者见过的企业软件在现代企业中,大多数企业应用是复杂、可拓展、分布式、模块化...

    2018-04-17
  • 从公共厕所与交互-有趣的现象

    前言 有一次在等厕所时,我发现了一个有趣的现象,人们通常在选择独立间的时候会短暂停顿一下。但如果去询问当事人选择的时候的停顿是在思考什么,当事人往往也不知道自己在想什么。鉴于求知的欲望,我们实验室做了一个有趣的实验。

    2014-12-30
  • Axure教程:实现类网易云音乐APP播放效果

    整体效果截图首页:视频播放:我的音乐:朋友:音乐识别:音乐播放:实现本原型实际效果可以在预览地址查看,本文将重点讲述播放器界面的实现过程。1.原型共有11个独立页面:依次为:首页,排行榜,FM,视频,我的,朋友,账号,音乐识别,音乐播放,每日推荐,歌单页面。2.音乐识别界面效果实现分析:1.音乐识别效果由首页左上角麦克风图标点击后触发,进入识别页面时开始识别同时效果自动开始。由于音乐识别和首页分别在两个不同页面,所以可以考虑通过全局变量...

    2018-03-24
  • 如何用axure参与团队项目

    1、下载安装axure破解版,可以去axure.com下载。这里为了方便大家,分享个人的百度云盘资源,链接:https://pan.baidu.com/s/1o9qFOyY 密码:hodp2、下载File Zilla,File Zilla从百度上搜索即可下载,这里不需要多言,以下主要讲讲如何配置File Zilla。Ctrl+S创立本地站点,输入主机IP地址,协议默认是SFTP,输入团队用户&密码,点击连接,进入团队项目。3、在团队项目...

    2018-03-15
  • Material design 这20个大牌应用已经用上了!

    自从去年google在android新版本Lollipop提出的material design概念后,在世界各地疯狂地掀起一阵material design热。Material design不仅看起来令人惊叹,也是一个前所未有的设计理念。不仅对设计师的影响深大,对…

    交互设计 2015-08-26
  • 总结|服务设计的基础概念和案例

    在这里,本文作者和大家分享一些我总结的服务设计的基础概念和案例,希望对大家快速入门服务设计有所帮助。

    2017-05-06
  • 一个更适合产品迭代的卡片创意法

    本文是由58UXD的交互小组的工作总结文章,交互设计师常常需要进行迭代设计,为此,他们琢磨试验出一个更适合产品迭代的卡片创意法。收到消息通知→打开消息通知→查看消息→回复/其它操作接收(告知用户有消息需要了解)→阅读(了解更多消息详情)→反应行为

    2017-05-01
  • 『旧时好文』别再吐槽12306了,有本事你来写架构

    在平时,12306也就是个正常的电商网站。但一到黄金周,12306就是一个全站所有商品都秒杀,所有SKU都是动态库存的变态。

    IxD案例 2016-08-29
  • 帅气的YouTube改版交互设计,获Adobe大奖

    美国设计师Ziarekenya Smith为Youtube制作的概念交互设计,获得2014年Adobe设计大奖。项目视频↓↓↓Ziarekenya Smith一人承担了设计、动画、音效所有内容.新Logo,一个简洁的取景器,更强调用户UGC特色新的登录页面新…

    2017-08-02