Make important clickable areas large and close by

Make important clickable areas large and close by

Increase hit areas but remember to provide sufficient space between clickable elements to avoid hitting multiple or incorrect targets.

fitts law

Fitts' law states that the time to acquire a target is a function of the distance to and size of the target. Having large targets will help improve efficiency.

We can apply this to web design by looking at the hit area of your objects. Meaning the larger we can make the clickable area of key links and navigational elements the easier they will be to click on.

  • Rather than just making the text clickable it would be a great idea to add padding to that link element to increase the clickable area. Sometimes this means turning the anchor into a block level element and wrapping details inside.
  • Adding a transparent border to small buttons

A common misuse of Fitts’ law is when a design is coded so that the text of a menu bar is clickable but the tabs themselves are not.

This can work in the opposite way as well, meaning items we want to be difficult to be clicked on (such as cancel buttons / links) should have a smaller clickable area. This is why you often see forms or actions that have large “save” buttons but text based “delete” or “cancel” links.

Reminder

It is also important to remember to provide sufficient space between clickable elements to avoid hitting multiple or incorrect targets.