ui-design-patterns

What this skill does

# 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**:
```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**:
```html
<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**:
```html
<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.