| UI or UX | UI + UX - Moveable separator for resizing adjacent panes | UI + UX - Persistent selected-object inspection panel | UI + UX - Supplemental edge panel for current-context detail or light actions | UI + UX - Persistent local hierarchy at the side of content |
| UI guidance | 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. | 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 vertical navigation region beside the main content that exposes the current area's parent, child, and optional grandchild pages with a clear active indicator. |
| UX guidance | 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. | 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 side navigation to help users move within a complex section without losing the current page's position in that section. |
| Good UI | 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. | 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. | A settings page shows Account, Billing, Team, and Security in a left rail with Security expanded and Audit log marked as current. |
| Bad UI | A thin visual line between a table and details pane appears draggable but cannot be focused, named, or moved by keyboard. | 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 sidebar mixes Dashboard, Reports, Sign out, Help, Team, API, Billing, and Marketing with no section grouping. |
| Good UX | 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. | 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. | Users open Billing, switch to Invoices, then return to Security and see the Security group still expanded. |
| Bad UX | A user drags the divider and the selected record disappears because the source pane collapses below its minimum usable width. | 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. | Users must reopen a drawer every time they move between sibling pages in the same desktop section. |
| Best fit | Users need to compare, edit, inspect, or preview adjacent panes in one durable workspace. | 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. | A product area has several related pages arranged in a visible hierarchy. |
| Avoid when | The divider is only decorative or structural. | The content is just a short temporary preview before navigation. | The surface is mainly app navigation or destination switching. | The product only has a few pages and does not need a hierarchy. |
| Required state | Default split state with two labelled panes and a visible splitter position. | 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. | Default state with the local section hierarchy visible beside content. |
| Accessibility burden | Use role separator for a focusable moveable splitter and give it an accessible name that identifies the panes it separates. | 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. | Use a labeled navigation landmark that distinguishes local side navigation from primary navigation. |
| Common misuse | Using a static separator line and calling it a splitter. | Showing a details panel with no selected-object identity. | Using a drawer as an unlabeled junk panel for unrelated commands, navigation, filters, and help. | Duplicating global navigation links in the side navigation. |