Mars : Mixing colour signals

Strong colour coding is weakened by inconsistency in use of the palette.


click to view

The Site

Mars, US-based confectionery and pet foods company, colour codes the sections of its corporate website but allows conflicting use of the palette. Each of the four primary sections on Mars' corporate website has been assigned its own distinguishing colour: Brands is purple, About Mars light blue. Press orange, Careers green. This covers the primary navigation menu and its secondary dropdown deck, highlight panels and typography as well as a navigation ‘compass’ in the site’s rich footer. In places the coding extends to related links; for example, on the landing page of About Mars related links to the Careers section are highlighted with its green colouring. However, the same colours are at the same time used for decorative purposes. For example, on the About Mars landing page one of the preview panels has an orange background and another a purple background but both link to content within About Mars.

The Takeaway

Mars’ use of colour coding as an associative aid to navigation, allowing users to identify a content area almost sub-consciously, is familiar if not widely used. Its extension to page elements is appropriate in the context of the consumerist ‘look’ that the corporate site has recently adopted, while the apparent inclusion of related links in the scheme is an unusual but effective reinforcement. Much of the benefit melts away, though, under the overall lack of constraint in use of the colour palette. Reinforcement is subverted by the use of the same colours for decorative effect, most especially in places where a link to related content is being offered, as in the preview panels on the About Mars landing page. The demands of the consumerist look for colourful panels and headings are undoubtedly the root cause. But given that the palette has been broadened somewhat to introduce fresh non-conflicting colours for these elements (brown and dark blue are available), the addition of a few more to replace the section colours and reinforce the effectiveness of the coding should not pose a problem.

http://www.mars.com/global/about.aspx
First published 12 June, 2012
< Back to Tips