Touchscreen Button Dimensions: Size Matters!

by Morgan Strauss When it comes to designing a graphical user interface (GUI), the size of the touchscreen buttons is more important than you might think. ISO and ANSI standards recommend .75-inch-square buttons, a measurement that is backed up in a study by the Wright State University Department of Psychology a
Author:
Publish date:

by Morgan Strauss


When it comes to designing a graphical user interface (GUI), the size of the touchscreen buttons is more important than you might think. ISO and ANSI standards recommend .75-inch-square buttons, a measurement that is backed up in a study by the Wright State University Department of Psychology as being the most effective in terms of user performance and satisfaction.

But think of buttons as TV displays: would you rather look at a widescreen or your old square set. I’d recommend taking the widescreen as inspiration and creating buttons .75-inch by 1.25-inch in size. But don’t take my word for it, I’ve got science on my side. Phi (about 1.618) is known as the Golden Ratio, a measure of perfect proportion. And by applying it to button size (simply multiplying .75 by 1.618), we can see the perfect proportion is not .75-inch by .75-inch, but approximately .75-inch by 1.25-inch.

Image placeholder title


Interestingly, going even further and making buttons as big as possible does not improve performance or accuracy. In fact, it might even slow down the user because they have to move a greater distance with each touch. The lesson here: don’t mess with perfection unless you have to. Of course, sometimes you do have to. Installers often work on limited touch screen real estates. So what do they do if they have to make buttons smaller to fit them all on the screen? In this scenario, it is actually the bounding box of the button’s active touchable area that is the biggest consideration.

To create a smaller button without affecting accuracy, simply increase the space between buttons slightly and make the active touchable area of each go beyond the visible area. This way, if the touch isn’t right on target, the desired function will still be performed. If the design calls for smaller buttons, .375-inch is a suitable size, but they should not be smaller than .25-inch, which would make turning on the TV akin to hitting a bull’s eye when playing darts.

Image placeholder title




Morgan Strauss is the president of Guifx, an interface design studio specializing in touchscreen interfaces for home automation and embedded systems. He can be reached at morgan@guifx.com.

Related