Home Design What Should Be The Size Of Your Icon/Button?

What Should Be The Size Of Your Icon/Button?

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

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

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

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?

What should be the button size

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?

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.

button hierarchy

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.

button hierarchy example
Button hierarchy example – Music player

right hemisphere

Stay safe and make cool buttons!

Read more information on Button UX Design: Best Practices, Types and States    

Right Hemisphere
Right Hemispherehttp://www.righthemisphere.in
A bunch of designers and engineers who set out to integrate design thinking with analytics; and entrepreneurs hell-bent on developing this into a working model to make businesses grow.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Design/Tips Of The Day ❤️

Most Popular

MacOS 11 Big Sur Icons Good or Bad? Here’s What Designers Think.

Apples' Latest macOS 11 Big Sur comes with a new icon style - Soft 3D skeuomorphism. Let's see what UI/UX Desgners think about these new Big Sur icons.

Is MacOS 11 Big Sur Really Ugly? And Here Is Why!

Latest Apple - macOS 11 Big Sur design update make some users unhappy because of the several reasons.

How To Design Water Animation Using Adobe XD – 3 Tutorials Included

Adobe XD is one of the most famous prototyping tools used in the UI UX Industry. Since most of the designers are...

MacOS 11 Big Sur Icon Comparison (Video)

Apple announced its latest macOS 11 Big Sur in this year WWDC, and become one of the popular topics among...

Unilever Logo Breakdown – Explained All Symbols

Unilever's logo is unique and identical with it's big blue "U" shape and 25 small symbols which represents companies sub brands.