Infini-button

My favorite ‘laws’ in life are those that seem remarkably simple & obvious, but that have a lot of unexpected implications. One of my favorite is a Human-Computer Interaction law called Fitts’ Law. While there’s a lot of specificity you can discuss, the basic version of the law is as follow:

The further away and the smaller something is, the more difficult it’ll be for the user to point at it.

That’s it. If you’re using a mouse, and you’re trying to hit a tiny button half across the screen, it’ll take more effort than it’ll take you to hit a giant button right next to your cursor. The law extends far beyond that, but that’s the basic gist of it. While I’m not going to jump into the math behind it too much, in a mathematical way, it was originally written in 1954 as:

ID = log2 * ( ( 2 * D ) / W )

ID is the Index of Difficulty, or basically how hard the task is. D is the distance to the object you’re trying to point at, and W is the width of the object. For W, consider an infinite line from your current position – for now let’s use the mouse or cursor as an example – through the button you want to point at and all the way to the edge of your screen. Any point of that line that touches the object you want to touch is part of W. That means a vertically oriented button you’re trying to point at from a point underneath it is going to be easier to point at than a horizontally oriented button.

I was thinking about Fitts’ Law today because I was discussion Destiny’s fantastic menu UI with a fellow designer. You see, Destiny uses Fitts’ Law in a very clever way – by increasing the functional size of the items you want to point at. What’s important to realize is that Destiny’s buttons actually aren’t as big as they seem – they’re much larger than that. When you move your cursor towards an interactive element, your cursor ‘sticks’ to them and slows down, at least until you’ve passed well beyond the object itself. That means that the functional size of those buttons is extended. Because of the slowdown, the width of the button is virtually increased, and thus the difficulty of pointing at it reduced.

In Windows, you can find another really interesting implication of Fitts’ Law in the shape of the Start button. Since the button is in the lower-left corner of the screen and the screen is a hard bound, the Start buttons’ width has become functionally infinite. There is no way to overshoot it, so any fast movement with enough distance to the lower-left corner will always land you on the Start button. It doesn’t just sit at the edge of the screen – it sits in all the non-existent space beyond that too. When you look at good UI design, you’ll notice important elements tend to be aligned to the edge of the screen. Apple OSX then combines both the edge of the screen and a literal size increases in their Dock.

There are many more fascinating implications of Fitts Law, but what I always appreciated about it as that after your first moment of ‘of course, this is so obvious‘, there’s always that moment where it suddenly clicks, and you start seeing a new system in the world. Suddenly, it’s impossible to not see. To me, that’s the beauty of simple laws.

Was this helpful?

Consider subscribing to Levelling The Playing Field! Every article will always be free-to-read, but subscribing helps me gauge interest in the effort & ensure that I'm using my limited time to help the most developers possible. After subscribing, you'll get every new post of game development advice delivered to your inbox as soon as it goes live. If you can afford it & want to support LTPF, please consider supporting the newsletter with a fully-optional Paid membership to help make useful industry knowledge available for free.