Not so long ago I was asked by a client, if it was possible to change a couple of sections within their site as they just updated their product structure: the client was expanding their products to list two more categories. To make them stand out, their marketing team was thinking of using different colours throughout the main content area so that is looks much more consistent, which included changing all link colours and buttons to these new colours.
As a designer you have probably faced a similar situation before – can I or can I not change the link colours on certain pages to keep a consistent look and feel?
Yes, you can, but you shouldn’t ever. Here is why…
.
Where are they now? – Where can they go?
The simple truth is: links are the way to navgiate around your site. Every user of your site will always ask 3 main questions: “Where am I?“, “What can I do?“, “Where can I go?“. Findability is a key to converting your visitors to customers or returning users of your website.
The importance is to make users not work their way through your site, but to give them a pleasant experience when browsing through your site and its products to then make an informed decision wether or not to make a purchase or enquiry – or to return at a later date again to see what is new.
.
“Where am I now? What can I click on?”
Say for example you change all links, all clickable product headlines and all “read more” links on your site to orange, the main section colour. Since all your links are now a different colour from the rest of the site your users will in all cases spend a lot of time trying to figure out what is clickable and what isn’t, usually ending up in trial-and-error (especially if pages following this page are in another colour again) or giving up trying to figure out how to use your site. Colour differences are often used to indicate different areas of a web page, provide feedback and highlight headings and selected areas of text. With all these uses, care needs to be taken so that colours are chosen to make it easy for any user – no matter how experienced or inexperienced with using websites – can distinguish between what is text, what is a headline and what is a link. As such, changing link-colours throughout the site will result in confusion, as call to actions change or may not even be visible as ones.
Case study
Case in point, I performed a study with 23 individuals (aged 25 – 35) asking them to have a play with a website prototype and perform a couple of simple tasks (“Find information about product x”, “make an enquiry about product y”). On the prototype itself I changed a couple of pages’s links and buttons entirely, still the same sizes, but entirely different colours.
We began the test by giving each user an introduction to the project and what we expect from them today. We gave them a brief outline about the project and what tasks we would need them to perform. The test was monitored by sitting at a distance to the user, making shorthand notes. All 23 of the audience hesitated at these different pages, 18 out of 23 (78%) stopped the test, asking if this page was un-finished or if there was something wrong with the system. 14 out of 23 (60%) began randomly clicking items “to see what they did”, while 5 (21%) clicked the “back” button, trying to find another – “more comfortable” – way to the information.
This is obviously just one quick study, but it is already giving you a clear picture what to look out for.
.
A best-practice approach
When it comes down to links and call to actions, it is always best to follow a couple of guide lines:
- Don’t make non-link text within copy the same colour as link-text
- Make links change colour or display-value (bolder, underline) when hovering and another colour when visited.
- Graphic-based links (buttons, panels, etc) should be clearly distinguishable from the area / graphics surrounding them, should have a label and have text embedded in them
- A graphic referring to and adjacent to a text-based link (such as a hotel picture above the hotel title on a search results page) should be a link too (and have an alt-tag)
- Tabs should at the very least have a “normal”, “hover”, “selected” and “pressed” state
.
Related reading:
Derek Powazek – Where am I? (A List Apart)
Jakob Nielsen – Visualizing Links and Change the Color of Visited Links (both Useit)
Nick Usborne – Helping Your Visitors: a State of Mind (A List Apart)
Roger Hudson – Navigation Accessibility: Menus and Links (Web Usability) (Web Usability)
