Skip to content

Dashboard visual hierarchy decides what gets seen first

BI and reportingUpdated 2026-08-238 min read

In short

Dashboard visual hierarchy is the order in which a reader takes numbers in, set mainly by position and size. Put the figure that triggers action in the top left at the largest type on the page, and demote supporting figures by making them smaller and lower. Position outranks colour and border.

The biggest number on the page was 47,912, set in something like 54 point across the top, labelled Total registrations since launch. It had been correct and unchanged in meaning for four years. Nobody had ever done anything about it.

The number that needed doing something about was in the lower right corner at roughly 11 point: a category of exhibitors whose renewal signal had moved 14 points in a fortnight. It had been sitting there for three weeks.

Dashboard visual hierarchy is the mechanism that produced that outcome, and it produced it without anybody deciding. Position and size are read as importance whether or not you intend them to be, so a page that has not been laid out deliberately has still communicated a ranking, and usually the wrong one.

Where does the eye actually go?

Jakob Nielsen published the eyetracking study most often cited on this at the Nielsen Norman Group in April 2006, recording how 232 users looked at thousands of web pages. The finding was a dominant scanning shape: a horizontal sweep across the upper part of the content area, a second shorter horizontal sweep lower down, and then a vertical scan down the left side. The falloff is the operative part for a dashboard. Nielsen reported that users typically read less of the second area they view on a page, and less again of the third.

Therese Fessenden published a follow-up for the same group in April 2018, drawing on over 130,000 eye fixations from 120 participants. Users spent about 57 per cent of their page-viewing time above the fold and 74 per cent in the first two screenfuls. Compare that with the group's 2010 measurement, where 80 per cent of fixations landed above the fold, and the direction is clear enough: people scroll more than they used to, and they still spend most of their attention near the top.

Run the arithmetic on a four-screenful report. If 74 per cent of viewing time falls in the first two screenfuls, the remaining two share about 26 per cent, so a tile in the bottom half gets roughly a third of the attention of one in the top half. That is before anybody has decided whether it is interesting. It is a structural discount applied by the layout.

Neither study was run on a dashboard, and it would be careless to pretend otherwise. What transfers is the starting point and the shape of the decay, both of which are properties of how people scan a screen rather than properties of prose.

Size is a quantitative signal and it compounds

Position gets you the entry point. Size sets the ranking once the eye is in.

The effect is stronger than most people building pages assume, because type size scales area rather than length. A numeral set at 48 point is twice the height of one at 24 point and occupies about four times the area. Against a 14 point figure, the 48 point one is around twelve times the area. Three sizes on a page therefore produce a very clear ordering without anybody being told there is one.

Which means the sizes have to be chosen rather than inherited. The default in most report tools is a card visual that autosizes its numeral to the container, so a tile placed in a wide slot gets a big number and a tile in a narrow slot gets a small one, and the resulting hierarchy encodes nothing but the grid. Turn autosize off and set the sizes explicitly, in the same way you would set them in a document.

Two sizes are usually too few and five are too many. Three works: a primary figure, a secondary tier, and a supporting tier. Everything else on the page is a label or an axis.

A worked layout for five tiles

Take the five tiles that survive the cut on a weekly show page: pacing against the prior edition, weekly registration movement, space sold against target, an account watch list, and exhibitor category mix.

Pacing against the prior edition is the figure that triggers action, so it goes upper left at 48 point. It gets the whole first column of the top row, roughly a quarter of the page width, with its comparison sitting under it at 16 point.

Weekly movement and space sold both sit in the top row to the right of it, at 28 point each. They are half the height of the primary figure and about a third of its area, which reads as clearly subordinate while staying legible from a metre away in a meeting room.

The account watch list occupies the second row at full width, as a table with 14 point rows. A list is not a headline and should not pretend to be one, but it belongs above the fold because it is the tile with an action attached.

Exhibitor category mix goes lower right at 24 point, the smallest of the numeric tiles, because it changes slowly and nobody has ever taken a decision from it inside a week. If somebody objects to that placement, the objection is a useful one: it means the tile has a decision attached that the layout does not know about, and the requirements conversation needs redoing for that tile rather than the layout being fudged.

The ratio between the largest and smallest numerals here is 48 to 24, a factor of two in height and four in area. That is enough to be unmistakable and not so much that the small tile becomes unreadable, which is the failure at the other extreme.

The two mistakes that survive a redesign

The first is using colour as the hierarchy. A red tile does read as urgent, and it will pull the eye out of the scanning order, which is exactly why colour should be reserved for state rather than importance. If red means over threshold, and one tile is permanently red because its threshold was set badly in 2024, colour has stopped meaning anything and has taken the top of your hierarchy with it.

The second is the equal-weight grid. Six tiles, identical size, identical border, arranged three by two. It looks tidy and it is a refusal to decide. The reader gets no ranking from the page and supplies their own, which in practice means they read the one they read last time. An equal grid is the right choice in exactly one situation, which is when the tiles genuinely are peers, such as eight shows in a portfolio row where the whole point is comparison.

There is a third habit worth naming although it is less common. Borders, drop shadows and background panels are all attention signals, and stacking them on top of size and position produces a page where everything is emphasised. Pick position and size, and let the rest of the page stay quiet.

A quick test for whether your hierarchy is doing any work: ask somebody who does not use the report to look at it for five seconds and then tell you what the page is about. If they name the tile you designed as primary, the hierarchy holds. If they name whichever tile is reddest or most crowded, the layout has been overridden by decoration and the fix is subtraction rather than addition.

Does the hierarchy survive on a phone?

Not intact, and this is where a layout designed on a 27 inch monitor usually breaks.

A narrow viewport collapses a grid into a single column, which converts your two-dimensional hierarchy into a one-dimensional list. Position left to right disappears entirely. Whatever was upper left is now first, which is fine, but whatever was upper right is now second, ahead of things you had deliberately placed above it. The ordering you designed is silently replaced by the source order of the tiles.

The practical answer is to design the mobile stack explicitly rather than accept the collapse, and to check that the first two tiles in the stack are the two you would have chosen. Size mostly survives the transition. Position does not.

Where this stops

Visual hierarchy controls which number gets seen first. It does nothing about whether the number means what the reader thinks it means, and a large, well-placed figure with an ambiguous label is worse than a small one, because more people act on it. Getting the population and window into the label is a separate piece of work and the two have to be done together.

The larger limit is that hierarchy is a fixed ranking applied to a page whose news changes weekly. The pacing tile deserves the top slot in the twelve weeks before doors. In the fortnight after close it is meaningless and the post-show reconciliation deserves it instead. A single static layout is a compromise across every week of the year, and it will be optimal in none of them.

Some teams solve that with a conditional layout that promotes whichever tile has breached a threshold. It works, and it costs you the thing that made the hierarchy useful, which is that the reader learns where to look and stops having to search. I would keep the layout fixed and change it deliberately twice a year, at the points where the show's rhythm actually changes, rather than let it move on its own. That also keeps the page honest against the question of how many tiles it can carry, since a moving layout tends to accumulate slots.

Open your main report this week, take a screenshot, and blur it until you cannot read any of the numbers. Whatever still stands out is your actual hierarchy. If the thing that stands out is the total-since-launch tile, you have a fifteen minute fix that is worth more than the next three tickets in your queue, and it belongs in whatever you are building for event business intelligence before anything else does.

Questions people ask about dashboard visual hierarchy

Where should the most important number go on a dashboard?
Top left, at the largest type size on the page. Eyetracking research from the Nielsen Norman Group has consistently found that readers begin at the upper left of the content area and give progressively less attention as they move right and down. A number placed lower right is read last, if at all.
How do you create visual hierarchy in a dashboard?
Use position first and size second. Place the action-triggering figure in the upper left, set it two or three times the type size of everything else, and let supporting detail fall below and to the right at smaller sizes. Colour, borders and background shading are weaker signals and should carry meaning rather than emphasis.
Does the F-shaped reading pattern apply to dashboards?
Partly. The F pattern was measured on text-heavy web pages, and a grid of numeric tiles is scanned differently. What carries across is the starting point and the falloff: readers begin upper left and spend far less attention on later areas. Treat it as a prior about attention rather than a literal path.

Related reading

All bi and reporting articles