| UI or UX | UI + UX - Direct key combination that activates a known command, focus target, or mode | UI + UX - Modal command surface | UI + UX - Persistent composite command bar with menus and submenus | UI + UX - View-scoped command strip for related controls | UX - Post-action recovery behavior | UX - Forward edit-history replay |
| UI guidance | Render keyboard shortcuts as discoverable command hints near the visible command, in shortcut help, in menus or toolbars when space allows, and in platform-specific form such as Command+S on macOS and Control+S on Windows. | Render a compact dialog-like command surface with a search input, current scope, typed command mode, active result, command metadata, and empty state. | Render a labelled command menubar with stable top-level command groups, visible focused item, open submenu, menu items, checked items, disabled items, separators, shortcut hints, and nested submenu indicators. | Render a toolbar as a labelled command region attached to the view, editor, canvas, table, or selected object it controls, with grouped buttons, toggle buttons, menu buttons, separators, compact inputs, overflow, and current state visible where relevant. | Show a named recovery affordance after the completed action, such as Undo delete for a specific task, near the result or in a consistent status region. | Show Redo as a visible command, menu item, toolbar control, or command-palette row whose enabled state matches the current redo stack. |
| UX guidance | Use keyboard shortcuts as accelerators for frequent, reversible, well-understood commands that already have visible controls or reachable command surfaces. | Accelerate expert navigation and repeated actions across a large product while preserving ordinary navigation for novice and low-frequency users. | Use a menu or menubar when users benefit from a stable command system that organizes many related functions into predictable groups such as File, Edit, View, Insert, and Format. | Use a toolbar when users repeatedly apply related commands to the same view or selection and need fast visible access without opening a modal command surface. | Let users move quickly through frequent reversible actions, then recover from mistakes after seeing the result. | Use redo to let users recover from undoing too far without recreating work by hand. |
| Good UI | A document editor Save button shows Command+S on macOS and Control+S on Windows, disables the shortcut while a blocking validation dialog is open, and announces Saved draft. | Centered command surface with input, shortcut hint, scope chip, grouped commands, command type labels, and a visible active row. | A document editor exposes File, Edit, View, and Insert as a persistent menubar, with Save, Rename, Export, Undo, Paste unavailable, Show comments checked, and Theme as a nested submenu. | A document editor toolbar labels the current document, groups Undo and Redo, formatting toggles, alignment controls, Insert link, and More, with Bold shown pressed for the selected text. | Deleting Quarterly report removes it from the list and shows a recovery panel saying Quarterly report deleted with an Undo task button. | A document toolbar shows Undo and Redo; Redo is disabled until the user undoes Move Summary before Risk. |
| Bad UI | A product hides Submit behind Control+Enter with no visible button, hint, focus rule, or mobile equivalent. | Huge branded modal that buries the input below decorative content. | A marketing site header marks Home, Products, Blog, Pricing, and Sign out as a menubar but behaves like normal links. | A toolbar contains Back, Save, Delete, Pricing, Account, Filter, and Help with no shared scope or grouping. | A tiny x removes an item with no object-specific recovery label. | A Redo button remains enabled after the user types new content, with no indication that the old future branch is gone. |
| Good UX | A user presses Command+S in an editor, sees Saving then Saved, focus remains in the editor, and the same Save command remains available in the toolbar and menu. | Keyboard shortcut or visible trigger opens the palette, focus lands in the command input, arrows move the active row, and Enter activates the highlighted safe command. | A user tabs into File, presses Right Arrow to Edit, Down Arrow to open Edit commands, arrows to Undo, activates it, and focus returns to the editor canvas. | A keyboard user tabs once into the editor toolbar, uses Right Arrow to move from Bold to Italic, presses Space to toggle Italic, and focus remains in the toolbar while selected text stays selected. | Undo restores the deleted task to the list and reports Quarterly report restored. | A user moves a heading, chooses Undo, sees Redo move heading become available, and redoes the same move against the same document outline. |
| Bad UX | A screen reader user cannot discover the shortcut because it is not exposed in help, command labels, or aria-keyshortcuts. | Palette is the only way to reach important navigation. | A user expects Right Arrow to move from File to Edit, but the page scrolls because focus is not managed as a composite widget. | A keyboard user must tab through twenty toolbar buttons before reaching the editor body. | A second delete overwrites the first recoverable item without explaining which action Undo affects. | A user undoes a move, selects a different heading, presses Redo, and the product applies the old operation to the wrong target. |
| Best fit | Users repeat a known command often enough that memorized keyboard acceleration saves meaningful time. | Users need to traverse a broad product surface quickly. | A complex application or editor has many stable commands organized into known groups. | A view, editor, canvas, media surface, table, or selection needs repeated related commands close to the work area. | The action is common and mistakes are likely. | Users perform reversible sequences of edits and can undo too far. |
| Avoid when | The command is rare, novice-oriented, high-risk, or hard to explain before execution. | The app has only a few obvious actions. | The interface is ordinary site or product navigation. | There are only one or two actions that should be ordinary buttons. | The action has external side effects that cannot be recalled. | The system cannot reliably store or replay the undone operation. |
| Required state | Visible command with shortcut hint. | Closed state with discoverable trigger. | Persistent closed menubar state with labelled top-level command groups. | Default toolbar with label, visible scope, grouped controls, and focusable entry point. | Normal state before the user action. | No-redo state before any undo has happened. |
| Accessibility burden | Make all shortcut outcomes available through visible controls or reachable command surfaces. | Use dialog semantics with a clear name and modal behavior when the rest of the page is inert. | Use role menubar for a persistent application command bar and role menu for submenus. | Use role toolbar only for a cohesive group of controls whose grouping helps users, and give each toolbar a clear accessible name. | Make the undo control keyboard reachable and programmatically identifiable. | Expose Redo as a named button, menu item, or command row when editing commands are visible. |
| Common misuse | Making a shortcut the only path to a primary command. | Hiding basic navigation behind a keyboard-only palette. | Using role menubar for a normal website header or product navigation row. | Labelling any horizontal button row as a toolbar without shared scope or keyboard behavior. | Offering undo for an action that cannot actually be reversed. | Leaving redo enabled after a new edit invalidates the undone future. |