# Layout Hierarchy and Self-Explanatory UX

## What Problem This Solves

This reference keeps visualization guidance focused on composition, reading order, and self-explanatory UX instead of papering over weak layouts with extra copy.

## When to Use It

Use this when choosing how to arrange a chart, dashboard, or visual report and when critiquing screens that feel busy, confusing, or over-explained.

## Key Takeaways

- Make one question or state dominant on the surface instead of giving every tile, legend, and control equal emphasis.
- Put labels, keys, filters, and summaries next to the evidence they explain so the eye does not bounce around the page.
- Prefer direct labels, concise framing text, and chart-adjacent cues over detached legends and explanatory sidebars.
- Use prose for claims, caveats, and actions that cannot be shown visually, not for teaching the viewer basic decoding.
- If a first-time viewer would need a paragraph to understand the default state, simplify the composition before adding more text.
- Consider domain-native contextual surfaces when they make the default state self-explanatory: fields, courts, tracks, floor plans, schematics, routes, and other familiar spaces can carry orientation better than prose.
- For editorial figures, make one claim dominant, then pace supporting evidence with whitespace, direct labels, and a small number of meaningful annotations.
- For art-directed stories, compose the page as a sequence of visual states rather than a dashboard grid. Imagery, generated assets, motion, and data overlays should share one reading path.
- For mobile, make the main visualization or insight-plus-visualization the first usable surface. Secondary filters, settings, prose, and inspectors should collapse, dock, or follow the evidence unless they are the task.
- Large-screen and mobile layouts should be sibling compositions that preserve the same claim, caveat, and source context, not one DOM order flowing narrower.

## Common Mistakes

- Using paragraphs of UI copy to explain comparisons that should be obvious from the layout.
- Giving the same visual weight to every KPI tile, chart, and control.
- Separating the chart, legend, filters, and explanation so far apart that repeated eye travel becomes part of the task.
- Treating a contextual background as decoration instead of letting it shape layout, labels, or interaction.
- Pasting charts into boxes on top of an illustrated background instead of integrating labels and data with the substrate.
- Squeezing a desktop chart onto mobile instead of adapting labels, annotations, and panel order.
- Letting a desktop left rail, settings form, or explanatory column become the top of the mobile page ahead of the visualization.
- Hiding the visualization behind a bottom sheet, keyboard, reconnect spinner, or modal without restoring the user's place.

## Adjacent Skills

- `../../skills/visualization-strategy-and-critique/SKILL.md`
- `../../skills/dashboards-and-real-time-visualization/SKILL.md`
- `../../skills/reports-pdfs-and-slide-automation/SKILL.md`
- `./domain-contextual-surfaces.md`
- `./editorial-infographic-system.md`
- `./art-directed-interactive-visual-stories.md`
- `./mobile-first-responsive-visualization.md`

## Source Links

- [Visualization Analysis and Design](https://mitpressbookstore.mit.edu/book/9781466508910)
- [Edward Tufte books](https://www.edwardtufte.com/books/)
- [Perceptual Edge dashboard design example](https://www.perceptualedge.com/blog/?p=1466)
- [Datawrapper Academy](https://academy.datawrapper.de/)