Fundamentals of Design for Dashboards
Dashboards have become a vehicle for increasing BI usage across the enterprise by making information more accessible to users. In order for dashboards to have maximum impact, fundamental design practices must be embedded into the development process. Good dashboard design is important to increase user adoption and also to prioritize the way information is presented to an end user. But how do we improve the quality of our dashboard designs to achieve this goal?
Let’s take these one at a time. There are “Shapes”. Rectangles, circles, and lines are some “Shapes” one might find on a dashboard. (Figure 1)
There are “Sizes”. Sizes may depend on the data or how you choose to express the data. (Figure 2)
“Distances” may be near (Figure 3) … or far. (Figure 4) Two similar metrics might be separated to avoid ambiguity.
“Hue” refers to the color name. There’s red, green and blue (Figure 5). There’s also orange, purple, yellow and many, many other “Hues”.
“Saturation” refers to the AMOUNT of color. In Figure 6, I’m showing diminishing “Saturation” from the bottom to the top of the figure.
“Value” refers to the darkness or brightness of a color. That’s how some software packages refer to this variable (Darkness and Brightness). I think of a color’s “Value” as how much black has been added. In Figure 7, I’ve added “Value” to the various “Saturation” levels … so there’s an increase in Value from left to right across the figure.
“Techniques” can be applied to “Elements”.
To "Compare", we may place two shapes side by side with no change in their physical appearance. (Figure 8) One might use this technique when there are two metrics that are important to regard with equal weight in comparison to one another.
Or, it might be that one metric is more important to "see" first. In this case we can use the technique of "Contrast" to force the viewer to see one metric first. The highest relative contrast to an "Element" gets the most attention, whether it be size, shape, or brightness. (Figures 9, 10 & 11)
Let's start with understanding how to control design.
In any kind of design work, there are "Elements" and "Techniques" that are used to achieve certain "Effects" and "Feelings".
These domains are referred to as the fundamentals of design and can be combined to direct user attention, emphasize meaning, and improve the overall aesthetic of organizational dashboard deployments. These fundamentals work on human perception of your dashboard design whether you’ve intentionally directed the design or not. This article will allow you to gain a deeper understanding of each of the elements and provide examples of combinations that can be used to maximize the impact of your dashboards.
Let’s discuss the domain of design “Elements” first. The following are some example design elements:
ELEMENTS
Shape
Size
Distance
Hue
Saturation
Value
Size
Distance
Hue
Saturation
Value
Let’s take these one at a time. There are “Shapes”. Rectangles, circles, and lines are some “Shapes” one might find on a dashboard. (Figure 1)
There are “Sizes”. Sizes may depend on the data or how you choose to express the data. (Figure 2)
“Distances” may be near (Figure 3) … or far. (Figure 4) Two similar metrics might be separated to avoid ambiguity.
“Hue” refers to the color name. There’s red, green and blue (Figure 5). There’s also orange, purple, yellow and many, many other “Hues”.
“Saturation” refers to the AMOUNT of color. In Figure 6, I’m showing diminishing “Saturation” from the bottom to the top of the figure.
“Value” refers to the darkness or brightness of a color. That’s how some software packages refer to this variable (Darkness and Brightness). I think of a color’s “Value” as how much black has been added. In Figure 7, I’ve added “Value” to the various “Saturation” levels … so there’s an increase in Value from left to right across the figure.
“Techniques” can be applied to “Elements”.
TECHNIQUES
Comparison
Contrast
Repetition
Juxtaposition
Proximity
Contrast
Repetition
Juxtaposition
Proximity
To "Compare", we may place two shapes side by side with no change in their physical appearance. (Figure 8) One might use this technique when there are two metrics that are important to regard with equal weight in comparison to one another.
Or, it might be that one metric is more important to "see" first. In this case we can use the technique of "Contrast" to force the viewer to see one metric first. The highest relative contrast to an "Element" gets the most attention, whether it be size, shape, or brightness. (Figures 9, 10 & 11)
In Figure 11, contrasting color adds another level of meaning to dashboards. The use of red as an exception indicator is one such example.
One last technique example…relative Proximity can also create meaning. In Figure 12 the chart placed far away from a grouping gets a lot of attention and feels different from a chart in the group on the right.
As you can see from the examples used, certain "Techniques" used on the "Elements", create certain "Effects" (harmony, agitation rhythm, focus, balance or hierarchy) Good, design is about relationships between these fundamentals and, as a result, users attach meaning to these relationships. These meanings lead to "Feelings".
Some may suggest that there is no room for "Feeling" in business. But feelings are important and are capable of driving effective and sound decisions.
For example, in Figure 13, by contrasting "Saturation" and "Hue", we can create "Hierarchy". This results in the most "out-of-place" color getting the attention first. Ultimately the design "Elements" and "Techniques" create "Effects" that tap into human emotion which drives a decision. In this example there is "Contrast" and not sameness, so the user feels some discomfort driven by the application of the universal "Uh-oh" color, red. This results in the user feeling alarm.
In future Dashboard Design 101 articles I will explore additional ways to leverage the fundamentals of design to improve user experience of dashboards.
Figure 1
Figure 2
Figure 3
Figure 4
Figure 5
Figure 6
One last technique example…relative Proximity can also create meaning. In Figure 12 the chart placed far away from a grouping gets a lot of attention and feels different from a chart in the group on the right.
As you can see from the examples used, certain "Techniques" used on the "Elements", create certain "Effects" (harmony, agitation rhythm, focus, balance or hierarchy) Good, design is about relationships between these fundamentals and, as a result, users attach meaning to these relationships. These meanings lead to "Feelings".
Some may suggest that there is no room for "Feeling" in business. But feelings are important and are capable of driving effective and sound decisions.
For example, in Figure 13, by contrasting "Saturation" and "Hue", we can create "Hierarchy". This results in the most "out-of-place" color getting the attention first. Ultimately the design "Elements" and "Techniques" create "Effects" that tap into human emotion which drives a decision. In this example there is "Contrast" and not sameness, so the user feels some discomfort driven by the application of the universal "Uh-oh" color, red. This results in the user feeling alarm.
In future Dashboard Design 101 articles I will explore additional ways to leverage the fundamentals of design to improve user experience of dashboards.
Figure 1
Figure 2
Figure 3
Figure 4
Figure 5
Figure 6
Figure7
Figure 8
Figure 9
Figure 10
Figure 11
Figure 12
Figure 13
Suggestions Welcome:
If you have a design topic you would like to see covered, email it Rose Weinberger at: rose@dimins.com
Sign up for our newsletter. Sign up now.
If you have a design topic you would like to see covered, email it Rose Weinberger at: rose@dimins.com
Sign up for our newsletter. Sign up now.