All patterns
Search by the problem you have, not the name of the interaction that fixes it. Press / to jump to search.
19 patterns
Command Palette
A palette that arrives as a modal over the page discards the one piece of context people had — where the search box was, and what it was part of.
NavigationProductivitySearchDashboard- Keyboard
- Touch
- Responsive
- Reduced motion
Mega Nav
Separate dropdowns per section make each one feel like a different place, so browsing across a product's navigation hides the fact that the sections are siblings.
NavigationProductivityDashboardOnboarding- Keyboard
- Touch
- Reduced motion
Quick Select
A dropdown for two or three choices makes you open a list, read it and aim at a row — three steps to flip something you already understood.
SelectionProductivityFilesEditor- Keyboard
- Touch
- Responsive
- Reduced motion
Voice Transcript
A voice note cannot be skimmed or searched, so there is no way to tell whether it is worth forty seconds until you have already spent them.
FeedbackMessagingMediaAccessibility- Keyboard
- Touch
- Responsive
- Reduced motion
Mode Switcher
A field that behaves differently depending on a mode set somewhere else lets people type the wrong kind of thing, because nothing in the field said which kind it wanted.
InputAIProductivitySearch- Keyboard
- Touch
- Responsive
- Reduced motion
Order Status
A status that only ever renders its current value makes people re-read the whole card to work out whether anything actually moved since they last looked.
FeedbackCommerceDashboard- Touch
- Responsive
- Reduced motion
Contextual Toolbar
A toolbar serving two jobs is either wide enough to show both at once and too big to sit over content, or split in two so you have to find the right one first.
LayoutAIMediaEditor- Keyboard
- Responsive
- Reduced motion
Invite Card
An invite sent to the wrong address cannot be taken back by the sender, and a bare text field gives you nothing to check before you commit.
InputFormsProductivityOnboarding- Keyboard
- Touch
- Responsive
- Reduced motion
Inline Overflow
A toolbar with more actions than fit has to hide some, and a dropdown moves them to a different surface where they stop feeling like siblings of the primary actions.
DisclosureProductivityEditorFiles- Keyboard
- Responsive
- Reduced motion
Inline Search
Search needs room to type and the browse filters are already using it, so one has to give — and sending search to its own screen takes the filters away with it.
NavigationSearchCommerceMedia- Keyboard
- Touch
- Responsive
- Reduced motion
Copy Feedback
Nothing distinguishes a successful copy from a missed click, so people press Copy repeatedly and still do not trust that it worked.
FeedbackProductivityAuthenticationDashboard- Keyboard
- Touch
- Responsive
- Reduced motion
Create Menu
A create button does not say what you can make, and a dropdown answers as a list you have to read in sequence to find the one item you came for.
SelectionProductivityDashboardEditor- Keyboard
- Touch
- Responsive
- Reduced motion
Editable Label
Renaming something usually means leaving for a settings screen, which hides the thing you are renaming at the moment you decide what to call it.
InputProductivityEditorForms- Keyboard
- Touch
- Responsive
- Reduced motion
Expanding Segments
An icon-only row is compact but unlabelled, and labelling every icon will not fit — so people cannot tell what the options are without hovering each one.
SelectionProductivityMessagingDashboard- Keyboard
- Touch
- Responsive
- Reduced motion
Speed Dial
A floating action button is reachable one-handed but says nothing about what it does, and a menu that answers that arrives as a detached panel outside the thumb arc.
DisclosureProductivityMediaFiles- Keyboard
- Touch
- Responsive
- Reduced motion
Split Actions
A generic add button hides what you can actually add, and a dropdown costs a click and covers the content underneath.
DisclosureProductivityDashboard- Keyboard
- Touch
- Responsive
- Reduced motion
Delete with Undo
Confirmation dialogs are answered reflexively, so people click through them and lose the thing anyway; deferring the commit is recoverable where a dialog is not.
ActionProductivityDashboardAuthentication- Keyboard
- Touch
- Responsive
- Reduced motion
Inline Confirm
A modal confirmation breaks flow and trains people to dismiss without reading, at which point it has stopped confirming anything.
FeedbackProductivityDashboard- Keyboard
- Touch
- Responsive
- Reduced motion
Splitting Accordion
An open accordion panel shares its container with every other row, so the boundary between the answer you opened and the questions you did not is ambiguous.
DisclosureProductivityOnboarding- Keyboard
- Touch
- Responsive
- Reduced motion