Principles of effective dashboard design

In this article, we’ll discuss the basic principles of working with the dashboard, analyze the features of creating its design. And as an addition, we will ask Oleksandr Pashkov, Product designer, Head of design at a Ukrainian fintech company, the Lecturer at Point School, and Olha Bondar, Lead Designer at Nextpage some questions about specific work with dashboards.

Main principles of work with dashboard design

Every designer, as well as every design agency, would like to create some revolutionary new designs for digital products. Unfortunately, this is impossible for the development of dashboard design. Every fundamentally new vision of the appearance of dashboards crashes on the already established rules, which are based on user experience patterns. Such behavior patterns partially constrain design creation and determine the number of rules for creating dashboard designs.

Let’s start with the main principles provided by our experts, and then move into more detailed analysis. What are your personal top 5 principles when creating dashboards?

EXPERT OPINION: Oleksandr, Point School:

• data usefulness;
• data availability;
• data reliability and relevance;
• clear and understandable structure;
• scalability.

Olha, Nextpage:

• You need to know your user and understand what business problem you are solving.
• Blocks should be organized into logical groups so that users can easily navigate on the screen.
• It is important to prioritize information correctly so that the user always has quick access to the information he needs.
• It is important to choose the correct display for each type of data, or users may make the wrong decision.
• You need to display only key information so that the dashboard does not turn out overloaded.

The first step to designing any dashboard is to clearly define what you’re trying to achieve. What’s the purpose of your dashboard? Who is it for? An incorrectly formulated goal can waste time and resources. A correctly formulated goal will help you choose the right presentation of information — this is the first rule.

In order to determine the goals, you need to understand what type of dashboard you need. We have written about that above. If you need an operational dashboard, then your goal is to quickly and clearly obtain data on the indicators you need. If your dashboard is strategic, then its goal is to provide information about the achievement of KPIs, and the goal of an analytical dashboard is a deep analysis of large amounts of data.

After you have decided on your goals, the next step awaits you. You need to present the data correctly. Correct data presentation shortens the path to its understanding.

The work with dashboards is a difficult task because it is about presenting several types of information at once. It is important to choose the right types of graphs and charts. In order to determine the appropriate data visualization options, you should analyze your internal reports and understand which options are right for you and based on your requests. If you’re starting from scratch, here are a few words about chart types and graphs to help you.

To choose the appropriate type of data display, decide on the following questions:

1. How many variables do you want to show in one graph?
2. Will you display values ​​over a period of time or among items and groups?
3. How much data do you need to display for each variable?

Nominally, charts can be divided into 4 categories: bar, line, pie and dot (also known as scatter plot). What is the difference and what they are needed for?

• Bar (column) charts are rectangular bar charts of horizontal length proportional to the values ​​they represent. Columns can be built both vertically and horizontally. Column charts are useful for visually comparing values ​​across multiple categories or for showing changes in data over a period of time.
• Line charts are charts that display information as a series of data points called labels, connected by straight lines. This kind of graph resembles the tops of a mountain range. This is a basic type of chart that is widely used in many areas. They are suitable for representing fluctuations in indicators, the growth rate of indicators.

A cross between bar and line charts is a multi-axis chart. It is suitable for presenting two or more factors/indicators to identify parallels or comparisons.

• Pie charts are charts made up of sectors. Each of them displays the proportion of a quantity relative to the sum of all quantities. They show parts of the total and are useful tools for analyzing surveys, statistics, complex data, income or expenses. This includes the donut chart — it’s the same pie chart with the cut-out center. It allows the observer to focus more on changes in overall values. Here, attention will be focused on the length of the arcs, and not on the comparison of the proportions between the sectors. Ray diagrams are also interesting. This type of visualization demonstrates a hierarchical system through the series of rings divided by the nodes of each of the categories. Each ring corresponds to a certain level of the hierarchy, and the central circle represents the root node from which the hierarchy is built. Such charts allow you to visualize the relationship between different indicators.
• A scatter plot is used to display the ratio between two numeric variables. For each record in the diagram, a separate point is put at the intersection of the values ​​of two variables. When the resulting points create a non-random structure, this indicates the ratio between the two variables. Bubble chart also falls into this category, it is needed to visualize the analysis of interactions and distribution. It presents information in three dimensions, as opposed to a scatter plot. This gives more opportunities for analysis.

The next stage is the creation of a layout for your future dashboard.

So we are getting closer to working with dashboard design. At this stage, you need to get acquainted with the concept of a modular grid. It is a tool for organizing visual space on the page. A module is a rectangle with a given height and width that defines the composition on the page, and the modular grid is the conditional lines that divide the page into rectangles (modules). These lines may contain separate elements: headings, texts, images. This is very important for dashboard design because you need to organize a lot of data metrics. Basically, the modular grid is the skeleton of your site.

You cannot present data in such a way that it looks the same in its significance. Decide on the priority modules (diagrams) and highlight them not only by their size but also by their location.

Note that the top-left corner of the screen will get more attention based on how the person reads and perceives the information. Therefore, you need to arrange the key information from left to right. And when users have finished reading the first row, they will move on to the next. Prioritize charts and data that set the tone for the entire dashboard panel. So, you need to move gradually to the lower right corner to reduce the importance of the information. In addition, the division of information into categories and, accordingly, their display in different views will favorably affect the perception of data.

After building the modular grid, work begins with the modules that will contain information, diagrams, and controls. A big plus is that these modules can be manipulated: moved, edited, scaled.

First of all, the design should work, it should be comfortable and thoughtful. The main rule of good design is structuring information. That is why the structure must be clear and consistent. All elements must be consistent with each other. When everything has a consistent structure, it is easier for the user to work with the interface, as he finds everything with an ease. It is important not to forget about the division of information blocks depending on their importance. Different sizes of charts and graphs, the variable appearance will play into the hands.

Good design should be simple. This is the next rule. The main purpose of a dashboard is to present a large amount of information in a clear way. It’s enough. Don’t overwhelm the dashboard with an unrealistic number of columns, graphs and metrics, it will only confuse the user. Don’t be afraid to remove unwanted content.

Consistency of data visualization. To make the dashboard easier to read and understand, use the same visualization and layout for the groups. This also includes the grouping of modules by topics. It is better to place related charts and graphs next to each other.

The next rule is about color. The color scheme, first of all, should correspond to the color palette of the customer’s site. If the customer has no website, then the color scheme is created along with the branding and website.

The color scheme should help the user perceive information and attract his attention. In addition, you should play on the contrast between the background and semantic elements. It is necessary to use neutral, muted colors and contrast: muted and neutral colors are much more comfortable for the eyes, they improve perception. Using contrasts helps to quickly identify points of user interest.

EXPERT OPINION: Oleksandr, Point.
Is there any connection between panel colors and information perception? What is the role of color in working with dashboard design?

Yes, there is an interrelationship between them. The color scheme should be consistent with the color palette of the product. It must be unambiguous. It’s good when the color suggests you where to look at. Ideally, the use of color should be as native and understandable to the user as possible, so as not to resort to legend. It is also desirable to avoid color variation. The increase in the number of colors used leads to the growth of the cognitive load on the user.

A color is a tool that provides clarity, analysis and context. Don’t forget about the balance of light and dark, layout and structure — this is the foundation on which every diagram or visualization should be built, and the design of these elements should be self-explanatory. Use color sparingly with the main goal of emphasizing and improving understanding. Here are a few key points to keep in mind when evaluating how to use color in graphical representations of data:

• Note the gray color. It is one of your main colors because it aligns the colors around it. It adds clarity and can balance almost any color in your color scheme and can soften the overall perception of charts.
• Use color to express meanings. Play with color saturation to represent bars, graphs and charts.
• Use white for space. The colors on your dashboard should be clearly distinguishable, as they will represent unique meanings or traits and help the viewer’s eye read them clearly, colors need space to breathe. This is helped by using white for the background.

It is necessary to say a few words about font selection here. The font, just like the color, forms visual perception. The wrong choice of font can ruin the impression of the dashboard and confuse the user. You should use only one font (one font family) and no more than 3–4 font sizes. Dashboard design is where it’s best to use standard fonts.

It is very important to create a font hierarchy. How does it work?

The dashboard title is the most important part of the screen, it is the entry point, the moment to dive into the topic of numbers. Make it the biggest and most visible, as it grabs the user’s attention.

Chart titles are the second most important. Reduce the font, but not too much.

Data labels on charts should be even smaller.

Additional information is written in very small print. The point is that standard fonts are easier to read than fancy designer fonts. In addition, the font size should be commensurate and proportional to the charts.

Additionally, you can use text formatting elements. This is necessary in order to highlight the name of the indicator in the heading (bold) or to make a small footnote on one of the diagrams (italic).

Due to its informativeness and analytical capabilities, we can say that dashboards will be with us for a very long time, without losing their relevance. Digital technologies do not stand still and are developing in various fields, and dashboards have found their place in various applications and on different devices. Whether it’s fitness apps on your phone or even your smartwatch. We asked our experts what they personally expect (or fear) from the development of dashboards in the future.

EXPERT OPINION: Olha, Nextpage:

I think that we will have improved dashboard mobility (improved display on smartwatches and more). Perhaps we’ll also see the implementation of artificial intelligence for deeper data analysis, the ability to predict data and potential problems.

Oleksandr, Point:

Well, I am not Baba Vanga 🙂 It seems to me that dashboards will exist for some time without global changes unless someone invents a new kind of data display. Until this happy (or not) moment, we will observe the simplification of dashboards and data fragmentation. This, of course, is not said about professional dashboards for narrow-profile specialists.

With thoughtful planning and informative design, your dashboards will be effective. A well-planned dashboard will allow both managers and regular employees to get answers to questions in real-time, turn understanding into action and inspire users to real innovation.

Failure to follow any of the principles of building a dashboard can be a mistake. And here are the main mistakes according to our experts.

EXPERT OPINION
Don`t do it: major mistakes in dashboard design. Olha, Nextpage:

• incorrect design of tables and diagrams;
• color scheme is too large (confusing and tiring);
• the blocks are not separated by meaning;
• no captions for charts and graphs;
• using the wrong data charts.

Oleksandr, Point:

• You shouldn’t mix everything into one page. It makes sense to group the data and separate it into tabs/nestings.
• Pay attention to typography. Make sure that the texts can be read without magnification.
• Don’t overdo it with graphics. Visual content is content too, same as text.
• Remember the level of computer literacy of your target audience. A dashboard for a grandmother, a banker and a student are different dashboards.
• Do not get carried away with visual techniques. Leave the dribbble for the dribbble. In real life, everything is not so pretty and neon

A well-designed dashboard is an effective business tool. It helps to monitor the performance of your business and the work of your team. It makes it possible to respond to changes quickly and allows you to make changes to certain processes. This, in turn, grants you quick achievement of your goals and, as a result, fast development of your business.

The dashboard lets you track not only global tasks and stages of their implementation but also more segmented indicators: whether it is the work of the marketing department only or the effectiveness of your advertising campaigns. Dashboards have an undeniable advantage over traditional reporting methods: they are effective, fast and evident.

Conclusions

To sum everything up, we would like to say that the dashboard is a “living” analytical panel. Choosing the right visualization service depends on the amount of data you operate. Everything we have said may only sound complicated, since in practice, this solution is very convenient for business and for other activities that are not related to sales or marketing. Many options of settings, clear user interface, dynamics and control make the dashboard an indispensable helper after several test practices. They can completely displace those boring office tables not only from your life but from your thoughts, as well as habits. Try it!