利用菲茨定律：电子商务的用户界面设计原则

在吸引访问者成为付费客户时，对电子商务网站购买流程的小幅改进可能会产生重大影响。 通过将菲茨定律应用于电子商务网站的界面，设计师可以让用户更容易准确地找到他们正在寻找的东西，将商品添加到他们的购物车中，并最终进行购买。

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

菲茨定律量化了速度与准确性的权衡：任务执行得越精确，完成所需的时间就越长。 翻译为 UI 设计，这意味着目标（例如“添加到购物车”按钮）离用户的光标或手指越远，目标就必须越大。 这样，达到目标的动作不需要太多的精确度，并且可以快速执行。

使 UI 组件变大的重要性似乎显而易见，但菲茨定律并不是为了增加视觉冲击力而增加尺寸。 这是关于减少用户使用光标或手指到达组件所需的时间。 通常，这意味着使 UI 组件更大，但也可能意味着部署其他技术，使用户能够更有效地浏览电子商务网站并最终进行购买。

打破菲茨定律公式

Fitts 写的数学方程是t = a + b log2 (2 d/w) ，其中：

• t等于时间。
• a和b表示从测试观察得出的回归系数。
• d是起点和目标之间的距离。
• w是目标的宽度。
• log2表示公式是对数的， log2 (2 d/w)产生难度指数 (ID)，这是一种量化获取目标的难度的度量。

对数方程表示目标大小或距离与反应时间之间的关系：小目标的小尺寸或距离增加可以使它们更容易获取，而较大目标的大小或距离小幅增加不会使它们更容易捕获抵达。

根据这个等式，电子商务 UI 设计人员必须考虑两件事：界面目标相对于网站上其他项目的大小以及该目标与光标的距离。 将菲茨定律应用于电子商务意味着使目标易于发现和交互，以便客户可以快速完成任务并进入购买流程的下一步。

Fitts 定律与电子商务 UI 设计：完美契合

菲茨定律还帮助提出了素像素的概念——用户光标在任何给定时刻的位置。 电商UI设计师的目标是尽可能缩短主像素到目标的距离。 但是由于素数像素是可变的（谁知道用户到达页面时将光标准确地放在哪里？），有几种技术可以控制电子商务页面的固定组件，以便将它们放置得尽可能接近可能是用户的主要像素可能在的位置。

高效产品发现设计

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

将搜索栏放置在您希望访问者注视的区域（从而定位他们的光标以创建他们的主要像素）可以显着减少他们移动光标以输入搜索查询所需的距离。 此外，实施预测搜索可以帮助用户更快地找到目标列表。

优化电子商务菜单

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

增加号召性用语按钮的表面积

应用菲茨定律的明显地方是触发购买的 CTA 按钮。 使按钮变大，使其突出并易于点击； 获取更大的目标需要更少的精度。 此外，通过将按钮包含在折叠上方、应用可访问的对比度并将其放置在与其他组件足够远的位置以使用户不会单击错误的元素，从而使按钮变得明显。 T0进一步增强了用户的决策信心，确保按钮上的微文案清晰有指导意义。

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

让某些行动比其他行动更难

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

移动设备的菲茨定律

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

手指是光标

在移动设备上，没有光标。 用户依靠他们的手指与界面互动。 但是，手指较粗，因此不如光标精确。 移动应用程序的触摸目标应该比网站更大。 考虑一个跨越屏幕宽度的 CTA 按钮，并增加其填充以使其更易于点击。

移动使用通常是单手的

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

考虑注意事项

应用菲茨定律时，有两个关键问题值得考虑：用户登陆此页面时想要实现的主要目标是什么？ 并且：我怎样才能让用户轻松实现这个目标？

菲茨定律不是灵丹妙药。 在某些情况下应用它是有意义的，有时其他概念更合适。 在电子商务的情况下，也值得考虑关注网站的另一个方面——例如，内容对受众的影响程度——是否会产生更好的结果。

菲茨定律也有可能被用作黑暗模式的危险，就像出现在搜索引擎页面上的广告有时会发生的那样。 通常，这些广告显示在页面顶部，就好像它们本身就是搜索结果一样。 这是 Fitts 定律的一个示例，因为广告和最后一次交互的组件之间的距离彼此接近。 虽然有很多很好的用例可以在相关搜索结果旁边显示公司的广告，但这种设计决策经常被想要误导用户的竞争对手劫持。

遵循 Fitts 的电子商务成功法则

尽管菲茨定律是在互联网出现前几十年发展起来的，但它在数字产品设计中是一个有价值的原则。 如今，设计师可以利用菲茨定律通过让电子商务客户更轻松地浏览网站、查找产品和进行购买来增加收入。

Toptal 博客的进一步阅读：

• 铺平购买之路——电子商务用户体验最佳实践
• 着陆页最佳实践（带信息图）
• 如何设计转换的登陆页面
• 在 Figma 中构建和扩展设计系统：案例研究