A Good Data Visualization Dashboard in UX Views

Recently, I received some general requests from our users asking HCI (Human-Computer Interaction) design team for some tips on how to beautify their reports and make them more effective.

So in response, I decided to share a few tips on creating better dashboards and web reports, including some of the DO’s and DON’Ts of dashboard design.

The purpose of a dashboard is to display a preview of the key information for your audience, so they can analyze trends and glean the types of insights that drive effective decision making. To achieve this purpose, you should use this basic guide when choosing the information to include. In general, the most significant and high-level insights (the top segment) should be incorporated more prominently in the dashboard. This is the key information you should feature when designing and building your visualizations.

However, “Important Details” (the middle segment) and the “Background Info” (the bottom segment) are also an important piece of the story you want to tell with your dashboard. These items are easy to ignore, but a lack of these items may affect the final visual of the dashboard.

Dashboard content must be organized in a way that reflects the nature of the information while creating efficiency for the user and meaningful monitoring. Building modules is one method that can help you to create a basic structure and skeleton for your design, so that you can achieve an organized data display with effective alignment and consistency. I suggest you keep these DO’s and DON’Ts in mind when assessing your dashboard layout:

Sometimes it can be hard to decide which types of information should take priority on your dashboard if you don’t spend the time to consider this before you start designing. And even then, it’s easy to employ messy layouts that don’t flow when you’re trying to cram in too much information.

Do make sure you have a dashboard layout plan BEFORE you start adding components onto the canvas. Start by sketching a basic structure or “skeleton” for your design with some possible modules you would like to try. Once you have your basic structure, try to write what kind of components or visualizations you’d like to include. This process can help you judge how effectively your key information is communicated by the design framework you created.

When making decisions on what information should go where, DO consider the way your users naturally read and interpret information. The foundation for many of the key design principles of interpretation.

1). Using these concepts as a guide will help you create dashboards with better structure and layout. This will facilitate easy interpretation of information by your audience. For example, make sure you position your key information from left to right on your dashboard, which is how most users naturally read and comprehend information.

2). Once you’ve established your first row, move down to the next row, where you may begin to have dependencies between the components in different rows of the dashboard. In this situation, it is important to use a structure with a clean, organized layout that guides your audience through the dashboard intuitively. Adopting this type of continuous flow helps your audience recognize the relationship between different groups of information more easily.

Try to reduce complexity by checking the number of components, appearance, colors, navigation, and the text length to simplify complex visuals on the dashboard. (The list number with a start (*) below is how I enhanced the data visualization feature to help users avoid mistakes making while they’re creating the dashboard.)

The typography of your text is a way that designers can communicate additional meaning with users. Typography in your dashboard can make or break a design. While data analysts often spend most of their time on the data and insights behind their visualization, it’s also important to pay attention to how visual aspects of the components communicate to your audience. Below are a few basic typography concepts to consider when creating clean, effective dashboards. (The list number with a start (*) below is how I improved the default typography design to help users avoid using the wrong typography.)

Use Serif or Sans Serif typeface. Some examples of Serif fonts include Times New Roman, Rockwell, Georgia, and Baskerville. Helvetica, Arial, Futura, and Franklin Gothic are some examples of Sans Serif fonts. Some designers utilize Sans Serif fonts for digital publications and Serif for print, but either option would give your dashboard a clean look that’s easy to read.

Text alignment plays a big role in readability, especially in data tables. Certain types of alignments are more effective for numbers while others are better for making comparisons between different rows.

I hope these design tips are useful for you when you’re creating your next visualization dashboard/report. Before you start your design concept, remember to always clarify what type of data and how much information your audience needs or wants to see. And be sure to carefully consider which information is truly the “Most Newsworthy”, and which information is just “background information” that adds little value. Also, once you create your dashboard, be sure to go back and ask yourself the following:

Is my dashboard organized with a prioritized layout?

Are my visualization components displaying the proper level of detail?

Is there anything I can do to reduce the size of components or rearrange them to add clarity?

Most importantly, when it comes to design, practice is key. The more dashboards you create with these tips in mind, the easier your next design project will become.

Related posts:

It seems like the new buzz word is “transparency.” We happen to be living in an era of massive change and that creates problems — and opportunities. Let’s look beyond the textbooks and business…

Sometimes I ask myself why I always wait for the other shoe to drop. I know the answer but for the sake of personal accountability, I won’t go to that realm yet. I never like to be taken by surprise…