Kevin Hale on how to use Fitts's Law for great user interfaces


6 years ago

Have you ever come across the Five Laws of Interface Design that Y Combinator partner Kevin Hale likes to recommend? These are five laws at the intersection of math and art, and on which we can rely to create a better product and experience for our users. In this blog post, I’ll cover the First Law, Fitts’s Law, before sharing Kevin’s take on how to apply this to our interfaces.

First Law: Fitt’s Law

In the class he gave on Platzi, Kevin Hale may have surprised some students when he started to discuss a fancy formula describing how humans point at things. It may indeed seem complicated at first, and you may be wondering what this can have to do with Internet-based UX, but I promise that at the end of this post everything will make sense! Let’s jump to the equation, which is known as Fitts’s Law:

The Fitts’s Law was born with Paul Fitts, US Air Force researcher, who did an experiment (the Fitts’s Experiment) in which he analyzed how much time it took a person to move a green metal bar towards a red metal bar, considering distance and width. Here’s how Kevin pictured it:

We can now check out the Fitts’s Law formula again, this time with a better notion of its elements: T stands for Time, a and b are constants, D is distance and W width. As for logarithm, represented by the Log abbreviation, it can be defined as “the power to which a number must be raised in order to get some other number.”

In practical terms, it has to do with the way humans naturally perceive quantities.

Still confusing? Let’s sum up the example Kevin used in his class: if you have one apple, and you add another one, you have duplicated the number of apples you had. Now let’s imagine a different scenario, in which you already have 10 apples; if you add another apple, you now have eleven apples, but… it doesn’t matter as much as in the first scenario, does it?

The reason why is simple: when you already have plenty of apples in your hands, another apple doesn’t really make a difference.

Hopefully, this short example will have helped you understand how we make logarithm relations. The fun part? It also applies to interfaces.

Fitts’s Law on Interfaces

If instead of apples, we were referring to user interfaces, you would still have the same reaction. If you have something big, and you make it bigger, it makes less difference than if you had something small and made it bigger. If the objects in your interfaces are already pretty large, don’t make them larger and hope to make an impact; it’s on the tiny things that you need to focus on.

Another thing you can learn from Fitts is that you shouldn’t assume that bigger things are easier to point at. If you take another look at his experiment, you will notice that he only took two dimensions into account, with no mention being made of height as a parameter; so, don’t think that bigger is better. The starting position of the mouse has a strong relation with the size of your button, as per Kevin’s illustration below:

Despite the second button being bigger, it takes the same time to click on both the first and second buttons. However, the third one is easier to click. Why? Because it is closer to the user (or in this case, to his or her mouse cursor). This comparison is Kevin’s way to explain that a bigger button won’t necessarily be more effective; everything depends of user interaction.

Now, let’s go back once again to the Fitts’s formula, but this time in a simplified version that can easily help us improve our interfaces:

According to Kevin, the most interesting ideas we can get from the formula will come up when we take everything to the extreme. If our starting point is that we want to do interfaces where is really easy to click on something, it means that movement should take almost no time, i.e. T=0; if T=0, then we need zero distance and infinite width.

A perfect example of zero distance is the context menu that pops up several operating systems when we right-click on something. It is incredibly easy to use, because we have no distance to move to the first action, and no distances between other actions; plus it is very intuitive.

Another example of infinite width are the hot corners of Mac OS X; the corners of your screens are the easiest places to access, which makes them a great shortcut into some key features.

If you pay attention, you will find applications of Fitts’s Law in many interfaces. You should also take it into account when creating your own app’s interface. Remember: making something bigger doesn’t mean that is easier to click on, and changes to tiniest elements may have the most impact. Also keep in mind that this is just the first law of interface design; If you want to learn more, watch Kevin Hale’s Platzi on The 5 laws of Interface Design.

Juan Pablo
Juan Pablo


6 years ago

Todas sus entradas
Escribe tu comentario
+ 2

Can I use figurative language in my interface design: in brand logo or in titles? Vocabulary and phrases will be taken from the non-existant Naʼvi language of the Avatar: my college coursework https://www.writemyessayfast.ca