You might’ve noticed for a while now that only the space bar is given prime real estate space in your computer’s keyboard, right down in the bottom middle are; it has also been made bigger than any other keys. This isn’t without reason as the space bar is typically one of the most frequently used keys in a keyboard in any given setting and all ten of your fingers need to be able to reach the space bar quickly and easily. This design makes typing easier and more comfortable for all of us and the reason why even in vintage typewriters that doesn’t have a space bar, the space keys are usually hard to miss.
This manipulation of size and space is based off of a predictive model of human movement in the field of human movement and ergonomics referred to as Fitts’ Law. In the field of man-machine interface, of which web development and UX design is a part of, Fitts’ Law is used to give more prominent to functions that are more important or more often used than others. As is the case with the humble keyboard, Fitts’ Law can be used to improve the usability factor of your website, making it a much more hospitable place for users, which is the ultimate goal in UX design.
Fitts’ Law in a nutshell
The gist of Fitts’ Law is actually pretty simple. The law predicts that the time required to move to a target area is a function of the ratio between the distance to the target and the width of the target. The space bar is an example of Fitts’ Law being utilized to the maximum and if you take the time to observe the world around you, you’re going to find more example of Fitts’ Law being used. In cars for example, the brake pedal is always bigger and easier to reach than the accelerator so that under emergency situations, you could easily stop your car from whatever it is you’re about to run into.
Car pedals don’t take into account the possibility that you might actually have to outrun something but that possibility is far more remote than having to stomp on the brakes. In a man to machine interface, this is referred to as a hierarchy, where the amount of visual weight is given based on the function’s importance or likelihood to be used. We’re far likelier to run into something than having to outrun something and this simple reason is why the brake pedal takes priority over the accelerator.
In the field of web development, Fitts’ Law main priority is to improve usability but the law is often used for the purpose of marketing as well. By subtly altering how elements are presented in a webpage, it is possible to subtly nudge users into performing certain preferred actions with the keyword here being subtlety as blatant sales tactics can and do impede usability. Fitts’ Law manifests itself in several different ways in web development and you want to pay extra attention to the following methods.
Buttons should always be easily clickable
The easiest way of making buttons clickable is by increasing their size but buttons could only get so big before their size becomes an usability issue. You want them to be easily clickable yes but there are other ways you can do that other than having to rely on size. To begin with, you can establish clear boundary with the space around them by making use of contrast. Black buttons over a white background for example would be hard to miss and you can also make it so that the CTA buttons aren’t immediately surrounded by other distracting elements, which leads to my next point.
The issue of space and distance
Another way of making buttons more prominent is by making sure that they’re not surrounded by other elements. Google’s homepage for example is still solely dedicated for search with other Google services hidden in the menus. By isolating your most important CTA button in a section of the page where they can easily be seen, you can subtly direct user’s attention to that button. This is a good thing for usability as well as you don’t want buttons on your website to be too closely grouped with each other as you don’t want any misclick to happen, especially for buttons with opposite functions.
On the other hand, for buttons and functions that are related to each other, you want to group them close to each other. The username and password field is always located next to the login button as they’re directly connected to each other. For related buttons, you want to make sure that they’re clearly distinguished from each other by using proper borders. This is especially important with mobile interface as space is even more of a commodity in that field.
Give ample clicking space
If your website make use of forms in some way, and it probably does, then you’re probably going to make use of radio buttons at some point. Now, radio buttons tend to be annoying because they have a very small amount of clickable space and it’s not rare for me to feel like I’ve clicked on that button only to find out I’ve missed it by several pixels. To alleviate this, you might want to consider making the label clickable as well, but ensure that this information is presented to users so that they don’t waste time aiming for those teeny-tiny radio buttons even when there’s ample clickable space sitting next to the radio buttons.
