Dashboard layout

Design

Establish a clear hierarchy

Users tend to scan pages rather than read every detail. Design pages so users can quickly identify:

where to start
which information is most important
what to look at next

Use layout and visual emphasis to show what matters most. To establish hierarchy:

organise content in a logical order that supports user tasks
place headline measures and important information near the start of the page (usually towards the top left)
show summary information before detailed analysis
group related information together
move supporting information lower down the page

Users should be able to understand the main message of the page without examining every chart, metric or data table.

When to use cards

Cards can group related content that users should understand as one unit and separate it from surrounding information.

Use a card when:

several elements belong together and should be understood as one group
content needs a clear boundary from surrounding information
a measure requires supporting context, such as a label, trend or comparison
users need to compare repeated items with the same structure

Place content directly on the page when:

its relationship to nearby content is already clear from headings, spacing and alignment
a container would not add meaning
the content needs to form part of a continuous visual flow
adding a card would create unnecessary borders, backgrounds or visual clutter

A chart may benefit from a card when the container groups its title, explanation, controls and visualisation as one meaningful unit. A series of charts may be clearer directly on the page when alignment and spacing already show their relationships.

Avoid placing every chart, metric or section in a card. Use spacing and alignment before adding more visual containers.

Grid and alignment

Use consistent alignment and spacing to create a predictable layout. This helps users scan the page more easily and understand relationships between information.

Using a grid you should:

keep spacing consistent
align content both horizontally and vertically where possible
use alignment and spacing to reinforce related groups of information
allow enough space for visualisations to remain clear and uncluttered

Filter position

Page-level filters affect the whole page and work best when multiple visualisations use the same dimensions, such as time period, region or service. Component-level filters affect a specific chart or section and work best when different parts of the page need different views of the data.

There are some standard placement patterns for filters. The choice of placement depends on:

whether filters are needed to use the page
whether filters affect one chart or the whole page
how important filters are to completing tasks

Top horizontal filters

Best when:

a small number of filters affect the entire page
users can understand the page without changing filters
filters support exploration rather than being required to complete tasks

Left side filters

Best when:

multiple filters are needed
the page depends on filter selections to provide meaningful results
filters play a major role in finding or refining information

Right side filters

Best when:

filters are optional
filter changes are less common than viewing or comparing the data
the data remains useful without changing filters

Other filter placements

When filters are rarely used or provide advanced options, place them in a filter panel that users can open when needed.

If the filters are component-level and only affect one chart or visual, they should be placed close to the chart they affect. Avoid using too many component-level filters because they will cause visual clutter and confuse users.