作为一个新的父母,我越来越多地使用智能手机作为我的主计算机发现自己。记下笔记,选择下周的送饭包,网上购物,并跟踪孩子的饮食和睡眠模式都需要发生单手,快速,同时按住这个小新的人。无论这些努力是成功或失败常常可以归结为手机设计的一个基本的,但重要的细节:触摸目标的大小和位置。

足够的尺寸,触控目标是使用一个接口的关键 - 更遑论放心使用!我们已经造成小碰的目标都是有经验的无奈:可见,但答复我们的水龙头 - 或更糟的是,迫使我们不小心触发附近的链接。这些时刻让我们感觉就像在过小世界笨拙的巨人。

通常,这个问题被描述为“胖手指”问题,因为用户的手指比期望的目标大——笨拙的鸡尾酒香肠戳在屏幕上。但是,肥胖的手指并不是真正的罪魁祸首;责任应该落在细小的目标上。把美学置于功能之上的设计师往往会忘记去创造那些容易准确选择的目标。

规模很重要

根据Parhi, Karlson和Bederson的一项研究,用户要快速准确地选择触控目标,it最小尺寸应为1厘米×1厘米(0.4in X 0.4in)。请注意,这是一种物理测量:尽管我们的设计可能是数字的,但我们用手在触摸屏上操作这些数字元素。在像素值中引用尺寸并不能有效地传达触控目标的物理方面,而且当你考虑到触手可及的各种设备的屏幕密度时,它很快就变得毫无意义。

来自麻省理工学院的触摸实验室的过去研究发现,平均每个人的指尖1.6-2厘米(0.6-0.8英寸)宽。典型的拇指的影响面积更大 - 平均2.5厘米(1英寸)宽的!设计触摸目标,考虑用户的物理尺寸为基本用户为中心的设计

当触摸目标过小,用户需要更长的时间来挖掘他们。(费茨法则says that the time to reach a target depends on the distance to the target and the size of the target — thus, smaller targets take longer to reach, because of the added precision required of the user’s movements, than bigger targets placed in the same spot.)

例如,Glow Baby应用程序通过各种颜色的条形图或图标,将追踪到的睡眠时间、换尿布时间和喂奶过程的历史可视化,这样用户就可以发现宝宝可能的行为模式。点击单个事件,显示详细信息,比如喂奶的确切时间或婴儿入睡的时间。不幸的是,由于视觉反映的是婴儿睡觉或哺乳的时间长度,如果时间很短,点击目标就会太小而无法轻易点击。

2个截图的辉光婴儿应用中的历史记录页面上的小自来水的目标。
夜光宝贝:在跟踪历史的黄色和紫色的酒吧成为几乎不可能选择是否午睡或哺乳期的会议是非常短的。例如,在3月15日一护会话仅为5分钟,这引起了抽头目标(薄的黄色条)是只有6mm(0.2in)宽和甚至不1毫米(0.04in)高。大约花了10次尝试选择会话获得右侧的截图,其中选定目标以橙色显示。

注意差距 - 拥挤导致错误

不仅小的目标需要更长的时间才能达到,而且它们也增加了a的机会:不小心轻击了一个错误的目标,而这个目标被放置的太接近目标。即使在避免了错误的情况下,只要注意到某个元素在选择时可能存在问题,就会增加接口难以使用的感觉。

地图上的触摸屏经常造成触靶错误。当在地图视图中显示许多位置时,每个位置的标记都是如此的小和密集,以至于几乎不可能精确地选择一个特定的点。在测试中,我们经常看到用户在移动设备上查看地图时,会立即“聚焦脸”,因为他们意识到这需要花费精力。

麦当劳的移动网络定位工具的截图,具有体积小,密集布置,地图精确定位。
麦当劳的移动网站:定位器搜索结果页面显示了一张地图,上面的标记太小而且靠得太近。有关一个位置的信息通过轻击相应的定位显示出来。幸运的是,还提供了一个位置列表视图(理想情况下应该是默认视图)。

链接列表和堆叠的按钮也经常成为触摸目标错误的牺牲品,因为元素之间的间距太小了。例如,Kate Spade的手机主页上的薄按钮堆叠得太近了。它们之间有更多的空间可以防止用户按错键。相比之下,白宫黑市移动主页上的链接距离远到可以准确点击。(另一个解决方案是让成对的目标并排移动,而不是堆叠,因为与短线高度相比,额外的宽度给了错误更多的空间。)

截图上的凯特·丝蓓的和白宫黑市的移动主页链接比较安置。
(左)的链接,商店最畅销礼品铺礼品指南在凯特·丝蓓的移动主页进行得太紧堆叠准确地挖掘出来。(右)相比较而言,之间的间距店新来者寻找精品店白宫黑市移动主页上的链接大到足以支持每个链接的精确选择。

当然,如果目标太小,在它们之间增加空间可能不会有帮助。为了避免意外撞击,目标必须首先足够大,然后间隔也要足够好。例如,在Instagram上,拒绝跟随建议的按钮太小了(只有2毫米到0.08英寸宽),所以即使它们离你的建议很远跟随按钮(大约2mm的间距——通常推荐的最小间距),仍然很难选择。由于这种设计,它更容易忽略任何不好的建议,而不是冒险不小心跟踪一个帐户,试图从列表中删除它。

在Instagram的应用程序的后续页面的截图。
iOS版的InstagramX控件右侧的解散按钮跟随按键太小,而且这些反对行动之间的间距很小量不足以弥补他们的小尺寸。

有触摸目标驳回是更宽的建议,的相对的动作之间的空间的量就已经足够了。虽然有大量的垂直空间,额外的宽度将允许用户附近的远缘挖掘,以避免潜在的mistaps。

View-Tap不对称

触摸目标需要足够大,以便(1)识别目标是什么,(2)准确地获取目标。视图-点击不对称发生时元素足够大,可以看到(例如,读取标签文本),但是太小或太密集,无法选择没有挣扎。这是在很多设计中的一大难题我们对iPad的早期研究。视图抽头不对称的当前常见的例子是微小的iosstyle的carousel点指示符:你可以(有时)看到点是存在的,但他们太小,不能单独点击导航。

视图-点击不对称通常是由于桌面设计不适合触摸屏使用而造成的。可以用鼠标轻松点击的元素并不总是可以用手指访问。例如,大卫·雅曼首饰的网站列入对产品列表页面的每个产品的照片小圆形样本,以表明可用于每个替代颜色。点击每个样本将更新页面上的产品照片,让用户可以预览颜色而不导航到详细信息页面。虽然这种设计的基于鼠标的互动效果很好,小布样太小(只有1mm或0.04英寸)平板电脑用户 - 尝试点击一个色板往往激活链接到产品详情页来代替。也许他们留下可见的只是让用户可以看到其他颜色可用,但通过甚至更多的色彩选择转盘控制,以周期也是小型和untappable。

截图大卫·雅曼珠宝网站在产品列表页面中,在平板电脑上。
DavidYurman.com:在产品列表页面上,可供选择的颜色直径只有1毫米(0.04英寸),因此太小,无法在触摸屏上点击(这里是在平板电脑上)。

越大越好

当然,1厘米(0.4in)仅仅是用于一个按目标的最小尺寸,并且有许多情况下,一个交互式元件应该更大。例如,主要行动呼吁常值得伟大的视觉突出,从而应该得到更大的横置目标。

使用上下文也可以要求大于抽头目标厘米×1厘米:如果一个应用程序(或移动站点)是当用户正在移动中使用,目标将更难打,因此应该更大,以允许更容易出现错误。驾驶或行走时,需要精确操作控件将是困难的,如果不是不可能的使用。

例如,Target应用程序为实体店的用户提供了两个主要功能:搜索产品和扫描产品条形码以寻找优惠券或其他产品细节。这些按钮明显地放置在页面的顶部,占据大约2cm * 2cm(0.8英寸* 0.8英寸)的面积。这种设计考虑了这样一个事实,即许多用户可能在使用该应用程序的同时在商店里四处走动,寻找货架上是否有想要的商品,或者是否有特定商品的优惠券。

目标移动应用的着陆屏幕的屏幕截图,示出了2个超大初级抽头目标。
按钮来搜索或扫描条形码的产品在目标应用程序是超大号的(2厘米×2厘米,或0.8英寸×0.8英寸),沟通,他们都是常用的,主要功能以及允许用户在实体店购物轻松点击这些按钮在运动。

观众的需求也可以是更大的按目标的理由。年轻儿童需要大的,易于触及的控制装置因为他们的身体技能不像成年人那样发达。相反,灵巧度已经开始下降的老年人,也将受益于更大的控制,更能容忍手的颤抖。就我而言,初为父母的人需要有大的目标,有很大的误差,以支持我们生活中不可避免的杂耍行为。

限制屏幕上元素的数量可以让按键触摸目标更大,间隔更远,从而更容易点击。例如,发出婴儿应用计时器来跟踪多久一个婴儿护理专用的大多数屏幕相对应的两个触摸目标护理计时器(每个目标测量2.3厘米,或0.9英寸,宽在iPhone上X),与他们之间足够的空格和其他次要的目标上。一个大的按钮只有一次的计时器已经开始出现了,开始时间场,然后自动设置。所有屏幕上的目标是彼此相当相距甚远,以避免mistaps。

从辉光婴儿应用2个屏幕截图,示出了使用护定时器功能的多个阶段。
夜光宝贝:对护理定时器触摸目标是超大,远离屏幕上的其他元素,方便易攻,而用户从字面上的不可开交。

屏幕尺寸也可以影响触控目标的尺寸非常大的触摸屏通常需要更大的目标是显着的,并尽量减少,以达到他们的时间。在另一方面,小的触摸屏,如智能手表,不应该只是有较小的触控目标 - 而不是考虑的手势或语音控制,交互的手段。

结论

设计可用的触控目标是所有触屏(以及移动设备)设计的基础。确保所有交互元素在物理上、渲染上至少为1cm * 1cm (0.4in * 0.4in),并与其他竞争的触控目标有足够的距离,便于准确获取。太小的目标会导致更长的获取时间和错误,并且一定会导致用户受挫。

参考

帕希,卡尔森,a.k.,和贝德森,b.b., 2006。针对单手拇指在小触摸屏设备上使用的目标尺寸研究。“在在人机交互第八届会议与移动设备和服务的程序。MobileHCI 06年。DOI =http://doi.acm.org/10.1145/1152215.1152260

黄光裕,(2003)。建立人体和猴子指尖的三维有限元模型来研究触觉的力学。杂志生物力学工程, 125, 682 - 691。DOI =10.1115 / 1.1613673