电子商务网站购买流程的小改进可以在吸引访问者成为付费客户时产生很大的影响. By applying Fitts’ Law to an e-commerce site’s interface, designers can make it easier for users to find exactly what they’re looking for, add items to their carts, ultimately make purchases.

菲茨定律说，一个人将指针移动到目标上所需的时间是到目标的距离除以目标大小的函数. Essentially, it means that objects that are larger 和 closer are easier to interact with. The law was originally conceived in 1954 by psychologist Paul Fitts, 是谁创造了人类行为的数学模型，并致力于量化人类神经系统的能力.

菲茨定律量化了速度和准确性之间的权衡:任务执行得越精确, the longer it will take to complete. Translated for UI design, 这意味着目标——比如“添加到购物车”按钮——离用户的光标或手指越远, the larger that target has to be. That way, the act of reaching the target does not require much precision, can be executed quickly.

The importance of making a UI component larger may seem obvious, but Fitts’ Law is not about increasing size for visual impact. 它是关于减少用户用光标或手指到达组件所需的时间. 经常, that means making a UI component larger, 但这也可能意味着部署其他技术，让用户更有效地通过电子商务网站，并最终进行购买.

Breaking Down the Fitts’ Law Formula

The mathematical equation that Fitts wrote is t = a + b log2 (2 d/w) 地点:

• t equals time.
• a 和 b represent regression coefficients that are derived from observation of the tests.
• d is the distance between the starting point 和 the target.
• w is the width of the target.
• log2 indicates that the formula is logarithmic, log2 (2 d/w) yields the Index of Difficulty (ID), a measurement that quantifies how hard it is to acquire the target.

The logarithmic equation indicates the relationship 目标大小或距离与反应时间之间的关系:小目标的小尺寸或距离增加可以使它们更容易获得, whereas a small increase in size or distance for larger targets won’t make them much easier to reach.

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

Fitts’ Law 和 E-commerce UI 设计: A Perfect Fit

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

设计 for Efficient Product Discovery

On successful e-commerce sites, products are easy to find. 使用Fitts定律提高产品发现的一种方法是在主页的英雄部分添加搜索功能. 人 tend to scan web pages in predictable patterns, scanning behavior 和 cursor movements are closely correlated.

将搜索栏放置在访问者可能会注视的地方——从而定位他们的光标以创建其主要像素——可以显著减少他们为输入搜索查询而移动光标所需的距离. In addition, implementing predictive search can help bring users to target listings more quickly.

Optimize E-commerce Menus

任何成功的电子商务网站的一个关键特征是菜单，它允许客户有效地探索并找到他们正在购买的类别和产品. 通过采用一个自动下拉菜单来应用Fitts定律，当客户将鼠标悬停在一个内容类别上时，该菜单就会出现. Avoid placing too many items in one list so users don’t have to move the cursor far to select an item. Additionally, 采用良好的信息架构和产品照片，为用户提供更大的目标区域，缩短光标在进行选择时需要移动的距离.

Increase the Surface Area of Call-to-action Buttons

The obvious place to apply Fitts’ Law is to a CTA button that will trigger a purchase. Make the button large so that it st和s out 和 is easy to click; acquiring a larger target requires less accuracy. Additionally, make the button obvious by including it above the fold, applying accessible contrast, placing it far enough away from other components that users don’t click on the wrong element. T0 further boost users’ decision-making confidence, ensure that microcopy on the button is clear 和 instructive.

还要考虑将CTA按钮放置在屏幕边缘，以最大限度地利用所谓的魔法像素, areas of the screen where a user can navigate quickly 和 imprecisely while still hitting the target.

Make Some Actions Harder Than Others

In most cases, e-commerce UI designers apply Fitts’ Law to speed up users’ interactions. However, in some cases they may want to slow them down. For instance, 设计师可能会为远离主像素的产品附加组件执行小复选框(在这种情况下可能是“添加到购物车”按钮)。. Doing so would force users to be more precise when selecting additional products, ensuring they don’t purchase unwanted items inadvertently.

Fitts’ Law for Mobile Devices

In applying Fitts’ Law to e-commerce UI design for mobile devices, designers must factor in some constraints.

Fingers Are the Cursors

On mobile devices, there are no cursors. Users rely on their fingers to engage with the interface. However, fingers are thicker 和 therefore less precise than cursors. Touch targets should be bigger for mobile applications than they are for websites. Consider a CTA button that spans the width of a screen, increase its padding to make it more clickable.

Mobile Use Is 经常 One-h和ed

Much of the time, users hold their mobile devices in one h和 和 operate them with their thumbs. 这通常会限制用户与屏幕底部进行交互，除非他们用双手触摸屏幕顶部. In considering UI design for mobile e-commerce, designers should place their desired targets within the natural reaching range of the thumb.

Consider the Caveats

When applying Fitts’ Law, 有两个关键问题值得考虑:当用户登陆这个页面时，他们想要完成的主要目标是什么? And: How can I make that goal easy for users to achieve?

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. In the case of e-commerce, it is also worth considering whether focusing on another aspect of the site—for instance, how well the content speaks to the audience—could yield better results.

There is also the danger that Fitts’ Law could be used as a dark pattern, as sometimes happens with ads that appear on search engine pages. Typically, these ads are presented at the top of the page as though they are search results themselves. This is an example of Fitts’ Law, as the distance between the ad 和 the component last interacted with are near one another. While there are many good use cases for displaying a company’s ad next to a relevant search result, this design decision is often hijacked by competitors that want to misdirect users.

Follow Fitts’ Law for E-commerce Success

Although Fitts’ Law was developed decades before the advent of the internet, it’s a valuable principle in digital product design. 今天, 设计师可以利用菲茨定律，让电子商务客户更容易浏览网站，从而提高收入, find products, make purchases.