作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
亚历山大·布里托的头像

亚历山大·布里托

Alex和re是一名UX/UI设计师和战略家,拥有十多年设计杰出电子商务体验的经验. 他曾与Asics等公司合作, 德意志银行(Deutsche Bank), 英特尔, 荷航, 保乐力加, 飞利浦, 丰田, 和沃达丰.

以前在

Backbase
分享

电子商务网站购买流程的小改进可以在吸引访问者成为付费客户时产生很大的影响. 通过将菲茨定律应用于电子商务网站的界面, 设计师可以让用户更容易找到他们想要的东西, 向他们的购物车中添加物品, 最终进行购买.

菲茨定律说,一个人将指针移动到目标上所需的时间是到目标的距离除以目标大小的函数. 从本质上讲,这意味着更大更近的对象更容易与之交互. 这项法律最初是由心理学家保罗·菲茨在1954年提出的, 是谁创造了人类行为的数学模型,并致力于量化人类神经系统的能力.

菲茨定律量化了速度和准确性之间的权衡:任务执行得越精确, 完成的时间就越长. 翻译为UI设计, 这意味着目标——比如“添加到购物车”按钮——离用户的光标或手指越远, 目标越大. 这种方式, 达到目标的动作不需要太多的精确度, 并且可以快速执行.

将UI组件做大的重要性似乎是显而易见的, 但菲茨定律并不是为了视觉效果而增加尺寸. 它是关于减少用户用光标或手指到达组件所需的时间. 经常, 这意味着将UI组件做得更大, 但这也可能意味着部署其他技术,让用户更有效地通过电子商务网站,并最终进行购买.

打破菲茨定律公式

菲茨写的数学方程是 T = a + b Log2 (2d /w) 地点:

  • t =时间.
  • ab 表示从试验观察中得出的回归系数.
  • d 起点和目标之间的距离是多少.
  • w 是目标的宽度吗.
  • log2 表示公式为 对数, Log2 (2d /w) 收益率的 难度指数 (ID),一种量化获取目标难度的测量方法.

用图表证明了菲茨定律方程, 光标和目标之间的距离显示在X轴上,移动时间显示在Y轴上. 图上的线向上倾斜.

对数方程表示 的关系 目标大小或距离与反应时间之间的关系:小目标的小尺寸或距离增加可以使它们更容易获得, 然而,对于较大的目标,尺寸或距离的小幅增加不会使它们更容易到达.

根据这个等式,电子商务 UI设计人员 必须考虑两件事:相对于网站上其他项目的界面目标的大小以及该目标与光标的距离. 将菲茨定律应用于电子商务意味着要制定一个容易发现并与之互动的目标,这样客户就可以快速完成他们的任务,并进入购买过程的下一步.

菲茨定律与电子商务UI设计:完美契合

菲茨定律还帮助产生了素数像素的概念——用户光标在任何给定时刻的位置. 电子商务UI设计师的目标是尽可能缩短从主要像素到目标的距离. 但是,由于基本像素是可变的(谁知道用户到达页面时将光标放置在哪里)?), 有几种技术可以控制电子商务页面的固定组件,以便将它们放置在尽可能接近用户主要像素的位置.

两台电脑并排的插图. 左边是一个指向按钮的光标. 在右边, 按钮上方有一个较大的虚影形状,显示了当用户到达页面时光标应该落在的主要像素区域.
当Fitts定律应用于电子商务UI时, 设计师必须预测用户到达页面时的主要像素是什么, 然后把目标放在附近. 右边覆盖的绿色条表示用户的主要像素可能在哪里.

高效产品发现的设计

在成功的电子商务网站上,产品很容易找到. 使用Fitts定律提高产品发现的一种方法是在主页的英雄部分添加搜索功能. 人们倾向于扫描网页 可预测的模式,以及扫描行为和光标移动 密切 相关.

将搜索栏放置在访问者可能会注视的地方——从而定位他们的光标以创建其主要像素——可以显著减少他们为输入搜索查询而移动光标所需的距离. 此外,实施预测性搜索可以帮助用户更快地找到目标列表.

优化电子商务菜单

任何成功的电子商务网站的一个关键特征是菜单,它允许客户有效地探索并找到他们正在购买的类别和产品. 通过采用一个自动下拉菜单来应用Fitts定律,当客户将鼠标悬停在一个内容类别上时,该菜单就会出现. 避免在一个列表中放置太多的项目,这样用户就不必移动光标太远来选择一个项目. 另外, 采用良好的信息架构和产品照片,为用户提供更大的目标区域,缩短光标在进行选择时需要移动的距离.

增加行动召唤按钮的表面积

最明显的应用菲茨定律的地方是触发购买的CTA按钮. Make the button large so that it st和s out 和 is easy to click; acquiring a larger target requires less accuracy. 此外,通过包含按钮使其明显 在上面, 应用可接近对比度, 并将其放置在离其他组件足够远的地方,这样用户就不会点击错误的元素. 进一步提振用户决策信心,确保 缩微复制 在按钮上是清晰和有指导意义的.

还要考虑将CTA按钮放置在屏幕边缘,以最大限度地利用所谓的魔法像素, 屏幕上的区域,用户可以快速而不精确地导航,同时仍然击中目标.

让一些动作比其他动作更难

在大多数情况下,电子商务UI设计师运用Fitts定律来加速用户的交互. 然而,在某些情况下,他们可能希望放慢速度. 例如, 设计师可能会为远离主像素的产品附加组件执行小复选框(在这种情况下可能是“添加到购物车”按钮)。. 这样做会迫使用户在选择其他产品时更加精确, 确保他们不会无意中购买不需要的物品.

Fitts定律适用于移动设备

将Fitts定律应用于移动设备的电子商务UI设计, 设计师必须考虑到一些限制因素.

手指是光标

在移动设备上,没有游标. 用户依靠他们的手指 与界面互动. 然而,手指较粗,因此不如光标精确. 移动应用的触摸目标应该比网站更大. 考虑一个横跨屏幕宽度的CTA按钮, 并增加它的内边距,使其更可点击.

手机的使用通常是单手的

很多时候,用户用一只手拿着移动设备,用大拇指操作. 这通常会限制用户与屏幕底部进行交互,除非他们用双手触摸屏幕顶部. 考虑移动电子商务的UI设计, 设计师应该把他们想要的目标放在拇指的自然触及范围内.

三个移动设备展示了人类拇指在智能手机上导航时可以触及的典型区域. 左图显示的是左手拇指可以到达的区域, 中间的图显示了两个拇指可以到达的区域, 最右边的图显示了右手拇指可以到达的地方. The area that is comfortable to reach is indicated in green; above it, 蓝色的, 是拇指伸到的地方吗. 上面的黑色区域是最难进入的区域.
在移动电子商务UI中运用Fitts定律, 设计师必须考虑到人的拇指通常能伸到多远. (图片来源:Smashing Magazine)

考虑注意事项

当应用菲茨定律时, 有两个关键问题值得考虑:当用户登陆这个页面时,他们想要完成的主要目标是什么? 以及:我怎样才能让用户更容易实现这个目标?

Fitts’ Law isn’t a silver bullet; there will be instances when it makes sense to apply it 和 times when other concepts are more appropriate. 以电子商务为例, 同样值得考虑的是是否关注网站的另一个方面——例如, 内容与观众的沟通有多好——能产生更好的效果吗.

还有一种危险是,菲茨定律可能被用作 黑暗的模式就像有时出现在搜索引擎页面上的广告一样. 通常, 这些广告出现在页面的顶部,就好像它们本身就是搜索结果一样. 这是菲茨定律的一个例子, 由于AD与最后一次交互的组件之间的距离很近. 虽然在相关搜索结果旁边显示公司广告有很多很好的用例, 这种设计决策经常被想要误导用户的竞争对手所劫持.

遵循菲茨定律获得电子商务的成功

尽管菲茨定律是在互联网出现几十年前发展起来的, 这是数字产品设计中很有价值的原则. 今天, 设计师可以利用菲茨定律,让电子商务客户更容易浏览网站,从而提高收入, 找到产品, 买东西.

了解基本知识

  • 什么是菲茨定律?为什么它很重要?

    菲茨定律说,一个人将指针移动到目标上所需的时间是到目标的距离除以目标大小的函数. 将Fitts定律应用于电子商务UI设计可以通过让你的客户更快地浏览你的网站来促进在线销售.

  • 设计中的菲茨定律是什么?

    电子商务网站UI设计中的菲茨定律使设计师能够缩短用户找到他们想要的东西所需的时间, 把它添加到他们的购物车中, 检查一下.

  • 如何使用菲茨定律来预测业绩?

    通过将Fitts定律应用于电子商务网站的UI设计, 设计师可以缩短用户浏览网站所需的时间. 能够更快地浏览网站的访问者有更高的机会成为付费客户.

聘请Toptal这方面的专家.
现在雇佣
亚历山大·布里托的头像
亚历山大·布里托

位于 Culemborg,荷兰

成员自 2016年10月18日

作者简介

Alex和re是一名UX/UI设计师和战略家,拥有十多年设计杰出电子商务体验的经验. 他曾与Asics等公司合作, 德意志银行(Deutsche Bank), 英特尔, 荷航, 保乐力加, 飞利浦, 丰田, 和沃达丰.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

以前在

Backbase

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.