Buttons are an important part of any website. They add focus and direction to a user’s experience and allow guided navigation through your website. Want customers to read more about your fantastic new product? You’ll probably use a button to lead them to that information.
As useful as buttons are, it’s surprising how much the design of your buttons can play on the ethos of your brand, but also just as easily leave a negative impression if your buttons are a hindrance.
Here is my slightly satirical, not at all definitive, observations of buttons that you’ll find in every day internet browsing…
These buttons take themselves seriously. They’re nearly always black and white, and if not, certainly a subdued low saturation colour that’s strictly on brand. These buttons usually rely on a simple, square border to define them, with an elegant light font. Minimalist and understated, these buttons don’t need to be flashy as your premium products speak for themselves.
Most well designed, modern sites fit into this category. They remember that buttons are there to be clicked. They literally want us to push their buttons, and in return, we’re rewarded with a pleasant browsing experience. With a dash of colour to catch the eye, marketing folk place them next to a catchy call to action. The buttons are nicely spaced and easily accessible to all kind of fingers and mouse click. These brands are likeable and easy to trust.
These buttons are bold, like the brands they represent. They want to be noticed just as much as they want to be clicked. Brands that sport this kind of button are looking to break the otherwise default rectangular mould. They’re enthusiastic and passionate, usually offering cutting edge products and services.
To the untrained eye this button probably looks fine. It looks like a button, it works like a button should, so what could possibly be wrong with it?
Well, this is the default button styling of your websites framework. While there’s nothing wrong with using a framework like Bootstrap, using the default styling just seems lazy and gives me the impression that your brand could be doing more to fulfil its potential.
My own personal website has Bootstrap default buttons on some pages, but only because I’m too busy playing video games and watching tv (after working hard all day at Billian IT Solutions, pushing myself both mentally and emotionally to produce the most tear-jerking designs possible for our clients). Don’t be like post-5 o’clock me, your brand deserves more.
What does that button do? Will you miss something by not clicking it? If clicking it is essential to find the information you’re looking for, will you know to? Who knows? It might not be intentional, but these buttons can be damaging to both the user experience of your website and your brand. Should you even trust a brand if we can’t navigate their website?
Many websites and apps also use icons to portray meaning. If you’re going to use icons make sure they’re obvious and try to avoid the ambiguous ones.
The year is 2008. You’ve just launched your website. It looks great and works great on your office PC. You’ve spent a lot of resources launching it and want to get your money’s worth out of it. Jump forward to 2018 and your attempts to avoid a redesign have left your site held together with duct tape. These buttons are telling the world every time they click on them. Mobile users must zoom in to be able click them. Users are instantly put off by your website, and by extension your brand. It’s time to re-think.
We’re seeing more and more of these buttons. They don’t really fit into just one category and tend to have interesting effects when you hover over or click them. Pushing the boundaries of what can be done with buttons, it’s only natural that these brands are quirky, leaders in their field, and offer something unique.
Example in the wild – Ebay
I’d place our buttons somewhere between inoffensive and experimental, as they are a little bit quirky, but still very accessible and consistent throughout the site. We offer a unique take on a very niche set of products, and our brand is warm and inviting.
Of course, I could be wrong. These are extreme examples because there’s so many ways you can style a button, but next time your visit a site, think about what that brand means to you, look at these categories and I’ll bet you a bag of pork scratchings that it matches up. If you're reading this post and thinking about your own brand, do your buttons fall into the category that you were hoping they would?