利用菲茨定律改进可用性

WebFX总裁。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

菲特定律方程早在1954年,心理学家保罗·菲茨(Paul Fitts)发表了一篇文章,详细阐述了他关于定向运动的人体力学理论。菲茨观察到,指向或敲击目标物体的动作可以用数学方法测量和预测。Fitts表示,目标物体的大小以及它与起始位置的距离可以直接测量,这使他可以模拟一个人在不同目标物体上执行相同动作的轻松程度。

1954年,这个理论还没有应用到计算机上;然而,现代设计师应该很快就会发现这个公式在用户界面环境中的强大意义。正因为如此,Fitts定律已成为人机交互(HCI)领域的主要理论,并成为业界公认的准则之一。费茨定律,最简单的形式就是常识。

物体越大,离我们越近,就越容易移动。菲茨定律是一个模型,可以帮助设计师在用户界面和网页布局方面做出明智的决定。它可以与设计理论结合使用,例如视觉重量给用户界面项目适当的层次和位置。

考虑到电子商务网站互动按钮的适当设计和放置所带来的潜在经济收益(例如添加到购物车按钮).例如,研究在一家电子商务网站进行的调查显示,仅将网站的“添加到购物车”按钮移到左侧导航菜单,转化率就增加了34%。Fitts定律可以帮助我们在用户界面元素的大小和位置上做出合理的决定,所以它在今天仍然非常适用网页设计

菲茨的法律是如何运作的

菲茨定律的核心是一个用来说明到达目标物体所需时间的数学方程。一个目标对象在ui上下文中,可以是任何交互元素,如提交按钮、超链接和web表单中的输入字段。这个想法是这样的:你越快到达目标对象,使用起来就越方便和容易。

方程式如下:菲茨定律方程在上面的等式中:

  • 时间完成移动需要多少时间
  • 一个而且b是由经验决定的回归系数,这基本上是一种奇特的方式,说明它们是从直接观察中获得的值,从而建立一个斜坡。
  • 距离是从起点到终点(目标对象)的测量。
  • 宽度目标对象的宽度

注意,只考虑目标对象的宽度尺寸;在2D/平面媒体(如显示器屏幕)中,高度和深度被忽略。因此,一个500像素宽但只有2像素高的对象似乎不是一个可用的目标对象,因为它将更难点击;运用你更好的判断力,考虑用高度代替宽度,如果这是有意义的。此外,将该模型与您已经知道的其他设计理论结合使用。

物体距离和宽度插图菲茨定律每次只适用于一个轴。然而,在2D/平面的用户界面中,重要的是要记住对象的高度和宽度都对对象的易用性有影响。

越大不一定越好

我们可以从Fitts定律中学到的最重要的一课是,虽然更大的按钮显然更容易点击,但它不一定是最优的。这与许多用户界面使用超大的“调用-行动”按钮和“提交”按钮的做法背道而驰。用户界面联系人表单示例

在菲茨定律模型中,较大的物品并不总是比较小的物品更优。

来源:elliotjaystocks.com。

菲茨定律是一个二进制对数。这意味着一个对象的可用性的预测结果是沿着曲线运行的,而不是直线。

在网页设计中,这意味着一个非常小的对象在尺寸增加20%后会变得非常容易点击,而一个非常大的对象在尺寸增加20%后,其可用性就不会有同样的提升。菲茨定律模型图

菲茨定律模型是一个二进制对数。

这对所有平台的设计师来说都是个好消息。

这种非线性关系保护了我们珍贵而稀缺的像素。我们根据尺寸的非线性增长来衡量可用性收益的能力,使设计师能够构建高效、干净的界面。当你相加的时候记住这个非线性关系图片或表单到一个网站。

这就是为什么企业房地产经纪人®不要使用占据他们网站一半空间的表单来联系他们,因为这是不符合逻辑的。如果越大越好,那么“添加到购物车”按钮将占据屏幕的很大一部分,这将是最有用的按钮。从功能和整体上来说,我们知道这不是真的。

移动和距离

除了目标对象的大小之外,Fitts定律的另一个主要因素是鼠标指针当前位置和需要位置之间的距离。将关键的站点组件放置在很远的地方将增加完成界面中顺序任务所需的时间。我们都知道,将常用的接口项分组在设计中是一种标准做法。

它使寻找相似的对象更容易。例如,注意如何FreshBooks接口,创建类似接口元素的分组。FreshBooks界面将类似的界面元素分组我们可以很清楚地看到菲特定律的作用新的发票按钮。

因为它的大小,它更容易点击。它的位置更接近屏幕顶部,假设鼠标指针从屏幕顶部开始,这意味着它是最容易点击的按钮。这在层次上是有意义的,因为这是您可能希望在此屏幕上执行的主要操作。

此外,彼此相似的按钮之间较短的距离使它们更容易使用。将菲茨定律模型与其他概念(如完形原则视觉层级的权力结构对称人类行为理论等等,你将基于合理和科学的设计决策开发ui。

那么Prime Pixel呢?

优化用户任务的关键是在将用户引导到其他地方之前知道他们来自哪里。不幸的是,对于网页设计师来说,我们已经处于劣势。

在HCI中,有一个像素比屏幕上的所有其他像素都重要。这个超级像素被恰当地命名为'像素因此,它能产生最大的能量。素像素是用于输入设备光标当前所在的空间单点的参考。

对于每一个计算机接口,目标物体的距离总是由它距离素像素的远近来衡量。计算机接口示例桌面软件经常利用这个概念。例如,在Windows中,在桌面软件中单击右键时,通常会出现一个选项上下文菜单,其原点位于主像素处(如下图所示)。

Windows上下文选项菜单然而,网站缺乏知道基本像素确切位置的原生能力,所以网页设计师失去了这种能力。换句话说,素像素的位置是可变的,因为起始点可以在任何地方。即使您使用JavaScript跟踪鼠标光标的位置,您也不希望相对于鼠标光标不断地移动界面项,因为这可能会令人困惑。

然而,我们有固定的可点击项(如提交按钮和超链接)。我们可以使用JavaScript监听事件,如单击和悬停在这些固定项目上。由于web上的交互是由用户输入驱动的,我们可以相当准确地预测当一个新页面加载时,在点击事件发生后鼠标的位置。

例如,如果用户通过顶部的水平导航栏导航到你网站上的一个网页,我们知道下一个网页的主要像素将位于导航栏中项目的可点击区域的某个地方。假设鼠标在单击导航链接后没有移动,我们可以猜测鼠标光标最后单击的位置或悬停的位置是下一个屏幕的主像素。这对连续的用户操作有很大帮助。

这种逻辑可能在多步骤的在线流程中最为强大,如结账或注册web表单。网页设计师应该经常考虑下一步的按钮离最后一个输入框有多远,以及当加载下一个屏幕时,用户光标的位置。多步骤在线网页表单

克服“神奇像素”缺陷

虽然质点像素是计算机屏幕上最重要的位置点,但它只是设计界面时需要考虑的五个“神奇像素”之一。屏幕提供的另外四个神奇像素分别位于屏幕的四个角落。电脑上的四个神奇像素在这一点上,Web设计人员再一次处于劣势;为了我们的利益,它几乎颠覆了这些神奇像素的目的。

屏幕的边角在菲茨定律中扮演着有趣的角色,因为它们提供了现实世界中不存在的边界。从本质上说,这在公式中提供了无限大小的形状,从而产生了巨大的值。因为用户不需要在屏幕的右上角停下来,所以点击关闭窗口的按钮就变成了一项非常简单的任务。

然而,如果关闭窗口的选项是消耗屏幕的右上角,但不包括最靠近边缘的像素,这将变得非常令人沮丧。由于一个网站没有能力消耗任何角落的不动产,我们可以利用的角落从最有价值的资产变成了最不值钱的资产。如果没有屏幕边缘的功能,就会产生无限的大小,网站的角落总是距离主像素最远的点。

把中心当作质点像素

那么,网页设计师如何克服设计中缺少神奇像素的问题呢?突然之间,我们网站的角落变成了放置重要行为元素(例如登录按钮)的糟糕地方。网页设计师如何克服这个问题呢?

首选的方法现在从侧边和角落的焦点转移到屏幕的中心。如果我们算出网站角落到质点的距离的平均值,并将其与屏幕中心的平均距离进行比较,我们会发现中心具有明显的优势。因此,网页设计从以侧边和角落为导向向以中心为导向的自然转变。

这是有道理的:大多数在宽屏上浏览网页的人会告诉你,与那些在屏幕左侧或右侧的网站相比,他们更喜欢那些布局在浏览器中央的网站。网页布局位于屏幕中央当你的网页布局位于屏幕中央时,用户可以更有效地与浏览器软件和操作系统进行交互。

分组的

重要的是保持界面项目之间的相似,以减少它们之间的距离,从而在Fitts定律模型下提高可用性。格式塔的接近性法则,即彼此接近的物品被视为一个群体,进一步强化了这一观点。例如,你的导航栏应该一起运行,在一个项目和另一个项目之间创建无缝转换。

下面,而首页项可能保持与博客项目,在它们之间建立一个不能被点击的间隙,根据Fitts定律降低了菜单的可用性,因为从起点到目标对象的距离增加了。将项目分组以提高可用性

结论

Fitts定律是每个设计师工具箱中都应该使用的模型,无论他们是在数字媒介还是物理媒介中工作。费茨定律坚持认为,有意义的行为应该消耗有意义的空间,这一基本逻辑不容忽视。设计理论的一个美妙之处在于,设计师经常被欢迎尽可能深入地挖掘它的意义。

在可用性测试或研究中利用Fitts定律的设计师将发现有价值的信息,这些信息可以直接影响网站的成功。该模型可以提高您的设计意识,提高您的决策能力。在规划网站重新设计时,使用菲茨定律来捍卫设计决策或引入重新定位某些界面元素的建议。

用不了多久,你就会看到这些核心理论在多大程度上可以预测有效和可用的设计。

相关内容

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!