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
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 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.
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
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!