Fitts’ law (correctly spelled as Fitts’s law but no one does) is a very successful model that predicts the time required to point to an object is dependent on both the distance to and size of the target. This applies to both physical pointing, or by way of device such as a mouse. If you apply Fitts’ research, then most simply put, the closer and larger an object, the more quickly you can point to it.
You can see how Fitts’s law is important to consider for the design of any time critical applications such as a fighter pilot’s cockpit, and equally important to create the best possible and most efficient user experience in any web application.
Mathematical Model of Fitts’s Law
While there are some derivations of the mathematical formula, here is one popular one:
T = a + b log2(1 + D/W)
where: T = Time, a = start/stop time, b = speed of device, D = distance, and W = width of target, or allowable error of tolerance.
Implications of Fitts’ in Interface Design
Aside from the obvious design cues, such as make buttons big enough to click on, Fitts’ law is one of the most violated laws in user experience. Too often the target areas are not big enough, or spaced correctly as to make targeting easy. Any time you click on a button where the button area itself is just dead pixels, and it’s only the text on the button that is a clickable region, you’re dealing with a design that ignores Fitts’ law. And while desktops can take advantage of their edges and use Fitt’s law for infinite width areas, websites and web apps do not have these edges since most aren’t run at full screen.
But let’s take Fitts’ a step further. Let’s also consciously position and size our links, or elements in such a way that it is prioritized in terms of the tasks we perform most often, and make this a required part of your design analysis process of every screen of your software or service. Let’s create proximity amongst interface elements to make the sequence of steps more efficient. Let’s ensure there that accidental clicks are rare. There are very few blog posts on this subject, but Jeff Atwood’s ejector seat example is just perfect. Some of the comments are even funnier.
In the Timesheet page from Freshbooks, you can see that the various clickable areas have different sizing and styling. Good web apps pay attention to their buttons and eliminating dead pixels. There’s more than one style of button here. Three different sizes, implicitly suggesting a task hierarchy; Log Hours, Start/Stop Timer, and 3 buttons to manage a list of tasks. Every date on the calendar is clickable, including the grayed out numbers from the previous and next month. I get so annoyed when I use a calendar widget that disables clicking on those dates.
[Start side rant.] There’s zero good reason as to why those dates should be disabled! I mean seriously, I can’t think of one, so please all you CRMs, airline websites, and host of other services that have the need for me to pick a date, please tell me WHY previous and next month’s days are disabled. Why can’t you just make all the dates selectable, and save me a click or two? [End side rant.]
Following Principles In Interaction Design Make Great Web Apps
In case you’ve been reading this post wondering why Fitts’s law relates to Greatest Web Apps, let me make the connection clear. Fitts and other principles of interaction design are important for good user experience. And good user experience is the difference between an okay web service and a great web service. Bad user experiences make software apps suck. If the customer can’t use the app, he won’t use it. If the customer gets frustrated using the app, she won’t be loyal and might switch any day. It’s the user experience, stupid.
While the elements are subtle, it is felt. Somehow these interfaces are easier to use and understand too, because you’ve added cues to help users in their way finding and usage of your web app. You make common tasks easier and deleting and reseting harder. You’ve applied Fitts’ law in such a way that a user can flow through work with ease and efficiency.