How to Read a Sankey Diagram of User Paths in a Figma Prototype
Read a Sankey left to right: each column is a step, each band a transition, its width the number of sessions. A step-by-step method and common traps.
By Thomas Cescousse, product designer and maker of DASHUND
A Sankey diagram of user paths reads from left to right: each column is a step in the session, each block is a screen, and each band connecting two screens is a move from one to the other. The thicker the band, the more sessions took it. To read one well, follow the main flow, notice where it splits, then look for the exits: sessions that stop before the goal. Here's a method you can apply to any Sankey, plus the most common ways people misread them.
Where does this diagram come from?
It's named after Matthew Sankey, an Irish engineer who used it in the late 19th century to show the energy losses of a steam engine: a wide band of incoming energy splitting into thinner bands, each width proportional to the amount. The idea hasn't changed. Applied to a prototype, what flows is no longer energy but sessions. What gets "lost" is people leaving the path.
The four parts to recognize
| Part | What it represents | Question to ask |
|---|---|---|
| Column | A step: the 1st screen seen, the 2nd, the 3rd… | Which step am I looking at? |
| Block | A screen at that step, with its sessions | How many sessions are here? |
| Band | A move from one screen to another | Where do they go next? |
| Exit | Sessions that stop on this screen | Why do they leave here? |
One key point: a column isn't a fixed screen. It's a position in the session. The same screen can show up in several columns, for example "Product" at step 2 for people who go straight there, and at step 3 for people who search first.
A five-step reading method
1. Start from the entry screen
Look at the first column. A prototype usually has a single starting screen, and every session begins there. Note the total: it's the base for every percentage that follows.
2. Follow the thickest band
Trace the main flow from step to step. It tells you the "typical" path. Is it the one you designed for? If the thickest band after the home screen goes to search when you expected people to browse categories, that's already a finding.
3. Spot the splits
When a thick band divides into several bands of similar size, people are hesitating. Two roughly equal paths out of the same screen often mean that screen doesn't rank its actions clearly enough. A very lopsided split, on the other hand, shows an obvious choice, which may be exactly what you want.
4. Look for the exits
Exits are often the most useful part. A big exit on an intermediate screen, and especially right before the goal, points to a blocker. For example, if a large share of the 200 sessions that reach shipping stop there, open that screen and look at its clicks.
5. Work backward from the screen in question
A Sankey that starts at the beginning shows where people go. To see where they come from, put the screen you're studying in the middle: you'll see the screens before it and after it. It's the most telling view for a screen with a high exit rate. Do people arrive through the intended path, or through a detour?
Common misreadings
- Reading width as time. A thick band means many sessions, not a long time spent. Time is read elsewhere, screen by
screen.
- Forgetting about back-and-forth. Depending on the tool, going back either creates a new step or is counted only once. In
the first case, a path full of back-and-forth stretches across many columns without people actually getting anywhere, so check the rule before you judge path length.
- Ignoring the "other" block. To stay readable, Sankeys group a step's rarely visited screens. If that block grows,
paths are scattering: people are searching.
- Comparing percentages with different bases. 50% of a thin band is very few sessions. Always go back to the volumes.
- Drawing conclusions from three sessions. A thin band in a small sample can be a single person. Check how many sessions
are behind it before you conclude anything.
Sankey, funnel or sitemap: which one to look at?
| View | What it shows | When to use it |
|---|---|---|
| Sankey (Flow) | The real paths, step by step, and the exits | To discover what people do |
| Funnel (target path) | How many sessions follow a specific path, in order | To measure an expected flow |
| Sitemap | Every screen, the planned links and the ones actually used | To see what's never used |
The Sankey is for discovery, the funnel for measuring what you expected. They work well together: the Sankey shows you that a frequent detour exists, the funnel tells you how many sessions make it through the intended path.
In DASHUND: the Flow tab
In DASHUND, the Sankey is the Flow tab. Under each screen you see the number of sessions and their share; exits are in red; a step's little-visited screens are grouped under "Other screens." The settings read like a sentence: "Focus screen [screen] at step [N]." Placed further than step 1, the screen also shows what comes before it, and the gray "Session start" block groups the people who got there faster.
Two rules avoid false signals: a screen seen several times counts from its first visit, and navigation done with Figma's toolbar (previous screen, restart) is excluded, because it isn't a design choice. Click a screen to open its heatmap; click a band to see the sessions that made that move.
The diagram is most useful when the test is natural: without instructions, people take their own paths, and that's exactly what a Sankey reveals. The method is covered in How to test a Figma prototype without tasks or a script. To see the Flow tab alongside the other views, check the Features page.
FAQ
What is a Sankey diagram?
A flow diagram where the width of each band is proportional to the amount flowing through it. For a prototype, it shows how many sessions move from one screen to the next, step by step.
Why does the same screen appear in several columns?
Because a column is a position in the session, not a screen. A screen some people reach in two clicks and others in three shows up at both steps.
What does a red exit mean?
The sessions that stop on that screen. A big exit before the goal signals a blocker worth checking with the heatmap and a few replayed sessions.
What's the difference between a Sankey and a funnel?
A Sankey shows every path people actually took. A funnel measures how many sessions follow one specific path you defined, in order.
How many sessions does a Sankey need to be readable?
The main flow and big exits show up quickly. To compare bands of similar size, you need more sessions: DASHUND shows a "Small sample" label under 30 sessions.