Button Preferences
Just heard about an interesting study on the visual design and placement of buttons. Many of the findings seem in line with internal design guidelines and templates we are developing, so I was glad to get some external confirmation. While the study dealt only with user preference (not performance), some of the findings were strong enough that they may be worth considering as a starting point. For example, when shown samples of buttons of different styles, study participants preferred:- Bold button labels (94% to 6%).
- A button background color that contrasted with the page background (86% to 14%). (In other words, white buttons on a white page were not preferred.
- Dark text on a light button background (such as black text on grey or light blue, as opposed to white text on black or dark blue). (78% to 22%)
- Rounded corners (67% to 33%).
The research did not look at other design details such as button borders, fonts, 3-D effects, and so forth. And of course many other site-specific factors play into button design—history, branding, other visual elements, etc. But maybe these tips would be a good place to start if you’re building from scratch.
More study details:
- Aaron Bangor and James Miller, “The Design and Presentation Order of Web Page Buttons.” Proceedings of the Human Factors and Ergonomics Society, 49th Annual Meeting, 2005.
- 63 participants, avg age 39, range of 22 to 65.
- All used the internet more than 5 hours per week and reported to have normal vision.
- Viewed different design options online, then ranked from most to least favorite.
PS—Thanks to John for Typesetting Tip #2, which came in handy several times in composing this post :-]