1What separates a dashboard from a page of charts
A dashboard consolidates key information, usually KPIs, on a single screen for monitoring and quick decisions. What makes it different from a report is interactivity. Without that it is just a page of charts.
- Small in content, not in area. Few things, said well
- Concise. No redundant elements
- Clear. The message reads without explanation
- Intuitive. The reader grasps the author's logic immediately
- Customised to the audience who will act on it
- Visual summarization
- Single-screen display
- Real-time or near real-time
- Customization and interactivity
- Contextual relevance
- Visual design principles
The video says seven; the lesson notes name these six. Treat these six as the definitive list.
A pop-up on hover is not decoration. Bar length gives detection and ranking but weak estimation, so the pop-up supplies the exact number the eye cannot measure. It patches the specific weakness of the encoding, which is why it earns its place.
Why different dashboard types exist
Form follows function, applied to dashboards. Three factors decide the type: time sensitivity, level of interactivity, and the nature of the decision supported.
| Strategic | Analytical | Operational | Tactical | |
|---|---|---|---|---|
| Update frequency | Periodic | On demand | Real-time | Daily or weekly |
| Interactivity | Low | High | Medium | Medium |
| Audience | Executives | Analysts | Operators | Managers |
| Key focus | KPIs and trends | Exploration | Alerts and status | Action plans |
Dashboard data
Five data types appear on dashboards: categorical, quantitative, time-series, comparative and status indicators. The new complexity is that they must work across visuals, not just within one.
Check data compatibility across visuals before building. Designing a single chart means worrying about data inside that chart. A dashboard means worrying about data types agreeing between charts, because if they do not agree, a filter applied across visuals can produce comparisons that are quietly wrong. This is the failure mode unique to dashboards.
Drill-down and aggregation
Status indicators
Performance dashboards
A distinct subtype, used to execute strategy. The framework comes from Eckerson's Performance Dashboards.
| Attribute | What it delivers |
|---|---|
| Strategy execution | Turns strategic goals into tracked, assigned, measurable items |
| Monitoring | Progress visible in real time |
| Collaborative | Different teams work off one shared set of metrics |
| Corrections | Gaps surface early enough to fix, not to blame |
| Objective transparency | Metrics agreed in advance, so everyone knows how performance is judged |
The point about objectivity is a design point, not a management platitude. The metrics are decided before the dashboard is built, and that is what removes argument later about whether a gap is real.
Thirteen mistakes in dashboard design
Stephen Few's list, worth learning as a checklist because it is directly usable.
- Exceeding the boundaries of a single screen
- Supplying inadequate context for the data
- Displaying excessive detail or precision
- Choosing a deficient measure
- Choosing inappropriate display media
- Designing unattractive visual displays
- Introducing meaningless variety
- Using poorly designed display media
- Encoding quantitative data inaccurately
- Poor arrangement of the data
- Ineffective or absent highlighting of important data
- Cluttering the display with unnecessary decoration
- Misusing or overusing colour
Inadequate context
The dangerous one on operational dashboards, because readers take real-world actions from cues they may have misinterpreted.
Meaningless variety
Reaching for an unusual chart because it looks sophisticated. Simplicity communicates better.
Interactivity where none is needed
Also counts as a mistake. It breaks cognition rather than helping.
Design goals: the data-pixel ratio
Tufte's data-ink ratio says every drop of ink on a graphic should carry information. On a screen, ink becomes pixels.
3D effects on charts and pies. Gridlines inside bars. Decorative background blocks. Colour gradients in the background.
The values that carry the message. Contrast on the region you want read. Direct labels on key points. White space around what matters.
Three states, used deliberately: emphasise with saturation, size or a white border drawing a boundary around the region; de-emphasise by pushing to the background and reducing saturation; and neutral in between, for content that is present but not being pointed at.
Layout: where attention lands
Six categories of design visuals
Graphs
Line, bar, area.
Images
Context and emotional tone, for example a flood image on a natural-disaster dashboard.
Icons
Instant recognition. They replace a legend entirely: man and woman icons need no key.
Drawing objects
Shapes showing relationships.
Text
Titles, annotations, pop-ups. The hover pop-up is simply a text element appearing on demand.
Organizers
Small multiples, tables, spatial maps. A spatial map conveys geographic comparison in a way no table can.
The dashboard design process
The terms below are not part of the chart-design canon the rest of this chapter draws on. They are standard dashboard-practice vocabulary from Stephen Few's Information Dashboard Design, and they are worth knowing by name because this is the language dashboard briefs are written in.
| Term | What it is | What it is not |
|---|---|---|
| Visual vocabulary | The set of chart types you use, chosen by matching chart type to the data and the intended insight | Personal preference, complexity to show skill, or one chart type used everywhere |
| Wireframe | A layout plan showing where each chart will sit, made before building anything | Connecting data sources, finalising colours, performance testing |
| Component library | A maintained set of reusable design elements, for consistency across every dashboard | Data storage, technical documentation, a user list |
| Look and feel | The visual identity layer: colours, fonts and logos | The data, access permissions, refresh frequency |
Wireframing first is what makes the single-screen rule achievable: you discover that six charts do not fit while it is still cheap to change. Note the tension with the layout rule, though. Logos belong to look and feel, and they must stay out of the prime top-left area.
Designing for usability
Usability goal: enable users to find the information they need quickly and easily. Not to fit in more metrics, and not to impress.
Understanding the needs and goals of the end user. Not the developer's preferences, not whichever data source was easiest to connect, and not the most advanced chart types available.
Arranging components on an underlying grid to create a structured and organised presentation. A structural device, not decoration.
Reduces clutter and improves clarity. It does not let you fit more in, and it never removes the need for user testing.
High and strategic gets aggregated KPIs and quarterly trends. Low and operational gets real-time transactions. A strategic dashboard querying transaction-level data is slow for no benefit.
The four data challenges
| Challenge | What breaks |
|---|---|
| Data latency | Delay between the event and the update. A beautiful dashboard that updates too slowly fails, because action has a deadline |
| Data inconsistency | Conflicting sources and definitions. Operators must never receive ambiguous signals |
| Missing data | Gaps or corrupted records, leading to indecision and lost opportunity |
| Overload | Heavy graphics and heavy queries. Slow loading plus cognitive fatigue breaks the insight-to-action chain |
The five second rule
Context makes a number mean something
Five usability principles
- Organise information to support meaning and use. Group by the dimension the reader thinks in, for example colour all stores in one region alike.
- Maintain consistency in colour and visual attributes for a category, including inside drill-downs. Blue for Democrats and red for Republicans works across every news channel because it never changes.
- Make it aesthetically pleasing. Pleasant visuals are retained and recalled better, so this is a functional requirement, not vanity.
- Use the dashboard as a launchpad for the reader's own narrative, so they own the insight and the action.
- Test usability before deploying. Everything above was done from the designer's perspective, so give prototypes to real users, take criticism, and iterate.
Tools
| Low / no code | Code based | |
|---|---|---|
| Examples | Tableau, Power BI, Google Data Studio | Python: Plotly, Voila. R: Shiny, flexdashboard |
| Skill needed | Menu navigation, spreadsheet comfort | Programming |
| Strength | Fast, live connections, easy sharing and refresh | Custom visuals and custom metrics |
| Limit | Stops at what the menus offer | Slower to build |
Key points
- What separates a dashboard from a page of charts.
- Author-driven and reader-driven narrative, and how interactivity carries both.
- Five properties: small, concise, clear, intuitive, customised, and that "small" means content.
- The six characteristics of a dashboard.
- Three factors that determine dashboard type: time sensitivity, interactivity, nature of decision.
- The four dashboard types with update frequency, interactivity, audience and focus.
- How strategic, analytical, operational and tactical dashboards connect in one business problem.
- Five dashboard data types, and why cross-visual data compatibility matters.
- Drill-down and aggregation along a time hierarchy.
- Five attributes of a performance dashboard, and Eckerson as the source.
- The three performance dashboard layers, how they enable root cause analysis, and that planning spans all layers.
- The thirteen mistakes, and Stephen Few as the source.
- Data-ink ratio becoming data-pixel ratio, and what to reduce against enhance.
- Why a plain background gives the best contrast.
- Prime layout areas, and why logos must be kept out of them.
- Six categories of design visuals.
- Four data challenges: latency, inconsistency, missing data, overload.
- Three granularity levels matched to user type.
- Why context converts a number into a narrative, and the four tools for adding it.
- Five usability principles, ending with testing before deployment.
- Low-code against code-based tools, with examples of each.
- The design process vocabulary: visual vocabulary, wireframe, component library, look and feel.
- User-centric design, the five second rule, grid layout and minimalist design.