Design Principle 3. Contrast

by Ryan Goodman

3. Contrast - Contrast is the difference between visual elements in a dashboard to make them distinguishable from others. In your previous or current dashboard projects you are automatically generating visual contrast and may not realize it. This is based on decisions that you make in component positioning, color, size, and sometimes motion. The key is to understand the basics so you make correct decisions.


Position
The best way to avoid chaos or confusion for your end user, you should position elements on the stage based on the best practices I explained with placement and proximity. In most cases, you do not want to rotate or position elements out of place just to fill white space.

Color
Color is extremely important to dashboard design. Though we are used to highly stylized graphics in media, there is some careful planning that must be exhibited when choosing colors. Many firms incorporate their corporate/brand identity in their dashboards, which is fine, unless it interferes with the analysis. Let’s look at a few methods for creating contrast with color…

• Alerts- Alerts are a great method for creating contrast using color, to identify measures that fall above or below a determined tolerance levels. While the traffic sign (red, yellow, green) methodology has transposed itself into the scorecard/dashboard arena, there are two issues that can arise.
  
  Confusion of color context: The use of alert colors in charts can sometimes cause confusion because an end user may not know if the red bar chart is referencing a target threshold (threshold) or just red because the designer liked the color red. That said, if you absolutely must use saturated (red, yellow, green) colors in your dashboard, do not do so within your graphical controls (graphs, gauge needles, buttons). Though they may convey your brand identity color scheme, they may lead to incorrect perception of the information presentation.
  
  Alerts for Color Blind: While alert colors do a great job for conveying information, you must always consider your audience and their needs. Using color alerts can be a problem for individuals that are color blind because they are not able to interpret red, yellow, and green as incremental alert colors. A way to work, around this to please all end users is to pick out a single color and use lightness to communicate visual alerts through color. You are basically creating a 2 or 3 color gradient which is just as effective for red, yellow, and green.
  
  
• Lightness, Saturation, Readability: Though I will not break down lightness, saturation, and readability in great detail, (this could be an entire article itself), I did want to touch on these elements of color management within your dashboard project. The goal is to have enough color contrast between layered components on the screen so that the content is easily readable. You can adjust lightness, contrast, or select complimentary hues (color) to create contrast on the screen. There are a few guidelines that always try to follow in a dashboard project..
• Use light backgrounds and dark text for larger bodies of text.
  • Use muted colors (shown in alerts graphic) through-out your dashboard design
  • Do not use fully saturated colors for graphs or accents (scroll bars, buttons, etc).
  • Before deploying a dashboard, test it on multiple monitors to ensure readability (LCD, CRT) because people use different hardware and monitor configurations

Size
Changing the size of an element to consume a greater percentage of limited screen estate is a commonly is a common use for creating contrast. This method is also commonly misused, and usually attributed to a designer’s choice to size components to fill whitespace. Having a few large graphs on a page is not a problem, but having components that are sized inconsistently just to fill whitespace can cause a dashboard to look un-proportionate. Though the art within a gauge is sleek looking, does not mean it will bring incremental value by consuming a lot of screen real estate. At some point I will elaborate on gauges in another article.

Motion
I have touched on motion in previous article, but it is certainly a medium for contrast introduced with computer graphics/UI design. Motion is an interesting and captivating method for creating contrast, but does not truly bring incremental value unless you are visualizing real time trending or change. The best application of motion is watching a trend change over time, but qualitative information is always required to support a robust visualization solution like this.

Container
An easy method for creating visual contrast on your dashboard is to enclose elements in their own visual container. Many applications support some type of container to create visual break in content. The best way to achieve this is through the use of shapes. Containers are really a combination of the methods described before, but are extremely relevant in dashboard design.