Fitt’s Law and How to Use It

For anyone interested in some of the true theory behind HCI principles (we don’t just say stuff is better because we think it is) then this post is for you. We’ll explain what Fitt’s Law is, the basic idea behind it, and how that information can be applied practically to your applications and designs.

These design’s are giving me Fitt’s!

Fitt’s law is a mathematical formula that can calculate the difficulty it is to use two UI elements given the size and distance and of those elements. The formula is written as:

MT = a + b log₂(1+D/W)

MT = movement time
a = represents start/stop time of device, determined empirically
b = represents inherent speed of device, determined empirically
D = Distance between starting point and center of target
W = Width of Target

The basic idea is that there is an inverse relationship between the size of the target and time it takes to accurately navigate to it and a positive relationship between the distance between the starting point and the target and the time it takes to accurately navigate to it. Therefore the bigger and the closer a starting point and a target is then the easier it is to navigate.

Blah, blah, blah. I’m a designer not a mathematician, you Georgia Tech nerd.
Get to the point.

So, what the heck does this mean for my designs? Well, there’s a couple of things this means:

1. Size matters. You can’t create tiny clickable areas or people will have a hard time using them properly as they might constantly over or underestimate their speed and/or distance in trying to click the area. Although, it’s not necessary to create enormous buttons either just to cut down on MT as that would sacrifice real estate and design efficiency.
2. Distance matters too. If there are elements that users will constantly use in tandem then they should be closer together. This is the argument for Apple placing their up/down scrollbar buttons together. (The other side of that argument is that the up at the top and the down at the bottom fits a better metaphor that aligns more with mental models.)
3. Now it might not be cost effective to perform Fitt’s law on everything, but performing it on the most commonly used elements can give you an estimate of the level of user frustration. A longer MT can hint at user error and frustration from having difficulty hitting their target.

I’m a visual learner. Show me an example.

What is the MT to move the cursor from the current position to the meerkat cowboy playing the Ballad of Fitt’s Law?

For the purposes of an easy example we’ll say a=5, b=8 and W=1.

• 1. (1+D/W), 1+3/1 = 4
• 2. log₂(step 1), log₂(4) = 2
• 3. a+b*(step 2), 5 + 8*2 = 21
• MT = (step 3), MT = 21

What the heck does that mean? That means this meerkat is probably hiding a cervesa behind his Takamine. Seriously though, it doesn’t mean a lot unless it’s compared against other MTs. This example was just to show what you would do.

That was a bunch of bunk. Seriously, how can I use this Law at my desk tomorrow?

I’ve found that the best way to approach Fitt’s law is not necessarily from a pre view, but a post view. By now, you’re probably a pretty decent designer and know how to design layouts and UI elements. Fitt’s law can help improve your designs by giving a mathematical formula to unequivocally prove that one design actually is more user friendly than another. By using Fitt’s Law on various designs, you can get an idea of how easy one design might be for a user to use versus another design. Fitt’s Law boils down to a way to stun your clients and give them cold, hard numbers that prove that one design is physically and mentally superior based on the amount of time it will take users to accurately navigate the design.

How do you use Fitt’s Law?
Did you find this article useful?