Have you observed your keyboard! Why the enter and spacebar keys are large than the keys placed in the middle?
Or why the topmost key is smaller than the bottom-most keys in the keyboard?
Fitt’s Law is hardly known for most of us, but if you have designed any interfaces, you’ve almost certainly used it.
Fit’s law is a fundamental law of design, that is frequently ignored by UX designers and regularly used on the keyboard or any apps that you regularly use it.
Paul Fitts a researcher created a mathematical model describing how quickly people can select a target. It’s important to know this law if you are designing websites, mobile apps, device interfaces, or even physical dashboards.
Fitts law states that the time to acquire a target is a function of the size of the target and the distance to the target.
Here’s the equation, the important variable is the target and the distance to that target. A target is what the user is trying to interact with, maybe it’s a button to tap or a form field that needs to be clicked. The distance of that target is how far to the target till someone starts. Large targets that are close by have the lowest interaction cost while small targets that far away have the highest interaction costs.
The common application of Fitts law is based on the below guidelines:
- Buttons to complete an action should be closely beside the active elements.
- Important actions are easier to select when their size is large.
- A shorter list is better with any kind of interactive list like menu, dropdowns, etc.
Sometimes the list has to belong for all the options users need to see. This seems like common sense but it’s one of the most frequently ignored laws of design. As the largest target keeps the interaction cost low
UX designers focus on complete experience lets see how they can
- Know your users:
Remember, you are not the user of your interface! Get to know the people who will use your website, take to them, know them or watch them using other products or best work with personas to understand the characteristic of different users. The insights you get from analyzing the data and specking will help you in every decision you make will be decided by how people use the interface and the types of content highlighted in the interface.
- Know the user of your interface
Know how people would use your interface, with desktop or touch-based devices. It makes a lot of difference while they interact with the mouse or their fingers. These are direct and indirect interactions that makes difference for UX users.
For a touch-based direct interaction, the buttons or UI elements are large and placed at a sufficient distance from other icons. Whereas, for indirect interaction, the interacting buttons are placed diagonally along with the screen.
The users and their devices are the key factors of design. If your app is for elders or with limited manual dexterity, then you won’t rely on swipe or touch-based. If your users are coders, then support all the keyboard shortcuts to reduce the interactions of the mouse.
- Set expectations:
A button click can lead to many consequences like an amount being debited, deleting an account, or a phone call to the wrong person. To avoid this, posting a notification before a call or after the user clicks on the button is the right approach. Notifications are displayed in many ways,
- Highlighting elements with the desired action.
- Using widely understood symbols.
- Pick a color with relevant meaning
- Delivering warning before irreversible delete.
- Writing clear button copy.
- Anticipate mistakes
Mistakes are inevitable in apps. UX designers can think of preventing the mistake, before it occurs or allowing them ways to fix them.
Like the inactive form buttons until the form is complete, the email verification and detection at the backend to verify the email is correct, auto-filling the address and option to remove the cart when the users are about to pay, or even canceling the order if a user is suspicious about the payment.
Anticipating mistakes allows user to undo their mistakes. Such principle is called the “Poka-yake” principle, also known as, “mistake-proofing”.
- Give feedback:
To acknowledge, it is necessary to know what has happened on the server side. Provide the reasons for failed financial transactions so the user can do appropriate corrects for their next transaction, or proper feedback while the sign-in fails. Let the user know that the login is failed due to an incorrect password and allow him to regenerate the password.
The feedback needs to be given quickly in between 3-10 secs. If the pages load by 5 seconds avoid the progress bar as this will delay the loading time, but in case progress bars are used in your template add visual tricks to pass the time.
- Think carefully about the location and size of the element.
Fitts’ law talks about human-computer interaction. The time required to reach a target is a function of the size of the target and the distance. So the closer and bigger targets are easily reachable than the larger and smaller targets. In the real world, we feel obvious, but the implementation for interactions in UX is important.
- Make the buttons or icons of larger size placed in an easily reachable area. This area depends on how the user interacts with its device. Place the obvious button bit larger than the other button in the reachable area.
- Place navigation on edges, no matter your user uses mouse or touch, the sufficient distance.
As you think about the element placing make sure the important ones are reachable easily for your interactive model.
Nutshell:
Fitt’s law is the time to acquire a target is related to its distance and size. Selecting a UI element of bigger size placed near to the user can be faster. It doesn’t mean that each target should be larger or placed everything closer to each other. Know your users and follow the rule of infinite edges for easy and quick access to elements.
