As designers, we encounter different kinds of products (Mobile applications, web applications, animation prototypes, marketing or promotional stuff) which are of different scales, dimensions, UI/UX requirements, varying workflows of functional elements etc. Each project requires us to think deeply about many aspects of the design process.

Every good designer(including me!) has a set of parameters to take through the designs he/she develops. We at Quovantis follow these 7 design principles as a baseline for every design project we work on.

These fundamental principles are empathy for users, design with real data instead of using dummy content, default to simplicity, consistency, keeping states in mind by creating the entire experience and not only the happy scenarios, performance, and seek critique.

But this blog is not about the basic design principles. Rather it aims to provide a quick insight into the basics of building an innovative Dashboard design. As stated earlier, every design project needs a deep thought process and guidelines to follow as per the user needs and context of use. But when we get a project where we need to visually represent the analytical data (read: dashboard), we as designers need to go an extra mile to present a balanced and pleasurable visual experience which helps user absorb the relevant information, compare it and see the drilled down details with ease without spending too much cognitive energy.

With dashboard designs, we designers face a challenge of presenting large amount of data which was collected over a period of time, months or even years. The long span of time makes it saturated and to present it in a way that users are able to get a complete overview by analyzing the same and get all the relevant information at one glance, is really a daunting task.

From a theoretical point of view the primary aim is to support the human capacity to consume the large amount of data at once.

Choosing the apt visualization method can be a complex task for us as designers. Converting the raw data into meaningful graphics and visualization requires an understanding of the user’s objectives and other intended activities.

To design a dashboard that serves it’s purpose effectively designers must be aware of the key principles, factors and considerations that impact the viewing experience of the users.

As a designer, I have worked on dashboard designing problems and I would like to share my learning with my fellow designers to help them along in post design/development efforts/edits. I would really appreciate if other designers could add any points from their experience in the comments below and highlight if I can present anything in a more appropriate way.

Before going into necessary information to create beautiful dashboard designs let’s have a look at the below graphic.

1. Consistency

It is a very vital part for dashboard designs. Consistent design modules save user’s cognitive energy to understand any design pattern to absorb the information.

Consistent design allow users to extrapolate knowledge from one instance to another, seamlessly performing tasks with minimum amount of cognitive exertion. Learning is an effortful process, involving constant rehearsal and practice to encode, store and retrieve information.

Using same style for labels, visual patterns, functions, icons, text for the same tasks, reduces the amount of new learning for user which ultimately results in an enhanced user experience.

2. Information Scent

When all areas of the visual array appear the same, then viewer has to scan the display until they receive a visual clue to the whereabouts of the most relevant information. When the design fails to draw the user’s attention to relevant data, the scanning process is reduced to an ‘item-by-item’ strategy where all areas of the display are consciously attended to, which is cognitively demanding and likely to cause distraction in the viewing experience.

Our ability to better remember or extract items that appear to stand out from the rest with greater immediacy is referred to as the “Von Restorff Effect”. This perceptual phenomenon is named after Hedwig Von Restorff (1906-1992).

Dashboard designers can consider the “Von Restorff Effect” phenomenon in their design by following ways:

#1. Highlighting the worth noticeable piece of information is one of the most important technique in directing user’s attention.

#2. Changing the font Color, weight or background colors are some of the simple ways and have huge potential to improve user experience.

#3. Highlights must be used sparingly otherwise it loses it’s purpose of seeking user’s attention and user starts ignoring such highlights when they encounter them again and again.

3. Fragmentation

Fragmentation of data helps when the user does not wish to see the data, all at once. This is also helpful when two or more sets of data/graphics should not be viewed together. It is really good for a focused and less cluttered design. But this technique should only be applied when a user does not need to do side by side comparison for analysis purpose.

4. Comparative Analysis

To support comparative analysis in a dashboard design the designer should consider the fact that all the information that may be required to do side-by-side comparison and analysis, should be placed in such a way that the user should be able to extract the useful insights easily from the visual representation of the data.

In such scenarios where comparison of data is critical, choosing the tabbed structure, long scrolls to display information or any other fragmentation methods should be used with caution or should be avoided entirely.

As per the advise by researchers there are four ways of designing dashboards to ensure ‘Aha!’ moments for the users:

#1. Suddenness: In this the experience should be surprising and instantaneous.

#2. Ease: Meaning the solution is processed without difficulty.

#3. Positive affect: i.e. the experience is gratifying.

#4. Feeling of being right: i.e. the person experiencing insight is in no doubt about his/her instincts and would withstand further investigation.

5. Generation Effect

The ‘generation effect’ term refers to the cognitive phenomenon in which the recall of self-generated information is greater than the recall for externally presented stimuli.

Although this is a phenomenon common to most of us, researchers have attempted to scientifically verify and explain its existence.

Permitting users to customize their dashboards can enhance recall of item locations, save time through personalization of the display structure.

Dashboard designers should exploit cognitive biases, such as the generation effect, to enhance the user experience.

6. Data-Ink Ratio

Edward Tufte established this design principle which he termed as ‘data-ink ratio’. This refers to the amount of ink or number of pixels used in a graphical display to represent all of the data within a dashboard.

As per Edward Tufte every bit of ink or pixel must be used for a particular purpose which is almost invariable to present new information within the same display. The aim is to maximize the data-ink ratio with the perfect design achieving a 1:1 ratio of data to pixels in graphical displays. Good examples may be where a designer has refrained himself from using gradients, 3D effects, extra borders etc. which demand extra cognitive effort by the users. Bad example can be using the bold colors where colors carry no meaning, employing real world objects like gauges etc. where they may not be required. Instead, a simple graphical representation could have worked better.

7. Exceptions

“Exceptions” in dashboard designs refer to highlighting or segregating the latest changes or developments that happen on the dashboard since user’s last visit. Specially when seeing all the other information is not helpful and user just needs to know of unusual patterns or things that could potentially become problematic if unattended.

Another benefit of using exception is setting the threshold i.e. only highlighting the information when it has reached a certain level. This helps user to see it only when it’s required.

8. Selecting display method

One of the early decisions for a dashboard design should be to choose the right display method for different data sets. There is an important distinction between visual and verbal language.

• Using Text as display method involves serial processing where a user is required to read letters, words or figures in a prescribed order.
• Using Visuals involves the global processing. We perceive the whole image at once.
• Using Both, visual and verbal languages is used for different purpose but as designers we must try to see the possibility where we can combine these two to achieve the clearest means of communicating with the users.

9. Gestalt Principles

Proximity, Similarity and Continuity are the Gestalt laws that highly influence the visual perception and help designers as a base to create intuitive graphical displays such as dashboards.

a. Proximity: The law of proximity is observed in our perception of items near to one another as grouped and items far apart as dissociated and unrelated. This grouping principle can help dashboard viewers to quickly identify categories of information.

b. Similarity: The law of similarity describes the perception of items matched in appearance (e.g. color, shape, size and orientation) as grouped. One benefit of using similarity to group items is that they do not have to share a spatial location in order for viewers to perceive them as grouped.

c. Continuity: Continuity is observed when we see aligned and indented text, such as the pie chart labels in the left hand panel. Even though the labels are not in close proximity, nor similar, we perceive them as grouped as they follow an imaginary, continuous vertical line.

10. Color Selection

Our color experience can help us in a number of different ways like we can consider a ripen fruit by it’s changed color from dark green to red, yellow texture. Even on traffic signals we encounter red and we understand that we need to stop and let others cross from different directions.

Use of colors in graphical displays plays a very important role for users to quickly understand the meaning of the graphic- a changed color indicates something. For example, we can use red as a legend for any specific condition but the overuse of red will make users habitual of seeing it and they might not pay that much attention.

Choosing the right color combination, the amount of the color used and frequency plays a vital part in designing graphical displays. We should also consider the fact that nearly 8% men and 0.5% women are color blind and they see few colors differently. For such users we should use some indicative methods for them to relate between colorful graphics and their legends/keys. One very popular technique to help those viewers is to use some kind of pattern along with the colors between graphical display and their legends.

To conclude, designing a useful dashboard has underlying challenge of presenting users with bulk of information with the goal of correct and quick interpretation without draining user’s mind. So, following sound design  fundamentals as stated above becomes a critical winning jack.