Click worthy Buttons: Fitts’ Law

Daksh Sharma
Design Diary
4 min readOct 28, 2020

--

Photo by Mad Fish Digital on Unsplash

The “Buy Now” button on an Amazon or the “Skip” option for a mobile application while onboarding. Which one do you think is more clickable or at least is intended to be? Of course, the “Buy Now” button is more prominent and does a does a good job of luring one’s finger on it. Seems simple enough, the bigger the button the more likely it is to draw attention. What looks obvious on surface might have a greater explanation. Let’s dive into this topic and read about Fitts’ Law.

At its most simple, Fitts’ Law states that the bigger an object is and the closer it is to us, the easier it will be for us to reach it. A study showed that by moving the cart button to the left hand menu of a site, an increase of 34% in sales was observed. Our brain compels us to do tasks that are less cognitively demanding hence bigger buttons at the distance seem more attractive than a tiny option that requires some level of effort to search.

The time required to tap/click on a button of a particular size can be calculated by a simple mathematics formula given as follows:

T = a + b log2 (2 D)/ W

Where;

· T= Time taken

· a and b are some constants

· D= distance to the button

· W= width of the button

Concept of Prime and Magic Pixels

Prime and Magic Pixels

Prime Pixel is defined as the location of the user’s cursor when he/she lands on a webpage. Once we the prime pixel we can adjust the site to make it easier for the user to click, however it is almost impossible to determine where the user’s pointer will be. But, a good estimation can still be made. This information can be put to use in situations like placing a submit button close to the text box. The magic pixels are at the four corners of the screen are the furthest from your prime pixel. Hence, according to the Fitts’ law they are the least likely place to put any buttons.

Application of Fitt’s Law

Listed below are some major application of the Fitts’ Law:

· Interactive elements on screen tend to be larger in size in comparison to non-interactive elements making them more likely to be clicked or tapped,

· Pinning elements on the outer edges of the screen makes them more accessible to the user.

· Pop-up menus better support immediate selection of interactive elements than dropdown menus as the user does not have to move the cursor from its current position.

· Selecting options within linear menus, whether vertical (e.g. dropdown menus) or horizontal (e.g. top-level navigation), takes longer than clicking options in pie menus — where choices are arranged in a circle.

· Task bars impede movement through the interface as they require a more time-consuming level of precision than when options are placed on the outer limits of the screen.

Conclusion

As a user experience designer it is important to have knowledge about human psychology so it can be applied to make a user’s journey more comfortable. It is the role of the designer to guide a user through the application like it intended to be. Using Fitts’ Law to make button more approachable and by reducing the amount of options available to the user at one given time, it becomes easier for the user to decide what to do and we see users reaching their desired destination in the least amount of time.

--

--

Design Diary
Design Diary

Published in Design Diary

Design Diary is blog featuring articles about user experience design. It is aimed at providing its readers with important concepts in the design industry.

Daksh Sharma
Daksh Sharma

Written by Daksh Sharma

I am a product designer with a focus on simplifying experiences and empowering users to make the most authentic decisions.