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

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


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

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

问题根源

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

相关推荐

  • 5分钟交互设计指南系列:对话框

    框 (dialogs) 是叠加在应用主视图上的弹出 (pop-up) 视图,一般会要求用户作出反应。对话框可以分为模态对话框 (modal dialogs) 和非模态对话框 (modeless dialogs)。

    2017-10-31
  • 怎样绘制用户体验地图

    内容来自梁宁老师的《产品思维30讲》,这里是第17讲的笔记。怎么画用户体验地图1.完整的用户角色:需要对「第一只羊」有完整地了解。 (「第一只羊」的话题留在下次介绍)2.清晰的目标和预期:清晰描述用户的目标和预期,他为什么来到你的草地上?他要什么?比如,用户买钻孔机,但是他的目标不是拥有钻孔机,而是需要在墙上打个洞。比如吃饭,用户目标是吃饱?还是想要营造气氛?还是想获得一次交流机会?搞清楚用户的目标和预期到底是什么。3.服务触点:用户从...

    2018-04-01
  • Android 和 iOS:两个系统交互设计的不同之处在哪?

    iOS 和 Android 的设计还有许许多多的不同之处,比如字体、Tab bar 设计、物理键操作方式、编辑模式、APP 体现个性的方式……在设计移动端产品的过程中,设计师们可以更多的去思考两者的异同,并且更多的关注一下 Android 系统独有特性的运用,不仅仅节省了开发成本,同时也更好的为 Android 用户所接受。1dp(Android)=1pt(iOS)
    以48dp@160dpi计算的话
    mdpi 48px (160dpi, 1x) 基础尺寸,已经非常少使用
    hdpi 72px (240dpi, 1.5x)低分辨率
    xhdpi 96px (320dpi, 2x) 同iOS @2x
    xxdpi 144px (480dpi, 3x) 同iOS @3x
    xxxdpi 192px (640dpi, 4x) 更大更高更强的分辨率

    2017-05-06
  • 让你的设计拥有高转化率的配色知识简明指南

    互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩,构成的配色 方案令双眼觉得和谐。最常见的互补配色有两种,三元配色和复合配色,我们将稍后探讨。
    对比则可以将不同的元素区分开来,从而降低视觉疲劳,构建出视觉重心和焦点。元素之间的高对比度让文字更容易被识别,引导用户注意到更关键的信息。背景和背景之上文本的色彩选取就是一个非常常见的对比度的问题,我们会随后聊到。
    色彩对于用户的情绪上的感染也是一个重要因素。

    较小的文本应当确保至少和背景之间有4.5:1的对比度比率
    较大的文本(14pt粗体,18pt常规)应当确保和背景之间的对比度超过3:1

    2017-05-22
  • 网页首图抓住用户注意力的8个要点

    Banner 是我们最常聊到的设计元素,它是一个网页的招牌,是用户最容易看到的视觉元素。今天,我们来聊聊Banner中的急先锋,网页首图,它的设计之道。

    2017-05-08
  • 用户体验升级:《部落冲突》VS《竞逐之国:毁灭时代》

    原文作者:Om Tandon‘用户体验设计’是电子游戏产品的关键组成部分之一,随着手游产业的发展和智能手机的普及,人们接触的手游越来越多,现有的手游体验对多数玩家来说已经不再陌生。为了在同类产品中建立优势,开发者需要不断实现创新,改进并突破这种体验,从而为用户创造新的价值。与上市时间较长的同类手游《部落冲突》相比,Space Ape的RTS新作《竞逐之国:毁灭时代》在用户体验方面实现了突破。我们将两者的‘首次用户体验’、‘编辑模式&基地...

    2018-03-09
  • 交互设计牛校排行榜 | 卡内基梅隆

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

    2018-04-26
  • 圣诞节恶搞阳狮集团首席执行官

    嘿,节日里,当别人家的领导都在台上长篇大论,又是回顾又是展望为全体员工注射一波又一波的鸡血,你猜......广告公司的大佬们都在干嘛?事实上从2013年开始,阳狮集团的CEO莫里斯,都会找点乐子,不只是和idea漫天飞的创意人,更拉拢网友们,玩一场High翻天的游戏。

    2014-12-28
  • 探究设计的本质,运用符号元素的经典好设计有哪些?

    符号,通常是指具有代表意义的标志。人类运用图形符号来传达信息远比文字传达信息早,它的起源可以追溯到原始社会中部族的图腾标志。随着人类文明的发展和科技的进步,符号设计有着由简至繁再至简的波浪式发展过程。今天很多的图形符号从古至今不断的发展演变,日趋精简,成为经典的视觉符号设计。

    2017-05-16
  • 13毫米:触屏按钮的完美尺寸【UXRen译#170】

    作者:Scott Hurff   |  翻译:taitai,校审:天蛙   有种感觉你无以言表但却了然于心——当你在触屏上不能正确操作时,当你不得不小心翼翼地点屏幕上的一个小按钮来触发某个指令时,那种挫败混杂着气恼的滋味。 但假…

    交互专题 2017-08-07