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:
- 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
Example Structure:
Section content...
- 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
Example:
- 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
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:
- 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
| , |
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 (
|
|---|