This is an excerpt from the Interaction Design Best Practices ebook, written by Jerry Cao, Kamil Zięba, Matt Ellis, and originally published on UXPin.com.
Size & Distance in Interaction Design: When To Apply Fitts’s Law (and When Not To)
While he never lived to see the Internet, engineering psychologist Paul Fitts nonetheless had a huge influence on digital design with his 1954 proposal now known as Fitts’s Law. We can describe Fitts’s Law as:
…a model of human movement in HCI and ergonomics which predicts that the time required to rapidly move to a target area is a function of the distance to and the size of the target.
What this means in layman’s term’s is that the larger and closer a target, the faster and easier it is to select the target. Fitts proved his idea mathematically, and the law is still popular today in digital design (just play this quick game and you’ll understand immediately).
Of course, that doesn’t mean you should fill your page with enormous buttons squeezed next to each other. As Anastasios Karafillis, IxD Designer and Philosopher, points out, Fitts’s Law must be executed with finesse. Interaction design is meant for people, which means that you need consistency, enjoyment, accessibility, and discoverability — none of which can just be calculated with clicks or pixels.
We’ll start by deconstructing Fitts’s Law down into its 4 central components and examine the benefits and limitations of each (so you can treat Fitts’s Law as a design tool rather than rule set in stone). Afterwards, we’ll analyze Netflix as a case study of best practices.
Let’s take a look at some of Karafillis’ excellent points in more detail below (which we’ve expanded upon with more examples).
Create Bigger Clickable Areas
The loosest interpretation of Fitts’s Law is to make your key elements larger so that it’s easier for your users to click them. But this is mostly an oversimplification. There are at least two universal truths an interaction designer can take from this:
• Make top-priority buttons larger — Whether relatively larger in comparison to the rest of the page, or just plain large, an increase in size will attract attention, show significance, and make it physically easier for your user to choose the target.
• Make the clickable area of a button as large as possible — In other words, make the whole button clickable, not just the text within the button. You can in the example from Mailchimp below that the entire region is clickable, not just the text.
These guidelines are especially applicable to call-to-action buttons, which presumably are a design priority for any business. But size can be a double-edged sword, so exercise some caution.
The drawbacks to relying on excessive size are:
- Taking up too much screen real estate
- Throwing off the balance of the entire page
- Creating clutter
When determining size, it’s important to remember that increasing a button’s size does not increase its usability linearly. This means that if you increase the size of a small button, you’ll give it more impact; but if you increase the size of an already large button, the impact will be minimal. All that will happen is you’ll end up with an obnoxiously large button.
Minimize Physical Exertion
Fitts’s Law originated as a way to analyze physical exertion, and it wasn’t until later that his principles were reinterpreted to apply to web design. However, with their physical gesturing, mobile devices are actually more attuned to what Fitts was actually studying. Whether you interpret his studies loosely for web design or literally for mobile design, in both cases, Fitts’s Law states that less exertion leads to a better UX.
Mobile design has a lot more muscle and fatigue concerns than web design, so it’s important to keep them in mind to completely Network, explains that the problem is further complicated by the different screen sizes each having their own different issues. But if you’ve been paying attention to the points of Fitts’s Law, you’ll have no problem applying them to the muscle movements of mobile devices.
Smaller screens tend to put more strain on the hand muscles, but 7” devices, while bigger and heavier, are easier to manipulate. One point to keep in mind with 7” screens is that, in the vertical orientation, most people will hold it at the the top. This makes the top two corners the best places for actionable targets.
But some functions like deleting items should be harder to perform to ensure that they are not executed accidentally.
For example, when you want to remove a field in the relationship management tool RelateIQ, the modal window actually prompts you to type in “DELETE THIS FIELD”. From our experience with the tool, this dramatically decreases the likelihood of deleting due to the effort required.
Compare that to the Cancel function, a low-consequence function that’s easily clickable.
Second, complicated gestures and input methods can actually improve UX in some cases, when used properly.
Take DeviantArt’s favoriting method: if a user clicks on a picture and drags slightly, the Favorite toolbar drops down on screen, allowing the user to simply “drop” the picture in.
While most other sites have clickable options for their Favoriting system, the advantage to this one is that it hides the controls interface until needed, saving valuable screen real estate on a site that relies heavily on displaying as many graphics as possible.
Optimize for Proximity
Have you ever wanted to go to a cool event, but then bailed when you found out how far away it was? Your users do this every day with your website or app, though on a much smaller scale.
If Fitts’s Law teaches us nothing else, it’s that you want to reduce the cursor movement as much as possible. Jason Gross, Designer for Healthx, reminds us that grouping items with similar functions together is standard design practice, but this idea can be taken a step further.
By anticipating functions used sequentially, an interaction designer can further minimize the distance the cursor must travel. In addition, the placement on the screen can play a large role in cursor movement, as we can assume the cursor usually starts near the top of the screen. Look at this example from Freshbooks.
The most used button, New Invoice, is located at the very top (and is larger than the others, reiterating the point about size from the last section). Reinforcing the Gestalt Principle that closely grouped items are perceived as similar, you can also see how related functions (sometimes done sequentially) like Copy, Print, and Send are tightly grouped.
Of course, you don’t want to sacrifice your product’s overall structure and cohesiveness just to save your user a centimeter or two of cursor movement. More important than a quick cursor movement is an interface with a logical and consistent structure.
Facebook is a perfect example of a design that does not fear space. As you can see below, there’s plenty of space located between the chat sidebar and activity stream. If we were designing based on frequency of use, we could place the chat and activity stream next to each other. But that would disrupt the functional consistency — adding space between unrelated groups helps users create a mental map of information and tools. That’s why it’s more important that similar actions within a group (like Comment or Like) are placed closer together.
To clean up the interface, many sites use the familiar dropdown menu. By the standards of Fitts’s Law, the dropdown menu is inefficient since it only increases cursor movement; but from an organizational perspective, dropdowns make sense as they consolidate and organize information in a way that users can easily understand.
That’s why most sites, like Jawbone (above), still use them. Notice how they’ve also grouped similar actions together, but created distance between unrelated groups like browsing products and signing into your account.
Takeaway
Tiny distances on a small screen may seem like a minor concern, but they add up fast — especially with actions that are performed repeatedly. Part of good interaction design is being able to identify these “micromoments” that fall under everyone else’s radar, even the users. Your users may not know the extra time you spent optimizing the position and size of the high-priority items (without completely neglecting the lesser-used ones), but they will appreciate the product, as a whole, much more.
