LayoutHow does it guide the eye?
F-pattern layout
For dense pages: the eye reads across the top, again a little lower, then scans down the left edge.
Example dashboard
Click a widget to see its data
Store trading report
Week 37 · 42 stores
Refreshed hourlyShare
Revenue
$1.21M
+4% vs last week
Margin
39.8%
−0.6 pts
Units
42,310
+2%
Discount rate
11.4%
+1.1 pts
Stores below plan
7 of 42
was 5
Stores by revenue
| Store | Region | Revenue | Margin | vs plan |
|---|---|---|---|---|
| Harbourside | North | $61.2k | 41.0% | +6% |
| Old Town | North | $55.8k | 40.2% | +3% |
| Riverside Mall | South | $52.4k | 38.9% | −1% |
| Station Square | West | $47.9k | 37.5% | −4% |
| Market Street | South | $44.1k | 40.8% | +2% |
| Airport | West | $39.6k | 36.1% | −7% |
| Lakeside | Central | $36.3k | 39.4% | 0% |
Revenue by channel
Stores$0.74M
Online$0.36M
Marketplace$0.11M
Weekly revenue
The data model behind it
Sales order linesLayout is independent of the model: this report reads the same order-line fact as the analytical dashboard. What changes is where each query sits on the page, and therefore which one gets read.
- Tables read
- 4 of 7
- Joins
- 3
- Fact type
- Transaction fact (order-line grain)
- Grain
- One row per order line
- Refresh
- Hourly
Widgets
Highlighted: every table this view reads. Pick a widget to isolate its query.
Where it sits in the taxonomy
Dense content with no dominant view, no equal-tile grid and no deliberate summary-to-detail stack. Readers scan it like text, so the top band and the left column get the attention. A sparse page follows a Z instead.
- 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?Yes, dense
- F-pattern layout
At a glance
- Density
- High: many numbers, labels and rows
- First look
- Top-left
- Reading order
- Top row, a shorter second row, then down the left
- Put there
- Key KPIs along the top, row labels and priorities on the left
Not to be confused with
- Z-pattern layout
- Z suits sparse pages with a few large elements. F is how the eye copes with density.
- Inverted pyramid layout
- The inverted pyramid stacks levels of detail on purpose. F-pattern pages are dense without that deliberate order.
How to recognise it
- Tables and lists with left-aligned labels
- Most of the content sits in the top band and the left column
Use it for
- Operational reports, finance statements, ranked lists
Avoid it for
- Sparse pages with a few big visuals: use a Z