从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

从iOS 9改版到iOS 10之后,锁屏页面的音乐控件变大了,用户体验 明显提高。那么最佳的按钮触摸大小应该是多少?经过1.2亿次的实验后,这个结果被微软/苹果等顶级公司采用,强烈推荐学习。


从iOS 9改版到iOS 10之后,锁屏页面的音乐控件变大了,用户体验明显提高。那么最佳的按钮触摸大小应该是多少?经过1.2亿次的实验后,这个结果被微软/苹果等顶级公司采用,强烈推荐学习。

从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

你可能说不出来,但你肯定知道这种感觉——当你触摸手机应用界面而它不能正常工作时候,当你感觉你只有精细的点击,才能出发正确的命令时,那种混合起来的沮丧和失败感。

但是,如果你可以自己创建用户界面,你知道如何合理避免这种情况吗?如果你知道可以通过创建可靠的触摸元素,来帮助您的客户减少错误,使用效率更快,使用感觉更开心吗?

这是可能的。我们来探讨一下为什么。

这是你最后一次让我失望了,iOS 9

我在iOS9锁屏页面上使用音乐控件时,遇到了这个问题。

从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

在日常使用听歌时,我走在路上想要跳过一首歌,我无法在第一次或第三次就点击操作成功,有时甚至三次都不能成功;有时候,我会误触把音量调到最高点;其他时候,我可能会误暂停这首歌。

最终,这个界面带给我的负面体验,使我改变了我的使用行为:我避免在这界面进行操作。

这是一个可怕的失败经历。一个专门为了节省我的时间而设计的界面,最终却使我浪费了更多时间。

不知为何,iOS 9 的音乐控制破坏了用户界面的关键规律。但是到底破坏的是哪个规律呢?

从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

不过幸运的是,iOS 10 来了,改变了界面。更大的控件,更大的点击目标,更大的封面和歌曲信息,使听歌和阅读都变得更容易。

换句话说,我在路上对歌曲使用操作的出错率明显下降。

这是为什么呢?

有科学的答案。

从1.2亿次的点击中学习

从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

2016年,芬兰Oulu大学,Maryland大学和Parck学院的研究人员组成一个研究小组。他们的目标是,确定在触摸屏幕上单手使用最容易的按钮尺寸。

他们测试了两个场景。第一个:执行一次性任务,例如激活按钮,点击复选框,或选择单选按钮。第二个:执行一系列任务,例如输入电话号码。

在研究期间,研究人员测试了每一种场景下的按钮大小。他们发现当单个任务的按钮小于9.2mm时错误率显著增加;对于系列任务,按钮大小小于9.6mm时错误率显著增加。比较特别的是,对于系列任务,9.6mm和11.5mm之间大小的按钮,造成的错误率差不多。

从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

五年后,德国两所大学的研究人员进行了一系列研究。他们的目标是,确定触摸屏幕按钮的最佳大小。

从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

为了进行研究,研究人员发布了一个安卓游戏,这个游戏被下载了大约100,000次,记录了大约1.2亿次点击事件。这个游戏的玩法很简单:玩家必须点击屏幕上任何地方的各种尺寸的浮动圆圈,游戏才能继续。

研究人员分析了游戏中的点击事件后发现,对于小于15mm的圆圈来说,游戏玩家的错误率稳步上升,小于12mm的圆圈,失误率大幅下降。而对于小于8mm的圆圈来说,40%左右都会失误。

从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

这次研究还发现,对于超过12mm的目标尺寸,精确度的改进并没有什么意义。

还有无数的研究,包括苹果、谷歌和微软等主要厂商所建议的元素大小。不过,我们首先需要讨论的是所有这些标准的基础:菲兹定律(Fitts’s Law)。

历史

作为产品设计师,我们受益于前辈的辛勤工作。在这种情况下,美国俄亥俄州立大学的心理学家保罗·菲兹Paul Fitts在1954年创造了一项原则,后来被称为菲兹定律,成为人机交互的基础。

通俗来说,菲兹定律是人将手移到物体所需的时间的一个模型。物体越近,粗略的说物体越大,手就越快越容易移动到这个物体。

菲兹可以用数学模型来模拟。应用于触摸屏幕界面时,如果知道屏幕上的目标的大小和距离,可以确定手指点击到目标需要多长时间。

这里是方程:MT = a + b log2(2A / W)

其中:

  • MT =完成移动所需的时间
  • a,b =随情况而变化的参数
  • A =从起点到目标中心的距离
  • W =目标沿运动轴的宽度

我不是数学家,但我所做的研究表明,对数函数部分是非常重要的。

《Mind Hacks Tom Stafford》这本书里,对动态的影响总结的非常好:

虽然基本信息是显而易见的(更大的目标更容易选择),精确的数学表征令人激动,这个表征包含了对数函数——意味着大小和反应时间之间的关系形状是曲线的,所以小的物体尺寸增加,会变的更容易选择,而大的物体的大小增加并没有太大的差异。这也同样适用于目标距离的变化。

现代研究不断的证明了这一点。在我之前应用的两篇论文里,每篇论文都显示出按钮大小递减在12mm到15mm之间。

但是最佳的尺寸到底是多少?我们可以用它来设计更好的用户界面。

适用菲兹定律来设计更好的用户界面

适用菲兹定律作为基础,整合早期的研究,几乎可以设计出真正好触击的用户界面。

首先,我们从上面两项研究中得出的按钮大小得出建议:

  • 9.2 x 9.2mm
  • 9.6 x 9.6mm
  • 12 x 12mm
  • 15 x 15mm

接下来,我们将Apple、Google和Microsoft的设计规范和触控目标相结合:

  • Apple: 44 x 44 points
  • Google: 48 x 48 dp + 8dp或更多 = 56 x 56 dp
  • Microsoft: 9 x 9mm + 2mm的两边留白 = 13 x 13mm

我们如何应用这些数值?

我们需要将这些毫米测量值转化为像素,并将我们的设备像素转化为点。由于像素的定义没有标准的尺寸,因此我们需要使用以下共识,特定显示屏下的每英寸的像素数量。

Pixels = PPI × (.03937 inches per mm × mm)

假设我们使用的是iPhone 7 的Retina显示屏。根据Apple的规格,iPhone 7 的显示屏的PPI为326.

需要做的就是把毫米单位的建议值带进这个公式中:

Pixels = 326 × (.03937 inches per mm × mm)

我猜大多数人现在都是在Sketch中做UI,所以将结果转化成点Points。iPhone 7 的像素密度为200%,所以我们只需要在这种情况下除以2,以便在1x的情况下进行设计。

其次,我们转换了所有这些尺寸,来比较一下iPhone 7 显示屏的内容。这里还有各个公司的标准关键尺寸:

从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

那么问题来了,iOS9和iOS10锁定屏幕中音乐控件的大小到底是多少,会出现以上研究中的数字吗?

从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

从iOS9到iOS10,苹果扩大了控制范围,从7mm到12.8mm。

这刚好符合Microsoft Touch的规范。

设计真正可用的用户界面

由于人的手指的平均宽度为10-14mm,平均指尖的宽度为8-14mm,MIT Touch Lab发现,我们可以更容易的定义一个范围,来创建一个真正可用的UI。

微软标准下的真正可用的UI是由最小尺寸10mm,最佳触摸元素大小13mm左右。

在这个范围内,可以创建减少用户操作失误,使用效率更高,使用体验更好的界面。

 

原文地址:Scott Hurff’s Blog

译者:@平行煎餅

译文地址:http://www.uisdc.com/improve-ux-like-apple

本文由 @平行煎餅 授权发布于人人都是产品经理,未经作者许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-04 15:15
下一篇 2017-05-04 17:19

相关推荐

  • 30个笑死人的设计【UXRen译#168】

    作者:ARMIN ZAHIROVIC   |  翻译:楠木,校审:天蛙   乔布斯曾经说过:设计不仅是看上去如何,感觉如何,而是用起来如何。 一般来说,我们喜欢展示伟大的设计,但其实从糟糕的设计中也可以学到很多。我们不认为St…

    交互专题 2017-08-07
  • 回顾交互设计的过去,并展望其未来

    你好,这是2017年的第13篇文章。除了电脑和手机,越来越多承载了新交互形式的产品涌现。语音、体感等更加自然的交互方式会不会成为主流?未来的产品形态和交互方式会走向何方?当NUI(自然用户界面)代替GUI时交互设计师和视觉设计师该何去何从?人机交互的未来在哪?这些问题都值得我们去思考……

    2017-05-04
  • 教育产品组件化交互设计的实践与思考

    作者:王媛媛   组件化设计,就是设计模块化,组件可复用。是以通用化的视角审视模块设计,根据业务方需求支持多个产品的接入与使用。在线教育领域内,题目是线上线下教学场景内校验学习的一种基本方式,同时,题目…

    交互专题 2017-11-13
  • 智能场景设计:深入场景和意图的体验设计

    “hey各位!我们要开始做一件重要的事了!”陈老湿已经走到我们的工位前,兴致昂扬地说道,“竞对已经上线了类似的功能,我们得抓紧了。上海那边出了方案,看,在这里!”

    2017-05-23
  • 用户体验五要素

    01战略层什么是用户体验:用户在使用产品过程中建立起来的一种纯主观感受。用户体验的重要性:给用户一个积极、高效的体验,他们会持续使用你的产品,产品满足用户某方面的需求并来盈利,帮助人们提高生活质量,提高工作效率,改善人际关系,等等。五要素:战略层、范围层、结构层、框架层、表现层用户体验要素的作用:要素之间相互作用完成任务,创建一个总体的用户体验设计。适用场景:设计:战略层→范围层→结构层→框架层→表现层用户体验:表现层→框架层→结构层→...

    2018-02-06
  • 实战分享:核桃App界面设计及视觉规范

    因为最近做公司项目的设计规范,所以决定把设核桃的计规范也整理一份。但由于是概念稿,所以规范做的不算全面;而且每个产品也有各自的规范思路和维度,没有绝对的定性方法。这里只是提供一个大体方向,疏漏之处,希望给予批评指正。

    2017-05-13
  • 一个精美的手机的原型怎么产生的-第二集

    阿西录了下视屏尝试下最直接的方式 ,你看着阿西怎么做原型设计的。最简单方式往往最有效。 这段是:安卓手机,Axure手机框组件的视屏教程-2 在线播放! 第二集: 第一集下载地址:点我点我 第二集下载地址:点我点…

    交互设计 2014-09-06
  • 设计师的知识管理

    作者: shareboy 人们每谈到设计很自然的就会联想到创意、想法。作为设计师,好像我们的大脑里就理所应当地充满了各种创意,然而这些创意是本来就存在于大脑里的吗?显然不是。 有人说创意来自冥想,我不否认有些天…

    2015-04-22
  • Axure RP 8.0 软件激活 安装教程 激活码 序列号

    点击上方蓝字关注免费领取百度网盘超级会员等部分软件没有贴详细教程和网盘链接,可以给公众号留言发信息,也可加微信:qihai-77当你需要的软件我们没有发布时,可以给我们留言或者加微信:qihai-77反馈哦链接:https://pan.baidu.com/s/1VjyU1Ok307Go4VaV54LhcA密码:3nf7有任何需要安装的软件或问题可咨询微信客服:qihai-77链接失效可在公众号留言某某链接失效 或联系微信客服:qihai...

    2018-03-29
  • 针对产品UI国际化提出的7条建议

    近年来,越来越多的国内开发者将目光从国内转移到国外,纷纷投入到移动大航海时代的浪潮之中。在产品国际化的过程中,产品UI是否也跟上了国际化的步伐?Dropbox 设计师 John Saito 针对产品设计国际化中出现的问题进行了分析并提出了 7 条建议,值得一看。

    2017-05-09