9.3.1: Layout and Visual Hierarchy

Last updated
Save as PDF

Page ID: 53355

Felix Amoruwa
De Anza College

$ \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } $

$ \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} $

$ \newcommand{\dsum}{\displaystyle\sum\limits} $

$ \newcommand{\dint}{\displaystyle\int\limits} $

$ \newcommand{\dlim}{\displaystyle\lim\limits} $

$ \newcommand{\id}{\mathrm{id}}$ $ \newcommand{\Span}{\mathrm{span}}$

( \newcommand{\kernel}{\mathrm{null}\,}\) $ \newcommand{\range}{\mathrm{range}\,}$

$ \newcommand{\RealPart}{\mathrm{Re}}$ $ \newcommand{\ImaginaryPart}{\mathrm{Im}}$

$ \newcommand{\Argument}{\mathrm{Arg}}$ $ \newcommand{\norm}[1]{\| #1 \|}$

$ \newcommand{\inner}[2]{\langle #1, #2 \rangle}$

$ \newcommand{\Span}{\mathrm{span}}$

$ \newcommand{\id}{\mathrm{id}}$

$ \newcommand{\Span}{\mathrm{span}}$

$ \newcommand{\kernel}{\mathrm{null}\,}$

$ \newcommand{\range}{\mathrm{range}\,}$

$ \newcommand{\RealPart}{\mathrm{Re}}$

$ \newcommand{\ImaginaryPart}{\mathrm{Im}}$

$ \newcommand{\Argument}{\mathrm{Arg}}$

$ \newcommand{\norm}[1]{\| #1 \|}$

$ \newcommand{\inner}[2]{\langle #1, #2 \rangle}$

$ \newcommand{\Span}{\mathrm{span}}$ $ \newcommand{\AA}{\unicode[.8,0]{x212B}}$

$ \newcommand{\vectorA}[1]{\vec{#1}} % arrow$

$ \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow$

$ \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } $

$ \newcommand{\vectorC}[1]{\textbf{#1}} $

$ \newcommand{\vectorD}[1]{\overrightarrow{#1}} $

$ \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} $

$ \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} $

$ \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } $

$\newcommand{\longvect}{\overrightarrow}$

$ \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} $

$\newcommand{\ket}[1]{\left| #1 \right>}$
$\newcommand{\bra}[1]{\left< #1 \right|}$
$\newcommand{\braket}[2]{\left< #1 \vphantom{#2} \right| \left. #2 \vphantom{#1} \right>}$
$\newcommand{\braopket}[3]{\left< #1 \vphantom{#2}\vphantom{#3} \right| #2 \vphantom{#1}\vphantom{#3} \left| #3 \vphantom{#1}\vphantom{#2} \right>}$
$\newcommand{\qmvec}[1]{\mathbf{\vec{#1}}}$
$\newcommand{\op}[1]{\hat{\mathbf{#1}}}$
$\newcommand{\expect}[1]{\langle #1 \rangle}$
$\newcommand{\dfn}[1]{\emph{\textbf{#1}}}$

$\newcommand{\avec}{\mathbf a}$ $\newcommand{\bvec}{\mathbf b}$ $\newcommand{\cvec}{\mathbf c}$ $\newcommand{\dvec}{\mathbf d}$ $\newcommand{\dtil}{\widetilde{\mathbf d}}$ $\newcommand{\evec}{\mathbf e}$ $\newcommand{\fvec}{\mathbf f}$ $\newcommand{\nvec}{\mathbf n}$ $\newcommand{\pvec}{\mathbf p}$ $\newcommand{\qvec}{\mathbf q}$ $\newcommand{\svec}{\mathbf s}$ $\newcommand{\tvec}{\mathbf t}$ $\newcommand{\uvec}{\mathbf u}$ $\newcommand{\vvec}{\mathbf v}$ $\newcommand{\wvec}{\mathbf w}$ $\newcommand{\xvec}{\mathbf x}$ $\newcommand{\yvec}{\mathbf y}$ $\newcommand{\zvec}{\mathbf z}$ $\newcommand{\rvec}{\mathbf r}$ $\newcommand{\mvec}{\mathbf m}$ $\newcommand{\zerovec}{\mathbf 0}$ $\newcommand{\onevec}{\mathbf 1}$ $\newcommand{\real}{\mathbb R}$ $\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}$ $\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}$ $\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}$ $\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}$ $\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}$ $\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}$ $\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}$ $\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}$ $\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}$ $\newcommand{\laspan}[1]{\text{Span}\{#1\}}$ $\newcommand{\bcal}{\cal B}$ $\newcommand{\ccal}{\cal C}$ $\newcommand{\scal}{\cal S}$ $\newcommand{\wcal}{\cal W}$ $\newcommand{\ecal}{\cal E}$ $\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}$ $\newcommand{\gray}[1]{\color{gray}{#1}}$ $\newcommand{\lgray}[1]{\color{lightgray}{#1}}$ $\newcommand{\rank}{\operatorname{rank}}$ $\newcommand{\row}{\text{Row}}$ $\newcommand{\col}{\text{Col}}$ $\renewcommand{\row}{\text{Row}}$ $\newcommand{\nul}{\text{Nul}}$ $\newcommand{\var}{\text{Var}}$ $\newcommand{\corr}{\text{corr}}$ $\newcommand{\len}[1]{\left|#1\right|}$ $\newcommand{\bbar}{\overline{\bvec}}$ $\newcommand{\bhat}{\widehat{\bvec}}$ $\newcommand{\bperp}{\bvec^\perp}$ $\newcommand{\xhat}{\widehat{\xvec}}$ $\newcommand{\vhat}{\widehat{\vvec}}$ $\newcommand{\uhat}{\widehat{\uvec}}$ $\newcommand{\what}{\widehat{\wvec}}$ $\newcommand{\Sighat}{\widehat{\Sigma}}$ $\newcommand{\lt}{<}$ $\newcommand{\gt}{>}$ $\newcommand{\amp}{&}$ $\definecolor{fillinmathshade}{gray}{0.9}$

Layout and Visual Hierarchy

The arrangement of elements on a dashboard should reflect their relative importance. Users typically scan dashboards in a Z-pattern or F-pattern on screens, and crucial information (like top KPIs) should be placed in prominent positions (often top-left or center). A clear visual hierarchy guides the viewer: what should they look at first, second, and so on. Key techniques to establish hierarchy include: size (make the most important chart larger or a headline number big and bold), positioning (top or left for primary metrics), and use of color/shading to highlight key areas.

Ben Shneiderman’s mantra “Overview first, zoom and filter, then details-on-demand” can inform layout at a high level. For instance, you might place an “overview” visualization (like an overall sales trend or a map of entire operations) prominently, and supporting detail charts around or below it. In a sales dashboard example, the top section might show total sales and a trend line (overview), and below that, you have charts by region, product, and salesperson (details that one can examine if that overview signals something of interest).

A practical example of visual hierarchy is using a highlighted summary metric (big number) at the top. Imagine a dashboard’s top banner showing “Total Monthly Sales: $1.2M (+5% vs last month)” in large text. This immediately answers the primary question (“How are we doing overall?”). Below it, supporting charts break down the sales by category or region, but in a smaller size. Research suggests including a few big numbers can greatly improve a dashboard’s usability by giving context at a glance.
US Electricity Grid visualization. Details in caption.

Figure $\PageIndex{1}$: Example of a well-laid-out dashboard (from an electricity grid data example). The layout uses clear visual hierarchy: a large map at top/center provides an overview (geographical distribution of electricity generation/consumption), with a time slider for context (primary control). Supporting charts and big number indicators are arranged around the map, each providing details (trends, breakdowns) that correspond to the selected context. Key items are visually emphasized (through size and color), enabling users to navigate the information naturally from overview to detail. (CC BY 4.0; Felix Amoruwa) Access to a detailed description of Figure $\PageIndex{1}$

When designing layout, grouping related items together is also important (this follows the Gestalt principle of proximity). For example, filters that affect certain charts might be placed adjacent to those charts or in a consistent panel. If your dashboard has multiple tabs or pages, each should have a focused theme (e.g. one page for sales performance, another for marketing funnel metrics). It’s often tempting to cram many views into one screen, but judicious use of space and possibly multiple pages yields a cleaner result. Remember, a dashboard is not a data dump; it is a curated interface between the user and the data. As the saying goes, “If everything is highlighted, nothing is highlighted.” Trying to make every element eye-catching will result in a chaotic scene with no focal point. Instead, decide what the primary insight or question the dashboard addresses and ensure the layout answers that clearly first.

Visual hierarchy is also supported by consistent styling: use color and font weight strategically to draw attention. Perhaps use one accent color to highlight important numbers or trends, and a neutral palette for background or less critical charts. In the electricity dashboard example (Figure 9.3), the map likely stands out with brighter coloring for key values, whereas secondary charts might use more subdued tones. A well-designed dashboard “leads” the viewer through the data without loud annotations; the positioning and format do a lot of that work subtly.

In summary, treat your dashboard like a visual story: layout is the storyboard that ensures the audience sees the beginning, middle, and end in the right order. It should answer the most pressing question first (overview or KPI), then allow drilling into why that is happening (supporting charts), maintaining clarity at each step

Search

Text Color

Text Size

Margin Size

Font Type