vocab.design

layout · dataviz

Dashboard grid

also called widget grid (community), tile layout (community), dashboard canvas (community), card dashboard (community)

A grid of tiles, each holding one metric, chart or list, that a reader can often resize and rearrange.

A dashboard grid is the layout genre behind almost every analytics screen, admin console and monitoring page: a field of tiles laid on one shared grid, each tile answering exactly one question. The grid underneath is usually a twelve column grid, because twelve divides into halves, thirds, quarters and sixths, which is the whole vocabulary a dashboard needs to say “this one is worth twice that one”.

Size is the ranking. Area is the strongest importance signal a page has, so a tile’s span is an editorial decision rather than a packing problem: the chart that answers the reason people opened the page gets eight columns and two rows, the supporting numbers get three columns each, and the audit log gets whatever is left. The failure this term exists to name is the uniform grid, every tile the same size in the same rectangle, which looks tidy and says nothing. A reader facing a wall of identical cards has to rank them personally, every visit, which is the job the layout was supposed to do.

This is the functional cousin of the bento grid, and the two are worth keeping apart. A bento arrangement is an aesthetic one, mixing tile sizes for rhythm on a marketing page where the sizes carry no claim. A dashboard grid mixes them for meaning, and its tiles are live: they load independently, refresh on their own schedule, and often come with a per tile skeleton screen so a slow query cannot hold up the rest of the page. The rearrangeable part (drag a tile, resize it, save the layout) is common but optional, and it has a real cost: once every reader’s dashboard is different, the default arrangement is the only one you can design, support or screenshot.

Two practical constraints shape the rest. The grid has to collapse gracefully, which means deciding the single column reading order in advance rather than accepting whatever the source order gives, since importance in one column is expressed only by position. And a tile must be allowed to be boring: a dashboard grows by accretion, everyone wants their number on it, and a page showing forty tiles is a page showing none. Prune to what a reader would act on, and let the rest live a click away.

Which word?

If you wantsay
many independent readouts on one screendashboard grid
many peers of the same kind, browsed by scanningcard grid
cells at deliberately different sizes, tiled to fill a rectanglebento grid

Related

See also: Widget