Use a keyboard shortcut for a direct key combination that invokes one known command. Use command palette for searchable command discovery, menu menubar for persistent command grouping, toolbar for visible view-scoped controls, and undo or redo for edit-history semantics.
Use a keyboard shortcut for a direct key combination that invokes one known command. Use command palette for searchable command discovery, menu menubar for persistent command grouping, toolbar for visible view-scoped controls, and undo or redo for edit-history semantics.
Practice the judgment: Imagine this situation: A hidden shortcut is the only way to save, submit, search, delete, or navigate to an important area. 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 | Keyboard shortcut | Command palette | Menu / menubar | Toolbar | Undo | Redo |
|---|---|---|---|---|---|---|
| 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. | Help the person reach a clear task outcome. | Let users move quickly through frequent reversible actions, then recover from mistakes after seeing the result. | Help the person reach a clear task outcome. |
| 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 global D key deletes records while users type in comments or dictate with speech input. | 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. | Overflow hides essential commands or changes command order unpredictably. | Undo action disappears before users can activate it. | Redo silently replays against the wrong selected object. |
| 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 speech input user says a sentence containing g and d, triggering global shortcuts that navigate away and delete a draft. | Palette is the only way to reach important navigation. | A user presses Escape from a submenu and focus jumps to the browser chrome instead of the parent menu item or editor context. | A keyboard user must tab through twenty toolbar buttons before reaching the editor body. | The UI promises undo for a side effect that has already notified external recipients. | 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. | Recovery would restore only part of the user's lost work. | The action has irreversible external side effects. |
| 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. | Undo-available state after a reversible edit. |
| 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. | Using a toolbar for primary app navigation or unrelated destinations. | Restoring only part of the prior state while implying full recovery. | Leaving redo enabled after a new edit invalidates the undone future. |