Information Hierarchy in Dashboards

It’s very common to find companies where dashboards* are used for a wide variety of purposes. It’s always necessary to track metrics, KPIs, business goals, projects, and more, and these panels emerge as clear solutions to make these tasks easier; a poorly designed dashboard, however, can and will undermine its potential to foster useful and effective analysis, by presenting complex navigation, confusing naming, and data that offers little value to users.

The role of information hierarchy

In order to raise the quality of these panels, making the investment in them more worthwhile and their use more effective, it’s important to consider ways of organizing the hierarchy of data within their screens. With dashboard design planning oriented around its internal hierarchy, it’s possible to understand the degree of importance of each piece of data, each bit of information, and each insight provided, and how all these elements will relate to one another; furthermore, this hierarchical analysis also supports building a layout that includes these elements in order to offer fluid, intuitive, and aesthetically pleasing navigation.

With that in mind, today we’ll share 12 information hierarchy planning principles to consider when building a dashboard:

1. Understand the dashboard’s goals and users

Dashboard design isn’t limited to the screen production stage; it’s essential that users are involved in the process before production begins, and, if possible, afterward as well, in order to gather usage insights for future improvements.

To do this, try talking to key users to identify what they want to achieve by using the dashboard. From there, you’ll be able to define the hierarchy of information, data, and insights to include in the project. The rest of the process, involving screen construction, stems from this initial reasoning.

2. For operational dashboards, prioritize actionable information

This type of dashboard should help users monitor situations and intervene in real time, so always prioritize emphasis and top positioning for information related to risk or emergency situations.

Information that contributes little to real-time decision-making should be considered secondary within the layout (however, always do a detailed study of this to understand the context of use, as recommended in point 1).

3. For analytical dashboards, prioritize the exploratory aspect

If the dashboard is more analytical, requiring a more detailed inspection of specific information when needed, it’s important for the user to reach these layers of information gradually, diving deeper when necessary, without displaying every level of detail at once.

We call this principle “progressive disclosure,” as it lets the user explore different levels of data depth comfortably and according to their interests at the moment.

Implement the progressive disclosure approach through specific filters and strategically placed drill-down tools, allowing users to narrow the granularity of a specific dataset or chart.

4. Group data thematically

Try to group information according to the topic at hand, into clearly distinguishable subgroups. If you’re dealing with demographic data, for example, you could set up analysis subgroups for gender, age, and income bracket.

Turning these subgroups into specific sections with separate headings can also help, depending on the case.

5. Prioritize storytelling

Try to structure the data to tell a story, a narrative. Focus on the insights the user needs to gain, identified at the start of the project, without branching into too many other directions, helping bring focus to the analysis. Don’t forget to present the context in which the narrative is set.

Structure the data to form a natural narrative progression. Present the scenario, the problems, the circumstances analyzed, and move on to information and insights more geared toward decision-making in response to what’s been presented so far.

It’s also possible to tell this story starting from a broader view and progressively moving toward a more detailed, specific view. This would be another way to present the granularity of a specific data context, when the user needs visibility from macro to micro all at once, without relying on interactions and filtering along the way.

6. Consider the most common screen reading pattern

Try to concentrate the most important information in the upper-left corner of the screen, and from there include data in order of importance, always moving from left to right, top to bottom — a kind of “Z” shaped movement.

This movement pattern works because of the reading pattern we, in the West, are used to. So your users will likely follow this same pattern when analyzing the dashboard.

An important note: this reading pattern can vary depending on the country’s culture. In the East, for example, it’s common to find reading patterns that start from the right instead of the left.

7. Offer visual consistency

Colors, typefaces, interaction effects, spacing, the shape of the components used… these elements should be consistent throughout the dashboard.

By taking this care, your users will unconsciously feel more confident interpreting the data, anticipating the reading patterns and visual elements used, and will be able to interpret information more quickly and confidently.

8. Use colors strategically

Use colors appropriate to each type of data, with higher-contrast, eye-catching colors belonging to the highest-priority data.

Don’t forget that colors deeply rooted in specific cultural contexts should be used carefully. Green, yellow, and red, for example, are colors commonly used to convey status of various kinds, and therefore fit best in that context of use. Always carefully consider the meaning a color might have for your users, so you can use it wisely.

It’s worth reinforcing here: use colors consistently across pages. This kind of “color coding” reinforces patterns for your users and makes analysis quicker and even more memorable.

9. Let the dashboard breathe

Yes, you read that right — dashboards need to “breathe.” Here, we’re referring to the use of “whitespace,” strategic spacing placed between different data points and charts, to bring more lightness to the screen.

This is extremely important, because dashboards packed with an overwhelming amount of information can create reading difficulties and intimidate the user, as we’ll see in the next point.

10. Avoid cognitive overload

When users are faced with a very large amount of information at once, they tend to struggle with decision-making and become paralyzed. Notice the feeling that everyday apps generate in you, like delivery or e-commerce apps, for example.

Additionally, studies show that people typically can’t retain more than 7 or 8 different pieces of information in immediate memory (the kind you use practically day-to-day, like remembering a phone number long enough to save it on your phone, or recalling the name of someone you just met in conversation). So presenting more than that can also compromise the user’s ability to make decisions.

11. Be careful with filters

Make it clear to users how filters affect the dashboard. Depending on the layout configuration, filters may affect data differently, or certain datasets may not be affected in a specific scenario. Filters may also change from one page to another.

You can include filters both in the page’s global navigation (usually in the top navigation bar or sidebar) and at strategic points within contextual navigation, alongside specific charts or content blocks. This particular type of placement can help reinforce a hierarchical data structure and/or isolate certain types of analysis, so use it with care.

12. Don’t neglect the mobile format

On a responsive platform, it’s very common for the dashboard’s layout to need to change when transitioning from desktop to mobile.

In this scenario, users will almost always need to view one block of data at a time, since different charts and information displays tend to stack on the smaller, narrower mobile screen.

Consider whether the project needs a mobile-first approach (when its main context of use is mobile), and even if it doesn’t, don’t forget to evaluate how content blocks are organized across different resolutions to avoid problems with reading, navigation, and analysis.

That’s it for today! We hope these tips help you create dashboards that are more effective, easier to understand, and better at generating smart insights and analysis.

* For didactic purposes, we’re using the term “Dashboard” to refer to any data analysis or BI (Business Intelligence) panel. However, it’s worth noting that the correct concept of a Dashboard refers to a specific screen where only the most relevant indicators are visible, without the need for complex filters or interactions. This screen (Dashboard) shouldn’t scroll and should have additional characteristics, which we’ll cover in another post.

Written by: Isaac Duarte – Product Designer at Cluster

Sources:

https://medium.com/@designmatch/exploring-the-best-dashboards-design-a-practical-guide-0995ded5f77b
https://figr.design/blog/dashboard-design-best-practices
https://www.gooddata.com/blog/six-principles-of-dashboard-information-architecture/