Colours are Clues

green Stop signImage courtesy of SuperColoring

In North America, all Stop signs are red and only Stop signs are red. The reasons are simple: colour is the most salient of all visual characteristics and uncompromising consistency is the key to all intuitive user experiences.

Imagine if a handful of Stop signs on any given street were randomly re-painted in a non-red colour; the results could be disastrous. The stakes of web design aren’t as high, but the end goal is still effortless decision-making for the user. In general, I think that web designers need to be more judicious with their use of colour.

Distinguish Links from Non-Links

My pet peeve on the web is links that resemble non-links and vice versa. I think that most designers view colour as a decorative tool and underestimate its importance as a usability tool. Once you realize that colour is the first thing that people notice about anything, you can more effectively use colours as visual clues in your designs.

A common design mistake is to use the same colour to accent static headings and text links. Both things need to stand out, but they need to stand out for different reasons. Concise and organized headings help the user to scan content, but text links will always be the most important elements of any web page. Hence, they should be the chosen accent colour, and the headings should be a less prominent colour.

Colours Are Not a Crutch

Whenever something needs to be accented, the easiest thing to do as a designer is to make it an eye-catching colour. However, there are ways to bring visual attention to things besides (over) relying on colour. Because most web pages primarily consist of text, setting up a conventional hierarchy among heading levels and body text is very useful. In the case of static headings, they can still stand out with a carefully selected font size, especially if they have a different font face/type as well.

There doesn’t seem to be a consensus about the ideal number of accent colours, but I think that one is enough. Two can be effective if they’re consistently used for distinct elements or sections. For example, links that lead to different pages can have a different colour compared to links that toggle elements on the page. As another example, header and footer links might be one colour while body links might be another colour.

As mentioned earlier, uncompromising consistency is the key to usability. Yield and Do No Enter signs have red even though they have slightly different purposes from each other and from Stop signs. However, they’re all restrictive in nature. The expectations that road users have whenever they see signs with red are always met: every instance of these signs follows the group pattern as well as their individual patterns.

Pair Colours with Something Else

Users with vision disabilities need to be considered, of course. Stop signs are not only red, they’re also octagonal in shape. North American hazard-warning signs are yellow-coloured as well as diamond-shaped, speed-limit signs are mostly white as well as rectangular, and so on.

Text links should have a second clue to identify them as such. A bold typeface is popular these days, but an underline decoration is always a safe choice. If you use one of these backup visual clues, be mindful if and when you use them with non-links. Simply put, the user should recognize any given link as being a link, even without its exclusive colour.

Do a Simple Test

Show a static image of your web site design to someone. Then get him or her to identify every link on the page. If the person misjudges one link as being a non-link—or vice versa—then you have failed. If the person gives up because identifying every link would be too difficult or time-consuming, then you have failed.

The Conclusion

Colours can be powerful visual clues, so reserve one or two colours for all links, including images, because links are the foundation of the web. Also, pair every link colour with an obvious, non-colour visual clue. Finally, follow your design convention without fail. Otherwise, the user might overlook any links that break your convention and/or mistake non-links that initially resemble links.

If you’re in doubt, then think about how road signs have colour/shape conventions and why these conventions are consistently used.

Comments are closed.