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

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 approaches for best UX

Best Practices:

• Mark required fields clearly (asterisk, "required" label)
• Provide inline error messages near fields
• Use clear, helpful error messages
• Show success states when appropriate
• Group related errors
• Disable submit until form is valid (optional)
• Preserve user input when showing errors
• Support browser autofill

Error Message Guidelines:

• Be specific about the problem
• Explain how to fix it
• Use friendly, non-technical language
• Avoid blame ("You entered..." → "Email format invalid")

Visual Indicators:

• Red border/background for errors
• Green for success/valid
• Icons to reinforce state
• Sufficient color contrast

Accessibility:

• Use aria-invalid="true" for invalid fields
• Link errors with aria-describedby
• Announce errors to screen readers
• Ensure error messages are programmatically associated

Example:

<div class="form-field">
  <label for="email">
    Email Address <span aria-label="required">*</span>
  </label>
  <input
    type="email"
    id="email"
    aria-invalid="true"
    aria-describedby="email-error"
    required
  />
  <div id="email-error" class="error-message" role="alert">
    Please enter a valid email address
  </div>
</div>

2. Multi-Step Forms Pattern

Break long forms into multiple steps or pages.

When to Use:

• Complex forms with many fields
• Logical grouping of related information
• Onboarding flows
• Checkout processes
• User registration

Components:

• Progress Indicator: Show current step and total steps
• Step Navigation: Move between steps
• Review Step: Summary before submission
• Save Draft: Allow returning later

Best Practices:

• Keep steps focused on single topic
• Show progress clearly
• Allow backward navigation
• Validate each step before proceeding
• Save progress automatically
• Provide way to skip optional steps
• Show time estimate if possible
• Use descriptive step titles

Progress Indicators:

• Linear steps (1 → 2 → 3 → 4)
• Step labels with numbers
• Percentage completion
• Visual timeline

Accessibility:

• Use aria-label for step indicators
• Announce step changes
• Ensure keyboard navigation works
• Mark completed/current/upcoming steps

3. Inline Editing Pattern

Edit content directly in place without separate form.

When to Use:

• Spreadsheet-like interfaces
• Quick edits to existing content
• Data tables
• User profiles
• Settings pages

Interaction Modes:

• Click to Edit: Click field to make editable
• Always Editable: Fields always in edit mode
• Edit Button: Explicit button to enter edit mode
• Row/Item Edit: Edit entire row or item at once

Best Practices:

• Provide clear visual feedback for editable areas
• Show edit mode clearly (border, background change)
• Include Save/Cancel actions
• Auto-save on blur (optional)
• Validate before saving
• Show loading state during save
• Handle errors gracefully
• Keyboard shortcuts (Enter to save, Esc to cancel)

Visual States:

• Default: Shows content, hints at editability
• Hover: Indicate interactivity
• Edit: Clear input/editing interface
• Saving: Loading indicator
• Saved: Brief success confirmation

Accessibility:

• Use semantic HTML elements
• Provide clear labels
• Announce state changes
• Support keyboard-only interaction

4. Search Patterns

Autocomplete/Typeahead

Show suggestions as user types.

Best Practices:

• Debounce input (300ms delay)
• Highlight matching characters
• Show both recent and relevant results
• Limit number of suggestions (5-10)
• Allow keyboard navigation (arrows, Enter)
• Clear suggestions on Esc
• Show "No results" state
• Include search button as fallback

Accessibility:

• Use role="combobox" and aria-autocomplete
• Announce suggestion count
• Use aria-activedescendant for highlighted option
• Ensure screen reader support

Filtering

Narrow results based on criteria.

Types:

• Faceted Search: Multiple filter categories
• Tag Filters: Select/deselect tags
• Range Filters: Sliders for numeric ranges
• Date Filters: Date pickers or presets

Best Practices:

• Show active filters clearly
• Display result count
• Allow clearing individual or all filters
• Update results in real-time or with Apply button
• Preserve filter state in URL
• Provide filter presets for common queries

5. Form Layout Patterns

Single Column

Best for mobile and simplicity.

Advantages:

• Easier to scan vertically
• Better mobile experience
• Reduces cognitive load
• Higher completion rates

Multi-Column

Use for related fields or space efficiency.

Best Practices:

• Keep related fields together
• Left-align labels
• Use for short forms only
• Stack on mobile

Label Positioning

• Top Labels: Fastest completion, best for mobile
• Left Labels: Space-efficient, good for data entry
• Inline Labels: Placeholder-style (use carefully)

Data Display Patterns

1. Table Pattern

Display structured data in rows and columns.

When to Use:

• Comparing data across multiple dimensions
• Large datasets requiring sorting/filtering
• Detailed data requiring precision
• Admin interfaces and dashboards

Essential Features:

• Sorting: Click headers to sort columns
• Filtering: Search or filter by column
• Pagination: Handle large datasets
• Row Selection: Checkboxes for bulk actions
• Responsive: Adapt for mobile screens

Advanced Features:

• Column Resizing: Drag to adjust width
• Column Reordering: Rearrange columns
• Frozen Columns: Keep headers/first column visible
• Expandable Rows: Show additional details
• Inline Editing: Edit cells directly
• Export: Download as CSV/Excel

Best Practices:

• Left-align text, right-align numbers
• Use consistent formatting
• Highlight on hover
• Show loading states
• Handle empty states
• Provide clear sorting indicators
• Use zebra striping sparingly
• Avoid horizontal scrolling when possible

Responsive Strategies:

• Horizontal Scroll: Simple but less ideal
• Card View: Transform rows into cards
• Priority Columns: Hide less important columns
• Expandable Rows: Hide details until expanded
• Comparison View: Show 2-3 items side-by-side

Accessibility:

• Use semantic <table>, <thead>, <tbody>, <th>, <td>
• Add scope attribute to headers
• Provide table caption
• Use aria-sort for sortable columns
• Ensure keyboard navigation for interactive elements

2. Card Pattern

Container for related information with visual hierarchy.

When to Use:

• Product listings
• User profiles
• Dashboard widgets
• Content previews
• Mixed content types

Anatomy:

• Image/Visual: Hero image or icon
• Header: Title and metadata
• Body: Description or details
• Actions: Buttons or links
• Footer: Supplementary info

Variations:

• Product Card: Image, title, price, add to cart
• User Card: Avatar, name, bio, follow button
• Article Card: Thumbnail, headline, excerpt, read time
• Stat Card: Number, label, trend indicator

Best Practices:

• Consistent card sizes in grid
• Clear visual hierarchy
• Adequate padding and spacing
• Hover states for interactivity
• Limit actions to 1-2 primary actions
• Use subtle shadows for depth
• Ensure touch targets are large enough (44x44px min)

Grid Layouts:

• Responsive columns (1 on mobile, 2-4 on desktop)
• Equal height cards or masonry layout
• Consistent gaps between cards

Accessibility:

• Use semantic HTML
• Provide alt text for images
• Ensure sufficient contrast
• Make entire card clickable when appropriate
• Use heading tags for titles

3. List Pattern

Sequential display of similar items.

Types:

• Simple List: Text-only items
• Detailed List: Multiple lines per item
• Interactive List: Clickable/selectable items
• Grouped List: Organized by categories
• Inbox List: Messages with preview, time, status

Best Practices:

• Clear visual separation between items
• Consistent item height or natural flow
• Show item count
• Highlight selected items
• Provide quick actions
• Support multi-select when appropriate
• Implement virtual scrolling for long lists

Accessibility:

• Use semantic list elements (<ul>, <ol>, <li>)
• Provide unique IDs for items
• Announce selection changes
• Support keyboard navigation

4. Grid Pattern

Items arranged in rows and columns.

When to Use:

• Image galleries
• Product catalogs
• App launchers
• Icon sets
• Media libraries

Grid Types:

• Fixed Grid: Consistent item sizes
• Masonry: Variable heights, Pinterest-style
• Responsive Grid: Adapts to screen size

Best Practices:

• Use CSS Grid or Flexbox
• Maintain aspect ratios
• Implement lazy loading for images
• Provide grid/list view toggle
• Consistent gaps
• Handle empty states

Responsive Behavior:

Mobile: 1-2 columns
Tablet: 2-4 columns
Desktop: 4-6 columns

5. Dashboard Pattern

Overview of key metrics and data visualizations.

Components:

• KPI Cards: Key metrics with trends
• Charts: Line, bar, pie, area charts
• Tables: Detailed data
• Activity Feeds: Recent events
• Quick Actions: Common tasks

Layout Strategies:

• Fixed Layout: Predetermined positions
• Draggable Widgets: User-customizable
• Responsive Grid: Adapts to screen size

Best Practices:

• Prioritize most important metrics
• Use consistent timeframes
• Provide context (comparisons, trends)
• Enable drilling down for details
• Update data in real-time or show last update time
• Support customization
• Export/share capabilities

Feedback Patterns

1. Toast/Snackbar Pattern

Brief, temporary message about system state or action result.

When to Use:

• Confirm action completion (saved, deleted, sent)
• Show brief notifications
• Non-critical errors
• Undo opportunities

Best Practices:

• Display for 3-7 seconds
• Position consistently (bottom center or top right)
• One toast at a time, or queue multiple
• Provide dismiss action
• Avoid blocking important content
• Keep message concise
• Use appropriate colors (success: green, error: red, info: blue)
• Offer undo for destructive actions

Don't Use For:

• Critical errors requiring user action
• Information user must read
• Multiple simultaneous messages
• Long messages

Accessibility:

• Use role="status" or role="alert"
• Announce to screen readers
• Don't auto-dismiss too quickly
• Provide manual dismiss option

Example Structure:

<div class="toast" role="status" aria-live="polite">
  <span>Settings saved successfully</span>
  <button aria-label="Close notification">×</button>
</div>

2. Modal/Dialog Pattern

Overlay that focuses user attention on specific task or information.

Types:

• Alert Dialog: Important message requiring acknowledgment
• Confirmation Dialog: Yes/No decisions
• Form Dialog: Input collection
• Lightbox: Image/media viewer

When to Use:

• Critical decisions
• Focus on single task
• Collect required information
• Interrupt destructive actions
• Display full-size media

Best Practices:

• Dim background content (overlay)
• Disable background interaction
• Provide clear close option (X button, Cancel, Esc key)
• Focus first input or close button on open
• Return focus to trigger element on close
• Keep content concise
• Position in viewport center
• Prevent body scroll when open
• Avoid modal inception (modal within modal)

Accessibility:

• Use role="dialog" or role="alertdialog"
• Set aria-modal="true"
• Use aria-labelledby and aria-describedby
• Implement focus trap
• Support Esc to close
• Announce to screen readers

Structure:

<div class="modal-overlay">
  <div role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <h2 id="modal-title">Confirm Deletion</h2>
    <p>Are you sure you want to delete this item?</p>
    <div class="modal-actions">
      <button>Cancel</button>
      <button class="danger">Delete</button>
    </div>
  </div>
</div>

3. Loading States Pattern

Indicate ongoing process or data fetching.

Types:

• Spinners: Circular or linear progress
• Progress Bars: Show completion percentage
• Skeleton Screens: Content placeholders
• Shimmer Effect: Animated placeholder
• Inline Loaders: Within buttons or sections

When to Use:

• Page loading
• API requests
• File uploads
• Background processing
• Infinite scroll loading

Best Practices:

• Show immediately (within 100ms)
• Indicate progress when possible
• Provide estimated time for long operations
• Allow cancellation when appropriate
• Use skeleton screens for better perceived performance
• Avoid blocking entire UI unnecessarily
• Show partial content as it loads

Skeleton Screens: Better UX than blank screens or spinners:

• Match layout of actual content
• Use subtle animation
• Load content progressively
• Maintain scroll position

Accessibility:

• Use aria-busy="true" during loading
• Announce loading completion
• Provide text alternative for visual loaders
• Ensure keyboard users can cancel

4. Empty States Pattern

Communicate when no content exists and guide next action.

Types:

• First Use: Guide new users
• No Results: Search/filter returned nothing
• Error State: Something went wrong
• Completed State: All tasks done

Components:

• Illustration: Visual element
• Heading: Clear message
• Description: Explanation and guidance
• Call-to-Action: Primary next step

Best Practices:

• Be encouraging and helpful
• Provide clear next action
• Use appropriate tone for context
• Include relevant illustration
• Make CTA prominent
• Offer alternatives or suggestions

Examples:

First Use:

"Welcome to your inbox!"
"You don't have any messages yet.
Why not invite your team?"
[Invite Team Button]

No Results:

"No results found for 'query'"
"Try different keywords or clear filters"
[Clear Filters Button]

Error:

"Oops, something went wrong"
"We couldn't load your data. Please try again."
[Retry Button]

Accessibility:

• Provide meaningful text
• Ensure images have alt text
• Make CTAs keyboard accessible

5. Notification Badge Pattern

Indicate unread items or pending actions.

Types:

• Numeric Badge: Show count (5, 12, 99+)
• Dot Badge: Indicate presence without count
• Status Badge: Online, offline, busy states

When to Use:

• Unread messages
• Pending notifications
• Cart item count
• User status indicators

Best Practices:

• Position consistently (top-right of icon)
• Use contrasting colors
• Limit numbers (99+ for large counts)
• Clear when viewed
• Don't overuse
• Size appropriately

Accessibility:

• Include in accessible name
• Announce updates to screen readers
• Example: aria-label="Messages (3 unread)"

Interaction Patterns

1. Drag and Drop Pattern

Move or reorder items by dragging.

Use Cases:

• File uploads
• List reordering
• Kanban boards
• Image galleries
• Form builders

Interaction States:

• Draggable: Visual indicator (handle icon)
• Dragging: Item follows cursor, original position shown
• Drop Zone: Highlight valid targets
• Invalid: Show when can't drop
• Dropped: Animate to final position

Best Practices:

• Provide clear drag handles
• Show drop zones clearly
• Animate transitions smoothly
• Support keyboard alternatives
• Confirm destructive drops
• Auto-scroll when dragging near edges
• Show preview of final state

Keyboard Alternative:

• Select item
• Cut/Copy
• Navigate to target
• Paste/Insert

Accessibility:

• Implement keyboard controls
• Announce drag/drop actions
• Provide alternative interaction method
• Use appropriate ARIA attributes

2. Infinite Scroll Pattern

Automatically load content as user scrolls down.

When to Use:

• Social media feeds
• Image galleries
• News feeds
• Product catalogs

Best Practices:

• Show loading indicator
• Provide "Load More" button as fallback
• Maintain scroll position on back navigation
• Include footer only after all content
• Allow jumping to specific items
• Show total count when possible
• Provide way to stop auto-loading

Accessibility Concerns:

• Announce new content to screen readers
• Ensure keyboard users can access all content
• Provide skip links
• Consider pagination alternative

Performance:

• Implement virtual scrolling for large lists
• Lazy load images
• Remove off-screen content
• Debounce scroll events

3. Filter and Sort Pattern

Refine and organize displayed data.

Filter Types:

• Checkboxes: Multi-select categories
• Radio Buttons: Single selection
• Range Sliders: Numeric ranges
• Date Pickers: Date ranges
• Search: Text matching

Sort Options:

• Alphabetical (A-Z, Z-A)
• Numeric (low-high, high-low)
• Date (newest, oldest)
• Relevance
• Popularity

Best Practices:

• Show active filters clearly
• Display result count
• Allow clearing individual filters
• Provide "Clear All" option
• Update results immediately or with Apply button
• Preserve filter state in URL
• Default to most useful sort
• Show sort direction clearly

Mobile Considerations:

• Use bottom sheet or sidebar for filters
• Provide filter button with count badge
• Allow applying filters before closing panel

4. Search Pattern

Help users find specific content or items.

Components:

• Search Input: Text field for query
• Search Button: Submit search
• Clear Button: Reset search
• Autocomplete: Suggestions while typing
• Recent Searches: Previously searched terms
• Filters: Refine results
• Results: Matching items

Best Practices:

• Make search prominent and easy to find
• Show search icon
• Provide keyboard shortcut (/, Ctrl+K)
• Show search scope if limited
• Highlight matching terms in results
• Show "No results" state with suggestions
• Preserve search in URL
• Implement debouncing (300ms)

Search UX:

• Instant search vs submit button
• Autocomplete suggestions
• Fuzzy matching for typos
• Search within results
• Sort by relevance

5. Undo/Redo Pattern

Reverse or replay actions.

When to Use:

• Content editors
• Drawing applications
• Email clients
• Any destructive action

Implementation:

• Immediate Undo: Toast with undo button
• Command Pattern: Stack of reversible actions
• Keyboard Shortcuts: Ctrl+Z, Ctrl+Y/Ctrl+Shift+Z
• Menu Options: Edit menu items

Best Practices:

• Provide undo for all significant actions
• Show undo option immediately (toast)
• Set reasonable time limit (5-10 seconds)
• Clear messaging about what will undo
• Support multiple undo levels
• Disable when no actions to undo
• Persist undo history appropriately

Accessibility Patterns

WCAG Principles

Perceivable: Information must be presentable to users in ways they can perceive.

• Provide text alternatives for non-text content
• Provide captions and alternatives for multimedia
• Create content that can be presented in different ways
• Make it easier to see and hear content

Operable: Interface components must be operable by all users.

• Make all functionality keyboard accessible
• Give users enough time to read and use content
• Don't design content that may cause seizures
• Help users navigate and find content

Understandable: Information and UI operation must be understandable.

• Make text readable and understandable
• Make content appear and operate in predictable ways
• Help users avoid and correct mistakes

Robust: Content must be robust enough to be interpreted by various user agents.

• Maximize compatibility with current and future tools

Keyboard Navigation

Essential Patterns:

• Tab: Move forward through interactive elements
• Shift+Tab: Move backward
• Enter/Space: Activate buttons and links
• Arrow Keys: Navigate within components (menus, tabs)
• Esc: Close dialogs, cancel actions
• Home/End: Jump to first/last item

Focus Management:

• Visible focus indicators (outline, highlight)
• Logical tab order (follows visual order)
• Focus trap in modals
• Return focus after closing dialogs
• Skip links for main content

Best Practices:

• Don't rely on hover-only interactions
• Ensure all interactive elements are keyboard accessible
• Provide keyboard shortcuts for common actions
• Document keyboard shortcuts
• Test with keyboard only

ARIA (Accessible Rich Internet Applications)

Roles: Define what an element is or does:

• role="button", role="tab", role="dialog"
• role="navigation", role="main", role="search"
• role="alert", role="status", role="log"

States and Properties:

• aria-expanded: Expandable elements (true/false)
• aria-selected: Selected items (true/false)
• aria-checked: Checkboxes (true/false/mixed)
• aria-disabled: Disabled state (true/false)
• aria-hidden: Hide from screen readers (true/false)
• aria-label: Accessible name
• aria-labelledby: Reference to labeling element
• aria-describedby: Reference to description
• aria-live: Announce dynamic changes (polite/assertive)
• aria-current: Current item in set (page/step/location)

Best Practices:

• Use semantic HTML first
• Add ARIA when semantic HTML isn't sufficient
• Don't override native semantics
• Keep ARIA attributes updated with UI state
• Test with screen readers

Screen Reader Support

Considerations:

• Logical heading hierarchy (h1, h2, h3...)
• Descriptive link text (avoid "click here")
• Alt text for images
• Labels for form inputs
• Error messages associated with inputs
• Announce dynamic content changes
• Provide text alternatives for visual information

Common Screen Readers:

• NVDA (Windows, free)
• JAWS (Windows, commercial)
• VoiceOver (macOS, iOS)
• TalkBack (Android)

Color and Contrast

Requirements:

• Text Contrast: 4.5:1 for normal text, 3:1 for large text (WCAG AA)
• Enhanced Contrast: 7:1 for normal, 4.5:1 for large (WCAG AAA)
• UI Components: 3:1 for interface elements and graphics

Best Practices:

• Don't rely on color alone to convey information
• Use patterns, icons, or text in addition to color
• Test with color blindness simulators
• Provide high contrast mode
• Ensure focus indicators have sufficient contrast

Form Accessibility

Labels:

• Associate <label> with inputs using for/id
• Don't use placeholder as only label
• Group related inputs with <fieldset> and <legend>

Validation:

• Associate errors with fields using aria-describedby
• Mark invalid fields with aria-invalid="true"
• Announce errors to screen readers with role="alert"
• Don't rely on color alone for validation states

Instructions:

• Provide clear instructions before form
• Indicate required fields
• Show format requirements
• Offer example inputs

Responsive Patterns

Mobile-First Approach

Design for mobile screens first, then enhance for larger screens.

Benefits:

• Forces focus on essential content
• Progressive enhancement
• Better performance on mobile
• Easier than desktop-first

Breakpoints:

/* Mobile: 320px - 767px (default) */

/* Tablet: 768px+ */
@media (min-width: 768px) { }

/* Desktop: 1024px+ */
@media (min-width: 1024px) { }

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) { }

Adaptive Layouts

Fluid Grids:

• Use percentages or flexible units (fr, %)
• CSS Grid and Flexbox
• Container queries for component-level responsiveness

Flexible Images:

img {
  max-width: 100%;
  height: auto;
}

Responsive Typography:

• Relative units (rem, em)
• Fluid typography with clamp()
• Adjust line length for readability (45-75 characters)

Mobile Navigation Patterns

Hamburger Menu:

• Icon toggles slide-out menu
• Most common but can hide navigation
• Include label for clarity

Tab Bar:

• Fixed bottom navigation (iOS pattern)
• 3-5 main sections
• Always visible

Priority+:

• Show items that fit, hide overflow in menu
• Adapts to available space
• Good for primary navigation

Bottom Sheet:

• Slides up from bottom
• Good for filters, actions
• Easy thumb reach

Touch Interactions

Touch Targets:

• Minimum 44x44px tap targets
• Adequate spacing between targets
• Larger targets for primary actions

Gestures:

• Tap: Primary action
• Double Tap: Zoom (use carefully)
• Long Press: Show context menu
• Swipe: Delete, archive, navigate
• Pinch: Zoom
• Pull to Refresh: Update content

Best Practices:

• Provide visual feedback for touches
• Avoid hover-dependent interactions
• Support both portrait and landscape
• Consider thumb zones (easy, stretch, hard to reach)
• Test on actual devices

Responsive Tables

Strategies:

1. Horizontal Scroll: Simplest but least ideal
2. Priority Columns: Hide less important columns
3. Stacked Cards: Each row becomes a card
4. Flip Headers: Rotate headers to row labels
5. Comparison View: Show 2-3 items side by side

Example - Stacked Cards:

Desktop:
| Name | Email | Role | Status |

Mobile:
┌─────────────┐
│ John Doe    │
│ Email: j@   │
│ Role: Admin │
│ Status: ✓   │
└─────────────┘

Common UI Patterns Checklist

Button Patterns

• Primary action button (filled, high contrast)
• Secondary action button (outlined or ghost)
• Tertiary/text buttons for low priority actions
• Icon buttons for common actions
• Button groups for related actions
• Toggle buttons for on/off states
• Floating action button (FAB) for primary mobile action
• Loading state in buttons
• Disabled state with reduced opacity

Input Patterns

• Text input with label and placeholder
• Password input with show/hide toggle
• Search input with icon and clear button
• Textarea for multi-line input
• Select/dropdown for choosing from options
• Radio buttons for single selection from few options
• Checkboxes for multi-selection
• Toggle switch for on/off settings
• Date picker for date selection
• File upload with drag-and-drop
• Range slider for numeric input
• Color picker for color selection

Navigation Patterns

• Top navigation bar
• Sidebar navigation
• Breadcrumb navigation
• Pagination
• Tabs
• Stepper for multi-step processes
• Anchor links for in-page navigation
• Back to top button

Overlay Patterns

• Modal dialogs
• Slideover/drawer
• Popover for contextual information
• Tooltip for hints
• Dropdown menu
• Context menu (right-click)
• Bottom sheet (mobile)

Feedback Patterns

• Toast notifications
• Alert banners
• Inline messages
• Loading spinners
• Progress bars
• Skeleton screens
• Success/error states
• Empty states

Content Patterns

• Card layouts
• List views
• Grid layouts
• Table displays
• Timeline/activity feed
• Hero section
• Image gallery
• Carousel/slider
• Video player
• Avatar/profile picture

Design Tokens

Standardized design variables for consistency.

Color Tokens

Primary Colors:
- primary-50 to primary-900 (shades)

Semantic Colors:
- success (green)
- warning (yellow)
- error (red)
- info (blue)

Neutral Colors:
- gray-50 to gray-900

Text Colors:
- text-primary
- text-secondary
- text-disabled

Spacing Tokens

- spacing-xs: 4px
- spacing-sm: 8px
- spacing-md: 16px
- spacing-lg: 24px
- spacing-xl: 32px
- spacing-2xl: 48px

Typography Tokens

Font Sizes:
- text-xs: 12px
- text-sm: 14px
- text-base: 16px
- text-lg: 18px
- text-xl: 20px
- text-2xl: 24px

Font Weights:
- normal: 400
- medium: 500
- semibold: 600
- bold: 700

Line Heights:
- tight: 1.25
- normal: 1.5
- relaxed: 1.75

Border Radius Tokens

- rounded-none: 0
- rounded-sm: 2px
- rounded: 4px
- rounded-md: 6px
- rounded-lg: 8px
- rounded-xl: 12px
- rounded-full: 9999px

Shadow Tokens

- shadow-sm: subtle elevation
- shadow: default elevation
- shadow-md: medium elevation
- shadow-lg: large elevation
- shadow-xl: maximum elevation

Performance Considerations

Perceived Performance

• Show content immediately (skeleton screens)
• Progressive loading
• Optimistic UI updates
• Smooth animations (60fps)

Actual Performance

• Code splitting
• Lazy loading images and components
• Virtual scrolling for long lists
• Debouncing and throttling
• Caching strategies
• Minimize reflows and repaints

Image Optimization

• Appropriate formats (WebP, AVIF)
• Responsive images (srcset)
• Lazy loading
• Blur-up placeholder technique
• Proper sizing and compression

Testing UI Patterns

Usability Testing

• User interviews
• Task completion testing
• A/B testing
• Heat maps and click tracking
• Session recordings

Accessibility Testing

• Keyboard navigation testing
• Screen reader testing
• Color contrast checking
• Automated accessibility audits (axe, Lighthouse)
• Manual WCAG compliance review

Cross-browser Testing

• Test in major browsers (Chrome, Firefox, Safari, Edge)
• Test on actual devices
• Use browser dev tools for responsive testing
• Check for progressive enhancement

Performance Testing

• Lighthouse audits
• Core Web Vitals
• Loading time testing
• Interaction latency
• Animation frame rates

Resources and Tools

Design Systems

• Material Design (Google)
• Human Interface Guidelines (Apple)
• Fluent Design (Microsoft)
• Polaris (Shopify)
• Carbon (IBM)
• Ant Design
• Atlassian Design System

Component Libraries

• Shadcn UI
• Radix UI
• Headless UI
• Chakra UI
• MUI (Material-UI)
• Ant Design
• Bootstrap
• Tailwind UI

Accessibility Tools

• axe DevTools
• WAVE
• Lighthouse
• NVDA (screen reader)
• VoiceOver (screen reader)
• Color contrast checkers

Prototyping Tools

• Figma
• Sketch
• Adobe XD
• Framer
• InVision

Pattern Libraries

• UI Patterns
• Patternry
• Mobile Patterns
• Pttrns

Conclusion

UI design patterns provide proven solutions to common interface challenges. By understanding and applying these patterns appropriately, you can create:

• Consistent Interfaces: Familiar patterns reduce learning curve
• Accessible Experiences: Built-in accessibility considerations
• Efficient Development: Reusable components and standardized approaches
• Better UX: Tested patterns that users understand

Remember:

• Choose patterns appropriate for your context
• Customize patterns to fit your brand and users
• Test with real users
• Prioritize accessibility
• Stay updated with evolving best practices
• Focus on user needs over trends

UI patterns are guidelines, not strict rules. Adapt them thoughtfully to create interfaces that serve your users effectively.