Use dashboard layout for a coordinated page of multiple monitoring widgets, data visualization for one encoded analytic view, table for exact row work, and saved view for a named presentation state of one data surface.
Use dashboard layout for a coordinated page of multiple monitoring widgets, data visualization for one encoded analytic view, table for exact row work, and saved view for a named presentation state of one data surface.
Practice the judgment: Imagine this situation: A dashboard hides filter scope and users compare widgets that are governed by different filters. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Dashboard layout | Data visualization | Table | Saved view |
|---|---|---|---|---|
| UI or UX | UI + UX - Page-level arrangement of coordinated status, metric, and analysis widgets | UI + UX - Encoded visual analysis of quantitative or categorical data | UI + UX - Semantic row-and-column data comparison surface | UI + UX - Persisted named presentation state for a data workspace |
| UI guidance | Arrange dashboard widgets into a purposeful page hierarchy with a named dashboard, scope, freshness, global filters, primary KPIs, secondary analysis, exceptions, and supporting tables or links placed according to monitoring priority. | Render a chart with a specific analytic question, title, dataset scope, mark type, axis labels, units, tick labels, scale baseline, legend, annotations, source or freshness note, selected mark, tooltip or detail, and data table alternative. | Render a table with a specific caption or heading, visible column headers, optional row headers, aligned values, consistent row actions, and enough spacing for scanability. | Render saved views as named, selectable workspace presentations with visible owner or visibility, active state, saved layout mode, columns or fields, grouping, sort, filters, and last-updated metadata. |
| UX guidance | Use dashboard layout when users need one page to monitor several related signals, compare current state against targets, spot exceptions, and decide which detailed view or workflow to open next. | Use Data visualization when visual encoding helps users detect trends, comparisons, rankings, distributions, relationships, outliers, part-to-whole composition, or uncertainty faster than reading rows. | Use tables when aligned columns help users compare records, find exceptions, audit values, or triage work faster than opening each item. | Use saved view when users need to return to a complete operational presentation of a changing dataset rather than rebuilding columns, layout, grouping, filters, and sort every session. |
| Good UI | An operations dashboard opens with date range, region filter, last updated time, four KPI cards, an exception panel, a trend chart, and a priority table in a stable grid. | A revenue trend chart shows month on the x-axis, revenue in USD on the y-axis, a target line, color-coded channels with legend labels, selected month tooltip, annotation for a campaign, and a data table toggle. | A payment review table has the caption June vendor payments, headers Vendor, Status, Due date, Amount, and Action, right-aligned amounts, and row actions labelled by vendor. | A support queue has saved views named My urgent tickets, Team backlog, and SLA breach risk, each showing columns, sort, filters, owner, and private or team visibility before users apply it. |
| Bad UI | A responsive dashboard collapses filters and alerts below the fold while leaving decorative charts above the operational exceptions. | Axes or units are missing and magnitude is ambiguous. | Mobile stacking removes headers and turns rows into unlabeled paragraphs. | A saved view list mixes saved filters, saved searches, static exports, bookmarks, and recent pages under one generic Saved label. |
| Good UX | A manager changes Region to West, sees every tile show the same filtered scope and updated timestamp, then opens the exception table from the SLA breach card. | An analyst switches from revenue to conversion rate, the y-axis unit changes, target and annotation stay aligned, and the selected month tooltip and table row update from the same data. | A user sorts by Amount descending, filters to Pending, moves to page 2, and the table keeps its caption, active sort, active filter, row count, and selected payment context. | A manager opens SLA breach risk, sees the board layout, grouped Status lanes, five saved columns, and current result count, then changes density and saves a private copy instead of overwriting the team view. |
| Bad UX | A dashboard hides stale or partially refreshed widgets and users compare incompatible numbers. | A chart filter removes the low-performing segment but the legend and annotation still describe the full dataset. | Mobile stacking removes headers and turns rows into unlabeled paragraphs. | A user changes one column while reviewing a team queue and accidentally updates the shared default for everyone. |
| Best fit | Users need to monitor several related metrics, exceptions, and analyses together. | Users need to see trends, comparisons, rankings, distributions, relationships, composition, anomalies, or uncertainty. | Records share comparable attributes that users need to scan in aligned columns. | Users repeatedly return to a specific presentation of a changing data set. |
| Avoid when | Only one chart, table, status message, or record list is needed. | The data question is a single number, a record list, a geographic location, or an event audit trail. | The task depends on rich previews, imagery, or uneven metadata. | Only one current-session filter or sort choice needs to be changed. |
| Required state | Default dashboard with name, purpose, global scope, active filters, freshness, KPI tier, sections, and widget grid. | Default chart with title, question, data scope, axes, units, legend, source or freshness note, visible filters, and data alternative. | Default table state with caption, visible headers, row values, and result count or context. | Saved view list with active, private, team, shared, pinned, default, owner, last-updated, and result-count states. |
| Accessibility burden | Give the dashboard a heading, purpose, filter summary, refresh status, and section headings that screen-reader users can navigate. | Expose chart title, purpose, data scope, chart type, axes, units, legend, selected point, filter state, and source as text. | Use native table semantics for tabular data rather than div-only rows. | Use labelled controls for view name, visibility, layout, columns, grouping, filters, sort, density, and sharing settings. |
| Common misuse | Filling a page with charts before defining dashboard purpose, audience, hierarchy, and decisions. | Choosing a chart type that mismatches the data relationship. | Using table markup to create page columns or layout spacing. | Saving current rows instead of presentation settings and dynamic criteria. |