| UI or UX | UI + UX - Persistent rendered-content preview pane | UI + UX - Persistent selected-object inspection panel | UI + UX - Rich preview surface on hover or focus | UI + UX - Supplemental edge panel for current-context detail or light actions |
| UI guidance | Render a preview panel as a durable side-by-side region that shows the selected file, message, media, attachment, or document body while keeping the source list, grid, search result, inbox, or asset browser visible. | 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 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 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. |
| UX guidance | Use a preview panel when users need to inspect content across several nearby items without repeatedly opening and closing full viewers. | 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 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 drawers to preserve parent-page context while users inspect supplemental detail or perform simple adjacent actions. |
| Good UI | A document repository selects Forecast.pdf in the file list and shows page 2 in a right preview panel with page, zoom, fit width, blocked-file, download, and Open full preview controls. | 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. | Hovering or focusing @Maya Chen opens a card with avatar, role, local time, current project, recent activity, and View profile link. | 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. |
| Bad UI | A side panel titled Preview shows only owner, modified date, and file size when reviewers need to inspect the contract body. | A panel titled Details shows metrics from the previously selected record after the list selection changes. | A hover card contains a long editable form, delete buttons, filters, and settings controls. | A panel slides over the table with the title Details, no close control, and no selected record name. |
| Good UX | A reviewer arrows through invoice files, the preview updates in place, page and zoom reset only when appropriate, and focus remains in the file list until a preview control is chosen. | 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 focuses @Maya Chen, reads the profile preview, moves the pointer into the card without it closing, presses Escape, and focus remains on the mention. | 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. |
| Bad UX | The first page of a previous PDF stays visible while a new file is still loading, causing the user to approve the wrong attachment. | Sorting the list silently clears the highlighted row while the panel continues to show an old ticket. | The card disappears while the pointer travels from the mention into the preview. | The drawer keeps showing Claim C-1042 after the user selects Claim C-1043 in the table. |
| Best fit | Users repeatedly inspect files, messages, PDFs, images, videos, audio, invoices, contracts, designs, or attachments from a list or grid. | Users repeatedly inspect selected records, tickets, alerts, files, assets, tasks, comments, or locations while staying in a work surface. | Users need to inspect object metadata before choosing whether to open a link, mention, file, row, issue, or reference. | Users need to inspect object detail, metadata, comments, history, or light actions while staying on the current page. |
| Avoid when | Only structured metadata or activity is needed. | The content is just a short temporary preview before navigation. | The content is only a short description that belongs in a tooltip. | The surface is mainly app navigation or destination switching. |
| Required state | No selection state that asks users to choose a file, message, or media item. | No selection state with a clear prompt or preserved last-selection rule. | Resting trigger state with visible or accessible object identity. | Closed state with a clear opener tied to a specific object or page section. |
| Accessibility burden | Name the preview region from the selected item's file name, message subject, or media title. | Name the panel region from the selected object's title or a heading that includes the object identity. | Do not rely on hover card content as the only source of required information. | Give the drawer a visible heading and expose it as the accessible name for the region or dialog-like surface. |
| Common misuse | Showing metadata in a preview panel when users need the document, message, or media body. | Showing a details panel with no selected-object identity. | Using a hover card as the only place for required instructions or validation help. | Using a drawer as an unlabeled junk panel for unrelated commands, navigation, filters, and help. |