UI/UX Design Review

What this skill does

# UI/UX Design Review

This skill provides comprehensive design review capabilities for websites and desktop applications, with a strong focus on accessibility compliance and best practices.

## When to Use This Skill

Activate this skill when the user requests:
- Review of UI/UX designs, wireframes, or mockups
- Accessibility audit (WCAG 2.1/2.2 compliance)
- Usability assessment
- Visual design critique
- Interaction pattern review
- Responsive design evaluation
- Design system assessment
- Component library review
- User flow analysis
- Information architecture review
- Desktop application UI review

## Review Framework

### 1. Initial Analysis

When a user provides a design or interface, begin by:

1. **Understanding Context**
   - Ask clarifying questions about:
     - Target audience and personas
     - Platform(s): web, desktop (Windows/Mac/Linux), mobile
     - Accessibility requirements and compliance level needed
     - Brand guidelines or design system in use
     - User research or testing conducted
     - Technical constraints
     - Browser/OS support requirements
     - Key user goals and tasks

2. **Design Artifact Analysis**
   - If designs, screenshots, or prototypes are provided, analyze:
     - Visual hierarchy and layout
     - Color usage and contrast
     - Typography and readability
     - Component patterns and consistency
     - Navigation structure
     - Interactive elements
     - Responsive behavior
     - State variations (hover, active, disabled, error, etc.)

### 2. Comprehensive Review Areas

Evaluate the design across these dimensions:

#### A. Accessibility (WCAG 2.1/2.2 Compliance)

This is a CRITICAL area that must be thoroughly reviewed for all interfaces.

**Level A Requirements (Minimum):**

**1.1 Text Alternatives**
- [ ] All images have appropriate alt text
- [ ] Decorative images have empty alt attributes
- [ ] Icons have accessible labels
- [ ] Complex images have detailed descriptions
- [ ] Image buttons have descriptive text

**1.2 Time-based Media**
- [ ] Video content has captions
- [ ] Audio content has transcripts
- [ ] Pre-recorded media has alternatives

**1.3 Adaptable**
- [ ] Content structure is logical without CSS
- [ ] Reading order is meaningful
- [ ] Instructions don't rely solely on sensory characteristics
- [ ] Semantic HTML is used properly
- [ ] Form labels are programmatically associated

**1.4 Distinguishable**
- [ ] Color is not the only visual means of conveying information
- [ ] Audio controls are available
- [ ] Text has sufficient contrast (4.5:1 for normal text, 3:1 for large text)
- [ ] Text can be resized up to 200% without loss of functionality
- [ ] Images of text are avoided (except logos)

**2.1 Keyboard Accessible**
- [ ] All functionality is keyboard accessible
- [ ] No keyboard traps exist
- [ ] Keyboard shortcuts don't conflict with assistive technologies
- [ ] Focus order is logical
- [ ] Focus is visible at all times

**2.2 Enough Time**
- [ ] Time limits can be adjusted, extended, or turned off
- [ ] Moving, blinking, scrolling content can be paused
- [ ] Auto-updating content can be paused or controlled

**2.3 Seizures and Physical Reactions**
- [ ] Content doesn't flash more than 3 times per second
- [ ] No content violates flash threshold

**2.4 Navigable**
- [ ] Skip links allow bypassing repeated content
- [ ] Page titles are descriptive and unique
- [ ] Focus order preserves meaning
- [ ] Link purpose is clear from context
- [ ] Multiple navigation methods exist
- [ ] Headings and labels are descriptive

**2.5 Input Modalities**
- [ ] All functionality works with pointer gestures
- [ ] Touch targets are sufficiently large (minimum 44x44px)
- [ ] Accidental activation is prevented

**3.1 Readable**
- [ ] Page language is identified
- [ ] Language changes are marked up

**3.2 Predictable**
- [ ] Focus doesn't trigger unexpected changes
- [ ] Input doesn't trigger unexpected changes
- [ ] Navigation is consistent across pages
- [ ] Components are identified consistently

**3.3 Input Assistance**
- [ ] Form errors are identified and described
- [ ] Labels and instructions are provided
- [ ] Error suggestions are offered
- [ ] Critical actions can be reversed, checked, or confirmed

**4.1 Compatible**
- [ ] HTML is valid and properly nested
- [ ] IDs are unique
- [ ] ARIA attributes are used correctly
- [ ] Status messages are programmatically determinable

**Level AA Requirements (Recommended):**

- [ ] Contrast ratio is at least 4.5:1 (3:1 for large text)
- [ ] Text can be resized up to 200% without assistive technology
- [ ] Images of text are avoided unless customizable
- [ ] Visual presentation of text allows customization
- [ ] Audio content doesn't interfere with screen readers
- [ ] Multiple ways to locate pages exist
- [ ] Headings and labels are descriptive
- [ ] Focus indicator is visible
- [ ] Section headings are used to organize content

**Level AAA Requirements (Best Practice):**

- [ ] Contrast ratio is at least 7:1 (4.5:1 for large text)
- [ ] No images of text are used
- [ ] Text spacing can be adjusted
- [ ] Content reflows to 320px without scrolling
- [ ] Hover/focus content is dismissible and persistent

**Provide Feedback On:**
- Specific WCAG violations with severity level
- Missing ARIA labels and landmarks
- Color contrast issues with measured ratios
- Keyboard navigation problems
- Screen reader compatibility issues
- Missing alternative text
- Form accessibility issues
- Focus management problems
- Semantic HTML issues

**Testing Recommendations:**
- Use automated tools: axe DevTools, WAVE, Lighthouse
- Manual keyboard navigation testing
- Screen reader testing (NVDA, JAWS, VoiceOver)
- Color contrast analyzers
- Focus indicator visibility
- Zoom testing (200%, 400%)

#### B. Visual Design & Aesthetics

**Evaluate:**
- Visual hierarchy and layout structure
- Color palette and color theory application
- Typography choices and hierarchy
- White space and density
- Visual balance and alignment
- Consistency with brand guidelines
- Modern vs dated design patterns
- Visual weight distribution
- Grid system usage
- Component visual consistency

**Provide Feedback On:**
- Cluttered or overwhelming layouts
- Poor visual hierarchy
- Inconsistent spacing
- Typography issues (too many fonts, poor sizing)
- Color palette problems
- Lack of visual breathing room
- Misaligned elements
- Inconsistent component styling
- Dated design patterns

**Design System Considerations:**
- Design token usage (colors, spacing, typography)
- Component library consistency
- Pattern library adherence
- Brand guideline compliance

#### C. User Experience & Usability

**Evaluate:**
- User flow logic and efficiency
- Information architecture
- Navigation patterns and clarity
- Cognitive load
- Task completion efficiency
- Error prevention and recovery
- Feedback mechanisms
- Learnability for new users
- Efficiency for experienced users
- Mental models and user expectations
- Consistency with platform conventions

**Provide Feedback On:**
- Confusing navigation
- Too many steps to complete tasks
- Unclear labeling or terminology
- Missing or unclear feedback
- Poor error messages
- Inconsistent interaction patterns
- Violation of established conventions
- High cognitive load
- Missing confirmation for destructive actions

**Jakob Nielsen's Usability Heuristics:**
1. Visibility of system status
2. Match between system and real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize and recover from errors
10. Help and documentation

#### D. Responsive Design & Layout

**Evaluate:**
- Breakpoint strategy
- Mobile-first approach
- Touch target sizes (minimum 44x44px)
- Content reflow behavior
- Layout patterns (sidebar, hamburger menu, etc.)
- Image and media responsiveness
- Typography scaling
- Navigation adaptation
-