Dashboard UI design: how to build a dashboard people actually use

Monday morning, nine o’clock. Four people have each spent an hour pulling numbers out of e-conomic, the webshop and two spreadsheets so management can see how last week went. The numbers don’t quite match, and half the meeting goes on working out why. Six months later someone has built a dashboard with 27 charts, and now nobody opens it. Both situations are common, and both are about design. A dashboard is a tool for making decisions faster, and the design decides whether it succeeds.

What makes good dashboard UI design?

A good dashboard can be read in five seconds. The user should see whether everything is as it should be and, if not, where the problem is. That takes three things: few, well-chosen numbers, a clear order of importance, and a comparison next to each number, for example against last month, budget or target. A number without a comparison is just a number. "412 orders" says nothing, while "412 orders, 8 % below last week" says someone needs to look into something. The fourth trait is that the dashboard leads somewhere: clicking a number shows the details behind it or the action to take.

What types of dashboard are there?

The customer-facing type is often overlooked, yet it often has the biggest effect. When customers can see the status of an order, a delivery or an invoice themselves, a large share of the calls that start with "I just wanted to check" disappear. It is typically part of a customer portal, where the dashboard is the home screen after login.

How do you choose the right KPIs for the dashboard?

Start with the decisions the user needs to make, and only then look for the data that supports them. A warehouse manager decides whether to add extra staff tomorrow. A sales lead decides which proposals to follow up today. An owner decides whether to hire. Each decision has one or two numbers that settle it, and those numbers are your KPIs. The fastest way to find them is to interview users about what they looked at the last time they made the decision. Our guide to user interviews has a question guide you can adapt.

1. Which decision does the number help make?
2. Who makes the decision, and how often?
3. What do we compare with: last period, budget, target or average?
4. When is the number good, and when does it need action? Write the thresholds down.
5. Which system does the number come from, and who owns the definition?
6. What is the first thing the user will click to see more?

How do you structure a dashboard layout?

People read a screen top to bottom and left to right. The most important number therefore belongs in the top left, and the further down you go, the more detailed the content gets. A classic layout that works is a row of three to five large numbers at the top, then two or three charts explaining the trend, and at the bottom a list or table of the specific items that need action. Keep the same structure across views so users don’t have to learn a new layout for every department.

• One message per card: a number, a chart or a list, with a heading that says what it shows.
• A comparison next to every number: arrow, percentage and the period it is compared with.
• Colour carries meaning: use neutral grey for normal and colour only for deviations.
• Consistent periods: every card shows the same time span unless clearly stated otherwise.
• Space between cards: tightly packed dashboards look busy and read more slowly.
• Filters at the top and grouped: period, department, product group, and always show which filters are active.
• Time of last update and data source, visible but discreet.

Which chart should you use for which data?

Be careful with red and green as the only signal. A share of men have reduced colour vision, and WCAG requires that colour is not the only way information is conveyed and that graphical elements have enough contrast. Combine colour with arrows, icons or text such as "below target". Format numbers the way users expect, and round aggressively: DKK 1.2m reads faster than DKK 1,204,388, and the precision belongs in the detail view.

Which dashboard design mistakes do we see most often?

• Vanity metrics: page views and total users that can only go up.
• Different periods on the same screen, so the numbers can’t be compared.
• Abbreviations and internal names that new staff don’t understand.
• Charts without axes, units or an explanation of what a bar represents.
• No empty state: a new dashboard without data looks like an error.
• Slow loading: a dashboard that takes 15 seconds won’t be opened.

Many of the mistakes are about language. The heading of a card should say what the number means, such as "Orders shipped same day", in place of an internal code name. Empty states and explanations of thresholds are microcopy, and we have collected the principles in our guide to UX writing and microcopy.

What does a dashboard cost? BI tool or built into your own system

The hours in the table are based on typical senior rates of DKK 800–1,400 an hour. Take a concrete example: a 15-person wholesaler has orders in the webshop, invoices in e-conomic and stock figures in a spreadsheet. A dashboard with six KPIs, an order list and a daily refresh needs integrations with e-conomic and the webshop, a small database and a page with login. The spreadsheet is replaced at the same time by a stock feature in the same system. It is a classic first project that fits a medium web package, and for the full price picture read what a web app costs.

How do we design and build dashboards at Ceptiv?

We start with the decisions and the users before we talk about charts. Then we build a clickable prototype with real or realistic numbers, so you can feel whether the dashboard answers the right questions before any integrations are built. Design and development sit in the same team, so charts, thresholds and empty states are built exactly as designed. Many of our dashboards replace spreadsheets the business has outgrown, which we have written more about under replace Excel with a custom system. When you are ready, you can get a fixed price within 24 hours.