| UI or UX | UI + UX - Encoded visual analysis of quantitative or categorical data | UI + UX - Semantic row-and-column data comparison surface | UI + UX - Spatial viewport for location-based objects, layers, and routes | UI + UX - Searchable and exportable record of system, user, or administrative events |
| UI guidance | 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 a real spatial viewport with visible map region, zoom state, scale or distance context, markers or shapes anchored to coordinates, selected-place detail, cluster counts, visible layer/filter controls, and a fallback list or table for the same results. | Render activity logs as evidence-oriented records with event time, actor, action, object, source system, scope, result, and technical context such as IP address or location when available. |
| UX guidance | 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 Map view when the user's decision depends on where objects are, how far apart they are, what falls inside the current area, which route or coverage applies, or how dense nearby points are. | Use activity log when users need to investigate, audit, verify, or troubleshoot actions across accounts, objects, systems, settings, or security boundaries. |
| Good UI | 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 clinic finder map shows visible bounds, zoom level, selected clinic marker, appointment availability markers, a transit layer toggle, cluster counts, distance chips, and a synchronized results list. | An organization audit log table shows timestamp, actor, action, target object, app, IP address, result, and a Details drawer with before and after fields. |
| Bad UI | Axes or units are missing and magnitude is ambiguous. | Mobile stacking removes headers and turns rows into unlabeled paragraphs. | The selected popup is detached from the marker or opens outside the viewport. | An export button downloads a different date range and timezone than the on-screen filtered log. |
| Good UX | 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 dispatcher pans to the west district, the result count and list update to the current bounds, a cluster expands at closer zoom, and the selected incident popup remains tied to the marker. | An admin filters to failed SSO events, expands one entry, copies the event ID, exports the filtered range, and sees that records older than 180 days require a different archive. |
| Bad UX | 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 filters to open locations but the map markers update while the list still shows closed locations, causing the wrong branch to be selected. | A user marks a notification read and the corresponding activity evidence disappears from the only log. |
| Best fit | 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 choose or inspect objects by where they are, how near they are, or what area they fall inside. | Users need to inspect recorded user, admin, system, security, or integration events. |
| Avoid when | 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. | Location is only a label or decorative backdrop. | The goal is only to show a readable milestone history for one case or process. |
| Required state | 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. | Default map state with visible viewport, zoom level or distance context, markers, layer state, result count, and synchronized fallback list. | Default log state with event records, result count, visible timezone, retention window, and permission scope. |
| Accessibility burden | 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 the map name, current area, result count, active filters, layers, selected place, and location permission state as text. | Use table or structured list semantics so actor, action, object, timestamp, result, and scope are perceivable together. |
| Common misuse | Choosing a chart type that mismatches the data relationship. | Using table markup to create page columns or layout spacing. | Treating geolocation denial as a dead end. | Using vague activity labels that omit actor, action, object, timestamp, or result. |