Improving Usability with Fitts’ Law

May 17 2011 by Jason Gross | 18 Comments

Improving Usability with Fitts' Law

Back in 1954, psychologist Paul Fitts published an article the detailed his theory on human mechanics as it pertained to aimed movement. It was Fitts’ observation that the action of pointing to or tapping an target object could be measured and predicted mathematically.

Fitts stated that the size of the target object along with its distance from the starting location could be directly measured, allowing him to model the ease at which a person could perform the same action with a different target object.

In 1954, this theory had no application for computers yet; however, it shouldn’t take a modern designer long to discover the powerful meaning this formula has in the context of user interfaces.

Because of this, Fitts’ law has become a staple in the field of human-computer interaction (HCI), and has become one of the most accepted guidelines in the industry.

Fitts’ law, at its simplest form, is common sense. The bigger an object and the closer it is to us, the easier it is to move to.

Fitts’ law is a model that can help designers make educated decisions in user interfaces and web page layouts. It can be used in conjunction with design theories such as visual weight to give user interface items proper hierarchy and placement.

Consider the potential financial gain generated by the proper design and placement of interactive buttons on e-commerce websites (such as add-to-cart buttons). For example, a study conducted on an e-commerce site showed a 34% increase in conversions simply by relocating the site’s add-to-cart button to the left navigation menu. Fitts’ law can be used as an aid to make educated decisions on the size and placement of user interface elements.

How Fitts’ Law Works

Fitts’ law is centered around a mathematical equation that is used to illustrate the time it takes to reach a target object. A target object, in the context of UIs, can be any interactive element, such as a submit button, a hyperlink, and an input field in a web form. The idea is this: The quicker you can reach a target object, the more convenient and easy it is to use.

Here is the equation:

In the equation above:

  • time is the amount of time required to complete the movement
  • a and b are empirically determined regression coefficients, which is basically a fancy way of stating they are values gained from direct observation that build a slope.
  • distance is a measurement from the starting point to the end point (target object)
  • width is the width of the target object

Note that only the width dimension of the target object is taken into consideration; height and depth is disregarded in a 2D/plane medium such as monitor screens. Therefore, an object that’s 500 pixels wide but only 2 pixels tall doesn’t seem like a usable target object since it’ll be more difficult to click on; use your better judgment and consider replacing width with height if it makes sense. Also, use the model in conjunction with other design theories you already know.

Fitts’ law is applied one axis at a time. However, in user interfaces on a 2D/plane, it’s important to remember that both the height and width of an object play a role in the object’s ease of use.

Bigger Is Not Always Better

One of the most important lessons we can take from Fitts’ law is that, while a larger button is clearly easier to click on, it isn’t necessarily the most optimal. This is counter to what many user interfaces do with their oversized call-to-action buttons and submit buttons.

Bigger items aren’t always more optimal than smaller items in the Fitts’ Law model. Source: elliotjaystocks.com.

Fitts’ law is a binary logarithm. This means that the predicted results of the usability of an object runs along a curve, not a straight line. In web design, this means that a very small object will become significantly easier to click when given a 20% size increase, while a very large object will not share the same boost in usability when given the same 20% boost in size.

The Fitts’ law model is a binary logarithm.

This is great news for designers across all platforms. This non-linear relationship protects our precious and scarce pixels. Our ability to measure gains in usability based on a non-linear increase of size allows designers to build efficient and clean interfaces.

If bigger was consistently better, we could expect to see that "Add to Cart" buttons that take up a significant portion of our screens will be the most usable. Functionally and holistically, we know this isn’t true.

Movement and Distances

Apart from size of the target object, another primary factor in Fitts’ law is the distance between where the mouse pointer currently is and where it needs to be.

Placing key site components far apart will increase the amount of time required in completing sequential tasks in your interface.

We all know that grouping common interface items together is a standard practice in design. It makes finding similar objects easier.

For example, notice how, in the FreshBooks interface, groupings of similar interface elements are created.

We can see Fitt’s law in action most clearly in the New Invoice button. Because of its size, it’s easier to click on. Its location closer to the top of the screen, assuming that the mouse pointer starts at the top of the screen, means that it’s the easiest button to click on. This makes sense hierarchically because this is the primary action you’ll likely want to perform on this screen.

Additionally, the shorter distances between buttons that are similar to each other make them easier to use.

Combine and negotiate the Fitts’ law model with other concepts such as Gestalt principles, power structure for visual hierarchy, symmetry, human behavior theories, etc., and you’ll be developing UIs based on reasonable and scientific design decisions.

What About the Prime Pixel?

The key to optimizing user tasks is to know where the user is coming from before directing them elsewhere. Unfortunately, for web designers, we are already at a disadvantage here.

In HCI, there is a pixel that is more important than all of the other ones on the screen. This super pixel is aptly named the prime pixel, and as such, it yields the most power.

The prime pixel is the reference used for the single point of space that your input device’s cursor is currently on. For every computer interface, the distance of a target object will always be measured by how far it is located from the prime pixel.

Desktop software frequently takes advantage of this concept. For example, in Windows, any time you right-click inside desktop software, a contextual menu of options usually appears that has its point of origin at the prime pixel (as illustrated below).

However, websites lack the native ability to know exactly where the prime pixel is, so a web designer loses out on this power. In other words, the prime pixel’s location is variable since the starting point can be anywhere. Even if you tracked the position of the mouse cursor using JavaScript, you wouldn’t want to constantly move interface items relative to the mouse cursor since that can become confusing.

What we do have, however, are fixed clickable items (such as submit buttons and hyperlinks). We can listen to events such as clicking and hovering on these fixed items using JavaScript. Since interaction on the web is driven by user input, we can make some pretty accurate predictions on where the mouse will be located when a new page is loaded, after a click event happens.

For example, If a user is navigating to a web page in your website via a horizontal navigation bar at the top, we know that the prime pixel for the next web page will be located somewhere in the clickable regions of items in the navigation bar. Assuming the mouse isn’t moved after clicking on a navigation link, we can guess that the last clicked or hovered position of the mouse cursor is the prime pixel for the next screen. This helps a lot in sequential user actions.

This logic may be most powerful in multi-step online processes such as a check out or sign up web form. A web designer should always consider how far the button for the next step of the process is from the last input field, as well as where that will place the user’s cursor when the next screen loads up.

Overcoming "Magic Pixel" Deficiency

While the prime pixel is the most important location point on a computer screen, it’s just one of five "magic pixels" that come into consideration when designing an interface.

The four other magic pixels offered up by our screen come at each of the four corners of the screen.

Web designers are, yet again, at a disadvantage here; for our sake, it almost inverts the purpose of these magic pixels.

The sides and corners of a screen play an intriguing role in Fitts’ law because they provide a boundary that wouldn’t exist in the real world.

Essentially, this provides a shape of unlimited size in the formula resulting in enormous value. Since a user doesn’t have to stop at the right hand corner of their screen, for example, hitting the button that closes the window becomes a very simple task.

However, if the option to close the window were to consume the top right hand corner of the screen but not include the pixels closest to the edge, it would become quite frustrating to use.

Since a website lacks the ability to consume any of the corner real estate, the corners that are available to us go from being the most valuable assets to the least.

Without the feature of a screen edge that creates infinite size, the corners of a website are consistently the furthest points from the prime pixel.

Treat the Center as the Prime Pixel

So how does a web designer overcome the lack of magic pixel power in their designs?

All of the sudden, the corners of our website have become a terrible place to put elements for important behaviors such as login buttons, for example. How do web designers overcome this?

The preferred method now shifts from being side- and corner-focused, to the center of the screen.

If we averaged out the distance the corners of our website have from the prime pixel and compared them to the average distance of the center of the screen, we would find that the center has a distinct advantage.

So web design sees a natural shift from being side- and corner-oriented to being centered.

This makes sense anecdotally: Most people who browse the web on widescreen displays can tell you that they prefer websites whose layouts are centered in the browser, when compared to those that stick to the left or right of the screen.

When your web layout is located at the center of the screen, the user can interact with the browser software and operating system much more efficiently.

Grouping Items

It’s important to keep interface items that are similar in close proximity to each other to reduce the distance between them, and thereby improving usability under the Fitts’ law model. The Gestalt law of proximity, which states that items close to each other are perceived as a group, further reinforces this idea.

For example, your navigation bar should run together, creating a seamless transition between one item and another. Below, while the Home item might retain the same distance from the Blog item to its right, building a gap between them that cannot be clicked decreases the usability of the menu by Fitts’ law, since the distance from the starting point to the target object is increased.

Conclusion

Fitts’ law is a model that should be in the toolbox of every designer, whether they work in digital or physical mediums. The basic logic found in Fitts’ law that insists that meaningful actions should consume meaningful space cannot be ignored.

One of the beautiful things about design theory is that a designer is often welcome to dig into its meaning as deep as they like. A designer who takes advantage of Fitts’ law in usability testing or research will discover valuable information that can directly impact the success of a website.

The model can sharpen your design sense and improve your decision-making. Use Fitts’ law to defend design decisions or introduce a suggestion to relocate certain interface elements when planning a site redesign. It won’t be long before you see how often these core theories can predict effective and usable designs.

Related Content

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

18 Comments

Malyna

May 17th, 2011

Great insights and application for website usability. We conduct website usability testing and it never ceases to amaze us how our results support the movement, distance, and grouping concepts.

Manuel

May 17th, 2011

Very insightful post. If anything, this finally sheds some light on how the corners of a website are the least preferred spot for commonly-clicked options.

That, and also reinforces the notion that centered layouts are more usable.

Isiah

May 17th, 2011

This is a great piece of insight into the intricacies of usability.

S.K. (Insfired)

May 17th, 2011

Definitely a lot to learn and go by here, thanks for elaborating this so clearly!

Michael Tuck

May 17th, 2011

Excellent. I came across Fitts’ Law when I was doing a Six Revisions article on gestaltism in design, but moved right past it without exploring the concept more fully. I’m glad you covered it here.

Young

May 17th, 2011

What a wonderful and insightful article. Of course it all makes sense when you think about it, but as a former scientist I appreciate concept equations. The idea of the prime pixel is probably extremely important designing for different groups… As you mention desktop applications, I remembered a jQuery plugin I have implemented in a past project: http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

Certainly not for every project (one may even argue it takes away usability by taking away the familiar right click menus) but I thought it might be worth sharing.

LauraLynn

May 18th, 2011

Looks like a great article. I am studying usability right now. I will be book marking this article to come back to. I’ll want to make sure I have time to read this thoroughly.

Irina

May 18th, 2011

Great article, thanks for sharing. I would add though that usability is not all about position and size, it is also about expectations and appearance. Most users expect links to be underlined or highlighted etc. A web designer needs to be careful when using contrasting colours, as people with learning difficulties such as dyslexia can find it difficult to read. First impression is also important as people make up their minds about a website within 5 seconds of the page loading.

Avangelist

May 18th, 2011

Another really good article from Six Revisions. Things are picking up this week with some really informative subjects with strong content.

I had not looked at these concepts before, now if I can avoid re-writing everything I have ever done…

Jeffrey Bennett

May 19th, 2011

Wow! What a great article! Thanks for sharing. :)

Ameya

May 20th, 2011

Makes sense. Before reading this article, I never considered the time is so important in context of completion of certain event. For e.g. Submit form. I am sure having larger button will certainly increase user experience as I don’t need to concentrate and take the mouse curson to specific relatively small button area. Good Post :)

Ameya

Stuart

May 21st, 2011

Which is the correct equation for Fitt’s Law? The one here uses (2 x D/W) but Wikipedia says (D/W + 1).

Alex

May 22nd, 2011

Great article, thanks for sharing.

I would like to point out that there is an extension to the “5 magic pixels” concept. In fact, a screen offers more than that:
- 4 edges (the vertical and horizontal lines that create the boundary of the screen)
- 4 corners (the intersections of those lines)

It is easy to hit an edge, and at the same time it is very easy to hit a corner, rather than an edge.

This doesn’t really apply to web-sites, but this is a common practice in desktop applications.

Examples:
- Windows 7 uses the edges to resize a window (left side, right side or full screen)
- Windows 7 uses the lower right corner as a ‘show desktop’ trigger
- Compiz on Linux starts an Expose-like window switcher if you move the mouse to a corner

Bernard Farrell

May 23rd, 2011

Was going to point out about the edges, but @Alex beat me to it. Tog also has a useful article about Fitt’s Law that’s worth reading.

Nicky

May 24th, 2011

hi, with regards to Grouping Items, you might be reducing movement time to click on either Home or Blog but what about accuracy i.e. clicking the right button when there’s no space between them? particularly with a touchscreen interface?

Zia

May 24th, 2011

Great information..

Okyere Adu-Gyamfi

May 26th, 2011

Great article, it is still an area that web designers and developers need to learn to incorporate much more in their actual client work. since it helps to satfisfy clients all the more.

Justin Mifsid

September 6th, 2011

Great article Jason. I really admired how you blended the theoretical with the practical aspect. Wish HCI books had this type of explanation :) Cheers and well done!

Leave a Comment

Subscribe to the comments on this article.