I think half of the buttons that are used these days as the main call-to-action on a web page don’t invite me to click.
You could and should test button design. But with all due respect, sometimes you don’t have to test to figure out what the best practice is. Button design has changed a lot over the past decade, right? The current trend seems to be to blend a button into the design. Yeah, that will make it stand out.
Note that not every button is a designated call-to-action. Sometimes you just need a button, like in your comment form. Nevertheless, that button should look like a button! In this post, I’ll discuss five types of buttons and give you my opinion as a full-time web surfer on these.
Default buttons
I found a really nice article on how to style buttons for your 2004 website. I think default buttons should be just that. Ancient, old, and in a museum. Not on your website. I hesitate when I have to fill out a form that has that old styling. It makes you wonder whether the form is safe and your data won’t be collected by Nigerian princes with loads of leftover lolly. It’s default, it’s a button, but come on, you can do much better than that.
Flat buttons
Flat buttons are like colored squares or rectangles with words on them. It might be a banner or could just be emphasized words. I know flat design is very popular and a lot of you designers out there like the button that fits the design, and stands out by color. I think we’re going to look back on this 10 years from now and wonder why we used these. Not saying flat buttons are wrong per se, but I like my buttons to look like buttons:
The first one (top left) is the flat button that looks like a banner. I even used 234×60 pixels -remember that banner size? The top right one is a slight improvement. Rounded corners make it look a tad bit more like a button. The bottom left one is even better: a raised button. The shading indicates that it is possible to click. And for conversion reasons, I’ve added some additional trust to the last one. This probably works when it’s the main call-to-action on your website, but is unnecessary for form buttons. I’d rather add a nice testimonial below these form buttons to enhance trust.
Ghost buttons
In the post I did last week, these were mentioned related to ghost banners. Ghost buttons seem to be the no-go button for UX designers at the moment, and I understand why. UXMag has some great examples of ghost buttons. I especially like the Integra example, as that website actually looks impressive, almost game-like. Here’s a still:
Feel free to click to that website for an impression, but the bottom line is that there is this showreel of moving images behind the focused text on the homepage, making that ghost button ‘Showreel’ indeed look like it is telling you what is going on. You’re looking at a showreel. I think that isn’t a bad practice, to tell people what they’re looking at, but it is actually a button. It starts sound and more video. All looks awesome, except for that one tiny ghost button…
One-state buttons
There’s a second element that is important here. It’s not so much about how the initial button looks like for the visitor, but it’s about hovering a button and finding that nothing changes. Is it a button, or perhaps not. Now I have to click to find out if that thing that looks like a button is actually a button. Hm. People tend to hesitate before clicking and using one-state buttons without a designed hover-state will only make them hesitate more.
Adding a hover-state can be as simple as underlining the words on your button, or changing the background color. Or both.
The best buttons
There is a nice, simple round-up of button best practices on Blogs.adobe.com that I’d like to combine with the one on DesignExcellent:
Bonus link: How button color contrast guides users to action.
The first item in the list above summarizes my point: a button is a button. Not so much a design element. Button UX design is about recognition and clarity.
While writing this post, it struck me that we don’t follow some of these best practices to the letter on this website as well. That varies from links that look like ghost buttons to buttons that look like quotes, like this one:
Our eBook ‘UX & Conversion from an holistic SEO perspective’ is on sale! Get it now for only $14 »
There is always room for improvement. When you would review your own buttons (or have us do that as a part of our site reviews), start with the ones that matter most, like the buy button on your product page or the subscribe button for your newsletter. And keep in mind that not everything is a button or should look like it.
Feel free to share your opinion.
Source:: SEO
