An interactive guide
What I've learnt about perception, visualisation, composition and narrative to design dashboards that people understand.
By Borja MoraJunior Data Analyst · Power BI
Start readingJourney — scale: 10 chapters · about 20 minutes
Before we start, a dashboard
This is a sales dashboard.
Take a second.
What is it telling you?
A dashboard can be full of data and still say nothing.
The problem isn't always having too much data. Sometimes the problem is that everything wants attention at the same time.
First, I remove whatever competes with the message.
Then I decide what really deserves attention.
And then something important happens: I know where to look.
A dashboard isn't finished when the data is in.
It's finished when it's understood.
At first, I thought a good dashboard was mostly about the visuals.
Choosing the right charts.
Putting things in order.
Making everything look good.
Over time, I've changed my mind.
Now, before I open Power BI, I try to answer other questions:
who is going to look at the report,
what they need to understand,
what I want them to see first,
and what they should be able to do afterwards.
This guide brings together what I've learnt about data storytelling and how I try to put it into practice.
They aren't universal rules.
Some ideas come from research on perception and visualisation; others are rules of thumb that help me design; and others are simply part of how I work.
The map
Context → perception → decluttering → attention → visual → composition → words → narrative → action
Chapter 01 · Foundations
When I explore, I'm still searching.
60 dots: monthly sales across five channels. Everything carries the same weight because I don't yet know what matters.
I try variables, look for patterns, follow leads.
When I explain, the question is a different one.
Now I have to decide what deserves someone else's attention.
The data hasn't changed. The intention has.
Exploring helps me discover. Explaining forces me to decide what deserves someone else's attention.
My framework
It isn't an exact formula. It's how I review a report before I call it finished. The three layers have to work together: if one fails, the report loses its force.
Data + meaning + clarity.
Chapter 02 · Context
We need a sales dashboard.
It almost always starts the same way.
‘We need a sales dashboard.’
Fine. But it isn't a question yet.
Who is going to read it?
What do they need to understand or decide?
What data can I use to prove it?
The request was a dashboard.
The real question is something else.
Sales by channel, in thousands of euros
Before I design anything, I try to find one sentence.
Q4 sales by channel
Correct. But it leaves all the work to the reader.
Online now accounts for most of the growth.
The chart barely changes. The interpretation changes a lot.
Another test that works for me: imagine I have three minutes and no screen.
Whatever survives those three minutes probably deserves a place in the story.
Audience
The same question isn't designed the same way for everyone.
Before I design a report, I need to know who is going to use it and what they need to understand.
And there's another question I sometimes forget: where will they look at it?
A monthly committee in front of a big screen, where probably only the first KPIs get read, isn't the same as checking the report on a phone between two meetings.
The framework
Before the chart comes the question.
First I understand what I want to answer. Then, what the reader needs to know. And only then do I decide how to show it.
What have I got?
Data type, variables and granularity.
What does the reader need to do?
Compare, locate, detect, understand…
How am I going to show it?
The visual encoding that best solves that task.
WHAT → WHY → HOW
The question first. Then the chart.
Chapter 03 · Perception
Try it: tap any square and make it the protagonist.
Everything is still.
One changes.
And you know where to look before you start analysing.
Size creates hierarchy too.
Position tells a story too.
First, order: what’s aligned reads as a system.
Then, priority: the protagonist goes where reading starts.
On a Western screen that’s usually the top left. It’s a tendency, not a law: a strong signal can pull the eye anywhere.
Working memory is limited.
I don’t expect the reader to process an infinite amount of information at once.
That’s why I group.
I simplify. And I set priorities.
Research talks about a few “chunks” at a time, with a lot of variation depending on the task. I don’t use it as a magic number: I use it as a reminder that the reader can’t take in everything.
The eye finds patterns quickly. Comparing two specific values is another story.
A common baseline already reduces the work: now I’m comparing lengths, not loose positions.
And if the difference is the message, I draw it. That way nobody has to work it out.
Gestalt
Twenty dots, with no apparent relationship.
What’s close together looks like the same group.
So does what looks alike. Here I read columns even though the spacing is the same.
A shared background creates a stronger group than distance.
And a line joins things more than anything else.
A good composition can explain a relationship before a single word appears.
Chapter 04 · Reducing noise
The dashboard from the beginning is back. The same one. This time, step by step.
This is how it was.
First, I remove whatever decorates but doesn’t help reading.
Shadows, borders, coloured headers, icons.
Then I look at what’s competing with the data.
Gridlines stay only where they help read a value.
Colour can become noise too.
Ten colours. None of them meant anything.
And if I only need to highlight one thing, I don’t need ten colours.
Labels can live next to the data.
Decimals don’t need to prove they exist either.
221.450,00 € → 221 k€
Secondary things can stay. They just have to weigh less.
I haven’t removed information.
I’ve removed work.
Tool
Pick an element from a dashboard and see what question I ask it.
| Question | Action |
|---|---|
| If I remove it, does nothing change? | Remove |
| Does it only make it prettier? | Remove |
| Does it make people work for no reason? | Simplify |
| Does it compete with the protagonist? | Mute |
| Does it help understanding? | Keep |
| Does it cause confusion? | Change |
When there’s too much detail, I look for a structure before removing information.
Twenty subcategories. It can be read, but it’s hard work.
Four families. The first read fits in a glance.
And the detail is available again when someone asks for it.
In Power BI: a hierarchy with drill-down, or a detail page.
The first read can be simple without losing the second layer.
Chapter 05 · Directing attention
First, I highlight nothing.
Then I decide what matters.
Colour makes it visible.
Size can reinforce the hierarchy.
Position can tell you where to start.
And an annotation can explain why it’s worth looking.
Colour
I don’t use colour to decorate the report. I use it when I want to highlight a figure, set something apart or direct attention.
Distinct categories, with no order. Few of them, with well-separated shades.
From less to more. A single hue that gains intensity.
Two directions from a neutral point that means something: zero, the target.
Colour accessibility
Colour can help enormously, but it shouldn’t be the only signal.
If I take the colour away, I want the story to keep working.
The 10% rule
I try to keep the main emphasis on only a small part of the chart.
Not because there’s a magic 10%.
Because when everything stands out, emphasis stops working.
Chapter 06 · Choosing the visual
Before we go on, a question
I want to compare sales across five regions. Which chart would you choose?
What do you want them to see?
Anatomy of a KPI
A KPI card has to answer three questions at a glance: how much, which way and compared with what.
Look at the row: two deltas go down and two go up, and the colour doesn’t follow the sign. If it did, someone would celebrate rising staff turnover. That’s why I separate direction from judgement, and the arrow is still there when the colour can’t be seen.
Two more details: when the KPI is already a percentage, the change goes in points (pp), not in %. And the reference is explicit, as IBCS asks: previous year, plan or forecast, but always stated on the card.
Catalogue
The visuals I use in Power BI, and the question each one answers.
They’re the ones from PBI Mockup Creator, drawn with this guide’s palette: violet for what matters, greys for context and red only when something subtracts.
Recipes by area
A template doesn’t replace the question. But it saves you from starting with a blank canvas.
Each recipe is still a hypothesis: if this dashboard’s question is a different one, the question wins.
Experiments
Five ways to make a chart say something different from what the data says.
The right visualisation doesn’t depend only on the data. It depends on the task.
Chapter 07 · Composing like a designer
An empty canvas.
First, I create a structure.
Then I place the big idea.
Then, the metric that deserves to be seen first.
Then, the visual that explains why.
The detail can come later.
And the elements that interact should look related.
Now I align.
I distribute.
And I hide the grid.
The grid disappears. The order remains.
8-point system
8 · 16 · 24
There’s no magic spacing. What helps me is working with a system that keeps a steady rhythm: every distance is a multiple of 8.
distance measured in px
White space
Empty space isn’t empty. It separates, groups and adds emphasis.
Canvases
Before placing anything, I choose where it’s going to be read.
Zones
A dashboard is read in layers: context, metrics, message and detail.
What doesn’t fit doesn’t disappear: it moves to a tooltip or a drill-through page, where whoever needs it can find it.
Proportions
Each zone has a weight. The height is shared out in proportion.
First I subtract what’s fixed: margin, header and gaps. What’s left is shared between the KPIs, Zone A and Zone B according to their weight. My starting point is 2 · 5 · 3: a compact KPI row, the message with half the space and the detail with the rest.
Reading patterns
The wireframe doesn’t change. What changes is the path I expect the eye to take.
They’re tendencies, not laws. A strong colour or size breaks any pattern; that’s why I place things first and then check where the eye comes in.
Gestalt applied to the canvas
In chapter 03 we saw how the eye groups things. Here, how to check it on a dashboard.
These are the five principles PBI Mockup Creator diagnoses while you design. Each one, applied well and badly on the same wireframe.
What’s close together is perceived as a group.
What it is. The brain groups what’s closest, even when there’s no other visual connection.
On a dashboard. The spacing between zones decides which blocks read as a unit. If it varies from one place to another, the reader groups the wrong things and the story breaks.
Between blocks at the same level, 8 to 20 px and always the same. If I want to separate two groups, I give them more room on purpose. Below 8, everything looks like one block; above 28, loose pieces.
What’s biggest and first is read first.
What it is. We don’t read everything with the same attention: size, position and visual weight create a reading order.
On a dashboard. If Zone B takes up more than A, the eye reaches the detail before the message, and the decision is made on the wrong figure.
Path: context → metrics → analysis. Zone A at least 85% of B’s height. Always a header if leadership or someone external will read it.
What looks alike is perceived as the same family.
What it is. The same shape, colour, size or texture make two elements look like part of the same group, even when they’re apart.
On a dashboard. If KPIs and charts look the same, the eye can’t tell monitoring from analysis. Similarity is the dashboard’s grammar: what plays the same role looks the same.
Up to 6 KPIs per row and up to 3 visuals per zone. The same corner radius on every card.
The eye completes shapes and needs room to breathe.
What it is. We tend to complete incomplete shapes and read white space as the edge of objects. Negative space isn’t empty: it’s structure.
On a dashboard. Margins and gaps create that space. Without it, the dashboard looks cluttered even with little data. With too much, it looks unfinished.
Between 20 and 40% of the canvas left free, and at least 16 px of margin on all four sides.
Content has to stand out from the background effortlessly.
What it is. We automatically separate what we see as an object (the figure) from what we see as background, continuous and without limits.
On a dashboard. If the cards have the same background as the canvas, the data disappears. The contrast between card and canvas, or a soft border, is what makes each piece visible.
A canvas background different from the cards’. If the difference is small, a soft border.
Starting numbers
There are no magic numbers. But when I review a layout, these ranges give me somewhere to start.
They’re practical rules from my own work in Power BI, not scientific evidence. And they fit the 8-point system: 24 px of margin and 16 px of spacing meet them all.
Tool
PBI Mockup Creator
The wireframes on this page come from a tool I built to design a dashboard before opening Power BI. It starts from the audience and the decision, proposes the layout and checks these ranges as you move the pieces: proximity, hierarchy, similarity, white space and figure-ground.
Chapter 08 · The words
Q4 sales by channel
Online now accounts for most of the growth
The chart hardly changes. Each panel now says what it shows.
The title doesn’t have to describe the chart. It can guide the reading.
Just the chart. Something happens halfway through, but you have to look for it.
A violet dot: here.
A line connecting the data point to its explanation.
And the sentence the reader would otherwise have had to work out.
A good annotation saves the reader an inference.
Direct labels
The less the eye has to travel, the better.
Dynamic titles in Power BI
Words can react to context too.
The technique is in DAX. The idea is somewhere else: keeping the message specific when the context changes.
Title = "Sales in " & SELECTEDVALUE(Region[Name]) & " are down " & FORMAT([Var% YoY], "0%") & " on last year"
In production I’d add a case for when the change is positive or when there isn’t a single region selected.
Microcopy
A button doesn’t need to explain the universe. It just needs to make clear what’s going to happen.
Chapter 09 · Building the story
That’s all you needed to know first.
First I need to know where we are.
Then I need to find out what’s really happening.
And then something appears that changes the reading.
The story ends when I can explain what it means and what we can do about it.
Revenue from active customers · next 3 years
If we halve cancellations in the first 90 days: +€1.8m
The comparison turns an abstract recommendation into something I can see.
Before building the narrative
The four questions
What I try not to forget
Seven rules
Validate before publishing
Four readings of the same dashboard
Bing · Bang · Bongo
The same idea, at the start, in the middle and at the end.
“Today we’ll see why churn costs us €2.4m.”
The story: situation, data, twist, recommendation.
“We’ve seen that most of the risk is concentrated before 90 days.”
In Power BI
The narrative can become navigation too.
Chapter 10 · Putting it together
The same dashboard. This time, completely empty.
A blank canvas.
Before drawing anything, I lay down the grid.
Then the wireframe: what goes in each box and how much space it deserves.
The main visual takes more than half the width. The action has its box reserved from the start.
I start with the question.
I choose the visual that best solves the task.
The question is “which channel”: comparison. Bars.
I remove what isn’t needed.
I decide what deserves attention.
I compose the page.
Each piece takes the box I reserved for it in the wireframe.
I write the title that explains the idea.
The wireframe disappears. The order stays.
I annotate what I don’t want anyone to have to discover on their own.
And I build the path.
This is no longer a set of charts.
Now there’s a story.
Final test
I read only the titles.
If I understand the story without looking at the charts, the dashboard is nearly finished.
If not, I still have work to do.
Gallery
10 problems I want to learn to spot faster.
Drag the line (or use the arrow keys) to compare before and after.
Two well-built dashboards
I don’t need everything to compete. I need each element to know what role it plays.
Since May, almost two in three cancellations come before day 90
A good screen should take me from the what to the why and end with what we do about it.
Accessibility
Pick a test. They all apply to the same dashboard.
In practice
What I’ve described here, applied to real Power BI pieces.
They’re screenshots from posts I’ve shared on LinkedIn. I’ve put them in greyscale on purpose: if the story still reads without colour, the colour is doing its job and nothing else. Drag the line (or use the arrow keys) to bring the colour in.
A table of 150 customers is a sea of numbers. What makes it readable isn’t the table, it’s what surrounds it: a search box that filters by customer, sector, segment or country, a subtitle that says how many customers I’m looking at, and colour reserved only for variances (▲ green, ▼ red). In greyscale, everything else fades and the only thing still catching the eye is those signals.
It’s the KPI from the anatomy section, with a life of its own: the big figure, the previous year beside it, the delta below (+9.17% vs PY) and columns where one month stands apart from the rest. The two boxes on the left let you change the metric and what it’s compared against, so users explore without getting lost. The delta is the only thing in colour: the comparison is what turns a number into news.
Two products compared year by year and, on the right, a zoom into the selected year by quarter. It’s the rule of going from general to specific, solved on a single screen: the annual view says who wins, the quarterly detail says when. Above the chart, a sentence that rewrites itself with the chosen year so nobody has to work out the conclusion.
Four products, four thumbnails on the same scale. Each carries its own delta (▲ or ▼), its share of the total and only two labelled points: 2024 and 2025. It’s a slope chart repeated as small multiples: the eye compares slopes without reading axes. In greyscale, the direction is still told by the shape of the line, not the colour.
The title is the question («Which months beat the target?») and the target line moves with a control so everyone can test their own threshold. The post is about a specific problem: an extreme value can squash the scale and make everything else look flat, and a well-built visual zoom avoids it without hiding the data. It’s the same principle as the «doing it right» gallery.
Sixteen years of columns and only the chosen period in deep violet; the rest stays in a pale shade as context. Between the columns at each end, the change appears (21.92%), calculated for that range and no other. It’s focus and context in their simplest form: you see everything, you read one thing.
The data in these screenshots is sample data. More posts in the Community section of the portfolio →
The final dashboard.
I step back a little.
A little more.
Did you notice that this page has done exactly what it was explaining?
Here we removed noise. Here we directed attention. Here we changed the representation. Here we used hierarchy. Here we annotated the data. Here we built a story.
I’ve used them as conceptual support, not as text: everything here is written in my own words. In each case I distinguish between evidence, practical rule and personal judgement.
All the data on this page is synthetic and was created for the example.