| 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 dashboard is a wall of same-sized charts with no primary metric, no filter scope, no freshness, and no explanation of which tile matters first. | A glossy chart card shows unlabeled bars with no axis, unit, baseline, data range, source, or explanation of what the colors mean. | A div layout looks like columns but has no caption, table semantics, or header associations. | A tab labelled Saved view applies hidden filters, changes columns, and switches layout with no preview or active-state summary. |
| 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 user sees revenue down on one tile but cannot tell whether it is filtered, stale, a pinned snapshot, or live data. | A dashboard truncates the y-axis to exaggerate a small change without indicating the baseline, leading a team to overreact. | Filtering the table removes selected rows without explaining why or offering a clear-filter path. | 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 content is layout, not data. | 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. | No saved view selected with current display settings visible and saveable. |
| 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. | Expose active saved-view name, visibility, default status, and modified state in text, not only selected tab styling. |
| Common misuse | Filling a page with charts before defining dashboard purpose, audience, hierarchy, and decisions. | Using decorative charts that do not answer a data question. | Using table markup to create page columns or layout spacing. | Saving current rows instead of presentation settings and dynamic criteria. |