UI/UX patterns
When to use each pattern, implementation details, and accessibility requirements.
Modal or a separate page?
Keep brief, contextual tasks in a dialog. Give complex work a page of its own.
When should a form show errors?
Explain constraints up front. Validate at a useful moment, then make recovery obvious.
Select menu or radio buttons?
Expose short lists. Use a select when space or a longer, familiar list makes it worthwhile.
One long form or multiple steps?
Split along meaningful task boundaries, not arbitrary field counts.
Toggle or checkbox?
Use toggles for immediate on/off settings. Use checkboxes for selections, agreements, or choices saved together.
Does this flow need a review step?
Let people check meaningful answers before committing to an important transaction.
Tabs or page navigation?
Use tabs for peer views in one context. Use links for distinct destinations.
When are breadcrumbs useful?
Show where a page belongs and offer a route to its parents.
Search, filters, or both?
Search finds items using words or phrases. Filters narrow the collection by predefined attributes.
Toast, banner, or inline message?
Match the message's placement and persistence to its importance and scope.
Spinner, skeleton, or progress bar?
Represent what is known about progress and keep the layout stable.
What should an error message say?
Explain the problem in plain language and preserve the work needed to recover.
What belongs in an empty state?
Distinguish a fresh start, no matches, loading, and a failed request. They need different responses.
Pagination or infinite scroll?
Choose based on whether users need a place they can return to or a continuous feed.
Table or cards?
Tables support comparison across shared attributes. Cards support browsing distinct items.
Accordion or visible content?
Hide secondary detail only when users can decide what to open from the heading.
Confirmation or undo?
Use undo for safely reversible changes. Confirm specific, irreversible consequences.
Button or link?
Links lead to resources or locations. Buttons trigger actions.
No matching patterns
Try another term or clear the filters.