This content originally appeared on Level Up Coding - Medium and was authored by Muhammad Anser
Psychologist Paul Fitts (1912–1965) published his theory on “human mechanics and aimed movement” in 1954 which states that the amount of time required for a person to move a pointer (e.g., mouse cursor) to a target area is a function of the distance to the target divided by the size of the target. Thus, the longer the distance and the smaller the target’s size, the longer it takes.
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.
Fitts’ law is widely applied in user experience (UX) and user interface (UI) design. This law influenced the convention of making interactive buttons large as smaller buttons are more difficult to click. Likewise, the distance between a user’s attention area and the task-related button should be kept as short as possible.
It can be very helpful to be able to track the way that your users work with your website. Knowing this allows you to tweak the design to get users to take the actions that you want them to take. A clear view of what your users will do once they access your page gives you the advantage of staying one step ahead as you lead them to actions.
Let’s try to understand everything with a simple example:
Suppose you are sitting inside your room, choose any 3 items in your room. They can be:
- Your computer screen
- Bird sitting on a tree, visible from your window
- Pencil placed in a pencil holder on your study table
Now point out to these items with your finger. Which one can you clearly point out? You must have noticed that how obvious are few items (computer screen in our case) while for some you have to tell others what actually you are pointing at (pencil in our case).
In the case of our items listed above, we might notice the following, giving them star ratings from one (very hard) to five (very easy) to indicate how easy it is to point at them.
- Your computer screen *****
- Bird sitting on a tree, visible from your window ***
- Pencil placed in a pencil holder on your study table *
The mathematical formula behind Fitts’ law, is T (Time) = a + b log2 (2 D (Distance)/ W (Width). Let’s take a closer look at that:
- Time is the amount of time that it will take the user to complete his or her movement.
- a + b: These are a little more complex. They’re “regression coefficients”, which means that we find these by observing the slope of the object.
- Distance, as you might expect, is the distance between the user’s starting point and his or her end point (the target).
- Width is the width of the target object.
Now let’s take all this discussion in the context of web design & web engineering.
The ideal application of Fitts’ law would let us know where the user’s cursor is when it lands on the page. That would be the “prime pixel” — the point from which the user will carry out all of his or her actions while on your page. If we could determine this “prime pixel” for our user, we could then adapt our design to the user — e.g., we could create the shortest path to the actions we expect the user to take.
Unfortunately, while your browser and your applications can utilize the prime pixel, a website can’t take advantage of this data. Even if you could know the prime pixel, it would change every time the user moved the mouse.
However, there is some good news. While you cannot determine the prime pixel when users arrive on a site, you can determine the likely prime pixel when a user takes an action. So, for example, if a user clicks “login”, the box that appears for the user to do so should be as close to the “login” option as possible, and the “submit” button should be as close to that text box as possible, too.
Applying Fitts’ law to UI/UX design:
Command buttons and any other interactive element in the graphical user interface must be distinguished from other non-interactive elements by size. Whilst it may seem obvious, user interface design often ignores that the larger a button is the easier it is to click with a pointing device.
Conclusion:
You must be thinking “bigger is better” right? Actually, no: this is a law about usability. While “so tiny I can’t see it” is clearly not very good, and “bigger than that” is better… there comes a point when increasing the size of an option makes it only a tiny bit more usable. This is something web designers should consider; otherwise, all their web pages would have to consist of a single giant button for the user to press.
Last but not the least, you should be testing your designs with your actual users to see if they have the impact that you’d hoped for.
Learned something new? Comments and feedback always make the writer happy. Happy coding!
Fitts’ Law: Another aspect in web design was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Muhammad Anser
Muhammad Anser | Sciencx (2022-02-07T00:30:27+00:00) Fitts’ Law: Another aspect in web design. Retrieved from https://www.scien.cx/2022/02/07/fitts-law-another-aspect-in-web-design/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.