Dashboard UI design: how to make data screens people can read

Good dashboard UI design starts from the decision the user has to make and shows only what that decision needs, with the most important number largest and a comparison right next to it. The rest is discipline: one accent color for what needs attention, charts chosen per question, numbers formatted the same way everywhere, and states designed for when the data is late, empty or wrong. Below is how I apply that, and a checklist to run before you ship a screen.

Dashboard UI design starts from a decision

Most dashboards go wrong before anyone picks a chart. They start from the data that exists and try to show all of it, so the screen ends up with twenty tiles of equal weight and the user still exports to Excel to answer the question they came with.

I start from the other end. Who opens this screen, how often, and what do they decide after looking at it? A finance lead opening a revenue view on the first Monday of the month wants to know whether the month landed on plan and what moved it. That points to one number against target, a bridge chart showing what changed, and a table to drill into. Everything else can live one click away.

Write the questions down before designing anything, in the user's words, and keep the list short. Three to five questions per screen is a comfortable number; past that you are usually describing two screens. If a metric doesn't answer any question on the list, it doesn't go on the screen, however proud someone is of the query behind it.

This sounds obvious, and it is the step I see skipped most often in 5+ years as a Power BI data and business analyst. It is also the cheapest step to get right, because changing a list of questions costs nothing and changing a finished dashboard costs a rebuild.

Layout and hierarchy: what the eye lands on first

People read a dashboard the way they read a page: top left first, then across and down. Put the answer to the main question there, large, with its comparison beside it. A revenue figure on its own means little. Revenue against target, or against the same month last year, is a fact someone can act on.

• Top row: three to five headline numbers, each with a comparison and a small trend line if the trend matters.
• Middle: the charts that explain the headline numbers, in the same left-to-right order.
• Bottom or one click away: detail tables for people who need to find the specific customer, product or invoice.

Size carries meaning, so use it on purpose. If every tile is the same size, the screen tells the reader everything is equally important, which is never true. Align everything to one grid, keep generous spacing between groups and tight spacing within them, and the structure of the screen will be readable before a single number is.

A useful check: blur your eyes, or step back from the monitor. Can you still tell which part of the screen matters most? If the loudest thing is a logo or a decorative header, the hierarchy is wrong.

Choosing charts: data visualization design for the question

Chart choice follows the question, not the data type. A few pairings cover most business dashboards:

• How is it trending? A line chart, with the time axis running left to right.
• How do these items compare? A horizontal bar chart, sorted, so long category names stay readable.
• What explains the change from A to B? A waterfall or bridge chart.
• Is it on target? A single number with a variance, or a bullet chart if you need several.
• What makes up the total? A stacked bar, or a plain table when there are more than a handful of parts.
• I need the exact value. A table. There's no shame in a table; it is often the most honest visual on the screen.

Pie and donut charts work for two or three parts at most, and gauges spend a lot of space on one number that a tile with a variance would show better. 3D effects distort the values they display, so leave them out entirely.

Label lines directly at their end instead of making people match colors against a legend. Start bar axes at zero, since a bar's length is the value. Line chart axes can start elsewhere when the variation is the point, but say so on the axis. Remove gridlines no one reads, borders around every chart and background fills; each one competes with the data for attention.

Color, contrast and the one-accent rule

The single most effective rule I know for data screens: use grey for everything by default and one accent color for the thing that needs attention. The current period, your company against competitors, the region that missed target. When color means something specific, people learn it in a minute. When every series has its own bright color, color stops meaning anything.

Keep red and green for good and bad, and use them sparingly. Then make sure color is never the only signal, because a share of your readers can't tell red from green. Add a sign, an arrow or a label alongside it. WCAG, the web accessibility standard, asks for this in its use of color guideline, and its non-text contrast guideline asks for a contrast ratio of at least 3:1 for chart elements people need to see. Pale pastel lines on white usually fail it.

Two smaller habits help. Keep the same color for the same thing across every screen, so revenue is the same blue on the overview and the detail page. And check the screen in dark mode or on a projector if anyone will use it there; low-contrast designs that look elegant on a designer's monitor tend to wash out in a meeting room.

Numbers, labels and formatting

Formatting is where a dashboard earns or loses trust, and it takes almost no design skill, only consistency. Readers who spot one sloppy number start doubting the correct ones.

• Round to what the decision needs. Revenue of $1,284,391.27 on a monthly overview should read $1.28M.
• Use the same number format everywhere a metric appears: decimals, currency symbol, thousands separator, percentage style.
• Right-align numbers in tables and use tabular figures, so digits line up and can be compared down a column.
• Write titles as the answer when you can. Revenue up 8% on plan, as a dynamic title, says more than Revenue by month.
• Show the period, the filters in effect and the last refresh time on the screen itself.
• Explain unusual metrics in a tooltip or a short note. If two departments define active customer differently, say which definition this is.

Long names and very large numbers break layouts, so test with the longest customer name in the database and the biggest month on record before calling a design finished.

Filters, drill-downs and the states a dashboard needs

Interaction should follow how users think about their business. If sales managers think in regions and then reps, the drill path goes region to rep, not the other way round. Put the filters people use every day in plain sight and hide the rare ones behind a panel. Remember the user's last selection where that helps, because no one wants to pick their own region every morning.

Then design the states that most dashboards skip. What does the screen show when a new account has no data yet? When the refresh failed last night? When a filter combination returns nothing? When the user lacks permission for one region? Each needs a short message that says what happened and what to do, instead of a blank chart or a misleading zero. A zero that means no data looks exactly like a zero that means no sales, and those lead to very different conversations.

Speed is part of the design as well. A dashboard that takes half a minute to load will be replaced by a spreadsheet, whatever it looks like. In Power BI the usual causes are the data model and the DAX, which I cover in how to fix a slow Power BI report.

Power BI dashboard design: the same rules inside a tool

Everything above applies when the dashboard lives in Power BI, but the tool pulls in some bad directions by default. It is easy to drop a new visual on the canvas for every request, keep the default theme colors, and end up with a busy page where every chart has a title, a border and a legend.

A few habits keep a Power BI report readable. Build a custom theme file once with your grey and accent colors, fonts and number formats, so every page starts consistent. Use bookmarks and drill-through pages for detail instead of squeezing it onto the main page. Turn off visual headers and interactions that confuse users. Microsoft's own tips for designing a Power BI dashboard on Microsoft Learn make several of the same points and are worth a read.

If you want to see these rules applied, the finance and CFO example dashboard on my site shows several of them: the last refresh time on the screen, a revenue and cost trend, and a detail table of overdue invoices below the charts, all on sample data for a fictional company. My Power BI dashboard examples guide covers which numbers each department usually needs, and if the dashboard itself is what you need built, that is my Power BI dashboard service.

Dashboard design best practices: a checklist before you ship

I run this list on every data screen before it goes to a client. It takes about twenty minutes, and it catches more problems than any amount of staring at the design.

1. Can you state the three to five questions this screen answers, and does each visual answer one of them?
2. Is the most important number the most visible thing, with a comparison next to it?
3. Does each chart type match its question, with bar axes starting at zero?
4. Is there one accent color with a clear meaning, and does nothing depend on color alone?
5. Are numbers formatted and rounded consistently, and do they match the source system and the export?
6. Are the period, filters and last refresh visible?
7. Does the screen survive the longest name, the biggest number, an empty account and a failed refresh?
8. Does it load fast enough that people won't go back to the spreadsheet?
9. Has someone who will actually use it tried it without you explaining anything?

If you are designing data screens for a product or an internal tool and want a second pair of eyes, or someone to design them from the decision up, that is the core of my UI/UX design services. You can see the style on the example dashboards on my work page first.

Frequently asked questions