How to use (or abuse) Fitts’ law with website designs
Summary: Fitts’ law sounds like an obscure concept from the user experience profession (designing websites for ease of use). But it’s a law we encounter practically every time we use the web. For example, it’s often used (and sometimes abused) when we see and select buttons on webpages.
Simply put, Fitts’ law says that webpage buttons should be big enough for users to see, as well as close enough to their area of attention on a screen. Otherwise, people may not even notice the buttons, at least upon first glance. Check out some examples of this law in action below…
What is Fitts’ law?
You may not have heard of Fitts’ Law before. However, I can guarantee you come across it regularly online, especially when you see and select buttons on websites. For instance, I was recently searching for a book on Amazon. Once I found what I was looking for, it was entirely clear what I needed to select next.
As anyone can see, the ‘Add to Cart’ and ‘Buy Now’ buttons are clearly displayed on this webpage. Why is it so easy for us to see and select these buttons online? Because they’re big enough and close enough to the book details. And the visible size and close proximity of these buttons are basically what Fitts’ law is all about.
Fitts’ law defined
Simply stated, Fitts’ law says that online buttons (as well as other interactive elements, such as links) should be visible, or big enough to be seen, as well as proximal, or close enough to the user’s area of attention on a screen.
To put it more precisely,
Fitts’ law states that the amount of time required for a person to move a pointer (e.g., mouse cursor) to a target area is a function of the distance to the target divided by the size of the target. Thus, the longer the distance and the smaller the target’s size, the longer it takes. (Definition from www.interaction-design.org)
In other words, buttons should appear sufficiently large, and they should also appear near to where users will have their attention. Otherwise, users may miss the buttons. Indeed, the buttons may not even be visually noticeable for many people, at least upon first glance.
The use and abuse of Fitts’ law
While this law sounds pretty straightforward, I recently came to realize how it can be prone to abuse. For example, while searching the website of Delta Air Lines, I found a ‘Basic’ flight that fit my time and budget constraints. So I selected it in order to buy the ‘Basic’ option.
However, once I selected this ‘Basic’ option, I immediately got the following pop-up window.
Evidently, this pop-up window is trying to get me to see and select the ‘MOVE TO MAIN’ button. After all, this button is big and bright red, and its labeling is in ALL CAPS! Moreover, it appears right next to the ‘Main Cabin’ area. Obviously, that’s not the ‘Basic’ option I had just selected, so this pop-up window struck me as a bit confounding.
Of course, what’s happening here is the website is trying to get me to pay for a more expensive flight. And it’s doing so using Fitts’ law: namely, by making that ‘MOVE TO MAIN’ button very large and noticeable, as well as placing the button in an area that draws my attention away from the ‘Basic’ option (that I had just selected) and toward the ‘Main Cabin’ option (that I didn’t want in the first place). It almost felt like a bait-and-switch tactic.
Design ethics: Using (not abusing) Fitts’ law
Needless to say, this webpage design is not so much using Fitts’ law as it is abusing it. In fact, it’s probably not a very ethical design. Why? Because the size and position of that button are not really in the best interest of the end user, who wanted to select a ‘Basic’ flight, due to budget constraints.
For instance, to continue with the ‘Basic’ option, I figured out that you need to check mark the ‘Accept Restrictions’ box, and then you need to select the ‘Continue with Basic’ link, both which are quite tiny and not very noticeable at first. (To make things more confusing, the ‘Continue with Basic’ link remains grayed out—and thus inactive—until you select the ‘Accept Restrictions’ box.)
Since those steps aren’t as easy as just selecting the extremely noticeable ‘MOVE TO MAIN’ button, how many people do you think simply select this button, without actually noticing that they agreed to pay for a different, and much more expensive, flight?