Designing the path the reader walks.
Visual design is the surface. Experience is the journey across it. The reader does not read a dashboard, they walk it. This section is the grammar of that walk: how they enter, how they navigate, how they ask the follow-up, and how they leave with a decision.
"Design is not just what it looks like and feels like. Design is how it works."
The first ten seconds.
A dashboard either answers the headline question in ten seconds, or it has failed. The detail is for the next ten minutes.
The path matters more than the page.
A dashboard is not a destination. It is a sequence of decisions: where am I, what changed, why, and what do I do next.
Make state visible.
Every filter, every selection, every time range applied is readable in one glance and reversible in one click. Hidden state is broken state.
Provenance is a feature, not a footer.
Every number on the page is one click from "where did this come from." Trust is operational, not aesthetic.
AI is an interface, not a feature.
Chat is not a tab tucked in the corner. It is the second hand on the same data, sitting beside the chart, ready for the next question.
Respect grain.
Every chart has one row-level meaning. Drilldown moves grain by one level. Cross-grain links teleport the reader and break the path.
The first ten seconds.
The top of the dashboard is the headline. If the reader does not have an answer in ten seconds, they do not scroll. The hero number, the period, the delta, and the comparator earn their place above the fold. Everything else is the article behind the headline.
One headline number (sized for the room, bordered in the hero color). Two supporting tiles answering "compared to what." Period and scope explicit. Last-updated visible. The reader leaves with the answer in their head before scrolling.
- The headline metric is in the top-left, sized for the room.
- The headline carries a delta against an anchor the reader recognizes: last period, plan, target.
- Period and scope appear in plain English near the title, not buried in a filter.
- The supporting tiles answer "compared to what" and "is this on track."
- Last-updated time is visible, not in a tooltip.
- × Twelve KPI tiles in a uniform row. The headline disappears.
- × A hero number with no comparator. Numbers without anchors do not move decisions.
- × A vague period: "recent," "current," "latest."
- × A "What is this dashboard?" paragraph above the fold. The chart should answer that.
Filtering and exploration.
A filter is the reader asking the data a question. The data should answer in place. Every applied filter is readable above the fold, named in plain English, and removable in one click. No modal, no "Apply" button, no hidden state.
The bar chart updates in place. The total updates in place. The active filter is named at the top, with a one-click clear. The reader stays oriented because nothing teleported: same axes, same scale, same chart, narrower question.
- Every active filter is a visible chip with × to remove.
- Filters are live. No "Apply" button. No "Save view" before the reader can see the result.
- Filters are URL-shareable. The reader can copy the page and send the exact view to a colleague.
- Defaults are deliberate. Period defaults to MTD/QTD, not "all time."
- × A filter dialog that closes before the reader sees what changed.
- × Filters that reshape the page layout (different charts, different sections) when applied.
- × An "active filters" count next to a gear icon. Name the filter, do not count it.
- × Filter state lost on refresh. URL state, or it did not happen.
Comparison and time.
A single number is a fact. A comparison is a story. Most analytics work fits inside four comparison patterns, paired with a date picker that defaults to what the reader actually cares about and a comparator that earns its space.
Two lines on shared axes: current period in the hero color, prior period dashed and quieted. Seasonality reads instantly. Reach for this first when the reader asks "are we doing better than last year."
Actual cumulative against the plan line. The reader sees pacing in one glance: above the dashed line is ahead, below is behind. Pair with a single tile that says "ahead by $0.8M" so the answer is the headline.
Each line is a cohort, aligned to its own start, not the calendar. Pulls out behavior changes that calendar charts hide. Use for retention, lifetime value, ramp curves, anywhere the question is "are newer cohorts behaving differently."
Repeat the same chart for each segment. Shared axes make shape comparisons easy: South is the only one bending down. Better than a six-line tangle when the reader needs to scan many segments at once.
Presets reflect the verbs the reader uses ("month to date," "same quarter last year"), not the verbs the database uses ("calendar.fiscal_quarter_offset = -1"). Default selection is deliberate: most operational dashboards default to QTD with a prior-quarter comparator, not to "all time." Custom is the last option, not the first.
Conversation as an interface.
The chart answers today's question. The conversation drives tomorrow's. Chat is not a feature wedged into a tab; it is the second hand on the same data, sitting beside the chart, sharing its state. Same surface, next question.
The chart filter (West) is the chat context. The AI cites the table and the filters it read. Follow-ups are suggested, not invented; clicking one updates the chart in place. The reader never leaves the page to ask a question.
Known question, recurring decision, multiple readers. The dashboard answers the same headline question every Monday. The chart is faster than the conversation.
Unknown question, one-time investigation, single reader. The path is exploratory and the answer might require five queries. The chat is faster than building a dashboard.
Known question with unknown follow-ups. The dashboard shows the headline; the conversation answers "why" and "what about." Default state for executive views.
Lineage and trust.
Every number on a dashboard is a claim. Lineage is the evidence. The reader should be one click from the raw source. When two views of the same metric show different numbers, lineage is what closes the meeting in five minutes instead of five days.
Sum of closed-won opportunity amount, fiscal year 2025, excluding pre-IPO adjustments.
sf_opportunities.revenue_fy25 analytics.fct_opportunities salesforce.opportunity Click the number, read the chain. Definition in plain English at the top. Source freshness at the bottom. Every step is a link to the next one. The reader can answer "where did this come from" without leaving the page and without asking a data engineer.
- Every metric carries a one-sentence plain-English definition.
- Lineage is one click, not one meeting. Source → model → metric, visible inline.
- Source freshness is part of the metric, not a separate page.
- Same metric, same number, everywhere it appears. Inconsistency is a trust failure.
- × Lineage that is SQL-only. Readers do not read SQL.
- × A metric definition that lives in a separate wiki nobody visits.
- × Two dashboards showing the same metric with different numbers. Reconcile or remove one.
- × A "last updated" stamp that is older than the source data without explaining why.
Empty, loading, error, mobile.
The states that are not the happy path are where trust is earned or lost. Design them alongside the chart, not after the chart shipped. The same dashboard has to work on a phone in an airport at 11pm, with one bar of signal and the executive's full attention.
The query ran. There is nothing to show. Say so plainly and tell the reader why (the period has not started, the segment is brand new, the source has not loaded).
The reader applied a filter that excluded everything. Show the filter that did it and offer a one-click clear. Do not show a blank canvas with no path back.
Show the shape, not the spinner. A skeleton of the chart that is coming reads as progress; a spinner reads as wait.
Tell the reader what failed, when it last succeeded, and what to do next. An error is the start of a conversation, not the end of one.
On a phone, the reader has one hand, one bar of signal, and ten seconds before they are interrupted. The dashboard collapses to one column, hero metric first, tables collapse to cards, charts read at a glance. Filters move to a sheet at the bottom, not a sidebar.
Reflow, do not resize. A dashboard that "works on mobile" because the user can pinch-zoom is a dashboard that does not work on mobile.
Every principle, in one dashboard.
A complete worked example. Headline answered in the first ten seconds. Plan markers built into the main chart so pacing is obvious. The decision is the loudest thing on the page. Click any region (chip or bar) to filter, drill, and rewrite the call to action.
Three factors account for $380K of the $400K shortfall:
- Two enterprise renewals slipped to Q3 (Pinnacle Co., Vertex LLC). $220K of variance, recoverable if both close in the projected window.
- Pipeline coverage at 1.4x vs the 2.8x company average. $130K of conservatism; the region is under-built for the remaining plan.
- Houston AE in 8-month ramp vs the 4-month norm. $50K productivity gap; a senior-rep covering pattern can close it.
Recoverable in H2 if the two slipped renewals close in Q3. Otherwise re-baseline the FY plan by $0.4M.
opportunity_pipeline.south_aging · sf_users.ramp_time · fct_renewals Every principle from this section, in one frame. The headline answers in ten seconds. The plan hairline on each bar means pacing is readable without a second chart. The Analyst AI sits beside the data and explains the why behind the what, reading the same scope the dashboard is filtered to. Click South: the same dashboard becomes the briefing for the meeting it just told you to schedule.
- Hero metric, then context. The top-left tile carries the question. The rest of the page is supporting evidence.
- Every filter is a chip. Visible, named, removable in one click. No "Apply" buttons. Filters are live.
- Default the date range to what the reader actually cares about (MTD, QTD, last 30 days). Never "All time" by default.
- Every metric carries a definition (one sentence) and lineage (raw → model → metric). Both reachable in one click.
- Drilldown moves grain by one level. Cross-grain navigation opens a new view, not a deeper one.
- Chat and chart share state. Filtering the chart filters the conversation. Filtering the conversation filters the chart.
- Empty, loading, and error states are designed alongside the happy path, not after.
- × A grid of twelve KPI tiles with no hierarchy. The headline disappears.
- × A filter dialog that hides what the user already selected. Filters must be visible above the fold.
- × Drilldowns that "teleport" the reader to a different mental model. One level at a time, or it is a new page.
- × The same metric showing two different numbers on two different pages. That is not a polish issue; it is a trust issue.
- × A date picker with no comparator. A single number with no anchor is not a metric, it is a fact.
- × AI chat that fabricates a number and does not cite the data it read.
- × Empty states that are blank. Silence is not a state.
- × Mobile views that are the desktop layout, shrunk. Reflow, do not resize.
Section 03: Designing for AI.
Experience is the path the reader walks. Section 03 is the path the LLM walks: semantic layers, prompt-shaped schemas, the work of transcribing tribal knowledge into shapes a model can read.