To improve the clickability of elements on your web page, follow Fitts’ law!

What is the Fitts’ law?

Fitts’ law suggests that closer a target is and the bigger it is, the quicker it will be hit. By applying this principle to web usability, you can improve the clickability of elements on your web page. All you need to do is:
– increase the size of your clickable elements
– and reduce their distance from the mouse cursor

This law can be applied in cases where a site must prompt the user to click on an item: to sign up for a newsletter, to enter a competition, etc. The law can apply to elements such as navigation bars, icons, buttons, and hyperlinks.

Deciding which clickable elements to optimize

To apply Fitts’ law on your own website, we recommend you sort the clickable elements by order of importance, taking into account their estimated frequency of use. Of course, it is much more important to improve the clickability of the main navigation elements than that of a hyperlink tucked away in the content.

Increase the actual size of the clickable elements…

To follow Fitts’ law, the first thing to do is to make certain elements bigger so they can be clicked on quicker and so that fewer errors occur. In usability, the word “error” means that the user must perform an action again. This wastes precious time and can even lead to the user giving up and going elsewhere. So don’t hesitate to increase the actual size of your clickable elements.

Sometimes doing this can lead you to completely rethink the nature of your clickable elements. In a list of paginated results for example, users can click on the number of the page they want to view, or they can click on the object chosen to symbolize the next page: a button, an arrow, or a hypertext link. The latter is preferable because its obvious format makes it easier to click on.

The hypertext link is more clickable than the arrow button (source: sephora.fr)

… and their virtual size

The box can be checked by clicking on the description
(source: easyjet.com)

Beware of buttons whose design suggests a clickability that doesn’t exist. In such a case, you should increase the clickable surface of the item by activating the button as well as its text.

Clickable elements must be within close reach of the user’s cursor

The second part of Fitts’ law is more difficult to apply on the Web, because the placement of many elements is governed by conventions. The general rule is to adopt the user’s logic: place the validate button at the end of the form; make sure important action buttons appear in two or more locations on the page, etc.

Other more advanced interaction methods can be used, such as keyboard shortcuts (press Enter to validate) or right-click to bring up a menu (definitely valuable for application interfaces).