Detailed Dashboard Design Guidelines Used by Professionals | by Saleha
Tips for designing your Dashboards
Data analysts give data meaning by taking raw data and turning it into data-driven visualizations that help businesses grow. All of these ways of seeing things help only if the layout and chart are right. Consistent layout and chart design help make sure that small differences in appearance don’t look like big ones and change how the audience understands the data.
The goal of this article is to describe, define, and give examples of how styling elements are used by data analysts at my company when they talk about data. This will make sure that all chart parts look the same, and it will save time for team members when they have to decide how to use chart parts correctly and consistently.
Organizing and designing the entire dashboard
Before placing data on a dashboard, you should consider how to organize it so that the end user can easily comprehend it. In addition to displaying facts, dashboards should also consider the narrative flow of information.
- Place the most important information at the beginning of the story, followed by supporting information and details.
- Present only the minimum data required for the task at hand.
- It is recommended to put Headers on top, a filter panel on the left, high-level Metrics at the top, and visualization on the content Body.
- Important Metrics should be on the top and left side, and as you move to the right side, you will find fewer important metrics.
- Never ignore the hue of a stop sign. Reserve the color red for alerts and mistakes and the color green for success or completion.
- Reserve specific hues, such as your organization’s primary color (for me, it’s orange), to signal an activity that the user must perform.
Advice on how to choose and style each chart
Alberto Cairo (Visual and Data Journalist) said “Charts are not just mere illustrations, they are not just drawings, they carry meaning”.
It is very important to pick the right chart and make sure it has all the important information. Because a chart is not the data; it is an opinion about the data.
The main idea: Get rid of the noise
“Less, but better” in data visualization means getting rid of things that aren’t necessary but keeping, improving, and highlighting only the things that support or show what we’re trying to say with the data.
We often make the mistake of adding too many things to data visualizations that aren’t necessary.
Maximizing data:ink ratio
The data:ink ratio is the proportion of ink (i.e., pixels) used to display data information. In other words, taking out the parts of the graphic that don’t add new information, i.e., using less ink, makes the graphic more effective, attractive, and important for viewers.
For example,
Using the chart above as a guide, you don’t need a gray background, grid, legends, or bar shadows and different colors for each category. Both X title and Y title don’t add anything since we can put them in the title of the chart. It’s better to add data points than to add a y-axis. After maximizing data:ink ratio,
Minimal use of gridlines
Use as few gridlines and ticks as possible and only to see the range and context of your data. There should be no major or minor gridlines as the default. If the gridlines are important for being able to read the data, make them as light as possible while still being able to see them.
Remove borders
Remove the borders that surround the chart so that it has more space.
Minimize labeling
You should label your axis as unobtrusively as possible to allow space for emphasizing key points on the axis or in the data. Label the axes uniformly throughout all graphs. Avoid using acronyms that are not commonly known.
Minimize the use of legends
Labels should be used instead of legends whenever possible to help users understand data visualization.
Axes style formatting
Axis lines and tick marks shouldn’t take up too much space on the chart, but they should be easy to read. Use soft colors and fonts and lines that aren’t too thick. You only need to use an axis title when there are no other visual clues to help the user understand what it means.
Get rid of unnecessary decorations and effects.
Remove any unnecessary key lines surrounding forms, drop shadows, and beveling effects.
Do not attempt to display too much.
Avoid making one chart too complicated if you need to display a large amount of data; instead, consider using several simpler charts.
Minimize the use of color
Take away the color coding from the data that is only there to give context or to compare. Using lighter/thinner grey lines for this contextual information makes it easier to use color to highlight later.
Focus
Focus on ranges to make data as clear as possible. Only if it doesn’t take away something important.
Use color/line weight.
Make the important information stand out by giving it a consistent color and making the line thicker.
Label directly
Label the important information that will get the end user’s attention right away.
Highlight important thresholds and contextual ranges
You can show data around the threshold by adding a strong gridline or changing the color. For example, if the crossing threshold is an indicator, choose a red color.
Add the title of the chart.
This will help you get your message across. Keep a title that tells them what they will see in the chart.
Bar Chart: Bar graphs are used to show numerical data, such as counts or percentages, where a larger bar indicates a greater number or larger percentage.
Use a Bar chart when
- To compare numerical values for different observations. i.e., age group, product categories, classes
- When you want to show the relative amount. like which category is highest or most common and how other groups compare against the others
Standards followed by professionals to use Bar chart
- Avoid using 3d bars
- The y-axis should begin with 0. But in certain situations, like finding small changes, it’s fine if the y-axis doesn’t start at zero.
- The width of the bars should be about twice the width of the space between the bars.
- If all the bars measure the same variable, make them all the same color. Different colors have nothing to do with the facts. I.e. in our case, we have sales for each region, and since sales are just a measurement, the end user will be confused if each bar is a different color.
- If there are more than ten categories, use horizontal gridlines and a y-axis; otherwise, identify the data point directly.
Line Charts: A line chart is a type of chart that is used to show information that changes over time. Line charts are made by plotting a series of points and drawing a straight line between them.
Use a Line Chart when
- To show the change over time in one variable. So, when you want to show how the value of something changes over time or how the values of several things change over time compared to each other.
- If more than one variable has the same scale, you can show more than one variable with more than one line.
Standards followed by professionals to use Line chart
- Try to limit the number of lines in a single chart to three or four. More isn’t always better. Putting too many lines on the same chart makes it hard to understand and defeats the purpose.
- The legends should span the top of the chart, and their arrangement should correspond to that of the chart.
- Avoid the use of dual axes. Dual axis charts have arbitrary scales that can (intentionally) mislead readers about the relationship between the two data series.
- When there are few points to plot, consider displaying all of the data markers rather than simply the line. If displaying the points will hinder the interpretability of the graph, an alternative would be to include a gap in the line to indicate where values are missing.
Pie Chart: A pie chart is a circular graphical representation of data that is segmented to demonstrate numerical proportion.
Use Pie Chart when
- To indicate that a certain portion of the whole is disproportionately small or large.
- It is less critical to compare the specific sizes of the slices if you want your readers to have a general feel of the part-to-whole relationship in your data.
Standards followed by professionals to use Pie chart
- There are several disadvantages to using a pie chart, such as taking up more room and making it difficult to read if there are many categories, so always choose an alternative, such as a table or bar chart.
- If you must use a pie chart, keep it to no more than five groups.
- Make use of appropriate color schemes to make crucial information stand out.
- Consider labeling the area outside of the chart.
This article went over some rules that data analysts should follow when making layouts and charts for dashboards. I think that if we follow these rules, we can make dashboards that not only look good but also help unify the design process across the organization. I hope you enjoy this article and that it helps you with your job. If you think I missed a standard definition, please leave a comment.
Image credits
All images, unless otherwise noted, are by the author.
Tips for designing your Dashboards
Data analysts give data meaning by taking raw data and turning it into data-driven visualizations that help businesses grow. All of these ways of seeing things help only if the layout and chart are right. Consistent layout and chart design help make sure that small differences in appearance don’t look like big ones and change how the audience understands the data.
The goal of this article is to describe, define, and give examples of how styling elements are used by data analysts at my company when they talk about data. This will make sure that all chart parts look the same, and it will save time for team members when they have to decide how to use chart parts correctly and consistently.
Organizing and designing the entire dashboard
Before placing data on a dashboard, you should consider how to organize it so that the end user can easily comprehend it. In addition to displaying facts, dashboards should also consider the narrative flow of information.
- Place the most important information at the beginning of the story, followed by supporting information and details.
- Present only the minimum data required for the task at hand.
- It is recommended to put Headers on top, a filter panel on the left, high-level Metrics at the top, and visualization on the content Body.
- Important Metrics should be on the top and left side, and as you move to the right side, you will find fewer important metrics.
- Never ignore the hue of a stop sign. Reserve the color red for alerts and mistakes and the color green for success or completion.
- Reserve specific hues, such as your organization’s primary color (for me, it’s orange), to signal an activity that the user must perform.
Advice on how to choose and style each chart
Alberto Cairo (Visual and Data Journalist) said “Charts are not just mere illustrations, they are not just drawings, they carry meaning”.
It is very important to pick the right chart and make sure it has all the important information. Because a chart is not the data; it is an opinion about the data.
The main idea: Get rid of the noise
“Less, but better” in data visualization means getting rid of things that aren’t necessary but keeping, improving, and highlighting only the things that support or show what we’re trying to say with the data.
We often make the mistake of adding too many things to data visualizations that aren’t necessary.
Maximizing data:ink ratio
The data:ink ratio is the proportion of ink (i.e., pixels) used to display data information. In other words, taking out the parts of the graphic that don’t add new information, i.e., using less ink, makes the graphic more effective, attractive, and important for viewers.
For example,
Using the chart above as a guide, you don’t need a gray background, grid, legends, or bar shadows and different colors for each category. Both X title and Y title don’t add anything since we can put them in the title of the chart. It’s better to add data points than to add a y-axis. After maximizing data:ink ratio,
Minimal use of gridlines
Use as few gridlines and ticks as possible and only to see the range and context of your data. There should be no major or minor gridlines as the default. If the gridlines are important for being able to read the data, make them as light as possible while still being able to see them.
Remove borders
Remove the borders that surround the chart so that it has more space.
Minimize labeling
You should label your axis as unobtrusively as possible to allow space for emphasizing key points on the axis or in the data. Label the axes uniformly throughout all graphs. Avoid using acronyms that are not commonly known.
Minimize the use of legends
Labels should be used instead of legends whenever possible to help users understand data visualization.
Axes style formatting
Axis lines and tick marks shouldn’t take up too much space on the chart, but they should be easy to read. Use soft colors and fonts and lines that aren’t too thick. You only need to use an axis title when there are no other visual clues to help the user understand what it means.
Get rid of unnecessary decorations and effects.
Remove any unnecessary key lines surrounding forms, drop shadows, and beveling effects.
Do not attempt to display too much.
Avoid making one chart too complicated if you need to display a large amount of data; instead, consider using several simpler charts.
Minimize the use of color
Take away the color coding from the data that is only there to give context or to compare. Using lighter/thinner grey lines for this contextual information makes it easier to use color to highlight later.
Focus
Focus on ranges to make data as clear as possible. Only if it doesn’t take away something important.
Use color/line weight.
Make the important information stand out by giving it a consistent color and making the line thicker.
Label directly
Label the important information that will get the end user’s attention right away.
Highlight important thresholds and contextual ranges
You can show data around the threshold by adding a strong gridline or changing the color. For example, if the crossing threshold is an indicator, choose a red color.
Add the title of the chart.
This will help you get your message across. Keep a title that tells them what they will see in the chart.
Bar Chart: Bar graphs are used to show numerical data, such as counts or percentages, where a larger bar indicates a greater number or larger percentage.
Use a Bar chart when
- To compare numerical values for different observations. i.e., age group, product categories, classes
- When you want to show the relative amount. like which category is highest or most common and how other groups compare against the others
Standards followed by professionals to use Bar chart
- Avoid using 3d bars
- The y-axis should begin with 0. But in certain situations, like finding small changes, it’s fine if the y-axis doesn’t start at zero.
- The width of the bars should be about twice the width of the space between the bars.
- If all the bars measure the same variable, make them all the same color. Different colors have nothing to do with the facts. I.e. in our case, we have sales for each region, and since sales are just a measurement, the end user will be confused if each bar is a different color.
- If there are more than ten categories, use horizontal gridlines and a y-axis; otherwise, identify the data point directly.
Line Charts: A line chart is a type of chart that is used to show information that changes over time. Line charts are made by plotting a series of points and drawing a straight line between them.
Use a Line Chart when
- To show the change over time in one variable. So, when you want to show how the value of something changes over time or how the values of several things change over time compared to each other.
- If more than one variable has the same scale, you can show more than one variable with more than one line.
Standards followed by professionals to use Line chart
- Try to limit the number of lines in a single chart to three or four. More isn’t always better. Putting too many lines on the same chart makes it hard to understand and defeats the purpose.
- The legends should span the top of the chart, and their arrangement should correspond to that of the chart.
- Avoid the use of dual axes. Dual axis charts have arbitrary scales that can (intentionally) mislead readers about the relationship between the two data series.
- When there are few points to plot, consider displaying all of the data markers rather than simply the line. If displaying the points will hinder the interpretability of the graph, an alternative would be to include a gap in the line to indicate where values are missing.
Pie Chart: A pie chart is a circular graphical representation of data that is segmented to demonstrate numerical proportion.
Use Pie Chart when
- To indicate that a certain portion of the whole is disproportionately small or large.
- It is less critical to compare the specific sizes of the slices if you want your readers to have a general feel of the part-to-whole relationship in your data.
Standards followed by professionals to use Pie chart
- There are several disadvantages to using a pie chart, such as taking up more room and making it difficult to read if there are many categories, so always choose an alternative, such as a table or bar chart.
- If you must use a pie chart, keep it to no more than five groups.
- Make use of appropriate color schemes to make crucial information stand out.
- Consider labeling the area outside of the chart.
This article went over some rules that data analysts should follow when making layouts and charts for dashboards. I think that if we follow these rules, we can make dashboards that not only look good but also help unify the design process across the organization. I hope you enjoy this article and that it helps you with your job. If you think I missed a standard definition, please leave a comment.
Image credits
All images, unless otherwise noted, are by the author.
Denial of responsibility! Techno Blender is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – [email protected]. The content will be deleted within 24 hours.