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.

Test the behavior

Open the interactive example when you need it

The full lab is intentionally loaded on request. That keeps this reading page fast while preserving the strong and weak states, keyboard checks, and failure scenarios.

In the lab you can
  • switch between strong UI, weak UI, strong UX, and weak UX;
  • trigger required, empty, loading, error, and recovery states;
  • inspect keyboard and accessibility expectations beside the demo.
Launch Details panel in the lab
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?
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

Source trail checked:

Saved items