UX Patterns Guide
UI + UX Disclosure And Attention Management standard

Details panel

Provide a persistent details panel tied to the current selection, keep selected-object identity synchronized with the source region, show concise inspection content and safe secondary actions, and offer collapse, resize, or full-page routes when space or depth exceeds the panel contract.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • Users repeatedly inspect selected records, tickets, alerts, files, assets, tasks, comments, or locations while staying in a work surface.
  • Side-by-side comparison with the source list, table, map, board, or feed is more useful than navigating to a page.
  • The detail content is concise enough for a persistent panel and can escalate to a full route when needed.

Avoid when

  • The content is just a short temporary preview before navigation.
  • The surface is opened only occasionally and should close after a task.
  • The detail requires long-form editing, deep reading, history, comments, or sharing as the primary task.
  • The panel would hide the source region users need for comparison.
  • The product cannot reliably keep selection and detail content synchronized.

Problem it prevents

Dense workspaces often show many objects in a list, table, map, board, or feed, and users need to inspect selected-object detail repeatedly without losing the surrounding context or navigating to a full page for every item.

Pattern anatomy

What a strong implementation has to make clear

User need

A work surface contains selectable objects such as tickets, records, assets, files, alerts, orders, map markers, comments, or tasks.

Pattern promise

Provide a persistent details panel tied to the current selection, keep selected-object identity synchronized with the source region, show concise inspection content and safe secondary actions, and offer collapse, resize, or full-page routes when space or depth exceeds the panel contract.

Required state

No selection state with a clear prompt or preserved last-selection rule.

Recovery path

The panel shows details for an object that is no longer selected.

Access contract

Name the panel region from the selected object's title or a heading that includes the object identity.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A ticket queue keeps TCK-2048 selected in the list and shows a right details panel with requester, severity, SLA, owner, activity, and Open full ticket.
  • A map list selection updates a details panel with the selected site name, status, latest reading, and View asset route without covering the map.
  • A keyboard user moves down a ticket list, the highlighted row and details panel update together, and focus remains in the list until the user chooses Open full ticket.
  • A user filters the queue, the selected ticket remains visible or the panel changes to Select a ticket with a clear explanation.
Weak implementation

Vague, hidden, hard to recover from

  • A panel titled Details shows metrics from the previously selected record after the list selection changes.
  • A details panel contains global navigation links, filters, delete actions, and a long edit form unrelated to the selected object.
  • Sorting the list silently clears the highlighted row while the panel continues to show an old ticket.
  • Opening the panel steals focus on every row movement, making keyboard review slow and disorienting.
UI guidance
  • Render a details panel as a persistent side or adjacent region that names the currently selected object, shows high-value metadata, status, and local secondary actions, and keeps the object selection visible in the source list, table, map, board, or feed.
  • Keep details panel content structured for inspection and comparison; do not turn it into an unlabeled drawer, a hover preview, a global settings surface, a filter panel, or a long primary editing workflow.
UX guidance
  • Use a details panel when users need to select and compare nearby objects while keeping a durable inspection area visible, such as reviewing records, tickets, assets, alerts, comments, files, or map locations.
  • Make selection updates, empty selection, sorting, filtering, resize, collapse, keyboard movement, and full-page escalation predictable so users never inspect stale or unrelated object details.
Implementation contract

What the implementation must handle

States

  • No selection state with a clear prompt or preserved last-selection rule.
  • Selected-object state with source item highlighted and panel title naming the same object.
  • Keyboard list-navigation state where focus can move through objects without being stolen by the panel.
  • Updated-selection state where metadata, status, activity, and actions refresh together.

Interaction

  • Selecting an object updates both the source selection indicator and the details panel title.
  • The panel content describes only the selected object unless a clearly labelled comparison mode is active.
  • Keyboard focus remains in the source list, table, map, board, or feed while users move selection for review.
  • The panel exposes safe secondary actions such as Open full record, Assign owner, or Copy link without hiding required primary task flows.

Accessibility

  • Name the panel region from the selected object's title or a heading that includes the object identity.
  • Keep selection state programmatically exposed in the source region.
  • Do not move focus into the panel just because selection changes; preserve keyboard review speed.
  • Announce important panel updates through nearby status text when dynamic changes are not visually obvious.

Review

  • Which exact object owns the panel content right now?
  • Can users see the selected object and panel title at the same time?
  • What happens when users move selection by keyboard, sort, filter, delete, or refresh the source region?
  • Does the panel support inspection, or has it become a drawer, form, filter panel, preview panel, or object page?
Interactive lab

Inspect the states before you copy the pattern

Inspect selected object details beside the source list

Select ticket TCK-2048, move through nearby tickets without focus jumping into the panel, filter selected-away state, collapse and restore the panel, open the full ticket route, and compare stale-detail, generic-title, focus-steal, mixed-purpose, hidden-selection, and no-empty-state failures.

Details panel
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

No selection state with a clear prompt or preserved last-selection rule.

Keyboard / Access

Tab reaches the source region, panel controls, and full-object route in a predictable order.

Avoid Generating

Showing a details panel with no selected-object identity.
Evidence trail

Source-backed claims behind this guidance

eBay Playbook: Panel

eBay Playbook - checked

Supports panels as supplemental content and input surfaces tied to primary content, including modal and non-modal behavior.

Full agent/debug reference

Problem Context

  • A work surface contains selectable objects such as tickets, records, assets, files, alerts, orders, map markers, comments, or tasks.
  • Users benefit from comparing several nearby objects without leaving the current list, table, map, board, or feed.
  • The details can be summarized in a durable side or adjacent region without requiring a modal response.
  • The product can keep selection, sorting, filtering, empty state, focus, and detail refresh synchronized.

Selection Rules

  • Choose details panel when a selected object needs durable side-by-side inspection while users browse neighboring objects.
  • Use drawer when the surface is temporary, opened by a discrete command, and needs close behavior and focus movement into the panel.
  • Use hover card when the content is a compact transient preview before navigation rather than a durable inspection area.
  • Use accordion or disclosure details when the content belongs inline in the page flow rather than to a changing selected object.
  • Use table, data grid, or expandable row when the needed detail should remain row-local inside the data surface.
  • Use a full object page when users need deep reading, long editing, durable URL state, sharing, comments, history, or browser navigation.
  • Use filter panel when the panel contains criteria that narrow results and synchronize active counts, not object details.
  • Use preview panel when the panel's primary job is media or document preview rather than structured metadata inspection.
  • Do not use a details panel when no stable selected object exists or when selection changes faster than the panel can stay accurate.

Required States

  • No selection state with a clear prompt or preserved last-selection rule.
  • Selected-object state with source item highlighted and panel title naming the same object.
  • Keyboard list-navigation state where focus can move through objects without being stolen by the panel.
  • Updated-selection state where metadata, status, activity, and actions refresh together.
  • Filtered or sorted state where the panel either remains tied to a visible selected object or explains that selection was cleared.
  • Loading or refreshing state that does not show stale details as current.
  • Collapsed, resized, or narrow-screen state with a visible way to restore detail or open the full object.
  • Full-page escalation state for deep reading, editing, comments, history, or shareable detail.

Interaction Contract

  • Selecting an object updates both the source selection indicator and the details panel title.
  • The panel content describes only the selected object unless a clearly labelled comparison mode is active.
  • Keyboard focus remains in the source list, table, map, board, or feed while users move selection for review.
  • The panel exposes safe secondary actions such as Open full record, Assign owner, or Copy link without hiding required primary task flows.
  • If selection disappears because of filtering, sorting, deletion, permission change, or refresh, the panel updates to a clear empty or unavailable state.
  • The panel can be collapsed, resized, or replaced by a full-page route when space is constrained.
  • Panel actions preserve or intentionally update the selected object, and the status text confirms the result.

Implementation Checklist

  • Define the owning selectable region and stable selected-object ID before rendering panel content.
  • Show selected state in the source region and repeat the selected object's name or identifier in the panel heading.
  • Separate inspection fields from actions; keep destructive or multi-step actions out of the panel unless routed to review.
  • Keep focus in the source region during selection movement, and move focus into the panel only after an explicit panel action.
  • Handle loading, stale data, missing permissions, deleted objects, filtered-away objects, and empty selection states.
  • Provide collapse, resize, or full-page escalation when the panel competes with the workspace for width.
  • Test row selection, keyboard movement, sort, filter, refresh, collapse, narrow viewport, and full-object routing.

Common Generated-UI Mistakes

  • Showing a details panel with no selected-object identity.
  • Keeping the previous ticket summary in the persistent panel after the highlighted row has moved to a different ticket.
  • Stealing focus into the panel on every arrow-key movement through a list.
  • Mixing object details with filters, navigation, global settings, and unrelated commands.
  • Using a details panel for long primary editing that needs validation, saved progress, or route history.
  • Clearing selection after sort or filter without updating the panel.
  • Making the panel so wide that it prevents comparison with the source region.

Critique Questions

  • Which exact object owns the panel content right now?
  • Can users see the selected object and panel title at the same time?
  • What happens when users move selection by keyboard, sort, filter, delete, or refresh the source region?
  • Does the panel support inspection, or has it become a drawer, form, filter panel, preview panel, or object page?
  • Where do users go for full detail, deep editing, comments, history, or sharing?
  • How does the panel adapt when the viewport cannot support side-by-side inspection?
Accessibility
  • Name the panel region from the selected object's title or a heading that includes the object identity.
  • Keep selection state programmatically exposed in the source region.
  • Do not move focus into the panel just because selection changes; preserve keyboard review speed.
  • Announce important panel updates through nearby status text when dynamic changes are not visually obvious.
  • Ensure the full-object route, collapse control, resize handle, and panel actions have descriptive labels.
  • When the selected object is removed or filtered away, update the panel heading and status rather than leaving stale content.
Keyboard Behavior
  • Tab reaches the source region, panel controls, and full-object route in a predictable order.
  • Arrow keys or list/grid commands move selection in the source region and update panel content without moving focus into the panel.
  • Enter or Space opens or activates the selected source item according to the source component's contract.
  • A dedicated action such as Open full record moves focus to the full route or page.
  • Collapse details hides or shrinks the panel and leaves focus on the collapse control or source region.
  • Escape does not close a persistent details panel unless the product has explicitly provided a temporary or overlay mode.
Variants
  • Right details panel
  • Inspector panel
  • Properties panel
  • Selection summary panel
  • Collapsible details panel
  • Resizable details panel
  • Split-view details panel

Verification

Last verified: