LayoutHow does it guide the eye?
Z-pattern layout
For sparse pages: the eye goes from top-left to top-right, cuts diagonally across, then reads the bottom left to right.
Example dashboard
Click a widget to see its data
Revenue this year
FY2026 · Company
Closed through AugustShare
Revenue year to date
$48.2M
+8.1% vs last year · 96% of target
Monthly revenue vs target
RevenueTarget
What changed
EMEA grew 14%, driven by two enterprise renewals.
APAC is 11% behind target since the Q2 price change.
Next step
Review the APAC pricing proposal before the October board.
The data model behind it
Monthly revenue snapshotZ-pattern pages usually carry few, highly aggregated numbers, which a monthly snapshot serves well. Each corner is a single query; there is little to join and nothing to drill into.
- Tables read
- 3 of 4
- Joins
- 2
- Fact type
- Periodic snapshot (monthly aggregate)
- Grain
- One row per month, region and segment
- Refresh
- Monthly, after the financial close
Widgets
Highlighted: every table this view reads. Pick a widget to isolate its query.
Where it sits in the taxonomy
A few large elements, with no dominant view, no equal grid and no summary-to-detail stack. The corners carry the message: context top-left, headline top-right, next step bottom-right.
- Does one visual take most of the page?No
- Do all panels have the same size and weight?No, some matter more
- Is it stacked top to bottom from summary to detail?No
- Is the page dense with numbers, text or tables?No, a few large elements
- Z-pattern layout
At a glance
- Density
- Low: a handful of large elements
- First look
- Top-left, then top-right
- Reading order
- A Z across the four corners
- Put there
- Headline number top-right, call to action bottom-right
Not to be confused with
- F-pattern layout
- F is for dense pages read like text. Z is for sparse pages read corner to corner.
- Single-focus layout
- Single focus gives one visual most of the page. Z balances several elements around the corners.
How to recognise it
- Plenty of white space
- A big number or statement in the top-right
- A next step or link in the bottom-right
Use it for
- Executive summaries
- The landing page of a dashboard suite
Avoid it for
- Dense tables and lists: use an F