Dashboard patterns
9 patterns built for dashboard interfaces.
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
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
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
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
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