Designing Effective Dashboards UX With Action Dots

Many dashboards aren't actionable enough to be useful. They are designed to display all important metrics in one single place, but then it's rarely clear which of these metrics require immediate attention — and if so, which actions would be needed to actually address these issues. That's where action dots can help. Let's see how it works.

Why Dashboards Fail #

One of the most challenging UX issues with dashboards is that it takes time for users to find relevant, or perhaps even critical insights. Dashboards bring data together in one place, but often they create very little understanding around that data.

According to Nick Desbarats, there are a few frequent reasons why dashboards are abandoned:

• One dashboard trying to do too much,
• No action or sentiment indicators,
• Data requires too much time to scan,
• Every day looks very similar at a glance,
• Metrics aren't always directly comparable,
• Metrics requiring action aren't on a dashboard,
• "Buried problems" (hidden behind filters),
• Tactical and strategic dashboards merged.

Poor Types of Action Indicators #

Often action indicators are misleading, flag false positives, or bury existing problems. They don't show the full picture but instead focus on what has changed. However, a trend upwards doesn't always mean success (failure rates), and a trend downwards doesn't necessarily mean a crisis (resolution time).

⚠️ Some Indicators Don't Work Well #

Sometimes these indicator types might provide insufficient context or fail to drive meaningful action:

• % change vs. previous period (e.g., 7.3%🔺)
• % deviation from target (e.g., 10% ❌)
• % deviation from trailing average (e.g., 8% 🔺)
• Single-threshold (e.g., 97.3% uptime 🟩)
• Good/Satisfactory/Poor ranges (e.g., 2% 🟢 / 8% 🟡 / 15% 🔴)

Once all these elements are put together, often they don't work well. Common indicators don't clearly communicate what is a crisis and what is a regular day.

It's never obvious how bad a change actually is — it might be worse than yesterday or a week ago, but is it seasonal? Is it temporary? Has the issue been addressed already?

Alternative: Action Dot Dashboards #

To make dashboards more actionable, we first look at key metrics (KPIs) we need to feature. For each KPI, we define key threshold values — from crisis to best case scenario. And then, we add an action dot depending on where the value for a metric currently falls.

Unlike single-value targets (which can be problematic), we define thresholds for four specific states:

For each KPI, we define a metrics threshold to understand which values pose a problem, and which don't:

• 🔴 Crisis (e.g. -15% ↔ -10%): Improving it would become the user's top priority.
• 🟡 Actionably Bad (-10% ↔ -5%): Bad enough for the user to do something.
• ⚪ Neutral (-5% ↔ 5%): "Everything is OK".
• 🔵 Actionably Good (+5% ↔ +8%): Good enough for the user to do something.
• 🟣 Best Case (+8% ↔ +15%): The best a user thinks it could realistically get.

Action dots are essentially alert icons. On dashboards with action dots, problematic metrics "pop out" because metrics that don't require attention (the Neutral zone, ⚪) don't have any indicators at all. They make crises very noticeable, easy to learn, easy to spot, and easy to understand.

Accessibility Considerations #

Using red and green colors to indicate negative and positive ranges for a threshold is problematic as it makes it difficult for people who experience colorblindness or colorweakness to understand these numbers.

Relying on colorblind-friendly color palettes would help, and perhaps even should be a default — and I'm happy to see Nick's work support this option as well.

Bonus: Dashboard Design Patterns #

By the way, talking about dashboards: I often keep coming back to Dashboard Design Patterns, a wonderful website by Benjamin Bach and his colleauges at the University of Edinburgh to visualize design patterns and components of dashboards. It's a (very!) helpful resource to keep in the bookmarks for any work around dashboards.

Wrapping Up #

What I love most about action dots dashboards is that they immediately communicate what requires attention, based on preferences that a user has expressed and the range they prioritized. It doesn't highlight what doesn't need highlighting, and shows what requires attention.

Huge thanks to Nick Desbarats for bringing this into the spotlight and putting it all together — and I can only wholeheartedly recommend checking Nick's upcoming book and courses on dashboards as well! 🙏🏾

Useful Resources #

• Action Dots Dashboards, by Nick Desbarats
• Practical Charts and Dashboards (Books + Courses), by Nick Desbarats
• Design Tradeoffs in Dashboard Design
• Dashboard Design Patterns, by Benjamin Bach
• DataViz Clarity, Dashboard Design, by Aurélien Vautier
• Data Dashboard UX Benchmarking, by Creative Navy UX Agency
• My Crazy Crusade Against Single-Number KPI Targets, by Nick Desbarats

Useful Books #

• Practical Dashboards, by Nick Desbarats
• Design for Information, by Isabel Meirelles
• The Big Book of Dashboards, by Steve Wexler
• Books by Stephen Few and Edward Tufte