Use master-detail for an adaptive list and detail navigation layout; use details panel for adjacent selected-object inspection, list view for the source list alone, and window splitter for user-controlled pane resizing.
Use master-detail for an adaptive list and detail navigation layout; use details panel for adjacent selected-object inspection, list view for the source list alone, and window splitter for user-controlled pane resizing.
Practice the judgment: Imagine this situation: The side-by-side layout changes selection but leaves the old item loaded in the detail pane. 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 | Master-detail | Details panel | List view | Window splitter |
|---|---|---|---|---|
| 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 | Adapt the same content relationship between side-by-side panes on wider screens and stacked list/detail navigation on narrower screens, with visible Back to list or equivalent return control in stacked mode. | 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. | Help the person reach a clear task outcome. |
| 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. | Every row has five unlabeled icon buttons, and the whole row also navigates. | Panes resize below readable width or height and hide critical controls. |
| 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 rotates a tablet and the app resets to the first list item, discarding the detail draft and scroll position. | Sorting the list silently clears the highlighted row while the panel continues to show an old ticket. | A user tries to preview a file but the row click opens navigation while the small trailing icon deletes the file. | 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. | Selected-object state with source item highlighted and panel title naming the same object. | 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 | Forgetting the stacked mobile return path from detail back to the master list. | Keeping the previous ticket summary in the persistent panel after the highlighted row has moved to a different ticket. | Putting too many independent controls in every row until the list becomes a keyboard trap. | Using a static separator line and calling it a splitter. |