UI Design Patterns

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