Dashboard Design: How to Show Data People Can Act On

A dashboard is a screen that shows the most important information for a task in one place, so someone can understand a situation at a glance and decide what to do next. That last part is the one many dashboards forget, and it is the heart of good dashboard design. It is easy to fill a screen with charts. It is much harder to make a screen that helps a shop manager, a school administrator or a support lead take the right action quickly.

This guide to dashboard design covers how to plan a dashboard from user decisions, choose charts that are easy to read, lay out the screen, use colour carefully and handle the states that real data produces. It assumes you know the basics of visual hierarchy and colour in UI design.

Start dashboard design with decisions, not data

The most common dashboard design brief is “show all the data we have”. Resist it. Begin by talking to the people who will use the dashboard and asking what they need to decide or notice. For example, for an online store manager:

Each row links a question to a piece of data and an action. If a chart does not answer a real question, it is decoration. Methods from user research basics – short interviews and observing people at work – are the fastest way to find these questions.

Know which kind of dashboard you are designing

Nielsen Norman Group describes two broad kinds of dashboards, and they need different designs:

• Operational dashboards support time-sensitive work: a delivery dispatch screen, a server monitor, a hospital ward board. Data updates often and people must spot problems immediately. Keep them simple, with very clear alerts.
• Analytical dashboards help people find trends and patterns over time: monthly sales, website traffic, admissions by course. They allow more detail, filters and comparisons, because people study them rather than glance.

Mixing the two on one screen usually weakens both. If a team needs both, consider two views or tabs.

Choose charts people read accurately

Our eyes compare length and position quickly and accurately. We are much worse at comparing areas, angles and colour intensity. That simple fact explains most chart advice:

Avoid 3D effects completely; they distort sizes and add nothing. Start bar chart axes at zero, otherwise small differences look huge. Sort bars by value unless there is a natural order such as months.

Give every number context

A number on its own rarely tells anyone what to do. “Orders today: 248” – is that good? Add a comparison so the user can judge it instantly:

• Compared with a target: “248 of 300 target”.
• Compared with a previous period: “+12% vs last Tuesday” (and say which period).
• A small trend line (sparkline) next to the figure.
• A status label in words, such as “On track” or “Below target”, not only a colour.

Also show when the data was last updated. Users lose trust quickly if they make a decision on figures that turn out to be hours old.

Here is a simple, accessible KPI card built with HTML and CSS. The bar is drawn with a plain element, and the status is written in words as well as shown in colour:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>KPI card</title>
<style>
  body { font-family: system-ui, sans-serif; background: #f4f5f7; padding: 24px; }
  .card { background: #fff; border-radius: 12px; padding: 20px; max-width: 320px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
  .label { margin: 0; color: #444; font-size: 14px; }
  .value { margin: 4px 0; font-size: 40px; font-weight: 700; color: #111; }
  .target { margin: 0 0 12px; color: #444; }
  .track { background: #e3e6ea; height: 10px; border-radius: 5px; overflow: hidden; }
  .fill { background: #1a73e8; height: 100%; }
  .meta { display: flex; justify-content: space-between; margin-top: 12px; font-size: 14px; }
  .status { font-weight: 600; color: #8a4b00; }
  .updated { color: #555; font-size: 12px; margin-top: 12px; }
</style>
</head>
<body>
  <section class="card" aria-labelledby="kpi-title">
    <p class="label" id="kpi-title">Orders today</p>
    <p class="value" id="value"></p>
    <p class="target" id="target"></p>
    <div class="track" role="img" id="bar"><div class="fill" id="fill"></div></div>
    <div class="meta">
      <span id="change"></span>
      <span class="status" id="status"></span>
    </div>
    <p class="updated">Updated at 2:30 pm</p>
  </section>

  <script>
    const data = { orders: 248, target: 300, lastWeek: 221 };
    const pct = Math.round((data.orders / data.target) * 100);
    const change = Math.round(((data.orders - data.lastWeek) / data.lastWeek) * 100);

    document.getElementById('value').textContent = data.orders;
    document.getElementById('target').textContent = 'of ' + data.target + ' target (' + pct + '%)';
    document.getElementById('fill').style.width = Math.min(pct, 100) + '%';
    document.getElementById('bar').setAttribute('aria-label', pct + '% of daily target');
    document.getElementById('change').textContent = (change >= 0 ? '+' : '') + change + '% vs last Tuesday';
    document.getElementById('status').textContent = pct >= 100 ? 'Target met' : 'Below target';
  </script>
</body>
</html>

Lay out the screen by importance

People usually start scanning at the top left (in left-to-right languages) and give the top of the screen the most attention. Use that space wisely:

1. Top row: 3–5 key figures that answer “how are things right now?”.
2. Middle: the main trend or comparison charts that explain those figures.
3. Lower down: detailed tables and less frequently needed information.

• Group related items and use consistent spacing, so proximity shows which numbers belong together.
• Align charts on a grid. Uneven card sizes make a dashboard look busy even with little data.
• Use the same time range for charts that sit side by side, or label clearly when they differ.
• Keep chart titles as plain questions or statements: “Orders by source, last 30 days”.
• Limit what fits on the first screen. If everything is important, nothing is.

Use colour with restraint

In dashboard design, colour should carry meaning. If every chart uses a rainbow palette, the one red alert that matters gets lost.

• Use a neutral base (greys) for most data and one accent colour for the item you want people to notice.
• Use colour for categories, not for amounts. For amounts, rely on length or position.
• Reserve red, amber and green for status, and always pair them with text or icons. A significant number of people have some form of colour vision deficiency, especially red–green.
• Check contrast: text needs enough contrast to read, and chart lines and bars also need to stand out from the background (WCAG asks for at least 3:1 for important graphical objects).
• Keep colours consistent: if “Online” is blue in one chart, it is blue everywhere.

More detail is in colour theory for UI designers and web accessibility basics. If your product has a dark theme, test charts in both themes; see dark mode design.

Typography and numbers

• Use tabular (fixed-width) figures in tables so digits line up. Many UI fonts support this through the CSS font-variant-numeric: tabular-nums setting.
• Right-align numbers in tables so units, tens and hundreds line up.
• Format numbers for your audience. Indian users may expect lakh and crore grouping (12,34,567); international audiences expect 1,234,567. JavaScript’s Intl.NumberFormat can format either.
• Round sensibly. “₹12.4 lakh” is easier to read than “₹12,43,872.56” on a summary card.
• Always show units and currency.

See typography rules for UI for more.

Design every state, not only the perfect one

Designers often show a dashboard full of neat sample data. Real data is messier. Plan these states in Figma before handoff:

Using components and variants for cards and chart containers keeps these states consistent; see Figma components and variants and design systems for beginners. When you pass the dashboard to developers, include sample data rules and edge cases – the design handoff checklist covers this.

Test with real tasks

Show your prototype to a few real users and give them tasks, not a tour: “Find out whether yesterday’s sales were better than last week’s” or “Which product needs restocking first?”. Watch where they look first, what they misread and what they ask for. Our usability testing lesson explains how to run these sessions.

Dashboard design checklist

• Every chart answers a real user question that leads to an action.
• It is clear whether the dashboard is operational or analytical.
• Charts use length and position: bars and lines before pies and gauges.
• Key numbers have context: target, comparison period, trend.
• The most important information sits at the top; layout follows a grid.
• Colour has meaning, status is never shown by colour alone, contrast is checked.
• Numbers are formatted, aligned and have units; last updated time is visible.
• Loading, empty, error and small-screen states are designed.

Frequently asked questions

Further reading

• nngroup.com/articles/dashboards-preattentive
• nngroup.com/articles/choosing-chart-types
• w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• w3.org/WAI/WCAG22/Understanding/use-of-color.html
• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat