Techniek
Tips & Best Practices

Where the eye goes first

Layout is not decoration. The key number top left, comparisons side by side, detail at the bottom, and a page that also works on a phone.

Dashboard with one tile in focus

Two dashboards with exactly the same numbers can work completely differently. One you read in ten seconds. With the other you spend a minute looking for what it is actually saying.

The difference is almost never in the charts. It is in where they are.

Reading starts top left

Whoever reads left to right starts top left. On a screen it is no different. The eye goes first to the top left corner, then to the right, then down.

So that is the place for the most important number. Not for the logo, not for the filters, not for a title that says "Sales dashboard". The number that tells you whether things are going well or badly, with its comparison next to it.

Sounds obvious. Yet in many reports that spot is full of buttons. Then the first thing the reader sees is a question instead of an answer. See also ten filters is a design flaw.

From summary to detail

A good page is built like a newspaper article. At the top what happened. Below that why. At the bottom the detail for whoever wants to check.

  • Top row: a few key numbers, each with a comparison. No more than five.
  • Middle: the chart that tells the story. Where does the deviation come from, which store, which month, which product group.
  • Bottom: a table with detail, for whoever wants to check the number.

Whoever stops after the top row knows the most important thing. Whoever reads on finds the explanation. Nobody has to go through the whole page to know how things are going.

Compare side by side, not one below the other

Things you need to compare go side by side, at the same height and on the same scale. Revenue this year and last year. Store A and store B. Actual and budget.

If they are one below the other, or on a different page, the reader has to remember them and compare in his head. That does not work well.

Watch the scale in particular. Two charts side by side that look equally tall, but one goes up to 100,000 and the other to 10,000, mislead. Put them on the same axis, or put them in one chart.

Group what belongs together

The eye sees things that are close together as one group. You can use that.

Put all the cost numbers together, and all the sales numbers together, with some white space in between. Then you do not need to draw boxes. The space does the work.

It also works against you. A stock number that happens to sit next to revenue is read as related. If you do not want that, put it apart.

White space is not waste

The temptation is to fill every centimetre. There is room, so add another chart. The result is a page where everything shouts equally loud.

White space lets the reader breathe. It separates groups, it makes clear where a block starts and ends, and it makes the most important thing stand out. A page that is a quarter empty is often more readable than a page that is full.

Alignment is not a detail

Charts that are just not on the same line, just not the same width, just not the same margin. Nobody notices it consciously. Everyone feels it. The page looks messy, and messy is read as unreliable.

Work with a grid. In Power BI you can turn on gridlines and snap to grid. Pick one margin and keep it everywhere. It takes ten minutes and the difference is big.

A phone is not a small screen

Many owners look on their phone. On the road, between two appointments, in the evening on the sofa. It is also why a good report brings peace of mind: you do not have to sit at your desk.

A page made for a wide screen does not work on a phone. Everything becomes small, filters cannot be tapped, charts are unreadable.

Power BI lets you make a separate mobile layout per page. Do that for the pages that really matter. Put the key numbers one below the other, drop the big table, and keep one chart. On a phone you want to know how things are going, not why down to the last euro.

Test it with five seconds

A simple test. Let someone who does not know the page look at it for five seconds. Then close the screen and ask what he saw.

Can he name the most important number, and say whether it went well or badly? Then the layout works. Does he name the title, or a chart at the bottom, or does he not know? Then the most important thing is not where the eye looks.

What you can automate

You can save a fixed layout as a template, with the grid, margins, fonts and colours. In Power BI that works with a theme file and a template report. Every new page then starts well aligned, and the reports of different departments look the same. The latter is worth more than it seems: whoever can read one report can read them all.

The claim

Layout decides what gets read. Put the most important thing where the eye looks first, build from summary to detail, compare side by side, and make a separate layout for the phone.

Gregory Moureau