When style cramps functionality
What to bear in mind when developing your site.
We all want our websites to look fabulous, whether we’re aiming for something bold, funky, or sleek looking. We might be aiming for a site that features beautiful photography or even just a stylish new font that you’re excited about (sorry, that’s geeky of me, I know). But generally, we start with a vision for our new site, and apart from the odd thing or two we’d like the new site to actually do, our vision is mostly dictated by how we want it to look.
Your new website needs to look like it’s instep with current market trends, and it needs to look competitive. If you operate in a niche market and don’t have competitors, then good for you, but you still need to make sure you’re reaching your audience, serving new and existing customers well, increasing engagement, and of course, increasing sales. The look of your site can certainly affect these things.
Your developers will be well versed in what works well and what doesn’t. Most will insist that they get involved in the visual designs with the graphic designers from the beginning. This is something you will need to consider at the start, and will likely mean you have a site that will need less work and refining later on in the testing stage before ‘go-live’.
So when can design choices start to interfere with how a site functions?
I’m starting with this one, because it’s a question you need to ask yourself very early on, well before the design stage. How important is accessibility to your organisation? Most websites are not just expected to be easy to navigate for the average user, but also for visually impaired users and those with varying disabilities which may affect their online access. If you want to be fully accessible, you need to think about this from the beginning. It can be costly to revise anything a few weeks before launch date, so when you are in the process of ‘needs analysis’, it needs to be on the radar so your developers can bear this in mind at every stage.
On a very basic level, your screen-reader (most browsers have these now) should be able to read your site easily, (and you can test this yourself on your current site if you need to build a case for why your new site needs to be better). If anything odd comes up, then remember that’s the experience of a visually impaired user. Some disabled users are unable to use a keyboard, so it should be easy to tab your way around your site. If you get stuck anywhere, then so will your user.
For a fee, the Royal National Institute for the Blind (RNIB) can assess your current site for you. It will tell you where it needs improving, and you can get your new site approved by them if you wish.
On a more basic level, if you are on a tight budget and need to DIY, there are checklists available online which you can use to measure your site against.
Your text follows the company style guide to a ‘T’. All the headings and styles are right, and it looks lovely – but people can’t seem to actually read it.
If your typography is a fancy calligraphy style typeface, you could be in trouble. This can cause lots of readability issues, especially in paragraphs.
Text needs to be as clear as possible. In the wrong combination it can hurt the eyes and be difficult to read. It might not be hard for your younger users, but if you want to give everyone a nice experience, follow the advice of your designers who will know the rules: light colours on white backgrounds and coloured text (any colour) on black backgrounds can cause readability issues. There are also particular colours that can affect dyslexic users ability to affect your site. See above if you haven’t read the section on accessibility.
Have clear, bold headings. Remember you need your users to find what they are looking for straight away. Headings and calls to action should be big and bold. You may scupper your users if you make them work hard, or even annoy them.
Mind your language
Language-wise you might be aiming for a fresh approach towards your customers, perhaps you’re toning down the formalities, and that’s great – customers are people after all. But remember to think about who your customers are. Try not to use language that will alienate them.
You might also be really surprised to discover how a simple word can cause confusion to users. Try not to steer away from expectations too much. Calls to action like ‘save’ and ‘submit’ are everywhere, you don’t need to be *that* different where it doesn’t count, especially if it confuses the user.
However, admittedly sometimes particular words can show to be confusing in unexpected places where you thought you were being crystal clear, you might only work out glaring errors by user-testing, ironing out any confusion as the process goes along. But try to keep the calls to action simple to save any big changes later.
Pushing your buttons
The thing about buttons is that as well as having the right labels, they also need to look like buttons. The shape and colour of them really should meet user expectations, which at the moment are largely dominated by social media. You may run into trouble using buttons that are an unusual shape and colour – the users can miss them, which needless to say is very frustrating. They may work it out eventually, but do you want to irritate your users?
Which brings me to colour more generally…
Green means go
I can’t stress enough how important it is to use colours in a way that your users will expect.
I have met many users who think a grey button means they can’t press ‘save’ on a form. From buttons, to error messages – be cautious about using a colour just because it’s the one that appeals to you most in your branding.
For example, you may see usability issues if you decide to put your error messages in blue – like when you want to indicate where a piece of information is missing from on a form. Generally the user will expect it to be flagged up in red so they can easily see where they’ve missed something.
However, if you feel really strongly about it and you manage to do this in another colour, and your users don’t struggle, then kudos to you. But colour is vital because users don’t always read things and are just as guided by semiotics as they are text.
There’s nothing like a nice fancy toolkit with lots of cool little images for you to use as design devices throughout your website. Especially right now where much of website design heavily features symbols to represent things in order to lead the user on their journey – a more intuitive style with less verbal instruction. This has been proven to work successfully as a concept, and it’s why so many brands have adopted the style.
But there can be instances where you have a device in your toolkit which looks great, but fails to translate well on a practical level. That can be really disappointing. But you need to not dwell on it. Those devices can be used elsewhere, the best thing is not to wed yourself to designs that don’t work practically and cause confusion about what the user should do.
Same for general page designs that looked nice on the PDFs, but in practice might not translate well to the actual site. Maybe a form looks too busy, maybe on the mobile version looks nice but is hard to use. You need to do what is nice for your user.
Usability is always more important than your branding being conformed to right to the letter. Your branding is a guideline, and you may find that on your website some things don’t work out as well in practice. Guidelines are meant to help your products look slick, keeping the company looking consistent and competitive – but a site that works well and is easy – and even pleasurable – to use is also part of your image.
If you really disagree on whether something visual is going to translate well for the users, the only way to really know is by making sure you test it well with users before the launch date.
But don’t make your users work hard just because something looks nice. When it comes to functionality, substance over style will always win.
Jade Zienkiewcz is a Content Editor who has spent almost 12 years in communications and marketing, delivering content, running social media and helping to develop a number of website and intranets, specialising in the user experience aspect.