| UI or UX | UI + UX - Button-controlled popup menu of actions or links | UI + UX - Modal command surface | UI + UX - Single-choice dropdown control | UI + UX - Consequential alert decision |
| UI guidance | Render a named button trigger, visible opened state, controlled popup, menu items, active item styling, disabled item state, separator or section grouping, and a safe way to distinguish destructive commands. | 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 persistent label, hint text, native closed value, finite option list, selected option, and validation state. | Render an alert-style modal decision with a specific title, consequence description, safe cancellation, and a destructive action label that names the object or scope. |
| UX guidance | Use a menu button when users need to reveal a short contextual set of commands or links from a single trigger without leaving the current object or toolbar context. | Accelerate expert navigation and repeated actions across a large product while preserving ordinary navigation for novice and low-frequency users. | Help users choose one value from a moderate known list without showing every option permanently. | Interrupt users only when the action has a meaningful consequence that cannot be safely recovered afterward. |
| Good UI | A table row has a Report actions button that opens a compact menu with Open, Rename, Duplicate, Archive, and an unavailable Export item. | Centered command surface with input, shortcut hint, scope chip, grouped commands, command type labels, and a visible active row. | Persistent label, hint text, visible selected value, readable options, and clear required validation state. | Delete Research archive? explains that 14 notes and shared links will be permanently removed, offers Keep archive, and labels the danger action Delete archive. |
| Bad UI | An unlabeled ellipsis opens a loose panel of buttons, inputs, links, toggles, and destructive commands with no active item. | Huge branded modal that buries the input below decorative content. | Placeholder as the only label. | A popup says Are you sure? with OK and Cancel but does not name the project, notes, or irreversible outcome. |
| Good UX | A user opens Report actions, arrows to Duplicate report, activates it, and focus returns to the Report actions trigger with a status update. | 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. | Users can open, scan, choose one value, and review the selected value after close. | Cancel, Escape, and Keep archive leave the archive unchanged and return focus to Delete archive. |
| Bad UX | A user tabs into a menu and lands in a text input because the menu contains unrelated form controls. | Palette is the only way to reach important navigation. | Hiding two obvious critical choices in a dropdown. | Every archive, filter, and dismiss action opens the same confirmation until users click through automatically. |
| Best fit | A local object or toolbar has three to eight secondary commands. | Users need to traverse a broad product surface quickly. | The user chooses one option from a moderate known list. | The action is destructive, irreversible, costly, security-sensitive, privacy-affecting, or externally visible. |
| Avoid when | The job is choosing a form value, selecting several values, or browsing a long list. | The app has only a few obvious actions. | The option set is short and comparison matters. | The action is routine and easily reversible. |
| Required state | Closed trigger state with visible or accessible name. | Closed state with discoverable trigger. | Closed state with empty option or current selected value. | Pre-action state with an explicit consequential trigger. |
| Accessibility burden | Use an actual button for the trigger when possible. | Use dialog semantics with a clear name and modal behavior when the rest of the page is inert. | Prefer native semantics or implement equivalent name, role, state, and keyboard behavior. | Use alertdialog semantics or platform equivalent when the decision is urgent and requires a response. |
| Common misuse | Using a menu button for long value selection that should be a select, listbox, combobox, or multi-select. | Hiding basic navigation behind a keyboard-only palette. | Custom select with no keyboard support or hidden selected state. | Asking users to confirm every routine action until they stop reading. |