Dashboard UI design: one headline number, then comparisons, then detail
A dashboard exists to help someone make a decision or notice a problem quickly. Design it backwards from that decision: lead with the one number that matters most, show what it's compared against, and put detail lower down for people who need to dig in. A screen of twelve equal tiles and five chart types shows data without saying anything.
Start with the decision
Before choosing charts, write down who opens the dashboard, how often, and what they do next. A café owner checking bookings each morning needs to know whether today is busy and whether staffing is right. A support lead needs to see whether the queue is growing. Each answer points to one headline metric and two or three supporting ones. Anything that doesn't change a decision belongs on a report page, not the dashboard.
A layout in three layers
- Headline. One to four key figures as large numbers at the top left, where the eye starts, each with a label and a comparison: “Bookings this week: 142, up 12 on last week”. A number without a comparison is hard to judge.
- Comparisons. One or two charts showing the headline over time or across categories: this week against last, this month against target, branch against branch.
- Detail. A table of recent items or a breakdown people can sort or scan, such as the latest orders, today's appointments or the slowest tickets.
This order follows how people use a data dashboard layout: a glance for status, a look at the trend if something seems off, and a dive into the rows only when needed. Navigation between dashboards and settings usually sits in a narrow sidebar on desktop and collapses on smaller screens.
Charts and numbers
| Question | Chart | Avoid |
|---|---|---|
| How is this changing over time? | Line chart, or bars for a few periods | 3D or stacked areas that hide the trend |
| Which category is biggest? | Horizontal bar chart, sorted | Pie charts with more than three or four slices |
| Are we on target? | Single number with target and difference | Speedometer gauges that take a lot of space for one value |
| What are the individual items? | Table | A chart of data people need to read exactly |
- Use tabular figures so digits line up in tables and tiles, and right-align numbers in columns.
- Round sensibly. “12.4k” is easier to scan than “12,384.27”; keep the exact figure in the detail table.
- Label axes and units. A chart without units is a decoration.
- Start bar charts at zero. Truncated axes exaggerate differences.
Colour: mostly neutral
Dashboard design best practices treat colour as a signal, not decoration. Keep the interface neutral and use one accent colour for the data in focus, with the rest of a chart in a muted tone. Reserve red, amber and green for status, and never rely on them alone: colour vision deficiency is common, and red against green is the classic confusion. Pair status colours with text or icons, as WCAG's use of colour criterion requires, and give chart elements at least 3:1 contrast against their background, per non-text contrast.
Admin dashboard design on smaller screens
Few people analyse data on a phone, but many check status there. On narrow screens, stack the headline numbers two across, show a single key chart, and let wide tables scroll sideways inside their own container rather than squashing columns. Hide the sidebar behind a menu or move key sections into tabs. Test that totals and labels don't truncate. More on related patterns in card layout design.
Dashboards in Anticode
Dashboard is one of Anticode's page kinds, and the Technical design system suits it: IBM Plex Sans, a graphite palette by default with amber as the action colour, thin borders on panels and a faint grid behind the page. The design-engine dashboard follows the three layers above: a sidebar of sections (hidden below about 860px), four headline tiles in a row (two across on smaller screens) with tabular figures, a bar chart in the accent colour with past periods dimmed, and a table that scrolls sideways when it's too wide.
The figures on a design-engine dashboard are sample values to show the layout. For something interactive, an app build can be a working dashboard, but it runs in Anticode's sandbox with no network, so it can't connect to live data: anything that would need a server uses labelled sample data, and the visitor's own entries can be saved in their browser. The Tallyhaus template, a personal finance dashboard in a dark glass style, is an example. See the internal dashboard page for building one.
Questions people ask
How many metrics should a dashboard show?
One headline metric and two to four supporting ones on the main view. Put everything else on report or detail pages.
What's the best chart for a dashboard?
Line or bar charts for trends, sorted horizontal bars for categories, and tables for exact values. Avoid gauges and pies with many slices.
Should dashboards use a dark theme?
Either works. Dark suits dashboards left open on screens; light suits print and daytime office use. Keep contrast sufficient in both.