| UI or UX | UI + UX - User-selectable arrangement of panes, regions, or workspace modes around one active task | UI + UX - User-configurable dashboard canvas with persisted widget composition | UI + UX - Page-level arrangement of coordinated status, metric, and analysis widgets | UI + UX - Persisted named presentation state for a data workspace | UI + UX - Moveable separator for resizing adjacent panes |
| UI guidance | Render layout control as an in-context segmented control, menu, or layout picker with named arrangements such as Split, Focus, Stacked, Inspector, or Reading, plus scope, preview, save, and reset indicators. | Expose a customization mode that separates normal dashboard reading from editing, with visible controls for adding widgets, removing widgets, moving widgets, resizing tiles, previewing responsive order, saving changes, canceling edits, and resetting to a default layout. | Arrange dashboard widgets into a purposeful page hierarchy with a named dashboard, scope, freshness, global filters, primary KPIs, secondary analysis, exceptions, and supporting tables or links placed according to monitoring priority. | Render saved views as named, selectable workspace presentations with visible owner or visibility, active state, saved layout mode, columns or fields, grouping, sort, filters, and last-updated metadata. | 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 user-controlled layout when the same task can be done more effectively with different pane arrangements, such as comparing list and detail, focusing on one record, placing an inspector beside content, or stacking regions on narrow screens. | Use custom dashboard when users need to compose a personal or role-specific dashboard from multiple widgets, data sources, saved views, filters, or shortcuts, then return to that arrangement across sessions. | Use dashboard layout when users need one page to monitor several related signals, compare current state against targets, spot exceptions, and decide which detailed view or workflow to open next. | Use saved view when users need to return to a complete operational presentation of a changing dataset rather than rebuilding columns, layout, grouping, filters, and sort every session. | Help the person reach a clear task outcome. |
| Good UI | A review workspace lets users switch between Split, Focus, and Stacked layouts, labels the current scope as This workspace, and keeps the selected case and draft visible after each switch. | A team lead opens Customize, sees selected widgets, available widgets, size controls, keyboard move buttons, unsaved changes, and a preview of how the dashboard will stack on mobile. | An operations dashboard opens with date range, region filter, last updated time, four KPI cards, an exception panel, a trend chart, and a priority table in a stable grid. | A support queue has saved views named My urgent tickets, Team backlog, and SLA breach risk, each showing columns, sort, filters, owner, and private or team visibility before users apply it. | 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 | A focus layout removes the activity pane from the DOM and loses the user's unsaved comment draft. | A dashboard claims to be custom but only lets users filter fixed widgets. | A responsive dashboard collapses filters and alerts below the fold while leaving decorative charts above the operational exceptions. | A saved view list mixes saved filters, saved searches, static exports, bookmarks, and recent pages under one generic Saved label. | Panes resize below readable width or height and hide critical controls. |
| Good UX | A support agent opens a case in Split layout, switches to Focus to write a long response, returns to Split, and the same case, filters, scroll position, and draft reply remain intact. | A manager adds the Escalations widget, moves it above the revenue chart, previews mobile order, saves as My support dashboard, and can reset to the team default later. | A manager changes Region to West, sees every tile show the same filtered scope and updated timestamp, then opens the exception table from the SLA breach card. | A manager opens SLA breach risk, sees the board layout, grouped Status lanes, five saved columns, and current result count, then changes density and saves a private copy instead of overwriting the team view. | 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 saves a personal inspector layout and later discovers it changed the team's default workspace arrangement. | A user rearranges a shared operations dashboard and accidentally overwrites the layout for the whole team. | A dashboard hides stale or partially refreshed widgets and users compare incompatible numbers. | A user changes one column while reviewing a team queue and accidentally updates the shared default for everyone. | A user drags the divider and the selected record disappears because the source pane collapses below its minimum usable width. |
| Best fit | Users work with multiple panes or regions around one active task and need different arrangements for comparison, editing, reading, or focus. | Users have different monitoring priorities and need a persistent personal or role-based dashboard arrangement. | Users need to monitor several related metrics, exceptions, and analyses together. | Users repeatedly return to a specific presentation of a changing data set. | Users need to compare, edit, inspect, or preview adjacent panes in one durable workspace. |
| Avoid when | The only need is changing row spacing, text size, theme, or zoom. | The dashboard must remain identical for everyone because it encodes a regulated process, operational standard, or safety-critical alert order. | Only one chart, table, status message, or record list is needed. | Only one current-session filter or sort choice needs to be changed. | The divider is only decorative or structural. |
| Required state | Default layout state with current layout name, scope, affected regions, and reset availability. | Read-only dashboard state with current layout name, owner or scope, active widgets, freshness, and customize entry point. | Default dashboard with name, purpose, global scope, active filters, freshness, KPI tier, sections, and widget grid. | Saved view list with active, private, team, shared, pinned, default, owner, last-updated, and result-count states. | Default split state with two labelled panes and a visible splitter position. |
| Accessibility burden | Expose layout name, scope, affected regions, hidden panes, reset availability, and managed state in text. | Expose customization mode, unsaved changes, dashboard scope, widget title, widget position, widget size, and permission state in text. | Give the dashboard a heading, purpose, filter summary, refresh status, and section headings that screen-reader users can navigate. | Use labelled controls for view name, visibility, layout, columns, grouping, filters, sort, density, and sharing settings. | Use role separator for a focusable moveable splitter and give it an accessible name that identifies the panes it separates. |
| Common misuse | Treating layout as a cosmetic preference while losing task state when panes hide or move. | Losing widget order on mobile or making keyboard order differ from the visible arrangement. | Filling a page with charts before defining dashboard purpose, audience, hierarchy, and decisions. | Saving current rows instead of presentation settings and dynamic criteria. | Using a static separator line and calling it a splitter. |