Buttons are everywhere. The primary form of taking action on any interface is associated with the humble button. And yet we see an overabundance of “bad buttons” taking something important away from an otherwise decent experience. Here, we simplify some of the logic behind why we design the buttons the way we do and how the conventions came to be. We hope you find this informative and useful.
Related UX Articles
Key Principles That Will Help You Design Better Charts!
How To Create Your Design Portfolio? (Step By Step Guide)
Touch Target
An MIT study found that the average width of an index finger is 45-57 px and the avg size of the thumb is 72 px.
Touch Accuracy
It also showed that touch accuracy is low below 42 px and above 72 px. Range of touch accuracy – 42-71 px
Material design prescribes an icon area of 24 dp and a touch target of 48 dp. Apple suggests 44 pixels.
So, What should the button size be?
You could follow the convention of the operating system used by your audience (IOS, Android, Windows) Or, You could get creative and pick any size between 42-72.
But should you design all the buttons in the same size?
The answer is NO,
The hierarchy of an Icon/button size is also important.
The size of a button in a set of buttons helps guide the user to the most important action! This means mostly the user will focus on the biggest button (high priority) rather than a small button in the same context.
See the below example to get a clear idea of how Low Priority, Medium Priority, and High priority hierarchy will be used in a real-world example.
Stay safe and make cool buttons!
Read more information on Button UX Design: Best Practices, Types and States
