How to organize large numbers of KPIs inside a dashboard

Imagine you’ve developed a BI dashboard with multiple screens. You defined the information architecture based on the DAR method; that means you created Report screens, Analysis screens, and an initial screen – the Dashboard – which contains the most important indicators of the entire panel.

So far so good. In theory, you’ve done the hardest work, but then you realize that HOW you organize the information on each screen will make all the difference to the end-user.

Dashboards are the first page of your panel and they are supposed to only bring the most relevant and summarized information on to the screen.

It’s amazing to see that the most traditional Dashboard concept, composed mainly of bringing several KPIs on a single screen (simplicity at it’s core), is still current and useful after so many years of Business Intelligence evolutions. But designing such a screen still doesn’t seem like an easy task for most people who are tasked with building business intelligence dashboards.

How to effectively design efficient Dashboards is a very extensive topic that could fill an entire book (we recommend reading Information Dashboard Design, by Stephen Few).

To keep the scope of this post short, we will limit ourselves to tips on how to structure a Dashboard screen with many KPIs in order to intuitively guide users’ reading patterns when interacting with this type of screen.

 

Trust what your users do, not what they say

It is important to reinforce this old adage, as it is easy for users themselves to say during the planning process that all the information required to be on a Dashboard has the same importance or relevance.

But beware: this is a fallacy! If we follow this logic, it usually leads us to this kind of unwanted visual “solution” depicted below, where all KPIs are visually treated the same (no hierarchy, no structure anywhere). The result: a very cluttered screen that is difficult to read.

 

 

If everything is important, then nothing is important

You have a set of KPIs (actually these are a mix of Metrics and KPIs, but for teaching purposes we will treat all numbers as KPIs) to place on your Dashboard screen.

To start tackling the visualization challenge, you will probably think along these lines first: “I will distribute them in an organized and aligned way, occupying the entire screen, so as not to have gaps on the screen”.

 

While this is probably fine in terms of layout, this result will invariably lead the user to wonder where to start reading – Revenues? Profits? Red or Green highlights?

Worse still, they will have to figure out for themselves where the most important KPIs are within that ocean of columns and rows, and guess what: before you know it, your users will be asking you for an ibuprofen pill to help kill their headache. Remember: our reading patterns need to be guided.

---

♦– Evenly distributing all KPIs on the screen, with the same size and weight, is the worst decision you can make when designing a dashboard screen. –♦

---

 

Aim to group information more efficiently and delete redundancies

In the example above, we find 4 large blocks of information: Revenues, Subscriptions Revenue, Expenses and Profit. The horizontal organization method chosen for these blocks is a positive point, as it follows the left-to-right reading direction, but there are many repeated labels.

 

Use visual hierarchy to your advantage

Take a look at the image below. In addition to being easy to read, your eyes will be guided by clearly defined text sizes, positions, colors, spacing, and grouping.

 

 

 

It is precisely this display approach that we should adopt for our Dashboard.

That said, it can be difficult to decide for yourself which KPIs should be given priority and prominence on screen. At the end of the day, this is a business-related decision that ideally should be taken in close consultation with the users and attending their analytics needs.

For the sake of our exercise, let’s assume that REVENUE is the most relevant information (and it usually is). We have Revenues and Subscription Revenue, which we will place right on the top band of our Dashboard, while Expenses and Profit will be placed in the lower block, with less emphasis:

 

 

This may seem like a minor detail, but choosing which font to use is one of the first things we need to determine. This will help define the visual style and will avoid rework in the end.

Here at Cluster, we recently used the following font combinations for a Dashboard: “IBM Plex Sans” for text/labels and “Poppins” for numbers. Both are free and available on Google Fonts, so have a go at them in your next project!

 

Don’t try to solve everything at once

Let’s call each group of KPIs a “Block”. Now, all you need to do is “solve” one of these Blocks using Visual Hierarchy principles to highlight main information vs. secondary/supplemental information.

In our example, we will assume and consider that “YTD” will always be the information to be highlighted, as it brings the consolidated data from year start to the present day. Remember: always validate these hierarchy assumptions with your users first, before setting them in stone! These definitions should be driven by business needs, and your panel user will know this first hand. The other KPIs will be secondary and, therefore, should have less visual prominence.

 

 

Note the importance of working with different contrasts of information. This will make the screen less “boring”.

Now, let’s add the percentage comparisons, always highlighting when something negative happens (that is, highlighting more negative and non-positive percentages).

Why? because decisions and actions are likely be informed with data in order to correct negative outcomes of the business, rather than corroborating positive ones:

 

 

Aligning these percentages side by side allowed us to gain enough screen space to bring information that we did not have before, which is the evolution of Revenue for the last 12 weeks with a line chart.

To be sure if the solution used for the “Total Revenue” Block will actually work on the screen, we have to duplicate it, using the information from the second block, which is “Subscription Revenue”.

 

 

Everything looks right so far. It’s time to think about the second set of blocks, which should be less prominent. There is no need to reinvent the wheel. Try to reuse the initial model, but changing only a very subtle detail: font size and weight (no Bold) for the main KPI. The result already brings us the final and improved version of our Dashboard with only on subtle but powerful adjustment, as you can see below:

 

 

---

Final tips:

• Beware of colors on your Dashboard. Use them with care, with the main objective of highlighting the most relevant information for decision making. Therefore, give preference (higher contrast) to negative performances, which demand more attention from users;
• “Whitespace” on the screen is your friend. It helps the user read information by giving the screen some space to “breathe”, and making the whole experience more pleasant (and easy) for the eyes;
• Carefully choose the fonts, as well as their variations (normal, bold, light, etc.);
• Pay attention to Labels. Make your user read and think as little as possible.