How To Improve Usability With Fitts’ and Hick’s Laws

In April of 1996 the National Highway Traffic Safety Administration (NHTSA) began investigations over complaints about unintended acceleration in Jeep Cherokees. Similar acceleration problems had been found in other automobiles from different companies dating back to the early 80’s. Chrysler blamed it on driver error. They could prove people were hitting the accelerator instead of the brake pedal. However, when looking deeper what first seemed like driver error was actually a design error.

Due to the larger transmission hump both acceleration and brake pedals were moved a few inches to the left. This increased the distance between the foot and brake pedal making it more difficult to apply the brakes. People were mistakenly stepping on the acceleration pedal when they meant to step on the brakes. This was a design error and specifically a violation of Fitts’ Law.

Fitts’ Law

Fiits’ law states that the time required to move to a target is a function of the target size and distance to the target.

In the case of the Jeep Cherokee, the increased distance combined with a break in convention made it difficult for people to step on the brake when they wanted to. Many websites also make it difficult for people to take an intended action, though fortunately with less dire consequences.

Fitts’ Law applies to rapid pointing movements and not continuous movement. Pointing movements (such as moving a mouse over a link and clicking it) typically begin with a quick movement toward the target (ballistic movement) followed by fine-tuning movements (homing movements) over the target. Homing movements usually take the most time and are generally responsible for most causes of any error.

When we design web pages we often want people to click on something. If we want someone to take action and clicking it only makes sense to make it as easy for them to click as possible. Fitts’ Law gives us some ideas for how we can do that and can be expressed mathematically as:

Fitts’ Law: T = a + blog2(1 + D / W)

The above is the mathematical formula for Fitts’ Law. We don’t need to understand it in detail. The important points to consider are that time (T) is a function of distance (D) and width (W) and that the relationship is logarithmic. The logarithmic relationship means that after some point Fitts’ Law will have diminishing returns.

When it comes to design what can we do to reduce the time to acquire the target. Distance can be difficult to control since we generally won’t know where someone’s mouse has come to rest. However one reason for the rise in navigation down the right hand side of a page is that most people are right handed and with scroll bars along the right edge of the browser window, their cursor is probably also at rest on the right side of the page. At least that’s the theory.

Where we have greater control is in the size of links and buttons and clickable objects in general. Fitts’ Law is technically about movement in a single direction. The formula above mentions width and not area, but for our purposes bigger will be better to a degree. Remember after a point you’ll see diminishing returns. Increasing the size of a button from 75% of the page to 80% of the page likely isn’t going to make it easier to click. Increasing it from 1% of the page to 5% probably will.

Aside: If you’re interested in helping with an experiment measuring your motor skills in pointing and clicking and how they compare to Fiits’ law you can take this web based test.

Hick’s Law

Another law that has implications in website navigation and getting people to take action is Hick’s law which states that the time it takes to make a decision increases as the number of alternatives increases. In other words the more options you offer the less likely any one of those options will be taken.

Think of a typically ecommerce site. How often do you see them listing as many categories as possible in a sidebar menu or trying to cram as many products as possible on the home page? Neither makes sense when considering Hick’s law as more options leads to less actions. More choices means less sales.

A better approach would be to organize products into a hierarchy with a few high level categories shown in the sidebar and to present a select few products for the home page.

Hick’s law can be expressed mathematically as:

Hick’s Law: T = blog2(n + 1)

Again we won’t concern ourselves with details, except to say that the time it takes to make a decision (T) is dependent on the number of choices (n) and that once again this relationship is logarithmic. More choices means more time to make a decision making it less likely any one of the provided options will be chosen.

As with Fitts’ law we have diminishing returns after a point. The more complex the decision, the less Hick’s law will apply. It does work well for simple things like navigating a website.

If you’ve ever visited a landing page sales letter without navigation of any kind, now you know why there was no navigation present. The page leads you into exactly 2 options. Buy the product being sold or don’t buy it. Adding any other options like navigational links would only decrease the probability that you would buy the product.

Applying Fiits’ Law and Hick’s Law to Web Design

Laws and principles are all well and good, but we need to know how to apply them practically if they’re going to help us create better designs. With both Fitts’ and Hick’s laws there are a variety of things we can do to help people decide to take action and then help them take that action.

Applying Fitts’ Law

The conclusions to draw from Fitts’ law are bigger and closer. The former is easy to control in our designs, while the latter is a bit more difficult, though not impossible.

Make clickable objects larger

Make clickable areas lager to reduce homing movements. With buttons and clickable icons this is easy. Just make them bigger. With text links you have some options and design choices.

• Link one
• Link two

The two links above are similar to what you might find in a simple menu of links. However if you mouse over them you’ll notice only the text of link one is clickable, whereas the entire area behind link two is clickable, increasing the size of the link and reducing the time to click.

This was done simply by adding display: block to the <a> tag in the second link causing the link to fill up the entire space of the list item (<li>) containing it.

{code type=html}

• Link one
• Link two

{/code}

{code type=html}
ul {
list-style:none;
width:250px;
border:1px solid #333;
margin:0;
padding:0
}

li#link-one {
padding:5px;
margin:0;
background:yellow;
border-bottom:1px solid #333
}

li#link-two {
padding:5px;
margin:0;
background:yellow
}

li#link-two a {
display:block
}
{/code}

Failure to do the above is perhaps the most common offender of Fitts’ law you’ll see in websites and there’s no excuse for it.

Another option might be to use the Apple style fish eye effect or simply increase the size of the link when hovering over it. This probably won’t work everywhere, but there are sites that effectively use this in practice

With radio buttons on forms usually only the very small radio button is clickable.

choose me
choose me instead

The first radio button above requires you to click inside the button. With the second you can also click the text “choose me instead” because I’ve added an id to the input and a label to the text. You should be doing this for accessibility reasons anyway.

{code type=html}
choose me
choose me instead
{/code}

Reduce the distance to clickable objects

Reducing the distance to the target is harder to do as we don’t know where the visitor’s mouse will be located at any point in time, however we can do a few things to perhaps make it more likely the mouse will be nearer our target action.

• Place navigational controls near each other. Don’t make people click something then move across the page to click something else and then back to where they started to click a third item. This would be particularly important in any step-by-step process that requires clicking from one step to the next.
• Control visual flow across your design. While mostly about leading the eyer, some people do use their mouse as a way to keep track of where the eye is looking. By leading the eye you may also be leading the hand and mouse.
• Use gestalt principles to group related items actions. Again this is more about the eye than the hand, but if there are several actions your visitor might take in a short amount of time (clicking a product image and then clicking the add to cart button), place them near each other.

The above ideas won’t guarantee you’ll be reducing the distance to the target of course. They might increase the odds that distance will be reduced for some. I wouldn’t alter a design just for the sake of that increased possibility, but it’s worth considering when your design allows.

One thing that’s hard to do in websites, but done all the time in operating systems is placing menus against the edge of the window. This is an example of a constraint. Because you can’t move past the edge of the window, because you’re constrained by the boundary, you effectively increase the size of the menu infinitely in one direction.

In the image above the mouse has reached the edge of the window effectively creating an infinite edge.

With a website this is hard to do since you can’t force people to have their browsers against the edge of the window and even if you could you’d still have to deal with the browser window itself which would allow movement outside your page.

Applying Hick’s Law

The conclusion from Hick’s law is to provide less options or present only those options that are necessary or required to complete the given task.

Instead of a long list of menu options, think about how you can group them into as few high level choices as possible. Present those few options in common places like navigation and only present more options as someone digs deeper into one level of categorization. 6 – 8 main navigational links has been a general guide for as long as I can remember.

Holding back some options until necessary (progressive disclosure) is a good use for 3-dimensional layering like you see in context menus. Context menus also work well in applying Fitts’ law as they reduce the distance to target to 0 or near 0.

When asking people to fill out a poll or to rate something try 3 options, most, least, and everything else. That’s about all people can really distinguish anyway so adding more choices only makes things harder without you getting any extra beneficial information.

When creating multiple packages for your product or services consider reducing the amount of offerings. Again 3 works well here, a low end package, a high end package, and a middle package for most people. If choosing any package requires a complex decision with a great amount of research, keep in mind Hick’s law may not apply very well.

Extrapolating a little to the visual design of your page consider using more whitespace. Less is more if you will. Reducing visual clutter in your design reduces where people can look thus reducing the options competing for their attention on the page.

Again consider using gestalt principles to group related items. 15 options are a lot to think about, but 3 groups of 5 options each reduces the options to 3 and then 5.

Summary

Task completion runs through 4 basic steps:

1. Identify a problem or goal
2. Assess the available options to solve the problem or achieve the goal
3. Decide on one of the options
4. Implement the chosen option

Fitts’ law offers ideas for helping your visitors with the last step above. By decreasing the distance from pointer to actionable target and by increasing the size of the actionable target you make it easier for your audience to click on links and take action. Don’t frustrate your visitors by making it hard for them to do what you and they want to do.

Hick’s law offers ideas for helping your visitors with the third step above. If you provide too many options for a simple task like choosing what page to visit next or selecting one of a few simple service packages you effectively derail your visitors from making any choice whatsoever. Provide less options for these simple tasks and you’ll find more people choosing at least one of those options.

Consider both laws when creating visual designs. While neither law technically applies to visual design we can perhaps extrapolate some based on the advice in order to improve our designs. Be careful drawing conclusions beyond what the laws specifically state, but do keep them in mind when working on the visual design of a site.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.