Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

On news websites and news apps, a specific colour is often used for the link to each category (background colour or underline colour), and I would like to understand how this is helpful for the user, especially when more than 15 categories are available.

I understand that the different categories have to be distinguishing easily, however I think an icon next to the link might be more effective.

How does using a different colour for each category help the user?

share|improve this question

5 Answers 5

People tend to scan websites, and so what matters is how easily they will scan an item. The order of significance in scanning is:

  1. Position (relative to other items)
  2. Colour
  3. Contour (outline shape)
  4. Picture (details beyond just the outline)
  5. Text

Allocating a colour to a category makes it faster for regular users to scan and know where they want to go than it would be with just an icon or text.

share|improve this answer

Colors are associated to certain attributes (even more examples) by people very fast, so scanning colors is much faster than scanning images. Especially on a news website where time matters, colors a a good choice in my eyes. This is not so much related to design, but more to usability.

But colors generally mean different things to different users, especially if they are from different cultures. So when designing things in a limited regional context, choosing colors is easier. As soon the you work in a global context, choosing the "right" colors gets more complex. Hence, most "global" websites have a quite neutral base color (check some big companies) of white, black, grey or blue in order to avoid negative associations from users.

share|improve this answer

Attention is selective, and often unconscious.*

The brain is always trying to make patterns in information in order to process it more effectively.

A consistent use of colour to relate connected information is a simple and effective way to help your users make your content easier to process.

But the colour doesn't have to be obviously related to a particular thing so that that new users get it on their first visit. Instead they learn the pattern the more they interact with the content.

It doesn't necessarily even mean that you can ask a user afterwards, what colour they think is associated with something - chances are they won't be able to tell you. But subconsciously the brain builds a pattern and helps them filter information based on colour. Similar to hearing your name mentioned, cutting through all the background noise at a party.

The key is consistency - avoiding overuse of colour and avoid conflicting or misuse of the colours. Cross channel usage is also important: desktop, mobile, tv, retail, etc. It's also important to assign colours to topics users may be familiar with through other channels. Yellow for sport would be wise, and green for ecology and environment for example.

Icons work more consciously, but colour runs much deeper.


* ref: 100 things every designer needs to know about people, by Susan Weinschenk

share|improve this answer

Color coding helps in linking associations and allows users to make instant connections between a content and the type of category it falls under. To quote this article

Newsmap color codes nes items so that you can easily identify which category a news piece belongs to. For instance, red means world news, yellow means national, blue sports, green for technology, purple for entertainment and so on. The intensity of a color determines when that news item was published, brighter colors mean fresher items, whereas lighter colors represent older ones.

I also recommend looking at this excellent article about the use of color in websites and how it helps in categorization :

Color coding is a way to convey information quickly, which facilitates visual search. In the 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.

enter image description here

That said, care should be taken that color is not the only way available for people to make an association as it alienates users with color blindness. As suggested,there should also also be additional aides which inform users which category the content falls under instead of just relying on color.

share|improve this answer

It's a visual cue that helps sorting things easily. It's faster than reading, and with appropriate contrast, easier to distinguish.

However, be careful with your choice of colors. For colorblind users such as myself, poorly color-coded interfaces make our life harder.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.