Is it helpful to colour-code different sections of a website?

Question

A design pattern that's been around for a long time is the tendency to use different colours to demarcate different sections of a website.

For example, in the BBC.co.uk website, hover over the main menu items and you will notice a colour in the bottom border of each menu item. Each colour is the linked to its respective section.

For example, the News section uses a red colour scheme, and the Sport section uses a yellow colour scheme.

But is this of any benefit to users? Personally, I've never been convinced. The colours don't help me remember anything, or find anything. Are there any other UX reasons to use different colours for each section?

Answer 1

There are a number of reasons for why websites go for color coding as given below:

• Color coding helps up speed up the visual search as it enables users to quickly jump to a specific section with the knowledge of the the color associated with it. To quote this article :

Color coding is a way to convey information quickly, which facilitates visual search. In this Washington D.C. metro map, as with most schematic subway maps, color coded lines represent the different rail lines. Visual searching occurs when we actively scan the environment to locate a specific feature among many distractors. In this case, color makes it easier to visually follow the path of a rail line, speeding up the search process.

• Color is used to create structure : To quote from the same article

Color is often used in technical documentation and textbooks to convey structure. Each chapter might feature a different colored heading and a block of the same color may appear on each page, making it easy to distinguish between chapters. Another approach to color structure can be found in the book, Designing for Small Screens. Each chapter is organized into three sections, denoted by vivid colors. The sections form three tracks running through the book, which is described visually in the table of contents shown below.

• Color can be used for associations : As mentioned in your example,the use of color enables users to specify associations and link content together. Colour-coding sections will allow your visitors to subconsciously group content together.

All of this said, the use of color alone to convey information can lead to trouble when dealing with people who suffer from some form of colorblindness. It is strongly recommended that to keep designs inclusive, use redundant attributes, such as icons, labels or patterns to ensure everyone can perceive the information that color conveys. To quote the W3C standards on accessibility .

The objective of this technique is to ensure that when color differences are used to convey information, such as required form fields, the information conveyed by the color differences are also conveyed explicitly in text.

Answer 2

In the context of a section of a web site, assigning a specific color for each section in and of itself likely won't bring much meaning to the end-user outside of literal connections (maybe a section is about water, so it's blue, for instance).

Color coding sections of a web site can be useful, however, if it's important that a user realize they are in a different section of the site. In other words, a chage of color communicates that this section is 'different' than the one they came from, even if the color, itself, doesn't represent anything specific.

Beyond that, color coding sections of a site can sometimes simply be an aesthetic/branding call.