20130125早读课:那些无法用菲茨定律衡量的用户体验设计

  • 3
  • 9,187 人看过
  • A+

推荐理由:译者@VIO-锦 。之前早读课也分享过一篇文章(20121026早读课:菲茨定律与互联网产品设计重点讲述了菲茨定律本身和当前设计当中的应用。而本篇文章是对菲茨定律在一些产品设计中的驳斥,也非常有道理,总之,在产品设计时还是要根据自己对产品的理解来选择,而非金科玉律。

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

————————-我是翻译正文分界线,全文较长,请耐心或分次阅读————————————

菲茨定律(The Fitts’ Law) 原本用来描述当人们使用一个指向性设备来瞄准特定目标时,所需的时间与移动距离,目标尺寸成函数变化关系。通俗来讲就是:距离目标越近,目标越大,点击到目标的时间就越短。这很容易理解,实际实现起来也并不算复杂,看起来着实没有必要对如此简单又明显的理论进行辩驳。然而,在对你的每一个设计都应用菲茨定律之前,认真考虑几个问题也许会让你的交互设计水平有所提高。

 

1、菲茨定律第一条: 创建更大的目标

依据菲茨定律所推导出来的最广泛的概念大概是,目标越大,就越容易点击到。

1)优势

界面设计不应仅仅局限于你界面所看到的像素空间,创建更大的目标隐性区域会有效优化你的界面交互行为。

举例来说,一些网站从不将某个按钮或者某个链接的可点击区域扩展到整个用户期望目标。 结果就是,用户需要更精准的移动鼠标到不同的链接,也因此消耗了更多的定位时间。而根据菲茨定律,应当充分利用每一个像素来扩大可点击的区域,因为这样会扩大可点击的目标,从而减少移动鼠标定位到目标的时间。例如,

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

由于只有文字部分作为可点击区域,左侧的按钮浪费了一部分宝贵的屏幕空间,而右侧的设计则通过使整个背景成为可点击区域带来了更大的点击区域 (左侧案例为Firefox,右侧为Apple

此外,增大一个按钮的绝对或相对尺寸来使之更容易被点击,是设计师们诱导人们进行特殊操作,传达界面元素优先级的常用方法。

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

相对尺寸与绝对尺寸在界面中通常用来传达元素的优先级和重要性(例子:LibreOffice

尽管在设计一个诱导用户操作的按钮时有很多因素值得考虑,但菲茨定律提供了其中最基本的理论依据。

2)风险

大尺寸的点击目标在带来前述好处的同时,也带来了消极的一面,即这些大尺寸的设计可能会打破界面的平衡性,并且占据了宝贵的屏幕空间。即使你拥有大量的屏幕空间,不断的扩大点击目标的尺寸也并不总会提升可用性,这是由于一个按钮的可用性与他的尺寸并不是单纯的线性关系。如下图,一个按钮的可用性与尺寸呈非线性对应关系:

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

因此,如果一个小按钮的尺寸被扩大10%,它会变的更易于点击,而如果一个已经非常大的按钮再扩大10%,它的可用性将不会有多少提升。

 

2、菲茨定律第二条: 减小鼠标的移动距离

依据菲茨定律可以推导出来的第二条依据是,距离目标越近,点击越快。

1)优势

如果你按照用户日常点击按钮和链接的的频率来紧密排布它们,而不是将按钮分散在界面不同的区域,用户的交互效率将会提升,因为他们移动鼠标的时间会大大减少。

以下面  Ubuntu Unity 界面为例,产品允许你浏览不同的文件源,并且使用两类不同的筛选器来筛选结果:输入文本筛选和通过文件类型筛选。然而,仔细观察下图可见,两组筛选器的距离非常远。文本筛选被放在了屏幕的顶部而文件类型筛选则被放置在了最底部。

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

不符合菲茨定律:搜索的筛选控件通常是连续使用操作的,因此,各个筛选控件应当彼此接近的放置在一起。 (例子:Ubuntu Unity, 截图: Webupd8.org)

对于连续的操作流程来说,上例中的设计并不是最优的。当进行搜索操作时,输入搜索关键词,并且选择文件类型来调整搜索结果通常是一系列连续的操作。为了完成这一系列的操作,例子当中的设计需要大范围的移动鼠标。假使将文件类型的图标放置在搜索输入框附近,那么用户移动鼠标的距离将会大幅减少,从而加快交互的速度。(还可以节省垂直的空间)

2)风险

严格按照上述准则来排列控件元素会与另外一个重要的设计准则产生冲突—依照功能和内容对控件进行编组和分布。这一准则的目的在于为整个界面提供一个明确而易理解的结构,方便用户发掘和理解各个控件和模块。

下图当中,不同的工具按照自身的类型和意义被编组排列:表格操作的工具统一左对齐而插入工具右对齐。

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

按照表达的意义来编组排列界面元素会帮助你的界面具有更容易理解,一致性更强的结构。(图例:Numbers

按照上述准则排布控件有助于帮助用户建立习惯性的心智模型,从而更容易找到某一类信息或者工具。反之,如果网站设计者单纯按照按钮使用的频率来设计,可能会选择完全不同的控件排布来减少鼠标的移动距离。这样的设计方式对表达界面功能和结构会造一定的破坏。

其次,与菲茨定律相冲突的另一条准则是界面设计应当保持干净,整洁。为了保持界面的清爽,多数网站采用下拉菜单来分组编排展示自身的内容。尽管有很多设计师认为下拉菜单的可用性存在争议,当复杂界面试图保持简洁和内容的条理性时,下拉菜单仍然被认为是有效节省空间且相对优雅的设计方法。如下图,下拉列表可以帮助你更好的结构化页面内容并且简化界面(图例: Blurb.com

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

菲茨定律不建议使用下拉列表的原因在于用户需要较大的范围的移动鼠标而不能简单轻易的点击到目标。针对下拉列表,用户通常需要点击或者鼠标划过下拉菜单,然后沿着展开的列表向下移动鼠标直到最终达到要点击的菜单入口(有时甚至还要再进入下一级的菜单)。 然而,考虑到下来菜单所带来的种种好处,花费较长的鼠标移动距离是完全划算的。

再次,一个容错性好的界面往往能够避免和减少用户使用中犯错的成本。而创建容错性更好的界面这一准则最终将可能迫使你违背菲茨定律。

依据菲茨定律,控件之间应当尽可能紧密排布,这样能够减少鼠标移动的距离并节省页面空间。然而,当控件之间的分界并不明显,或是当前选中元素与未选中元素之间视觉差异不明显时,依据菲茨理论来节省的距离就更容易导致用户意外点击到错误的控件。如下图,意外多发的界面:界面元素之间的排布可能避免用户误操作也可能导致用户误操作(图例: Codebeamer.com

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

比起分享与编辑功能来说,导航控件的误操作也许没有那么严重,然而,作为有态度的设计师,仍然应当小心以对这类问题。例如,

当我打开了一个错误的链接,我只需要简单点击“后退”按钮来修正我的误操作,因此,当紧密排布带来的错误发生于界面头部导航或者侧边栏导航时,也许造成的体验损害并不算大。

当这样的设计发生于沉浸式消费产品界面时,就不是那么容易被大众所接受了。当你播放视频或者音频时,又或者你正在浏览文档时,意外的点击了“播放”“退出”“下一个”“清除播放列表”这些按钮将花费你更多的时间来恢复之前的状态,这将会让用户非常恼火。

当这种设计所引发的错误发生在编辑和分享功能时,用户的体验将会成为一场灾难。假设我错误的点击了诸如“发送”“打印”“删除”“下载”“上传”“销毁”“撕毁”“关闭”“关机”“连接”“断开连接”“接受”“拒绝”等按钮,这些误操作可能产生严重的后果,并且也许是很难撤销的。

正是因为这样,在设计界面过程中,你应当采用以下方法来减少出错并且提供挽救措施,尤其是对于前述具有编辑和分享的功能控件:

  • 提供简单明了的撤销操作(例如:临时的撤销按钮)
  • 按钮之间保留一定的间距
  • 使控件的边缘清晰明确。
  • 高亮被选中的控件元素。
  • 合理的分组排布控件能够有效降低错误发生时的损害。

下面详细距离解释最后一条:假设我要点击“写邮件”时意外的点击了附近的“接收邮件”,那么这个错误的结果并没有那么难以接受。而如果“回复邮件”按钮和“删除”按钮在一起,那么点击错误之后的损害就比较大了。

有一种特殊的输入方法叫做“两步输入”被设计来避免这一类的误操作。两步输入法的可用性会因为较长的鼠标或手势移动距离而下降,但相应的却带来了更高的安全性。两步输入法的设计理念在于用户可能意外的进行了一次误操作,但连续两步的误操作发生的概率却很小。例如下图所示的,“滑动-删除” 交互。

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

第一步需要先滑动,然后再点击删除。滑动和点击按钮两个独立操作本身都很容易被误操作,当将两组交互行为合并组成一组两步输入法时,它就成为了很安全的交互机制(例: Timelogger App

我可以想象自己偶然从右向左的滑动了这一列表,或者意外的点击了某一个按钮。但是意外错误的连续完成上述两项错误几乎是不可能的。

两步输入的操作常见于移动终端的界面,这是因为移动界面本身有更多的误操作。而且,像上面这样,用户完成第一步操作再显示隐藏着的第二步操作控件,这样的交互模式能够提升界面的空间利用率。

综上,不论是滑动/点击,滑动/滑动,点击/点击 的组合,两步输入法相较点击一个大尺寸按钮都会让操作变得更复杂,但是这种复杂却增加了安全性,从而帮助你能够更顺利的完成操作。

 

3、菲茨定律第三条: 避免肌肉持续紧张

《 Fitts’s index of performance》这篇文章的目标是为了量化人类运动系统的信息容量。通俗的来讲就是:它通过衡量人们完成特定动作指令所需要耗费的身体力量来评价人们的输入方式优劣。

1)优势

用更少的体力来完成输入的好处是非常显而易见的,尤其是当人们使用一些笨重的输入设备时。最具代表性的就是垂直悬挂的触摸屏,这类触摸屏通常被放在专业的办公环境当中,用于创建,视觉化或是管理大数据量的信息数据。如下图,菲茨定律将会促进并延长垂直触摸屏的使用。(图例:Perceptive Pixel

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

当试用垂直触摸屏时,长时间保持手臂向上会迅速的导致三角肌疲劳,从而产生各种各样的错误,或是最终迫使用户放弃操作。

因此,避免复杂和高强度的这类输入方法有助于促进和延长人们对这类设备的使用。

2)风险

复杂难以进行的输入方法有时却能够避免错误发生。例如,移动设备通常都是被放在口袋中随身携带,很容易意外的触发设备。在这种情况下,高精度的输入方法 应运而生。这种输入方法有着更高的输入难度从而保证每一个输入指令不是意外产生的。并且,这类高精度的输入方法会提醒用户他们正在进行的操作相对重要。iPhone关机时的操作,就是最好的范例。根据操作结果的重要性来选择UI控件元素: 滑动操作通常被用于危险的操作(图例: iPhone,截图源自 Outsideinnovation.com

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

关机或是重启设备是非常重要的操作,一旦触发,就无法撤销。因此,它们被设计成滑动条控件,需要高精度的操作才能触发。与其相对的,这里的取消操作产生的后果非常小,因此被设计成为一个普通按钮。

滑动操作和其他需要高精度操作的手势既是最安全的输入方法,同时也是最冗长的输入方法。为了平衡安全性和易用性,这些操作通常被保留用在较为危险而又很少执行的命令,例如解锁屏幕,关闭设备,进行系统定制设置,运行管理员任务或是关闭闹钟等等。当另外一些危险的指令在使用中会被频繁使用时,例如编辑,删除或移动操作,合理的图标和包含确认的两步输入法而非高精度输入就更加合适。尽管两部输入法并不像高精度输入方式那样安全,但是它们更好的照顾到了易用性,因为这些操作发生的频率较高。

另外一个采用复杂高精度输入法的原因是为了利用手势操作的重要特性–节省输入空间。根据菲茨定律关于效率的评价标准,包含一定的拖拉手势需要更高强度的肌肉紧张,因此,菲茨定律更推荐点击操作。然而,手势操作具有一个很大的优势 — 无需放置界面控件在屏幕中就可以完成功能操作。

以在 deviantART管理艺术收藏为例,为了将一个选项添加到你的收藏,你不需要点击一个按钮。你只需要拖动一幅打算收藏的作品,收藏面板会自动触发显示,允许你把藏品放置其中。如下图,由拖拉操作触发并完成的操作无需在界面中放置触发操作的控件元素(图例deviantART

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

由于拖拉操作不需要按钮或是其他UI控件来触发功能,因此,它对于节省界面空间,提升利用率很有帮助。当然,不足也同样明显,缺乏明显的视觉提示告诉用户关于手势操作的存在(除非通过tooltip提示)无论如何,如果屏幕空间确实很紧张,那么手势输入虽然麻烦,但却绝对值得。

 

4、菲茨定律第四条: 利用主要像素

主要像素的理论表明,某些像素比其他像素更加容易获得。例如,屏幕的边缘和角落更容易接近。然而,最容易接近到的像素还是那些鼠标当前所在的位置,这也是右键点击弹出菜单的缘由。

 1)优势

右键菜单会在用户当前鼠标指针右击时出现,并且提供给用户与当前内容相关的选项。因此,你不需要再移动鼠标一定距离到某个特定的位置。通常有两种右键菜单:线性右键菜单和圆弧形或环形菜单。

按照菲茨定律,环形菜单会比垂直线性菜单更优。这是因为:首先,梯形的菜单选项拥有更大的点击响应区域。其次,由于菜单采用的环形排列,鼠标距离每一个选项的距离都是基本想通的。由此带来的一致性会帮助用户的肌肉产生记忆反射。与此相对的,在线性菜单当中,只有最接近鼠标初始位置的选项是最容易被点击到的,因此,这个位置应当放置最常用的菜单选项。如下图,菲茨定律更偏好环形菜单(左例: OneNote 2013,右例: Firefox

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

 

将界面控件放置在屏幕边缘或是角落的另外一个好处是鼠标的移动受限于屏幕的自然空间,从而更容易达到。如下图,屏幕边缘和角落是屏幕最重要的位置(图例:Particletree)

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

用户可以直接将鼠标大幅度移动到屏幕的边缘或是角落而不用进一步微调。因此,目标也会更容易被点击到。

2)缺陷

为了验证上述菲茨定律的理论研究而进行的实际测试表明,环形菜单在寻找选项和使用错误率上较垂直线性菜单有微小的优势。然而当问及被试的主观偏好时,环形菜单却不是人们所爱。

事实上,菲茨定律所偏爱的环形菜单,的确具有一些缺陷,这些缺陷在特定情况下甚至远远超过它带来的好处。

其中一点就是环形当环形菜单的选项较多时,所能提供的选项点击范围非常有限。解决这个问题的方法之一是依据 Hick’s 定律移除一些不重要的选项。例如,如果菜单选项不适用于当前选中的内容,或是它们在界面当中的其他位置已经存在,那么它们也不一定非要出现在右键菜单当中。(例如,“撤销”“重做”“新建文件””保存文件”“打印”或是“放大/缩小”这类操作与“剪切”“复制”“粘贴”这类通常针对选中项的操作相比,与选项内容关联并不强,因此可以把它们放置在工具栏当中而非右键菜单中)。

第二种管理多选项菜单的方式是次级菜单。与线性菜单相比,在环形菜单中使用次级菜单会很容易铺满整个屏幕并且显得杂乱无章。在这点上面,线性菜单有巨大的优势:线性菜单固有的结构使其很容易展现层级关系。如下图,分组的菜单选项在线性菜单中更加容易表达。(图例: Word 2013,截图 PCPro.co.uk

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

最后,环形菜单需要更多的空间。这会导致两个问题:菜单可能会遮挡选中的选项,并且当鼠标在屏幕边缘右击时,它们可能很容易弹出在其他位置而非鼠标附近。

综上,有以下情况时,应当尽力使用线性菜单而非环形菜单:

  • 菜单中需要有多个选项
  • 可能有次级菜单
  • 菜单选项需要被分组和存在优先级
  • 屏幕空间非常宝贵

最后,在使用鼠标操作的设备时,对于屏幕边缘和角落可能有2个潜在的问题。在大屏幕中,鼠标移动的距离很长,由此点击到边缘的控件并不一定省力。而且,网页设计师们可能无法有效的利用屏幕的边缘和角落,这是因为网页通常运行在浏览器当中。而且网页也通常被要求使用更好兼容性的居中布局。

在使用非鼠标操作的设备例如触摸屏时,将界面元素放在边角可能不仅不会带来易用的提升,甚至可能带来操作交互的倒退。在大触摸屏上,这样的布局可能会需要用户不断的拉伸他们的手臂,从而迅速产生疲劳。因此,在大屏幕界面设计中,一些经常用到的工具应当被设计成为可以拖拽的。这样用户就可以按照自己的意愿来拜访这些工具栏。而通常用户可能会放在他们当前主要工作区域的附近,这样就又符合了菲茨定律所述节省移动距离的原理。

 

4、综述

对于交互设计师和用户体验设计师来说,最困难的莫过于如何考虑用户体验的各个维度,从而做出平衡与结合,并创造最优的产品。菲茨定律尝试着为用户体验设计师们提供一些可以量化的数学性质的标准来使得设计决定更容易。

通常,运用数字很容易来衡量界面的质量和效能:某个操作的点击越少越好,定位导航越快越好。常用按钮被放置的距离操作越近,鼠标移动越少。

然而,界面终究是为人服务的,界面需要具有一致性,需要体贴包容人们,需要具有一定的可玩性,功能需要易被发现:这类指标很难像点击数或是像素移动距离那样容易被衡量。那些精确的数字和简化的数学模型可能会比无法衡量的各种体验维度更容易获得设计师们的偏好。但数学定律应当被用户体验设计师当作设计工具和参考,而非金科玉律。

事实上,你应当像尊重菲茨定律一样,尊重各种人类学准则和定律,只要它们能够真正的提升你的用户体验设计。

Via:原文出处  译者博客

20130125早读课:那些无法用菲茨定律衡量的用户体验设计

如果看到这段文字,证明您已经看完这篇文章了,有什么收获有什么感想有什么不赞同,我们期待您的留言评论,并诚挚邀请您加入“互联网er早读课”官方QQ群:136228714,一同交流每天文章的心得并结识同好。注:官方QQ群非水群,喜欢闲聊的童鞋请勿加入。再次感谢您对早读课网站的支持。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  2   博主  0   引用   1

    • 韬子

      真不错,支持早读课!希望越办越好!

      • Shunz順子

        菲茨定律的優劣分析、適用情況、風險不足等對比說明。

      • 来自外部的引用: 1

        • 大屏手机上的设计小策略-20140224早读课