Recently, I started a discussion in the Adobe Digital Publishing group on LinkedIn about best practices for button size for all mobile devices. This stemmed from a project we are currently working on where we are taking an existing tablet app and recreating it for iPhones. The struggle between design and usability for buttons is strong around here for all projects and it was time to pose the question to the larger community.
Based on the responses I received on LinkedIn, it sounds like this struggle is ubiquitous.
While many believe there is in fact a standard for button size minimums, others believe the design should dictate the size not the other way around.
Dan, from Adobe, shared Apple’s iOS Human Interface Guidelines that recommends a target area of about 44 x 44 points. For non-Retina screens that is 44 pixels and for Retina screens that is 88 pixels wide.
Apple sticks with this guideline when designing their own apps, such as the calculator.
This is a great representation where the optimum size is used, even for fat fingers.
Keep in mind, these size recommendations are for tappable target area. That doesn’t mean the actual button has to be that exact size or shape. It only means that your active button area should be about 44×44 points. Part of that area can be extra space. This is where the designers rejoice.
Christina from Frank Strategic Marketing, made the point, “The easier the buttons are to utilize, the happier your reader will be and the more they will return to your publication or issues to come.”
What guidelines do you use when creating buttons?