Do you want to become a better UX designer? — implement Fitts’ Law
How did Apple smartly use Fitts’ law to create highly usable products?
Who is the man behind Fitts’ Law?
A psychologist, Paul Fitts.
Yes. This law is named after Paul Fitts himself for his study of pointing in 1954. He was studying human movement. His original study was about pointing with a stylus but his work is applicable to pointing with a mouse, touchscreens, and range of devices.
What was Fitts’ Experiment?
Our man Fitts asked his subject to accurately tap a stylus back and forth between two metal plates while their time was being recorded. He kept changing the distance between the plates and the width of the plates.
After all this hard work, he came up with an equation to capture all of it.
Don’t worry! I’m not going to talk all science and crazy mathematical formulas. After all, UX is about simplicity and time. All we need to know is what Paul learned in simple words.
He learned that it is faster to hit larger targets closer to you than smaller targets further away from you.
Do you need some examples now?
Cool! I know you are getting all impatient reading plain text and theories. We’ll start with some physical objects and then move to digital experiences. Even Paul Fitts didn’t know that we would be using his studies for UX back in 1954.
1. Stop button vs Start button
Do you see that huge red button? Hopefully, you do.
It’s larger in size for one reason and that is — it could be easily reached during the situation of emergency. The last thing you would want to do is to look for a stop button when the world is on fire!
2. Accelerator vs Brake
Why don’t you guess it this time?
Why the brake pedal is larger in size as compared to the accelerator pedal?
Let me know in the response section if you can’t figure this out. I would respond with stones and curse words! (I’m kidding :D)
3. Magic Keyboard
If you are reading my words here, it’s highly likely that you know what this object is. One could start thinking about the keys marked inside red.
Why these keys — Spacebar, Shift, Return, Delete, etc are wider in size?
Can you think about their position on the keyboard and how far are they to reach?
Is Spacebar the most used key and that’s why it’s wider(W) and closer(D)?
4. Edges of the screen
All of us have been using these for long but probably never paid attention to the usability aspects edges.
Why are these options made sticky on the edges?
Why dock icon would get magnified once they hovered upon?
There’s some good stuff in the interfaces above. The corner pixels are designated as magic pixels. It’s because of how easily they could be hit or pointed at.
Edges are also wonderful because W (width) in the Fitts’ formula makes them infinite in width.
W(width)is inversely proportional to T(time).
And W on edges is infinite.
Go ahead and try it yourself
It is possible that you are not completely satiated with the examples or my petty explanations.
What if I tell you that you can run a quick experiment yourself and that too immediately?
I know how it feels when you want more. Don’t worry my friend. You won’t be disappointed today :)
Nothing could beat learning by doing.
Go to this link and experiment yourself.
What’s Next?
Next time when you are designing interfaces for your dear users, do keep in mind the words of Paul Fitts.
Don’t let his research down. Don’t let his hard work go in vain.
Why should you use Fitts’ law?
- To improve performance
- To reduce errors
You might not thank me or Paul here but your users would thank you a lot. Make them believe that you care about them.
All the best for your next product 👍
Continue Reading
UX Crash Course: Chapter 2
References
Fitts, Paul M. (June 1954). “The information capacity of the human motor system in controlling the amplitude of movement”. Journal of Experimental Psychology
