Link usability - keeping call to actions consistent

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.


Where are they now?
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.


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

For related information and reading as well as a usability case study, please visit my blog.

.