Touchscreen Button Dimensions and Spacing — Hell If Phi Know

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.

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.)

Button 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 Chart

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″.

18
Comments
  1. I’ve been reading your blog and the information here is very valuable indeed for design work. thank you and i hope to read more interesting things.

  2. Quite appreciate your articles, really helpful! 😀

  3. Great post. Do you have any data on using the golden aspect ratio for buttons? I’m a bit skeptical. 🙂 I understand it makes sense for some things (like screens), but I wonder if it really applies to buttons.

  4. @hezral, @JJ.Ying – I’m glad you’re enjoying the articles.

    @Kevin Arthur – The studies show that shape has little impact on performance. Size is most important there. The golden ratio is about aesthetics though, so for the Aesthetic-Usability Effect, it’s a good base. For buttons, it’s pleasing to the eye and provides a frame suitable for labels of varying lengths and alignments.

  5. Really helpful Buddy

  6. Good post Morgan. I’ve always thought that button size is too often ignored in favor of appearance and style. The information from the study is interesting, but in the A/V industry you almost always have to go smaller than 3/4″. I think I could get about 4 to 6 buttons on a TPS-4 or iPhone. Of course, then you could operate it with a closed fist…or your forehead perhaps. 😉

  7. @Daniel. I appreciate the feedback 🙂

    @Crestron templates – Just note that 3/4″ is the sweet spot for maximum performance — critical when designing a touch interface for users with vision problems, reduced mobility, or large fingers. A range of 1/4″-1″ is recommended above though — and this would apply to any industry.

  8. so useful!

  9. Very Helpfull

  10. GUIFX,

    The content on you’re blog is very helpful, all designers of any applications could learn a lot here. Thank you for providing such great tips.

    Thanks!

  11. Very interisting… I would like to use this content for my diploma thesis, but first I would like to know if your performance and accuracy graphic has any scientific background… some evaluations or stuff like that?

    Thx

  12. Great article! And great blog.
    I’d like to see more in this category!

  13. Nice article!

    While using ? to derive dimensions for use in a layout can give aesthetically pleasing results on the visual design side, taking into account Fitt’s Law (http://bit.ly/fitts_law) can often prove to be of more assistance with the interaction design.

  14. “Now for the science behind that ideal button.”
    What science? Please justify this result. There is no science shown here. I’ll like to see test results for this, this is this sort of statement that gets visual designers a bad name. Tests done at Xerox back in the early 1980’s that show .75 x.75″ is just fine, with no gap between the button being necessary at that button size (somewhere in my files I still have this paper). These tests where admittedly on screens that were some 600 mm from the user.
    And why a horizontal golden square button and not vertical? If I remember correctly it is easier to position the arm/finger horizontally than vertically.

  15. Fitt’s attempts to create a guideline for interface functionality and Phi analysis attempts to explain why the good ones are so.

    I have used a cool Phi-based color picker called PhiBar for years to help choose complimentary colors. It is still available for download on 4shared and other file hosting sites. Search PhiBar.exe

  16. Thanks for all this information, is very useful. Definitely you are UI experts-

  17. Thank you for your tipps. But I still want to know more precisely, where have you seen this information”ISO and ANSI standards recommend making them .75? (3/4?) square”? In which standard is it?ISO 9355-1?ISO 9355-2?

  18. When describing dimensions the standard is to use width first and then height second. so button size would be 1.25 x .75

Leave a Comment

You must be logged in to post a comment.