| UI or UX | UI + UX - Adaptive source list and detail layout with coordinated selection and navigation state | UI + UX - Persistent selected-object inspection panel | UI + UX - Vertical object-summary browsing surface | UI + UX - Moveable separator for resizing adjacent panes |
| UI guidance | Render a master-detail layout with a primary list or source pane, a detail pane that names the selected item, a visible selected-item indicator, and a clear empty-detail state when no item owns the detail. | 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 labelled vertical list where each row has a strong primary label, concise supporting text, metadata, status, optional leading media, and row-scoped actions with clear hit targets. | Render a window splitter as a visible, focusable moveable separator between adjacent panes with a clear resize affordance, accessible name, orientation, current value, minimum and maximum pane limits, and preserved pane headings. |
| UX guidance | Use master-detail when users move repeatedly between a collection of items and full detail content, and the detail can act as a navigable destination rather than only a small inspector. | 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 list view when scanning and opening object summaries is faster than comparing columns or inspecting large visual cards. | Use a window splitter when users need to tune workspace layout, compare content, inspect detail beside a source, or balance editing and preview space without leaving the current task. |
| Good UI | An inbox shows conversations in the left pane and the selected message thread in the right pane on desktop, then shows either the conversation list or selected thread with Back to inbox on phone. | 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 ticket list row shows TCK-2048 Database backup failed, a one-line incident summary, Critical status, owner, updated time, selected state, and a labelled More actions menu. | A mail workspace has a message list and reading pane separated by a labelled vertical splitter showing 42 percent list width, with arrow-key resizing and restore from collapse. |
| Bad UI | Selecting an order highlights one list item while the detail pane still shows a previous order. | A panel titled Details shows metrics from the previously selected record after the list selection changes. | A list row shows columns of owner, amount, due date, and status but no headers or column sort state. | A thin visual line between a table and details pane appears draggable but cannot be focused, named, or moved by keyboard. |
| Good UX | A user selects a case, scrolls its detail history, narrows the window to stacked mode, goes back to the case list, selects another case, and widening the window shows the new selected case beside the list. | 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 tickets to Critical, selects two rows, opens the details panel for one ticket, then clears the filter and the selected count and active ticket remain understandable. | A keyboard user focuses the separator, presses Right Arrow to widen the preview by 5 percent, presses Home to return to the minimum source pane, and focus remains on the splitter. |
| Bad UX | A user filters the master list after opening detail and the layout keeps showing a hidden case without saying it no longer matches the filter. | Sorting the list silently clears the highlighted row while the panel continues to show an old ticket. | A user selects rows, changes sort order, and the bulk action count still includes hidden rows without saying which rows are affected. | A user drags the divider and the selected record disappears because the source pane collapses below its minimum usable width. |
| Best fit | Users repeatedly choose items from a collection and work with a substantial detail destination. | Users repeatedly inspect selected records, tickets, alerts, files, assets, tasks, comments, or locations while staying in a work surface. | Users need to scan and act on a collection of objects using compact summaries. | Users need to compare, edit, inspect, or preview adjacent panes in one durable workspace. |
| Avoid when | The detail is only a short metadata summary. | The content is just a short temporary preview before navigation. | Users need to compare many records across shared attributes. | The divider is only decorative or structural. |
| Required state | Wide default state with master list, selected item, and detail pane visible together. | No selection state with a clear prompt or preserved last-selection rule. | Default list state with label or heading, row count or context, visible row summaries, and primary row identity. | Default split state with two labelled panes and a visible splitter position. |
| Accessibility burden | Name the master and detail regions with headings that describe the collection and the selected item. | Name the panel region from the selected object's title or a heading that includes the object identity. | Use semantic list markup for ordinary object lists; use listbox only when rows are options in a single control. | Use role separator for a focusable moveable splitter and give it an accessible name that identifies the panes it separates. |
| Common misuse | Calling a small metadata inspector master-detail when the detail cannot act as a destination. | Showing a details panel with no selected-object identity. | Using list view as a table without column headers or column-state feedback. | Using a static separator line and calling it a splitter. |