Visual Hierarchy
Also called: Information hierarchy, Dashboard hierarchy
Visual hierarchy is the arrangement of a dashboard's elements by size, position, colour and spacing so readers see the most important information first and the details last.
How it works
Every dashboard has a reading order, whether you design it or not. Visual hierarchy is designing it on purpose.
In the example, the order is numbered:
- Revenue against target. Top left, with the biggest number on the page: $2.8M, 93% of target. If a reader looks at nothing else, they’ve got the headline.
- The trend. July to September, $0.88M, $0.93M and $0.99M, so the reader can see the gap is closing.
- The breakdown. Revenue by region, ranked, so the biggest contributor is read first.
- The detail. A table in smaller, muted text. It’s there for people who need it, without competing with the headline.
Each step down the order gets less size, a lower position or a quieter colour. That’s the whole technique.
The levers
- Size. The most powerful lever. The headline KPI should be visibly bigger than everything else.
- Position. In left-to-right languages, readers start top left. See Z-pattern and F-pattern layouts.
- Colour. One accent colour on a grey or muted page draws the eye immediately. Use it for what matters, such as the current period or the metric that’s off target.
- Contrast and weight. Dark, bold text reads before light, regular text. Titles and values should beat axis labels and footnotes.
- Spacing and grouping. White space around an element sets it apart. Elements close together read as one group.
Where it shows up on a dashboard
Hierarchy works at two levels. Across the page: headline KPIs, then trends, then breakdowns, then detail, as in an executive dashboard. Inside each visual: in a KPI card, the value is biggest, the comparison is smaller, and the label is smallest and greyest.
Common mistakes
- Everything is bold. If every title is large and every number is coloured, nothing stands out. Hierarchy needs quiet elements as much as loud ones.
- Equal-sized tiles for unequal things. A grid of identical boxes says every visual matters equally, which is rarely true.
- Colour used for decoration. A different colour for every chart competes with status colours. Save red and green for meaning.
- The filter bar wins. Large, colourful slicers at the top can take the reader’s first glance away from the data. Keep them compact.
- Burying the answer. The number the audience came for sits in a table halfway down. Move it up and make it bigger.
Mocking up the hierarchy
Hierarchy is a layout decision, so it’s cheapest to get right on a mockup, before anyone has formatted a visual. Our dashboard wireframe best practices cover leading with the answer and choosing one hero visual.
