从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

相关推荐

  • 【原创】交互设计七大标准(7) 奥卡姆剃刀定律(简单有效原理)

    奥卡姆剃刀定律(Occam's Razor, Ockham's Razor)是由14世纪逻辑学家、圣方济各会修士奥卡姆的威廉(William of Occam,约1285年至1349年)提出。这个原理称为“如无必要,勿增实体”,即“简单有效原理”。正如他在《箴言书注》2卷15题说“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。”▲ 奥卡姆剃刀原理如果你有两个类似的解决方案,选择最简单的。这些所提到其实就是驭繁于简。把事情变复杂...

    2018-02-22
  • 一名交互设计师的日常思考方式

    如果有一天,当你发现自己“较真又矫情,苛求又世故,倔强还言辞凿凿”,别否定自己,也许你已经开始有点交互设计师的意思了。

    2017-05-05
  • 当卡片式UI不再流行,列表式UI将是王牌

    作为设计师,虽然我们都喜欢最新的流行趋势,额外的白色空间和大图像,但对于新闻和数据,列表式是更好地解决基本的用户目标的方法。卡片是提供详细信息的入口。——来源:Google Material DesignGoogle的搜索结果可能会更加丰富多彩,但每页提供的信息较少。——来自:GreenBot

    2017-05-13
  • 影响网页内容的七种设计误区

    如果你的设计当中出现了这些问题,请不要担心。它们的解决方案并不复杂,通常也不需要经过复杂的重设计来完善,只需要进行适当的调整即可。

    2017-05-03
  • APP游戏分发模块一级交互设计

    看看阿西如何做原型设计,阿西手把手教大家设计原型。

    交互设计 2014-09-11
  • iOS 9设计规范 中文版 完整版

    文章索引 1.1 为iOS而设计(Designing for iOS) 1.1.1 设计跟随内容 (Defer to Content) 1.1.2 保证清晰(Provide Clarity) 1.1.3 用深度层次来进行交流(Use Depth to Communicate) 1.2 iOS应用解析(iOS App Anatomy)…

    2016-05-18
  • 用户体验是家电实体店独享红利

    不可盲目自信,也不能过度自卑。对于众多的家电实体店来说,满足用户的体验、持续带来新的用户体验,是应对一切外来不利因素挑战和冲击的最大筹码,也是生存的底线。蔓欣||撰稿现在,主题乐园正成为现在人们选择度假的方式,在春节旅游大报告中,上海迪士尼赫然位于“最热门景点”第四,而其他像常州中华恐龙园、顺德长鹿农庄、上海长风海洋世界、武汉欢乐谷等也是今年春节期间最热门的主题公园。尽管,现在基本上所有的购物、娱乐和消费,都可以在线上解决。但是,更多的...

    2018-03-09
  • 走心的收纳设计

    走心的收纳设计

    IxD案例 2017-03-13
  • 这样学Axure,效果显著,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期开启报名!从第1期到现在,1800多位同学学习成长,这是1800多位同学的经验贴。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)0基础的Axure新手,如何才能更快达到高薪产品经理的Axu...

    2018-03-18
  • 明年的,网页设计趋势!

    是时候展望一下未来了。2014年涌现了许多令人印象深刻的网页设计趋势 ,幽灵按钮越来越多,视差滚动也已经成熟,单页设计也成为了诸多设计手法的重要载体,而逐渐多起来的免Coding网页设计平台也开始造福于设计师了!

    2014-12-27