back
loading skill details...
Common interface patterns, navigation patterns, form patterns, data display patterns, feedback patterns, and accessibility considerations
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:
Horizontal Scroll: Simplest but least ideal
Priority Columns: Hide less important columns
Stacked Cards: Each row becomes a card
Flip Headers: Rotate headers to row labels
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.don't have the plugin yet? install it then click "run inline in claude" again.