A dashboard nobody opens is not a dashboard, it is a very expensive screensaver. Most of the time the reason nobody opens it twice is layout. The numbers were right. The charts were fine. But the important thing sat in the bottom-left corner next to three tiles of noise, and the reader gave up before finding it. Layout is not decoration you do at the end. It is the order in which a person’s eye meets your data, and you either design that order or you leave it to chance.
The good news is that eyes move in known patterns. Decades of eye-tracking say so. You do not have to guess where attention lands. You have to put the most important number where attention already goes, and stop fighting the reader’s instincts with a clever grid nobody asked for.
How people scan a screen
People do not read a dashboard. They scan it. Eye-tracking research from the Nielsen Norman Group, going back to studies in 2006, found that readers sweep the top of a page first, then make shorter passes lower down, then run their eye down the left edge. Attention is heaviest top-left and drains toward the bottom-right. That is not a preference you can train away. It is close to a reflex, and it holds across languages that read left to right.
Two consequences fall straight out of that. First, whatever answers the reader’s main question has to be near the top-left, because that real estate gets seen whether you earn it or not. Second, a dashboard fits on one screen for a reason: the moment the reader has to scroll, the stuff below the fold competes with everything the eye already grabbed up top, and it loses. If a metric matters, it goes above the fold. If it does not fit above the fold, cut a metric, because a dashboard ranks metrics by importance and something down there was never that important.
Run the 5-second rule on anything you build. Show the dashboard to someone for five seconds, take it away, and ask what the headline is. The 5-second rule tests dashboard clarity better than any amount of self-review, because you built the thing and you cannot un-know where the answer sits. If they cannot state the takeaway in five seconds, the layout is burying it. That is a layout bug, not a data problem.
The F-pattern
The F-pattern is the name for that scan path: a heavy horizontal pass across the top, a second shorter pass below it, and a vertical run down the left. Trace it and it roughly draws an F. You are not trying to create the F. You are trying to respect it, because your reader is going to follow it no matter what you intended.
So the rule writes itself. The F-pattern places the primary metric top-left. That is the single most-seen cell on the whole screen, so it belongs to the number that answers the dashboard’s reason for existing. Revenue against plan on a finance board. Pipeline coverage on a sales board. Uptime on an ops board. Whatever the boss asks about first goes in that corner, at the largest size on the page.
Read across the top row from there in descending priority. The top strip is a headline band, so it should hold your KPI cards left to right, most important to least. Below that band, the eye makes its second horizontal pass, which is where the trend charts belong. Then it runs down the left, so keep the left column tidy and meaningful, not a dumping ground for filters and logos. Speaking of which, put the company logo in the top-right if you must have one, never the top-left. The most valuable pixel on the screen is not for branding. It is for the number that pays for the screen.
The inverted pyramid
Borrow a trick from journalism. A news story leads with the outcome, follows with the key facts, and saves the background for readers who keep going. That is the inverted pyramid, widest at the top, and it maps onto a dashboard almost perfectly.
The inverted pyramid puts status at the top. The reader should learn “are we winning or losing” in the first band, before they know a single supporting detail. Then the middle answers “which way is it going and why,” through trends and comparisons. Then the bottom holds the granular tables for the one reader in ten who needs to chase a specific row. Detail belongs at the bottom right, the last place the eye reaches, because you only go there after a headline made you curious.
This structure quietly serves three audiences off one screen. The executive reads only the top band and leaves. The manager reads the top and the middle. The analyst reads all the way down. Nobody is forced to wade through detail they did not want, and nobody is denied the detail they did. Match the depth to the reader and you stop building three dashboards where one would do. Which metrics deserve the top band at all is the KPI selection problem, and the KPI dashboard guide works through it.
White space and the grid
Cramming is the most common layout failure, and it comes from a good instinct gone wrong: “we paid for the screen, let us use all of it.” White space improves readability precisely because it is empty. The gaps are what let the eye separate one tile from the next and tell the reader where a thought begins and ends. A dense dashboard with no breathing room reads as one gray blur, and the reader’s eye slides off it.
Underneath the white space sits a grid. A grid aligns visual elements so that tile edges line up, tops match across a row, and the whole thing feels built rather than dropped. The alignment does real cognitive work. When tiles share an invisible edge, the reader reads them as a group. When they are a few pixels off, the eye keeps snagging on the misalignment and burns attention you needed for the data. Pick a column count, four or six or twelve, snap every tile to it, and never freehand a tile “just a bit wider” to fill a gap.
The grid also disciplines what goes inside each tile, which is where Edward Tufte’s idea earns its place. Edward Tufte coined the data-ink ratio, the share of a chart’s pixels that actually carry data versus the pixels spent on decoration. High ratio, clean chart. Low ratio, chart junk, which distracts the reader by making the eye process borders and gradients and drop shadows that mean nothing. Practical moves that raise the ratio:
- Gridlines should fade into the background. Make them light gray or drop them entirely. They are scaffolding, not data.
- Direct labels beat a separate legend. Put the series name at the end of its line so the eye never leaves the chart to decode a color key.
- Consistent color signals the same metric across every tile. If revenue is blue on one chart, it is blue on all of them, so color carries meaning instead of just filling space.
- A single accent color draws the eye. Keep the board mostly neutral and reserve one bright color for the thing you want noticed. Color everything and you have highlighted nothing.
One accessibility floor you do not get to skip: contrast must reach 4.5 to 1 for accessibility on normal text, the WCAG AA threshold. Pale gray labels on a white tile look elegant on your monitor and vanish on a projector or for anyone over fifty. Check it. The wider color and formatting checklist lives in the data visualization best practices page.
A reusable wireframe you can copy Monday
Here is a layout that works for most business dashboards, drawn from everything above. Steal it, fill it with your metrics, and adjust only where your data demands it.
- A title bar across the very top. One line, stating the question the dashboard answers, not the department that owns it. A dashboard title states the question answered, so “Are we on pace for the Q3 revenue target?” beats “Sales Reporting Dashboard.” The reader knows in a glance what this screen is for.
- A KPI card row directly under it. Three to five headline cards, left to right, most important first. The primary metric sits far left, largest, with its target and a small trend inside the tile. This band is the whole story for the reader who leaves after five seconds.
- A middle band of trend charts. Two or three line charts answering “which way and why,” aligned to the same grid columns as the cards above them. This is the second horizontal pass of the F, so it gets the second-most attention.
- A detail table across the bottom. Sorted, precise, the granular rows for whoever needs to chase a specific account or region. Detail at the bottom right, reached last, on demand.
Read top to bottom and the wireframe walks the reader down the inverted pyramid: status, then trend, then detail. Read the F-pattern across it and the heaviest attention lands on the top-left card, exactly where the primary metric sits. The structure and the scan path point the same direction, which is the entire trick. Nothing fancy. A title that asks a question, a row of cards, a band of trends, a table at the bottom, all snapped to one grid with room to breathe.
Before you ship it, run the 5-second test one more time on a colleague who has not seen it. If the headline lands, you are done. If it does not, the fix is almost never more data. It is moving the important tile up and left, and cutting two tiles that were never earning their spot. For a gallery of this wireframe filled in by team, see the dashboard examples across teams, and for the full set of principles behind every choice here, the dashboard design guide is the hub.