CDP #001: How to Make Buttons Better on Your Website

One of my favorite topics is addressing how users interact with a webpage because there is so my psychology behind it as well as artistic input. This episode deals with buttons specifically, and how to craft the ones on your site so they are appealing the best to your visitors, helping with conversions, and standing out on a busy page. If you’re looking for some direction on how to handle buttons on a landing page, or a general overview, this broadcast is for you.


 

Show Notes for the CreationDepot Podcast #001

The Science of Buttons

Intro:

Welcome to the CreationDepot Podcast, where we discuss web and graphic design and the why behind the dos and don’ts of the marketing world. I’m your host, Wendy Litteral.

Today’s Topic:

Today we’re going to be talking about buttons, yes buttons. Buttons have a variety of reasons for being on a website, but they all have one common function – to compel a visitor to action – to click on them.

First up, size does matter.

Not just the size of the buttons themselves, but the size of the font and the size of the layout around them. A huge button in a normal-sized layout would look awkward and jarring, but conversely a small button would be easy to pass over right? So there is a trick to finding that happy medium. One tool you can use to draw more attention to a button without increasing its height or padding is to simply make the button’s language a call to action. In other words, make the language compelling, like “Click here to go to this great page.” Instead of “Buy Now” try “Purchase today to get this great deal!” Of course that last one doesn’t work if you’re a shopping cart (in which case you already know they are there to make a purchase), but if you’re working on a landing page for your product sometimes putting that trigger language inside the button not only draws attention to the button, but can actually help the user make the purchasing decision depending on how it’s worded.

Ok more on size – the size of the button should complement your layout, but that doesn’t mean you can’t get creative with it. The size of the fonts within the button also matter. Be sure to use a sans serif or plain font and not any scripted or cursive font. The reason is the last thing you want when trying to persuade someone to buy from you is something that is potentially hard to read.

Next rule – simplicity. It’s just a button folks. As nice as it is to have grunge effects, gradients, fun shapes, and so on, you’re on some level clouding the path to purchasing. Make sure your user isn’t going… “is that the button?” It’s going to be obvious to you – you made it, and if you’re not sure run it by your coworkers or friends. They’ll be happy you asked them, but don’t direct them. Just plop the site down in front of them and say “start shopping.” I’m doing user testing, you’re John Smith and you want to purchase that new snowboard. Go for it. Don’t give them any instructions. If they can’t find the buy now button you’re doing something wrong. Save the crazy cut out designs, the off the wall graphics for your headers and footers. They just don’t have a place in the content where the real purpose is straight up communication.

Which brings up the next point. Code your buttons, don’t make them images. It’s really easy to make a cute, simple little button in Photoshop then pop a link onto it. The main reason you don’t want to do that is depending on how mobile-friendly your website is, that image can look distorted or even not like a button on smart phones and tablets. The way to go is to use CSS and just use straight code to create your button. Bootstrap 4 does a fantastic job with this. It’s a bit like taking a vector graphic of a logo. Looks awesome when you blow it up or shrink it down really tiny because the code is using math to make the image and not relying on stretching and shrinking pixels and guessing at what you want it to look like. A bonus of doing buttons this way is that they are also screen reader friendly for your users who have a vision disability. If you don’t put alt text on that button image or add any other attributes, your visually impaired customers won’t be able to determine HOW to buy from you. If you code the button, you can’t mess it up. The tools that help them can just read your button and your user-friendly purchasing text, and follow those instructions to do what you want them to do.

One place you can be creative, is with CSS animations. CSS3 allows you to do animations without the need for Flash or heavy JavaScript, and we should be taking advantage of it. While you don’t want to go overboard, a simple nudge of the button when the user hovers over it is enough to catch their attention. Other animations include hovers and rotations. Hovers are the easiest and can be simple as showing a darker hue of the button’s original color when the user mouses over it. Just enough to be cool without going over the top. The last thing you want is to have some super cool effect that either doesn’t work on the end-user’s browser, or distracts them from clicking because they’re playing with it.

Finally we have color. There was a study ages ago, and I’ll see if I can find it and put it in our show notes, where two identical pages were A/B tested. The only difference was one had a red button and one had a green button. The one with the red button had something like 2x the number of clicks. Crazy right? It’s just a color, but these warning color buttons pop out at us. We want to address the “danger” first. A button can even be fairly small and still be effective if it’s a warning color like orange.

So to sum up:

  • Pick a size that works well with your layout
  • Use selling language within the button, not just a simple “Buy now” with an exclamation point. Remember, no one likes to be sold to, so make it friendly and a suggestion.
  • Be simple with it. It’s a button, don’t overcomplicate it. Adding icons are great, but making a button out of a giraffe might be confusing.
  • Code it, don’t image it.
  • Use hovers and CSS animations, albeit minimally.
  • And finally, choose warning colors – reds, oranges, and yellows

Ending:

Okay that’s it! I’d love to know what you all thought of today’s podcast in the comments and reviews sections. Thank you for listening to the CreationDepot Podcast and if you’d like to submit your work for a free review, please see us online at www.creationdepot.com/reviewmywork. We’re on Facebook through our closed group. Just do a search for Better Designs. Thanks so much and we’ll see you next time!


I’d like to really encourage you to sign up for our bi-weekly newsletter at creationdepot.com/subscribe because that’s where all the goodies are. The show notes, the downloadables and links are all going to be in that bi-weekly newsletter. We’ll put them on the blog too, but this way you’ll get a notice instead of having to remeber where everything is.
Have a good one!

Wendy

2017-06-18T09:31:33+00:00

About the Author: