📖 Notes
LESSON 19 OF 26
Common UI Patterns
Don't Reinvent What Users Already Know
Standard UI patterns and when to use each. Navigation bars, breadcrumbs, card layouts, modals, toast notifications.
Standard Patterns
Navigation, Cards, Modals, Forms
🧭
Navigation Bars
Persistent top or bottom bar for primary destinations
🍞
Breadcrumbs
Shows location within a hierarchy, aids backtracking
🗂️
Card Layouts
Groups related content into scannable, tappable units
🪟
Modals
Interrupts flow for a focused decision or input
🔔
Toast Notifications
Brief, non-blocking confirmation that auto-dismisses
Choosing the Right Pattern
- Use a modal when a decision must block further action (confirm delete, required input).
- Use a toast for low-stakes confirmations that don't need explicit dismissal ("Saved").
- Use breadcrumbs only when content is genuinely nested more than one level deep.
💡
Familiarity is a feature
Users transfer expectations from every other app they've used. A hamburger menu, a card grid, a modal — using the recognized pattern reduces the learning curve for your specific product.