What Your Buttons Say About Your Brand

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…

“The Sleek”

These buttons take themselves seriously. They’re nearly always black and white, and if not, certainly a subdued low saturation color 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. 

Examples in the wild – www.volvocars.com, www.hotelchocolat.com, www.whereaboutsholidays.com

“The Inoffensive”

Most well designed, modern sites will fit into this category. They’ve remembered that buttons are there to be clicked. They literally want me to push their buttons. And in return I’ll be rewarded with a pleasant browsing experience. They’ll add a dash of colour to catch my eye and those marketing folks with put them next to a catchy call to action. The buttons will be nicely spaced, easily accessible to all kind of fingers and mouse click alike. These brands are likeable and easy to trust.

Examples in the wild – www.tesco.com, www.trivago.co.uk, www.seat.co.uk

“The Rounded”

These buttons are bold, like the brand 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.

Examples in the wild – www.spotify.com, www.mozilla.org

“The Default”

To the untrained eye these buttons probably look fine. It looks like a button, it works fine, what’s wrong with it?

Well it’s the default button styling of your websites framework. Whilst there’s nothing wrong with using a framework like bootstrap, leaving them as the default just seems lazy, giving me the impression that your brand has yet to fulfil it’s potential.

My example here is www.cruise118.com – a huge cruise company, but their green buttons look a lot like boostraps’ default. A quick inspection confirms that the buttons are from “slick theme” which is built on top of bootstrap.

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 me, your brand deserves more.

“The Confusing”

What does that button do? Did you miss anything by not clicking it? Who knows. If you needed to click it, would you have known to? Whilst It might not be intentional, these buttons can be damaging to both the user experience on your website, and your brand. Why should I trust a brand when I can’t navigate their website?

A lot of websites and apps also use icons to portray meaning, if your going to use icons make sure they’re obvious and try to avoid the ambiguous ones.

“The Outdated”

The year is 2008. You’ve just launched your brands website. It looks great and works great on your office PC. You’ve spent a lot of resources getting it launched and want to get your money’s worth, but jump forward to 2018 and your attempts to avoid a redesign have left your site held together with duct tape. And those 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 for a re-think.

“The Experimental”

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. These brands are pushing the boundaries of what can be done with buttons and so it’s only natural that these brands are quirky, leaders in their field, and offering something unique. 

Example in the wild – Ebay.co.uk

So what about Design For Travel?

Our primary focus of Design For Travel is to provide premium and diverse web design solutions to all types of clients that come our way. And like our brand, our buttons also represent that premium feel, falling into “The Sleek” group; square edges, solid white border with a black background and an elegant font to suit.

To conclude

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, have a look at these categories and I’ll bet you a bag of pork scratchings that it matches up. If your reading this post and thinking about your own brand, do your buttons fall into the category that you were hoping them to?