An article by Precision Intermedia inspired the following thoughts on the use and overuse of colour, which applies just as much to dashboards, as it does to web sites.
Colour, along with (font) size, style (bold, italic, underline) and relative positioning on a page are the dominant ways of emphasizing certain visual elements over others. Colour is critical for dashboards, as almost any dashboard contains graphical elements such as charts and visualizations, which inherently use colour. However, colour is a complex thing, more complex than most people think, especially when it comes to designing web pages in general and dashboards, and their charts, in particular.
As summarized below, from the above-mentioned article and also at many other similar sources, the basics of colour and meaning association are fairly straight-forward. However, colours have to be applied thoughtfully, especially for dashboards where colour is rightly presumed to have meaning. This is particularly true of the omnipresent “traffic light” colours, red, orange and green, which have an almost universal understanding attached to them.
White - Purity, cleanliness, safety, creativity; mourning (some eastern cultures); Projects absence of color, or neutrality; compression of all colours in colour spectrum
Black - Authority, power, stability, strength, intelligence, seriousness, somber, sometimes associated with evil (black hat), grieving (in western hemisphere); Evokes strong emotions; easy to overwhelm with too much black. Makes objects appear thinner
Grey - Practicality, timeless, middle-of-the-road, solidity (a little grey), nothingness/emptiness (too much grey). Some shades associated with old age, death, taxes, depression, lost sense of direction; Silver (an off-shoot of grey) a helping hand, strong character.
Red – Danger; energy, movement, excitement, life; Draws maximum attention, where the eye looks first, over use is NOT good. Pink (shade of red) calming, romance, love, and gentle feelings
Yellow - Cheerful, laughter, happiness, good times, optimism, creativity; when intense, i.e., the color of flames – anger. Quickly overpowering if over-used; used sparingly can be an effective highlight. Some shades associated with cowardice; more golden shades with promise of better times
Orange - Warning; flamboyance, fun, happy, energetic, warmth, organic; ambition. Nothing even remotely associated with calm
Green - Growth, nature, money, peace, harmony, comfortable nurturing, support; envy, good luck, generosity, fertility; calming, pleasing to the senses. Dark forest green – conservative, masculinity, wealth
Blue - Productive, steadfastness, dependability, wisdom, loyalty; calming/restful/focused (some shades), cold/uncaring (some shades)
Purple - Wealth, prosperity, rich sophistication (royal); air of mystery, wisdom, respect. When overused appears artificial; stimulates brain activity used in problem solving
Brown - Reliability, stability, friendship; natural, organic
You don’t have to look very far to see really bad examples of the use of colour in dashboards, and web pages for that matter. Perhaps surprisingly, some of the most serious offenders are not IT developers. They might be forgiven, as visual information design skills are not the natural complement of the technical skills required to implement many of the aspects of a dashboard. It is marketing departments, who should know better, who saturate dashboards with too much colour, usually as well as having too greater information density in number and content of charts.
The general principle of applying colour in dashboards is that “less is more”. A well designed dashboard should provide appropriate emphasis and contrast. Look at the image at the top of the page to see a great example of this. The red dress, balloons and shoes almost jump out of the image.
When designing a dashboard, ensure contrast and adequate white space to rest the eyes. There seems to be a current fad for making black backgrounds for dashboards specifically rendered on iPads. It is not clear why this is so, but you see it with surprising frequency.
Other good design principles include the appropriate use of what Edward Tufte calls the “data-ink ratio”. This means considering how dark axes, separators, outlines, fills should be on objects in a dashboard, and even if they should be present at all. There is some debate on what represents a good ratio, though discussion of this is beyond the scope of this article.
There are three major uses of colour, which we will call; numerical, aesthetic and semantic.
#1 Numerical data colour, i.e., quantative, categoric, divergent, where importance is generally indicated by increased saturation and intensity. A classic quantative example would be a dashboard with Traffic Light coloured symbols indicating good (green), fair (orange) and red (bad). A categoric example would be a bar chart or pie chart where the different categories (slices, or bars) are in different colours. The colour itself doesn’t mean anything other than to distinguish the different categories.
Classic faux pas of categoric colour use include using red, orange or green for some categories, which suggest goodness or badness of the category, when this is not so. This is compounded when red, orange or green are used elsewhere on the same page, in a different chart, and there it does mean good, fair or bad. Other common mistakes include using different colours for the same category in different charts, especially on the same page; and using the same colours for different categories, again, especially on the same page.
#2 Aesthetic colour – which has no data meaning and is simply meant to make the dashboard/chart more appealing. This might sound like a good idea, but if used, such colours have to be chosen carefully, to not conflict with other colour uses. Good examples of aesthetic colour are the use of earthtones, cool and warm colours, but nothing “unnatural” like purple! Aesthetic colour should be used sparingly, and should consider the use of white space.
#3 Semantic data colour – which has meaning, but not of quantative data values. Classic examples are to use a fill colour around the name of a business entity, such as but not limited to a financial reporting period (This Year, Last Year, MTD, QTD, YTD) that occurs multiple times, especially across pages. Here it is as important as with numerical data colour to be consistent, especially across pages. The colour essentially represents its own implicit legend and a business user will quickly come to associate the colour with the business entity, even without reading the name of the entity.
These are just some of the design principles that should be applied to dashboard and chart design. The above colour usage principles can be summarized succinctly as follows:-
• Provide both emphasis and contrast– use colour appropriately and sparingly, “less is more”, remember the white space
• Be consistent, especially across dashboard pages and tabs and across chart types; having a standards document that defines colour use is invaluable and both IT developers, who no longer have to guess or ask, and the business community who will see those colours every day, week or month, will both appreciate standardization
• Understand what the purpose of the colour is, aesthetic, (quantative) numerical, or semantic data
Follow me on LinkedIn