By Oscar Myre IV
Valley Bugler Columnist
I’m warning this article might change the way you look at Website buttons. (At least I hope so). I’m currently working on a Corporate Style Guide for Allied Telesis. I’m collaborating with another designer to improve all visual marketing. The current guide has over 50 pages. The gamut of styles range from; Logo treatment to colors to typefaces to how product photography is handled to trademarks to trade shows etc. Lots of cool stuff to design, and I haven’t even started on the Website elements. I’m now up to my neck in redesigning and modernizing the buttons.
Buttons are an important part of the user experience. Similar to the menu (aka nav) buttons function to help you move within a site. Beyond their function, their form is also very important. An ugly or dated button makes your site and business look bad.
I’ve created a short list of Website buttons “best practices”.
1) Buttons should look like buttons
I know it can be fun to make super cool buttons. But keep in mind, you need to make sure that people know they are buttons and that they can be clicked on. You don’t need to reinvent the wheel (or the button) here. I personally like flat design. Rectangle buttons or ones with a subtle rounded corner look nice and modern. Please use drop shadows sparingly, if at all.
2) Colors matter
Not only do you want the colors to look good, it is also important to consider that the colors say. Yes, colors do talk. One of my favorite design classes was entirely on Color Theory. I recommend you check out this article on the Psychology of Color, listed at the end of this article.
3) Don’t make your buttons go on and on and on…
The text of your button is very important. You want them to say what they do and keep them short and to the point. It takes practice and testing to ensure your CTAs (Call to Actions) are effective. I recommend doing AB testing on your major buttons to get your messaging dialed.
4) Make buttons interactive
Buttons have 4 states or statuses; Normal, Active/Hover, Pressed and Inactive. The Normal is how they naturally appear, refer to #1 above and make sure your buttons look like buttons. Next, we have the Active or Hover state. When people mouse-over your fancy button make sure it changes so they know it is hot (clickable). The 3rd state is when the button has been clicked or tapped. You can add a nice interaction to show the change. There are a few ways to show a button in inactive or not clickable. Often designers will grey them out or quit possibly hide or omit them.
5) Deliver what you promise
With your buttons in place, be sure to click through to make sure the links work AND the page or anchor that they go to makes sense. If not, fix your button text, or fix the content that people are landing on.
I encourage you to take another look at your site and tell Me what you think of your buttons.
Oscar Myre IV is currently Senior Visual Designer on contract with Allied Telesis in Bothell. He is looking forward to attending an upcoming Photoshop training workshop.