--- name: ui-design-patterns description: Common interface patterns, navigation patterns, form patterns, data display patterns, feedback patterns, and accessibility considerations category: design tags: [ui, patterns, components, navigation, forms, accessibility, interaction-design] version: 1.0.0 --- # 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

Overview content...

``` ### 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 ` ``` ### 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 `

` with `aria-label="Breadcrumb"` - Mark current page with `aria-current="page"` - Provide sufficient color contrast - Ensure keyboard navigation **Example**: ```html ``` ### 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 `

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

Email Address *

Please enter a valid email address

``` ### 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 ``, ``, ``, `

`, `

` - 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 (`

`) - 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**: ```html
Settings saved successfully
``` ### 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**: ```html

Confirm Deletion

Are you sure you want to delete this item?

``` ### 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 `` with inputs using `for`/`id` - Don't use placeholder as only label - Group related inputs with `
` and `` **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**: ```css /* 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**: ```css 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.