The Care and Feeding of Buttons

nobody@vox.com(Paul) — Thu, 21 Dec 2006 11:27:02 -0600

I must admit, I get choked up over buttons. Good buttons. Nice buttons. Helpful buttons. I'm not talking about the buttons on the shirt I'm wearing, nor the ones on my coat. I'm of course talking about virtual buttons: buttons on websites and in interfaces.

We're in the midst of redesigning our site at work, and the form standards (which are all-new) were gleaned from lots of research already out there. I did want to take a moment to talk about buttons, though, since I love them so.

Dry and Cold

Most buttons on most websites evoke no emotional response. "Submit" and "Submit Query" are the most common in part because they're the defaults for the submit input element. Lots of new folks are quick to leave these and just never come back to change them, and I think this is a grave mistake.

When someone clicks a button, that button should give evidence as to what it's going to do. Like on the page I'm typing this into right now has a big ol' Save button at the bottom, centered, and called out. That's great: it's an easy target, easy to read, and tells me exactly what it's going to do. Compare this with, say, this random form. "Send". True, but blah. And don't get me started on the "Clear" button. (Don't ever use them, ever. Ever. Ever.)

One fine example comes from Google Checkout. When you're at the very end of the checkout process, the final button, the one that does everything, the one that makes you give up money, is labeled: Place Your Order Now $779.99. Very nice: it tells you what it's going to do, and how much it's going to cost - a big relief to see, even though it's on the page multiple times.

We've taken that and adapted it for our e-commerce transactions. For instance when you're signing up for a class or event on our site, we've changed the old "Register Now" button to the dynamic Register Now - Charge My Card $30.00. For donations, Donate Now - Charge My Card $30.00. It tells you exactly what it's going to do and what will happen.

Obvious

One other issue with a lot of buttons is that they aren't called out very well. They tend to be the default Sleepytime Gray color. Color is important to use correctly, and can be used with buttons to make actions more obvious.

Again, using the Vox compose page as an example the giant Save button (as well as the less important "Edit Date" link) are in an area backed by a Web 2.0 gradient. That's good: it draws your eyes' attention there so you can say (interally), "Oh yeah, that's where I need to go."

We've run with that idea too. Our buttons are now our corporate color (purple), and are set against a lighter purple background color. The standards dictate that only one action button appears on each page under most circumstances (there are always exceptions!) This means that any other actionable thing is styled as a plain link - just like Vox's "Edit Date". It's there, it's still got some importance, but not as much as completing your transaction or continuing on in the process.

Default

The surprising thing in all this is that people have grown accustomed to the dry, robotic "Submit Request" and its friend "Submit". Thus, when we see a great example of an emotional button we might feel even more than we ordinarily would. Vox's Save doesn't move me as much as our Register Now - Charge My Card, but I'm jaded. The simple fact that the Save button is larger-than-average makes up for it a bit, and definitely points people in the right direction.

When we work with websites and computers, the dialog should mimic person-to-person interaction as much as possible. That means paying attention to the little details, right down to the cold "Submit Request". I encourage you to give your default buttons a second look, and think about what they really do. Then, restyle them. Pretty them up, make the text work, and give your visitors an experience.

Read and post comments | Send to a friend

3 Stations East

The Care and Feeding of Buttons