the hamstu

I received a question by email some time ago concerning button design, and how to make buttons better. Though the answer depends a lot on the context of the button, I’ve written here five tips that I think could help any budding buttoneer. (Arr!)

1. Contrast, contrast, contrast. I said that three times because it’s important – your buttons have to be separate visually from the rest of your design –The first way to do this is by using a different color, it could be as simple as making the button brighter (or darker) than the surrounding area , or you could try adding a contrasting border around your button. Just make sure it stands out somehow from the rest of the design.
2. Follow UI guidelines. This is a bit broader than just buttons, but it’s still applicable. More so if you’re developing something with that “Desktop application” feel (or, of course, an actual Desktop Application). Both Apple and Microsoft have made this information available online. But remember, these are only guidelines, not rules, so feel free to be creative.
3. Add visual cues. The most useful being the “on-mouse-over”, or “hover” state. The change doesn’t have to be dramatic, a slight change in brightness or border would do, just enough to say: “Hey, You can click me!”
4. Have unity. By that I mean buttons with similar or related functions should generally look the same. But even then, buttons with unrelated functions should hold some similarities, such as font and proportions. You want unity across the board as well.
5. Omit useless/needless buttons. Strunk and White first told us to omit needless words. And I believe the same concept can be applied to UI design. Case in point; the infamous “Reset” button in a typical web form. I mean, let’s be honest here, how many times have you used that button? If you answered “very rarely”, then you’re not alone. For 90% of forms, it’s nothing more than a nuisance, waiting to be clicked accidentally, and consequently forcing the user to redo the entire form. So if you have a button that serves only to take up empty space, leave it out. You’ll never miss it, and neither will your users.