48px is the Perfect Size for Touch / Mobile Elements

The perfect size for touch/mobile elements, such as buttons, icons, and especially check boxes, is 48 pixels. This is at least 48px width, and 48px height.

You can also use a percentage by using vw and vh, but the number will be different, since vw and vh are a percentage of the view’s (phone screen) width and height.

I’m annoyed when I have to pinch-zoom my phone to take action. I’m even more annoyed when I meant to touch one button, and it looks to me my finger pressed it, but really I pressed the one next to it because they were so close in size and proximity.

This is a lesson in user experience (UX) and visual design, and how even the smallest thing can have a big impact on whether your design succeeds in achieving its goals.

Decision Making & User Psychology

I like knowing when I make a decision I’ll get the result I want. When I don’t get the result I want, I feel upset, disappointed, or frustrated; hopefully only for a moment.

When I design an interface / website, I’m looking first on how to ensure people can easily make decisions. And there are two key distinctions that happen when I see a button that’s too small.

1: I think about the element and not what I want.

This is a distraction, and for a great user experience you don’t want distractions. If an element is difficult to touch or understand what it will do, I have to shift my focus from what I want, to the small button on the screen.

2: I second guess if this will work or not.

Ever see someone drive a car that looks like it was in a junkyard? You wonder why someone would still drive that piece of crap around. Maybe the car is useful, but it’s not convincing.

Therefore, my second guessing is going to stop me in my tracks, and put me into that pattern of thinking. If a “Subscribe” or “Buy” button is what I need to click on to get what I want, and I get into the thought pattern of second-guessing, there’s a good chance I’ll second guess buying the product or service.

Aesthetically Pleasing = Engagement

Interface elements should be engaging, and to get there, they need to be aesthetically pleasing. For this article, I want to focus on the 48px size.

What I’ve found is this: 48px sized elements are:

  • Easier on the eyes to notice and understand.
  • Don’t take up too much room, nor too little.
  • Plenty of space to convey their message.
  • Plenty of screen landscape to design something beautiful.
People are more easily and quickly engaged when something is aesthetically pleasing, and the right size of an element can make something easy to understand what it will do.

Where's my proof?

I could say I prove this by stating I wear glasses to read small things, and having a larger button makes it easier on me. Users often ask, “Where do I find…?”, or I might instruct them to click on something, and they pause… and pause… and then I have to point out where the ‘Submit’ button is.

With my a/v production software, users make split-second decisions to keep the show running smoothly. A game clock operators needs to be able to pause a game clock as near to the moment a referee whistles for a timeout; wouldn’t an interface that’s easy to use accommodate that?

Summary

  • 48px width and height minimum for touch elements.
  • Remove the chance of distraction.
  • Improve ease of taking action.

Sample CSS:

button, input[type="button"], img.icon {
  min-width: 48px;
  min-height: 48px;
}