Summary box
A longer page has a small set of key facts or next steps that users need early.
- Type
- UI-UX
- Sources
- 5
- Trail checked
establishedHighlighted region for key information from a longer page
Test in lab 23 documented entries
Data Display And Exploration
Tables, dashboards, charts, maps, compare views, timelines, and drill-down behavior.
Browse all problem familiesLearn the family
What decision should the data display help a person make?
A display makes relationships visible. Its format follows the comparison, trend, detail, or monitoring question that the person needs to answer.
Use this method
- Write the question before selecting a chart or table.
- Choose rows, marks, labels, and units that reveal the relevant comparison.
- Provide sorting, filtering, or detail when the task calls for it.
- Check how the same information works at narrow widths and through assistive technology.
Compare the outcome
Strong: A clinic manager compares check-in delays by hour in a labeled chart and opens a table for exact counts and cases.
Weak: A clinic manager sees a colorful dashboard with unlabeled totals and searches elsewhere for the definition of delayed check-in.
Try it: Write one question about a dataset, choose a display format, and name the exact value or comparison a reader should find.
Read these patterns first
- TableRecords share comparable attributes that users need to scan in aligned columns.
- Data visualizationUsers need to see trends, comparisons, rankings, distributions, relationships, composition, anomalies, or uncertainty.
- Dashboard layoutUsers need to monitor several related metrics, exceptions, and analyses together.
Complete study route · 23 entries
Work through the family in order
Begin with the core behavior, apply it in different contexts, then review cases that reveal the quality boundary. Open each entry for its decision rule, states, example, and source trail.
0 of 23 studies complete
Start this family →7 entries
Build the foundation
Learn the shared task and the core interaction choices.
List view
Users need to scan and act on a collection of objects using compact summaries.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardVertical object-summary browsing surface
Test in lab Table
Records share comparable attributes that users need to scan in aligned columns.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardSemantic row-and-column data comparison surface
Test in lab Card list
Users need to browse rich object summaries with preview, summary text, metadata, status, and actions.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardSingle-column sequence of bounded rich object summaries
Test in lab Card grid
Users browse peer objects where visual preview, compact identity, and quick first-pass selection matter.
- Type
- UI-UX
- Sources
- 5
- Trail checked
establishedResponsive multi-column grid of peer object cards
Test in lab Data visualization
Users need to see trends, comparisons, rankings, distributions, relationships, composition, anomalies, or uncertainty.
- Type
- UI-UX
- Sources
- 9
- Trail checked
establishedEncoded visual analysis of quantitative or categorical data
Test in lab Dashboard layout
Users need to monitor several related metrics, exceptions, and analyses together.
- Type
- UI-UX
- Sources
- 5
- Trail checked
establishedPage-level arrangement of coordinated status, metric, and analysis widgets
Test in lab 16 entries
Apply the patterns
Choose a specialized form for the context and follow its complete behavior.
Data grid
Users repeatedly inspect or update many records in shared columns.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardInteractive row-and-column data workspace
Test in lab Chart drilldown
Users need to investigate an aggregate chart mark by moving to the next planned level of a hierarchy.
- Type
- UI-UX
- Sources
- 7
- Trail checked
establishedInteractive chart hierarchy from aggregate marks to child-level data
Test in lab Compare view
Users need to choose among similar offerings using multiple comparable attributes.
- Type
- UI-UX
- Sources
- 5
- Trail checked
establishedSelected side-by-side attribute comparison of peer items
Test in lab Saved view
Users repeatedly return to a specific presentation of a changing data set.
- Type
- UI-UX
- Sources
- 5
- Trail checked
establishedPersisted named presentation state for a data workspace
Test in lab Master-detail
Users repeatedly choose items from a collection and work with a substantial detail destination.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedAdaptive source list and detail layout with coordinated selection and navigation state
Test in lab Expandable row
A row has supplemental detail that is useful for some records but would make the default table or list too dense.
- Type
- UI-UX
- Sources
- 5
- Trail checked
establishedRow-owned inline detail disclosure inside a table or list
Test in lab Tree grid
Rows have real parent-child hierarchy and shared comparable columns.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardHierarchical interactive row-and-column data workspace
Test in lab Timeline
Users need a chronological record of important events for one object, case, order, application, or process.
- Type
- UI-UX
- Sources
- 5
- Trail checked
establishedBounded chronological record of past, current, or expected events
Test in lab Activity log
Users need to inspect recorded user, admin, system, security, or integration events.
- Type
- UI-UX
- Sources
- 5
- Trail checked
establishedSearchable and exportable record of system, user, or administrative events
Test in lab Calendar view
Users need to scan or manage scheduled events across dates, days, weeks, months, or resources.
- Type
- UI-UX
- Sources
- 6
- Trail checked
establishedDate and time grid for scheduled events, availability, and conflicts
Test in lab Kanban board
Work progresses through visible stages and the team uses the board to decide what to pull next.
- Type
- UI-UX
- Sources
- 6
- Trail checked
establishedWorkflow-state board for cards moving through columns
Test in lab Map view
Users choose or inspect objects by where they are, how near they are, or what area they fall inside.
- Type
- UI-UX
- Sources
- 8
- Trail checked
establishedSpatial viewport for location-based objects, layers, and routes
Test in lab Feed
Users consume a continuing stream of updates, posts, stories, comments, media, or collaboration activity.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedDynamic stream of article-like updates that may load or insert content at either end
Test in lab Collection
Users need to save, curate, share, revisit, sequence, or maintain explicit items as a meaningful set.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardNamed, purposeful set of items with collection-level metadata and membership behavior
Test in lab Tag / status tag
A compact category, state, phase, freshness marker, priority, or count helps users scan a group of objects.
- Type
- UI-UX
- Sources
- 5
- Trail checked
establishedCompact static category or status label attached to an object
Test in lab Window splitter
Users need to compare, edit, inspect, or preview adjacent panes in one durable workspace.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardMoveable separator for resizing adjacent panes
Test in lab Try another phrase
Try fewer words, clear the filter, or search across all pattern families.
Search all patterns