UI Design Patterns
A comprehensive guide to common user interface design patterns, component patterns, interaction patterns, and accessibility best practices for building modern web and mobile applications.
When to Use This Skill
Use this skill when you need to:
- Design User Interfaces: Create intuitive and user-friendly interface designs
- Implement UI Components: Build reusable interface components following established patterns
- Solve UX Problems: Address common user experience challenges with proven solutions
- Ensure Accessibility: Make interfaces accessible to all users including those with disabilities
- Build Design Systems: Create consistent component libraries and design systems
- Review Interfaces: Evaluate existing interfaces for usability and best practices
- Prototype Interactions: Design and implement interactive UI behaviors
- Optimize Navigation: Structure information architecture and navigation flows
- Handle Form Design: Create effective forms with proper validation and feedback
- Display Data: Present complex data in clear, scannable formats
- Provide Feedback: Communicate system state and user actions effectively
- Responsive Design: Adapt interfaces for different screen sizes and devices
Core Concepts
UI Patterns
UI patterns are reusable solutions to common design problems. They provide:
- Consistency: Users recognize familiar patterns across applications
- Efficiency: Proven solutions save design and development time
- Usability: Patterns are tested and refined through widespread use
- Communication: Shared vocabulary for designers and developers
- Accessibility: Established patterns often include accessibility considerations
Design Systems
A design system is a collection of reusable components, patterns, and guidelines:
- Component Library: Reusable UI building blocks
- Design Tokens: Variables for colors, spacing, typography
- Usage Guidelines: When and how to use each component
- Accessibility Standards: WCAG compliance requirements
- Code Examples: Implementation references
- Documentation: Comprehensive guides and principles
Atomic Design Methodology
Breaking interfaces into atomic units:
- Atoms: Basic building blocks (buttons, inputs, labels)
- Molecules: Simple combinations of atoms (search field with button)
- Organisms: Complex components (headers, forms, cards)
- Templates: Page-level layouts
- Pages: Specific instances with real content
Navigation Patterns
1. Tabs Pattern
Organize content into multiple panels shown one at a time.
When to Use:
- Related content categories at the same hierarchy level
- Limited number of sections (3-7 tabs ideal)
- User needs to switch between views frequently
- Screen space is limited
Anatomy:
[Tab 1] [Tab 2] [Tab 3]
─────────────────────────
Content for active tab
Best Practices:
- Highlight active tab clearly
- Keep tab labels short and descriptive
- Maintain state when switching tabs
- Use icons + text for clarity
- Ensure keyboard navigation works
- Consider mobile alternatives (dropdown, segmented control)
Accessibility:
- Use ARIA
role="tablist", role="tab", role="tabpanel"
- Implement arrow key navigation
- Set
aria-selected and aria-controls
- Ensure tab panels are focusable
Example HTML:
<div role="tablist" aria-label="Content sections">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
Overview
</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
Details
</button>
<button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3">
Settings
</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
Overview content...
</div>
2. Accordion Pattern
Vertically stacked sections with expand/collapse functionality.
When to Use:
- Long pages with distinct sections
- Progressive disclosure of information
- FAQ sections
- Settings panels
- Limited screen space
Types:
- Single Expand: Only one panel open at a time
- Multi Expand: Multiple panels can be open simultaneously
- Nested: Accordions within accordions
Best Practices:
- Use clear, descriptive headers
- Provide visual indicators (chevron, +/-)
- Consider default state (collapsed vs first open)
- Animate transitions smoothly (200-300ms)
- Maintain content when collapsed
- Allow keyboard control
Accessibility:
- Use
<button> for headers
- Set
aria-expanded attribute
- Use
aria-controls to link header and panel
- Ensure keyboard navigation (Enter, Space, Arrow keys)
- Provide proper heading hierarchy
Example Structure:
<div class="accordion">
<h3>
<button aria-expanded="false" aria-controls="section-1">
Section Title
<span class="icon" aria-hidden="true">▼</span>
</button>
</h3>
<div id="section-1" hidden>
<p>Section content...</p>
</div>
</div>
3. Breadcrumbs Pattern
Show user's location in site hierarchy.
When to Use:
- Deep site hierarchies (3+ levels)
- E-commerce category navigation
- Documentation sites
- Multi-step processes
Best Practices:
- Show current location clearly
- Make previous levels clickable
- Use appropriate separators (>, /, →)
- Keep labels concise
- Consider mobile truncation
- Place at top of page
Accessibility:
- Use
<nav> with aria-label="Breadcrumb"
- Mark current page with
aria-current="page"
- Provide sufficient color contrast
- Ensure keyboard navigation
Example:
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/products/electronics">Electronics</a></li>
<li aria-current="page">Laptops</li>
</ol>
</nav>
4. Pagination Pattern
Navigate through large sets of content split across pages.
Types:
- Numbered: Show page numbers (1, 2, 3...)
- Load More: Button to load additional content
- Infinite Scroll: Automatically load as user scrolls
- Prev/Next: Simple navigation between pages
When to Use:
- Search results
- Product listings
- Blog archives
- Data tables
Best Practices:
- Show current page clearly
- Provide Previous/Next controls
- Include First/Last page links
- Show total page count or results
- Use ellipsis for skipped pages (1 ... 5 6 7 ... 20)
- Maintain scroll position appropriately
- Consider load time and performance
Accessibility:
- Use
<nav> with aria-label="Pagination"
- Mark current page with
aria-current="page"
- Disable non-functional links properly
- Provide text alternatives for icon-only controls
5. Menu Patterns
Dropdown Menu
Reveals additional options on click or hover.
Best Practices:
- Prefer click over hover for mobile compatibility
- Add small delay before closing on hover
- Indicate submenu with arrow icon
- Keep menu depths shallow (2-3 levels max)
- Position intelligently to avoid viewport overflow
Mega Menu
Large dropdown showing multiple columns and categories.
When to Use:
- E-commerce sites with many categories
- Sites with complex information architecture
- When standard dropdown feels cramped
Best Practices:
- Use grid layout for organization
- Include visual elements (icons, images)
- Group related items
- Provide clear visual hierarchy
- Close on outside click or Esc key
Hamburger Menu
Collapsible menu for mobile navigation.
Best Practices:
- Use recognizable icon (three horizontal lines)
- Provide label for clarity ("Menu")
- Animate opening/closing
- Disable body scroll when open
- Include close button in menu
- Consider alternatives for better discoverability
Accessibility:
- Use proper ARIA roles and states
- Support keyboard navigation
- Announce menu state to screen readers
- Ensure focus management
Form Patterns
1. Input Validation Pattern
Provide feedback on user input correctness.
Validation Types:
- Required Fields: Must be completed
- Format Validation: Email, phone, URL patterns
- Length Validation: Min/max characters
- Range Validation: Numeric ranges
- Custom Rules: Business logic validation
Timing:
- On Submit: Traditional approach, all errors at once
- On Blur: Validate when leaving field
- On Change: Real-time validation as typing
- Hybrid: Combine ap
