| 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 panel slides over the table with the title Details, no close control, and no selected record name. | A hover card contains a long editable form, delete buttons, filters, and settings controls. | A page hides every required instruction behind plus icons with no headings, state, or expand-all route. |
| 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. | A user focuses @Maya Chen, reads the profile preview, moves the pointer into the card without it closing, presses Escape, and focus remains on the mention. | 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. | A page has several related sections and users do not need all details visible at once. |
| 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 | No selection state with a clear prompt or preserved last-selection rule. | 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. | Do not rely on hover card content as the only source of required information. | Use native buttons for section controls and expose expanded or collapsed state. |
| Common misuse | Showing a details panel with no selected-object identity. | 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. | Using divs or links as section toggles without button semantics or expanded state. |