When designing a dashboard, we need to get the most out of each section of the screen so that we can design our graphics to maximize the absorption of information. Some visual attributes are more easily perceived than others, and some of them can communicate effectively without having to pay full attention to them. These attributes are called preattentive attributes of visual perception. We will discuss some of them in the context of dashboard design:
- Color: There are several ways to describe color. One of the color models is called the HSL model, which is better for humans to understand. In this model, the color is described by three attributes, hue (what we usually call color), saturation (intensity of a color), and lightness or brightness. The perception of color depends on the context. A light color will draw attention if it's surrounded by dark colors; a highly saturated blue will be flashy if the background is a pale color. The dashboard should guide the viewer's attention to issues that require action. To achieve this, we need to choose the colors wisely, reserving colors with high contrast to elements and areas that deserve special attention.
- Form: Length, width, and size can encode quantitative dimensions effectively, with different degrees of precision. We can quickly determine whether a line is twice the length of another, but it can be more difficult to determine this with the width or the size of circles. Items of different shapes are perceived as belonging to different categories or kinds of elements.
- Position: The position of items plays an important role in the communication of information. Scatter plots encode pairs of values with two-dimensional positions; we are inclined to think that items that are close are related. Position can also encode hierarchy. Higher items are considered better or more important than items below them, and items located on the left-hand side will be seen first if the viewer's language is written from left to right.
We can use all these elements to design the components of our dashboard so the viewer's attention is directed to the issues that require action. As dashboards usually contain a huge amount of information, every inch of the screen counts. In desktop environments, the horizontal space is usually enough, but the vertical space is scarce. In mobile environments, there is usually more vertical space, but the overall available space is more challenging.
To use the available space efficiently, we need to select the information that really counts, and prefer compact charts and graphics. It is essential to use charts and graphics that are clear and direct, reducing explicit decoding to the absolute minimum.
The dashboard should be well organized in order to allow the user to quickly locate each piece of information. We will use the aforementioned visual attributes to establish a clear hierarchy between elements and clearly define sections dedicated to displaying information about the students, courses, and the entire class.
These are just a few guidelines that should be considered when creating a dashboard; for more in-depth treatment, please refer to Information Dashboard Design by Stephen Few (see the reference in Chapter 1, Data Visualization).