Organizing the page
The little things in a dashboard can make a big difference—like where you place the key metrics, where you place charts, and how much information you try to fit into a page. Dashboards like the award-winning International Bank Dashboard (below) succeed at information design. However, its page layout leaves something to be desired. The data is compressed to fit the page and readers can’t easily determine what is the most critical information.
A few things to keep in mind when laying out your dashboard:
Pay attention to attention
You’ll want to position the most important information where people look first. But how to know where someone will look on the page? Fortunately, studies show that people tend to scan a page in a similar manner. Imagine the image to the right is overlaid on your dashboard page. The research indicates that users look first for information on the top and left. Users also focus their attention down the left side. The center gets a fair bit of attention as well. But the bottom and right may not be noticed by your user at all.
Many web designers use something called a grid system—a series of columns and “gutters” of certain widths—to ensure that key lines in their designs align. This approach brings a coherence and order to the page that puts users at ease.
We can overlay a grid on a well-designed site like the New York Times to see how this system gets applied in practice.
Not everything fits into one column, but it is obvious that this site has a pre-defined grid and sticks faithfully to it. The result is a clean, effective page layout. Here are two reference articles to learn more about grid layouts:
We don't just see objects themselves; we also see the space that is not there. White space in interface design is very important and too often overlooked. Maximizing dashboard real estate must also mean creating places for the eye to "rest" so that the non-white space has more impact. When we don't have sufficient spacing, everything runs together and we can't see what is most important.
White space can be used to delineate sections or help users see groupings of content in a dashboard. Using white space may mean sacrificing one extra chart or metric, but it can make a huge difference in user comprehension.
More often than not, dashboards get lit up with color like an over-dressed Christmas tree. The color is applied indiscriminately and adds little to the meaning of the dashboard. Appropriate use of color requires restraint. In our dashboard designs, we typically start by using only grey, then we gradually add color where it conveys useful information.
Color brings meaning
Color can draw your eye to what is important and tie together similar things. For example, if we increase color brightness, it will attract attention and make a point seem more important. Similarly, use of the same color hue can be used to connect things that are related.
At a more subtle level, the color scheme we choose can evoke an emotion or feeling about the dashboard. Colors can be broken into high-level dichotomies such as “earthtones” versus “unnatural” colors. We perceive earthtones as calming (Edward Tufte) has said that these are the kinds of colors you want to use if you just want to use color very gently on your page). In contrast, unnatural colors jump out at your audience, making them ideal for showing an alert.
Color to display data
When you are using color in your graphs to represent data, there are three types of color schemes to consider:
- Sequential when you are ordering values from low to high.
- Divergent when the values are ordered and there is a critical mid-point (e.g. an average or zero).
- Categorical when data falls into distinct groups (e.g. countries) and therefore requires contrast between adjacent colors.