UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 1256 June 18, 2014

Four Cognitive Design Guidelines for Effective Information Dashboards

Effective data visualization supports cognition in many ways. It reduces cognitive load on the user, aids in problem solving, and facilitates discovery of insights. Poor visualizations, on the other hand, confuse and lead to wrong conclusions.

Since cognitive science has given us tremendous understanding of the mechanisms and processes by which we perceive things, comprehend them, and use them for decision-making, it’s reasonable to assume that such findings are very relevant to dashboard design issues. How users interpret data, what demands our designs place on their attention, what knowledge they need for making effective decisions―all these factors need to be considered while designing an information dashboard. Here are four guidelines derived from studies on human cognition that can be applied while designing information dashboards:

1. Put an Emphasis on Readability

To perform any kind of analysis using a dashboard, the user must be able to extract and process visual stimuli reliably and quickly. The interface should be such that it guides visual processing and doesn’t deter it.

Smashing Magazine image

Image source: Smashing Magazine

In the visualization above, the busy background image makes the chart cluttered and reduces its readability. To enhance readability, there should be proper contrast between the chart background and the data plots.

Using a dashboard, the user must be able to extract and process visual stimuli reliably and quickly

Also, prioritization of information helps make the dashboard more readable. As Amanda Cox, Head of The New York Times Graphic Department once noted, “Data isn’t like your kids. You don’t have to pretend to love them equally.” Know where to focus your user’s attention.

Dashboard Formatting

Image Source: Stephen Few, With Dashboards Formatting & Layout Definitely Matter

The layout of the dashboard can be roughly divided into four quadrants based on the importance it accords to its respective content. The top-left quadrant is the section that gains the maximum attention from the user so the most important metrics should occupy this section. The other metrics should then be distributed based on their order of importance.

2. Minimize Cognitive Load

Theoretical insights into cognitive architecture emphasize the memory constraints of humans. These lessons have been learned by the HCI community who argue that interaction sequences should be designed to minimize short term memory load. Since recognition memory is superior to absolute recall, the dashboard should provide all the information that the user needs for a specific analysis in front of his or her eyes. (The details of how a dashboard can reduce the dependence on short term memory are covered in my article "The Psychology Behind Information Dashboards".)

3. Use Graphical Representation

We are wired for visualization. Whether it’s graphs putting raw data into a perspective or the use of icons, which helps to overcome issues of limited real estate, we do value a picture over a thousand words.

Sprout Social dashboard

To make dashboards easier to comprehend, couple icons with one-two word text labels (pop-up or otherwise) that explain the meaning to users who find the representations difficult to decipher.

4. Follow Gestalt Laws

Gestalt psychology offers a set of laws that explain how we perceive or intuit patterns and conclusions from the things we see. Applying these laws to charting and data visualization can help users easily identify patterns in their data. Some of these laws are:

Law of Prägnanz: This law states that the human brain tends to process simple patterns—patterns that are regular, even, and orderly—faster than patterns that are more complex. To understand this, consider the two charts below. If you were asked to find the top performer from these two charts, which chart would you find easier to get the data from?

It is easier to see that James is the top performer in the second chart because the data plots are ordered here. If the data is name or category-based, and not time-based, it is a good idea to arrange the data in descending/ascending order.

Law of Focal Point: This law states that in a visual presentation, distinctive objects create a focal point. For example, if you want to focus your user’s attention on a specific data point, you can create a focal point by using a different color.

In this chart, China is the focal point due to its difference in color from the other data plots.

Further reading: How to Make Data Visualization Better with Gestalt Laws

Conclusion

Information dashboards aim to augment human cognitive abilities and aid in decision-making. The challenges of designing an effective dashboard are many, but the potential benefits make this a challenge worth pursuing. The key is not in finding what’s most exciting or what’s most outside-the-box but in applying simple concepts which we know but still tend to overlook.

 

Image of colorful brain courtesy Shutterstock.

ABOUT THE AUTHOR(S)

User Profile

Shilpi is a writer at FusionCharts, an enterprise-grade charting solutions that has clients like NASA, Microsoft, Cisco, GE, AT&T, and World Bank. Her focus is on writing about data visualization, dashboard design, and best practices in charting.

Add new comment

Comments

25
31

Just wanted to point out that the word "data" is plural. "Data are..." would be proper grammar.

28
27

On the 'data is plural' thing - it is generally accepted that using 'data is' is ok when the usage could be substituted with the word 'information'.

http://www.onlinegrammar.com.au/top-10-grammar-myths-data-is-plural-so-must-take-a-plural-verb/

34
36

Nice reading. I am not UX expert, but I think the example used in point 3 could be better. Icons used for feeds and reports are not clear and I think they are confusing. When I see the icon used for feeds what it looks like to me is to show/hide a menu in mobile apps, there is a very used icon for feeds (example
; http://goo.gl/WNFmSD). Also the report icon is confusing, it looks more like a wireless level signal than reports, I would use a with paper sheet with a pie chart over it or just the pie chart (example: http://goo.gl/aDRbLZ ), after see it for some time I understood it could be a bar chart (i think) so a pie chart could be more clear and void confuse it with wifi signal indicator.

34
34

Jose, I agree with you about that particular icon. It is confusing. The feed icon used in that example is also known as a hamburger menu and it's generally used to denote a menu of some kind. A feed is different. When icons are used inconsistently, they become confusing, just like words. Whenever there is space to include both, this is ideal, so I agree with Shilpi's overall point. Shrinking screen sizes makes doing this this increasingly difficult. An internationally accepted icon standard would be pretty amazing, in my opinion. All that said, Sprout's product offers a delightful user experience overall. I used it quite a bit in a previous role.