Use a details panel for durable selected-object inspection inside the current layout, drawer for a temporary edge surface, hover card for transient pre-navigation preview, and accordion for in-flow section reveal.
Use a details panel for durable selected-object inspection inside the current layout, drawer for a temporary edge surface, hover card for transient pre-navigation preview, and accordion for in-flow section reveal.
Practice the judgment: Imagine this situation: Selecting another row leaves stale metrics from the previous record in the panel. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Details panel | Drawer | Hover card | Accordion |
|---|---|---|---|---|
| UI or UX | UI + UX - Persistent selected-object inspection panel | UI + UX - Supplemental edge panel for current-context detail or light actions | UI + UX - Rich preview surface on hover or focus | UI + UX - Grouped show-hide sections for related page content |
| 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. | Render a drawer as an edge-aligned panel with a visible heading, selected-object identity, close control, stable width, and clear relationship to the page content it supplements. | Render a hover card as a compact preview visually tied to a link, mention, row, object chip, file, person, or chart mark, with a title, key metadata, optional thumbnail, recent activity, and a clear route to the full object. | Render each section title as a real button inside an appropriate heading, expose expanded or collapsed state, and connect the button to the panel it controls. |
| 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. | Use drawers to preserve parent-page context while users inspect supplemental detail or perform simple adjacent actions. | Use hover cards to help users inspect an object before navigating, especially in dense lists, mentions, dashboards, file browsers, issue trackers, and relationship-heavy interfaces. | Use an accordion when a page has several related sections that users may inspect selectively while still needing an overview of all section labels. |
| Good UI | 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 right-side case details drawer opens from a table row, names Claim C-1042, shows status, owner, activity, and a close button while the table remains visible. | Hovering or focusing @Maya Chen opens a card with avatar, role, local time, current project, recent activity, and View profile link. | A product policy page shows Shipping, Returns, Warranty, and Contact sections as heading buttons with clear expanded states and one open panel. |
| Bad UI | A panel titled Details shows metrics from the previously selected record after the list selection changes. | A drawer contains navigation links, filters, account settings, and destructive commands under one unlabeled heading. | A hover card contains a long editable form, delete buttons, filters, and settings controls. | Collapsed rows look like navigation links, but clicking them only reveals hidden page text. |
| Good UX | 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. | Opening the drawer preserves the table filter and selected row, Next item updates the drawer title, Escape closes it, and focus returns to the selected row. | The person reaches the intended result with clear feedback. | A user opens Returns, then Warranty, scans both sections, collapses Returns, and the page keeps focus and open-state feedback stable. |
| Bad UX | Sorting the list silently clears the highlighted row while the panel continues to show an old ticket. | The drawer keeps showing Claim C-1042 after the user selects Claim C-1043 in the table. | The card disappears while the pointer travels from the mention into the preview. | A user misses eligibility requirements because the only required step is hidden inside a collapsed section by default. |
| Best fit | Users repeatedly inspect selected records, tickets, alerts, files, assets, tasks, comments, or locations while staying in a work surface. | Users need to inspect object detail, metadata, comments, history, or light actions while staying on the current page. | Users need to inspect object metadata before choosing whether to open a link, mention, file, row, issue, or reference. | Section headings provide a useful overview and users can choose which details to inspect. |
| Avoid when | The content is just a short temporary preview before navigation. | The surface is mainly app navigation or destination switching. | The content is only a short description that belongs in a tooltip. | There is only one revealable section and a simpler details disclosure is enough. |
| Required state | Selected-object state with source item highlighted and panel title naming the same object. | Closed state with a clear opener tied to a specific object or page section. | Resting trigger state with visible or accessible object identity. | All collapsed state with every section title visible. |
| Accessibility burden | Name the panel region from the selected object's title or a heading that includes the object identity. | Give the drawer a visible heading and expose it as the accessible name for the region or dialog-like surface. | Make the trigger keyboard focusable and expose a usable name for the referenced object. | Use native buttons for section controls and expose expanded or collapsed state. |
| Common misuse | Keeping the previous ticket summary in the persistent panel after the highlighted row has moved to a different ticket. | Using a drawer as an unlabeled junk panel for unrelated commands, navigation, filters, and help. | Using a hover card as the only place for required instructions or validation help. | Hiding content users must read sequentially before completing a task. |