The Button Test

Can you pick out a brand just by their button design? I bet you can. I challenge you to take The Button Test. Get a piece of paper or your favorite text editor and jot down the names of the companies that correspond to each button style. Ready? Go!

All Done?
How’d you do? Answers at the end of the post.

Buttons can make or break your brand

Buttons can be your site's most recognizable brand element besides your logo. A well-designed,unique button style can be the key to establishing and maintaining trust in your site.

Keys to trustworthy buttons

Pick one size for all buttons
Buttons can vary in width, but should maintain the same height. If you do feel the need to make a GIANT call-to-action button, then be sure to use only one giant button per page. Two giant buttons is two too many.

Consistent buttons styles
Style attributes primarily deal with shape and dimension. If you have buttons with rounded corners, then all buttons should have the same rounded corners (with matching border radius). If your buttons have super deep dimension and texture, then be sure to carry these through to all your buttons.

Choose 3 distinct button colors. Max (unless you’re Microsoft).
3 distinct button colors should work most interface designs.

Use one color for a primary action. For example, Google uses blue for their search button while Twitter uses bright yellow for sign ups.

Use another color for secondary actions. Secondary actions are important, but should not compete with your primary button color.

The third color is for every other button and covers the functional stuff like “cancel,” “setting,” and general navigation (disabled buttons don’t count as a color).

Buttons Matter

The Amazon add-to-cart button is perhaps as iconic as the Amazon logo itself and will probably remain unchanged for many years to come. If done well, the combination of button size, style, and color help burn a brand identity into a person's mind. Choose your buttons carefully; you never know when you might be creating an icon.

COLOPHON: Butons of the Web font is Pigeon by Dai Foldes. You can find Pigeon and a slew of other radical fonts at the lost type co-op.

EDITING PROPS: Big thanks to Nozlee Samadzadeh @nzle who out of the blue edited this piece for me because I barely graduated high school.

Answers to The Button Test
1. Google 2. Twitter 3. Facebook 4. Microsoft 5. Pinterest 6. Yahoo
7. Instagram 8. Flickr 9. Spotify 10. Rdio 11. Svbtle 12. Medium
13. Basecamp 14. Square 15. Amazon 16. Quora 17. LinkedIn 18. Path

How many buttons did you identify?
0 - Congrats. You’re normal, not an internet nerd like the rest of us.
1 to 5 - Lemme guess, firewall at work?
6 to 10 - Whoa, not too shabby!
11 to 15 - Ok, I’m getting worried. Go for a walk and get some fresh air.
16 to 18 - Aw snap! Serious internet addict! Clean the raid bucket man!

Thanks for reading!

Follow me on twitter and share your thoughts!