When it comes to touchscreen buttons, size plays an important part in usability.

Touchscreen Button Dimensions and Spacing

Morgan Strauss | GUIFX

Touchscreen Button Dimensions and Spacing -- Hell If Phi Know

Touchscreen Button Dimensions and Spacing
Author: Morgan Strauss, GUIFX


When it comes to touchscreen buttons, size plays an important part in usability. ISO and ANSI standards recommend making them .75" (3/4") square, and this is reinforced by a Wright State University Department of Psychology study which showed that .75" buttons were most effective at maximizing both user performance and satisfaction.

Okay. So size matters

I'm going to take this a step further, though. Because the ideal button size for a touchscreen is actually .75" x 1.25". Why? For the same reason your widescreen TV is more pleasing to the eye than the set you grew up with. (It has to do with proportion. I'll explain the science behind this in a minute.)

 

size

 

Okay. So size matters. But should you worry about setting the buttons too close for comfort? Interestingly, the gap, or white space, between buttons has little impact on user performance and accuracy. The biggest factor really is size. So if screen real estate is at a premium, you can place the buttons right up against each other. Still, if you have room, try for a gap of up to .125". While this won't increase user accuracy or speed, it will increase the user's comfort level when working with your interface.

Want smaller buttons for your design? No problem. It's the bounding box of the button's active touchable area that's the biggest consideration. If you want smaller buttons, increase the gap between them and consider making the active touchable target of each one extend beyond its visible area.

If you're working with a small touchscreen display, you may be forced to go with smaller buttons. A button size of .375" is acceptable, but never go below .25". Imagine throwing darts. It's difficult, no matter how close you are to the dartboard, to hit the bulls-eye every time. And when the target is a touchscreen button, you can't expect a finger to hit the center every single time. A person with average dexterity touching the same point multiple times will only be accurate within .125".

What about going even bigger? Well, going bigger actually doesn't increase performance and accuracy, and can actually slow the user down because the finger has to move a greater distance with each touch.

 

performance

 

Now for the science behind that ideal button.

Phi is known as the Golden Ratio. It's a mathematical constant like Pi. Except Pi (which is roughly equal to 3.14) has to do with circles and Phi (which is roughly equal to 1.618) has to do with line segments. Since the Renaissance, Phi has been considered by many to be a measure of the perfect proportion. In fact, so many examples of the Golden Ratio can be found in the Mona Lisa that you could literally write a book about it

And if you apply the Golden Ratio to button size, it turns out that the ideal button is .75" x 1.25" instead of .75" x .75".

Here's how you do the calculation: .75" x 1.618 is roughly 1.25".

Morgan Strauss is Director of Operations for Guifx, developer of touchscreen interfaces. He has 16 years of experience designing digital and analog interfaces for the aerospace, medical, automation, and entertainment industries. He's taught many classes and seminars, including 'Interface Design for Touchscreens' at the Consumer Electronics Show (CES). For more design tips visit the Guifx Blog




Comments (0)

This post does not have any comments. Be the first to leave a comment below.


Post A Comment

You must be logged in before you can post a comment. Login now.

Featured Product

Introducing the revolutionary Comelit Visto Smart Doorbell

Introducing the revolutionary Comelit Visto Smart Doorbell

The Visto Doorbell is a new Smart Doorbell from Comelit which combines a modern Italian design with all of the basic features you are looking for in a smart video doorbell. In fact, it is so smart that it can use the 2 wires from your existing doorbell and pass both the power and the data signals. This solves the common problem of having poor wifi coverage all the way at your front door. The Visto also has built in night vision, video recording on a SD card and in the cloud, motion detection, and multiple mounting options including an angle mount. The second thing we are introducing is the Visto Dealer referral program. Because we only sell through the Professional Distribution channel, we want to give our dealers who buy in that channel extra incentives to sell our product. For any security dealers or installers who go on our website www.vistodoorbell.com, and sign up for our program, we will offer the following: - Free referrals to customers in your area - Cashback program - 10% discount during the 1st month of the launch - Free Visto t-shirts and gear - A chance to win a trip for 2 to Venice, Italy Its that easy. Let us refer customer to you and get paid in the process. All while selling a wonderful Italian designed smart doorbell which is innovative and easy to install. So all dealers should protect the pro-channel and install products like the Visto which are made and sold only at your friendly local security and low voltage distributors.