learn-business-intelligence-with-phoebe / Builder session 6 of 10
Learn Business Intelligence with Phoebe · Builder track · Session 6 of 10

Build the dashboard

You can pick the right chart - now assemble many charts into one screen that a busy executive can read in five seconds. Tonight is layout, interactivity, mobile, and accessibility: the craft that separates a pile of visuals from a dashboard. You will assemble a working Daybreak exec view out of live panels, right here in the browser, and walk the same scan your CEO would.

🟡 Builder track Practitioners: analysts · DE · DS · PMs Runs in your browser · no install 45 min live
0-3 · Welcome 3-22 · Layout, interactivity, mobile 22-42 · Build-along: exec view 42-45 · Q&A
Part 0

From charts to a dashboard

Sessions b1-b5 gave you data, a model, measures, and chart choice. Tonight those parts meet: a dashboard is charts arranged so the layout itself answers the first question before anyone clicks. We cover the zone grid that survives every tool, the interactions worth their cost, and the two audiences most dashboards forget - phones and people who do not see color the way you do. Then we assemble Daybreak's exec view from live panels.

Live - presented in session Self-study - read after class ▶ Mini-BI - interactive playground Official sources covered
★ What you walk out with today A layout system (the zone grid and the 5-second scan), an interactivity map (what each click should do, and what to switch off), and a working Daybreak exec view assembled from live panels - plus a checklist that makes it mobile-ready and accessible.
Part 1 · covers Few IDD ch12-13, PL-300 "configure a report page"

Layout - the 5-second scan 7 min live

Readers scan a screen in a Z-pattern: top-left first, across, then down. So top-left is prime real estate - put the number that matters most there, never a logo or a filter. The classic exec layout follows the scan: KPI row on top, the trend in the center, breakdowns below, filters on a rail. One screen, no scrolling, for executive views. Grid alignment and white space are not decoration - they are how the eye knows what belongs together.

Filter rail date city plan KPI · Revenue prime real estate KPI · Orders the vital few KPI · AOV 3-5 cards max KPI · Customers no chart junk Trend · revenue by month the center answers "how are we doing over time" Breakdown · by city detail lives below Breakdown · by category aligned to the grid the Z-pattern scan: top-left, across, then down Sketch this grid on paper before opening any tool - layout fights are cheap there and expensive after.
🔍 Click to zoom - the zone grid: KPI row, trend, breakdowns, filter rail, scanned in a Z
LiveThe one-screen rule and when to break it3 min

Stephen Few's definition is strict for a reason: a dashboard is what fits on a single screen, monitored at a glance. The moment an exec scrolls, they stop scanning and start hunting - and most never scroll at all, so whatever lives below the fold effectively does not exist.

  • Exec views: one screen, always. If it does not fit, you have not prioritized. Cut panels, do not shrink them.
  • Analyst views may go deeper - via navigation, not scrolling. Detail belongs on drillthrough pages and linked report pages, one honest screen at a time.
  • White space is a feature. Squeezing in one more chart costs every existing chart a share of attention. Few calls the overcrowded alternative a data junkyard, and he is right.
Real world

The elevator test. Show the dashboard to someone for five seconds, then take it away and ask what they saw. If the answer is not your headline number and its direction, the layout failed - no amount of interactivity rescues a screen that fails the first five seconds.

Self-studyThemes and consistency3 min read

Every serious BI tool lets you define a theme: fonts, the color palette, background, spacing defaults - set once, applied everywhere. Power BI uses a JSON theme file; Tableau uses workbook-level formatting plus custom color palettes and shapes. It is the same idea as this site's single CSS file: define the look in one place so every page agrees, and a rebrand is a one-file change.

  • Consistency is comprehension: when revenue is always the same color and fonts never jump, the reader spends zero effort re-learning each page.
  • Themes are governance for design: publish a company theme file so forty report authors produce one visual language instead of forty.
  • Remove before you add: most default themes ship with gridlines, borders, and shadows you should strip. Few's rule from b5 still applies at page level - maximize data ink.
Part 2 · covers PL-300 "enhance reports for usability", Tableau actions

Interactivity - filters, cross-filter, drillthrough 7 min live

A static image answers one question; a dashboard answers the follow-up. The toolkit: slicers and filters (scoped to a page or the whole report), cross-filtering (click a bar and every other visual reacts), drillthrough (right-click a data point to jump to a detail page about it), custom tooltips (a mini chart on hover), bookmarks (saved states you can navigate between), and synced slicers (one filter controlling several pages). Each is cheap to add and expensive to read - so budget them.

City bar chart reader clicks one city's bar Trend line now shows only that city's revenue Detail page that city's orders, carried by the filter cross-filter drillthrough hover adds a third layer: a custom tooltip can show a mini trend for just the bar under the cursor bookmarks save a whole state (filters + selection) so a button can jump straight to "the March view" Map every click before you build it. If you cannot say what a click does, the reader cannot either.
🔍 Click to zoom - the interaction map: one click cross-filters, the next drills to detail
LiveThe interaction budget4 min

Every interactive element costs twice: cognitive cost (the reader must discover it, learn it, and trust it) and performance cost (every cross-filter click fires queries against every affected visual). Default to fewer.

  • Cross-filtering ON is the default in most tools - question it. Clicking a city bar and watching the KPI row change can mislead: the exec thinks total revenue collapsed when they merely filtered it. Turn cross-filtering off wherever a partial number could be mistaken for the whole.
  • Cross-highlight is the gentler cousin: it dims the non-selected portion instead of removing it, keeping the total visible for context. Often the better default for exec views.
  • Drillthrough beats crowding: the detail an analyst wants does not belong on the exec page - it belongs one right-click away, with the filter context carried along.
  • The cut test: list every interaction on the page, then cut half. If nobody misses one in a week, it was cost with no benefit.
In Power BI / In Tableau Power BI: Edit interactions sets, per visual pair, whether a click cross-filters, cross-highlights, or does nothing; drillthrough pages receive the clicked context (reachable via right-click or buttons); bookmarks + the Selection pane group, layer, and show/hide visuals to build toggles and guided views; sync slicers carries one slicer across pages. Tableau: filter, highlight, and URL actions do the reacting; sheet swapping via parameters lets one container switch between charts; navigation buttons move between dashboards. Same grammar, different menus - PL-300 and the Tableau exam both test exactly these.
Part 3 · covers PL-300 mobile design + accessibility

Mobile + accessibility - the forgotten audiences 5 min live

Two audiences break your beautiful desktop grid. Phones: a mobile view is a separate layout, not a shrunk one - stack panels vertically, lead with the KPI cards, drop the wide trend or simplify it, and make every touch target fat enough for a thumb. Accessibility: roughly 1 in 12 men cannot tell red from green, screen readers need alt text, and keyboard users need a sane tab order. Both tools support all of this; almost nobody configures it. Be the one who does.

LiveThe accessibility five4 min

Five checks, run on every dashboard before it ships. None takes more than minutes; together they cover most of what PL-300 means by accessible reports.

CheckWhat to doWho it saves
1 · ContrastText and marks pass contrast guidelines against their background - no pale gray on white.Low vision, sunlit phones, projectors
2 · Never color alonePair every color encoding with position, a label, or a shape. Red/green alone is invisible to many readers.Colorblind readers - about 8% of men
3 · Alt textEvery visual gets a one-sentence description of what it shows and the takeaway.Screen-reader users
4 · Tab orderSet the keyboard order to follow the visual reading order, not the order you added visuals.Keyboard-only users
5 · Real text sizeMinimum readable font sizes; no 8pt axis labels. If you must shrink text to fit, cut content instead.Everyone over 40, honestly
Real world

The red/green incident. A status dashboard shipped with red = at risk, green = on track, and nothing else. A colorblind director read every project as "on track" for a month. One label column would have prevented it - which is why check 2 is never optional.

Demo 1 of 2

Assemble the Daybreak exec view ★ 14 min · everyone builds

The zone grid, made real. We assemble the exec view from live panels, top to bottom, exactly the way you would on a real canvas: KPI row first, trend in the center, breakdowns below. Each panel is a mini-BI box - configure it, then move to the next zone.

Step 1 · The KPI row. Two cards, side by side, top of the page - the prime real estate. Left: Revenue. Right: Orders. On a real canvas you would add AOV and Customers; keep it to the vital few.

Step 2 · The trend. Center of the page, full width: revenue by month as a line. This is the "how are we doing" panel - the one every eye lands on after the KPI row.

Step 3 · The breakdowns. Below the trend, two panels: revenue by city (where the money comes from) and units by category (what we actually ship). Detail lives below the headline.

Step 4 · Walk the 5-second scan. Scroll back to the top and pretend you are a fresh exec: KPI row, then the trend. What jumps out? The March dip. A good layout surfaced it without a single click - log it, because b9 is the investigation.

★ The one idea to keep A dashboard is a layout that answers the first question before any interaction happens. The scan found the March dip because the zones put the trend where the eye goes second - that is layout doing analysis for free.
Demo 2 of 2

Your turn: rearrange for a different reader ★ 8 min · build your own

The exec view is one audience. Same warehouse, different reader, different dashboard - the zones stay, the panels change. Three exercises, no recipe.

LiveThe ops manager version3 min

An ops manager does not open with revenue - they open with flow: how are orders arriving, and are any stuck? Build their headline panels: orders by channel, then switch the dimension to status and look for anything piling up. What would their KPI row be?

LiveThe mobile cut2 min

Take the exec view from Demo 1 and design its phone layout on paper: one column, thumb-friendly. You get roughly three panels before the reader stops scrolling. Which three survive, in what order - and write down what you removed. (Standard answer: KPIs first, trend second, one breakdown if any. Yours may differ; your reasons matter more.)

Self-studySketch the drillthrough page3 min

An analyst right-clicks the March point on the exec trend. Sketch the detail page they land on: what filters carry over (month = March), what panels it shows (revenue by city for March only? orders by status? new vs returning customers?), and what it deliberately leaves out. This sketch is your head start on b9, where March gets a full investigation.

Homework

Try it yourself - this week ◐ 25-35 min total

Source material

Official sources covered

Tonight covered the report-building and usability skill areas of both major exams, plus the design chapters of the field's standard text. Tool click-paths stay with the vendors; the concepts are all here:

PL-300 · Create reports - visuals, formatting, page configuration, slicingParts 1-2 · concepts; Desktop click-paths stay with Microsoft
PL-300 · Enhance reports for usability and storytelling - interactions, drillthrough, bookmarks, mobile, accessibilityParts 2-3 · the full usability toolkit, tool-agnostic
Tableau Data Analyst · Create Content - dashboards, actions, device layoutsParts 1-3 · concept level; hands-on stays with Tableau
Few, Information Dashboard Design 2e · ch12 Critical Design Practices, ch13 Putting It All TogetherPart 1 + Demo 1 · one screen, zones, white space, the assembled view
Check yourself

Three questions before you go 🎯 ◐ 90 seconds

1 · The single most valuable position on a dashboard - where does the headline number go?

Readers scan in a Z starting top-left, so that corner gets the KPI that matters most - never a logo, a title graphic, or a filter.

2 · When should you turn cross-filtering OFF between two visuals?

Every interaction has cognitive and performance cost. Cross-filtering a KPI card can make a partial number look like the whole - edit interactions and switch it off, or use cross-highlight instead.

3 · What actually changes when you design the mobile layout of a dashboard?

Mobile is a separate layout, not a scaled one: vertical stack, KPI cards first, fewer panels, fat touch targets. Shrinking a desktop grid to phone width produces an unreadable postage stamp.

Builder session 6 cheat sheet · pin this

The 5-second scanZ-pattern: top-left first. Prime real estate gets the headline KPI, never a logo or filter.
The zone gridKPI row on top → trend center → breakdowns below → filters on a rail. Sketch on paper first.
One-screen ruleExec views never scroll. Analysts go deeper via drillthrough and navigation, not scrolling.
Interaction budgetEvery click costs cognition + queries. List all interactions, cut half, defend the survivors.
Cross-filter vs highlightFilter removes context; highlight dims it but keeps the total. Edit interactions per visual pair.
DrillthroughDetail lives one right-click away with filter context carried - not crowded onto the exec page.
MobileA separate layout: one column, KPIs first, ~3 panels, fat touch targets. Never shrink desktop.
Accessibility fiveContrast · never color alone · alt text · tab order · real text size. Run before every ship.