uiux-design-review

name UI/UX Design Review description Comprehensive design review for websites and desktop applications with extensive accessibility analysis. Use this skill when users ask you to review UI/UX designs, wireframes, mockups, prototypes, or deployed interfaces for usability, accessibility (WCAG compliance), visual design, interaction patterns, responsive design, and best practices for web and desktop applications. 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: 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 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: Visibility of system status Match between system and real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize and recover from errors 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 Form layout on mobile Table handling on small screens Provide Feedback On: Missing breakpoints Horizontal scrolling on mobile Too-small touch targets Overlapping content Poor mobile navigation Unreadable text on mobile Missing mobile-specific patterns Inefficient use of screen space Desktop-Specific Considerations: Window resizing behavior Minimum/maximum window dimensions Multi-monitor support Native OS patterns (Windows, macOS, Linux) Keyboard shortcuts Context menus Drag and drop E. Typography & Readability Evaluate: Font choices and pairings Type scale and hierarchy Line length (45-75 characters optimal) Line height (1.5-1.8 for body text) Font size (minimum 16px for body text) Letter spacing and word spacing Text alignment and justification Heading hierarchy Font rendering and smoothing Provide Feedback On: Too many font families (limit to 2-3) Poor font size choices Insufficient contrast Lines too long or too short Inadequate line height Missing heading hierarchy Justified text without hyphenation All-caps text for long content Poor font weight choices Best Practices: Use system fonts for performance Include fallback fonts Implement proper font loading strategy Use relative units (rem, em) Ensure readability at 200% zoom F. Color & Contrast Evaluate: Color palette cohesion Contrast ratios (WCAG compliance) Color meaning and semantics Color blindness accessibility Dark mode support Brand color usage Color consistency Accent and action colors Provide Feedback On: Insufficient contrast ratios Relying solely on color to convey information Too many colors in the palette Poor color combinations Missing dark mode Inconsistent color usage Colors that don't work for color blindness Clashing or garish combinations Tools for Testing: Contrast checkers (WebAIM, Stark) Color blindness simulators Color palette analyzers Contrast Requirements: Normal text: 4.5:1 (AA), 7:1 (AAA) Large text (18pt+/14pt bold+): 3:1 (AA), 4.5:1 (AAA) UI components and graphics: 3:1 (AA) G. Interactive Elements & Components Evaluate: Button styles and states Form controls and inputs Links and their appearance Interactive feedback (hover, active, focus, disabled) Loading states and skeletons Error states and validation Success states and confirmations Tooltips and popovers Modals and dialogs Dropdown and select menus Toggle switches and checkboxes Radio buttons Accordions and collapsible content Provide Feedback On: Unclear clickable areas Missing hover/focus states Poor button hierarchy Inconsistent interactive patterns Missing loading indicators Unclear disabled states Poor error messaging Ambiguous icons without labels Too many action options Destructive actions without confirmation Component Checklist: All states are designed (default, hover, focus, active, disabled, error, success) Touch targets meet minimum size Interactive elements have clear affordances Focus indicators are visible Loading states prevent multiple submissions Error messages are helpful and specific H. Navigation & Information Architecture Evaluate: Primary navigation structure Secondary navigation patterns Breadcrumb implementation Search functionality Menu organization Site map clarity Content categorization Navigation depth Cross-linking strategy Back button behavior Provide Feedback On: Overcomplicated navigation Hidden or buried important features Inconsistent navigation patterns Missing breadcrumbs Poor search UX Too many navigation levels Unclear menu labels Missing way to return to home/previous page Best Practices: Keep navigation shallow (3 levels max) Highlight current location Provide multiple paths to content Make navigation consistent across pages Use familiar patterns I. Forms & Data Entry Evaluate: Form layout and structure Input field design Label placement and clarity Placeholder usage Required field indicators Validation approach (inline vs on submit) Error messaging Success confirmation Multi-step form patterns Auto-complete support Input masking for formatted data Provide Feedback On: Unclear required fields Poor error messages Labels missing or unclear Too many fields Poor validation timing Missing help text Unclear formatting requirements No progress indication for multi-step forms Placeholder text used as labels Poor mobile form experience Best Practices: Label above or left of input Don't use placeholder as label Validate inline where possible Show specific error messages Indicate required fields clearly Group related fields Provide formatting hints Auto-focus first field Preserve data on error J. Performance & Loading Evaluate: Perceived performance Loading indicators Skeleton screens Progressive loading Lazy loading images Optimistic UI updates Loading time feedback Offline states Provide Feedback On: Missing loading indicators Blank screens during load Layout shift during loading No offline messaging Poor perceived performance Blocking user actions unnecessarily K. Content & Microcopy Evaluate: Heading clarity Button labels Error messages Empty states Onboarding copy Help text Success messages Tone and voice consistency Terminology clarity Provide Feedback On: Unclear or technical jargon Inconsistent terminology Poor error messages Missing empty state messaging Unclear button labels Too verbose or too terse Inconsistent tone Best Practices: Use action-oriented button labels Write conversational, helpful error messages Provide context in empty states Use consistent terminology Match user's language L. Desktop Application Specific Evaluate: Native OS integration Window management Menu bar and context menus Keyboard shortcuts Drag and drop functionality System tray integration Notifications File handling Multi-window support Platform-specific patterns (Windows vs macOS vs Linux) Provide Feedback On: Non-native appearance Violation of OS conventions Poor keyboard shortcut choices Missing expected features Inconsistent with platform norms Poor window management Unclear or missing menu items Platform Guidelines: Windows: Fluent Design System macOS: Human Interface Guidelines Linux: GNOME HIG / KDE HIG 3. Review Output Format Structure your review as follows: Executive Summary Overall design assessment (1-3 paragraphs) Key strengths identified Critical issues requiring immediate attention Accessibility compliance level (A, AA, AAA) Overall design maturity score Accessibility Analysis (Priority Section) WCAG Compliance Summary: Level A: X violations found Level AA: X violations found Level AAA: X recommendations Critical Accessibility Issues: HIGH: Issues that prevent access (with WCAG reference) MEDIUM: Issues that hinder access LOW: Improvements that enhance access Detailed Findings: For each accessibility issue: WCAG criterion violated (e.g., "1.4.3 Contrast (Minimum)") Severity: Critical/High/Medium/Low Description of the issue User impact (which users are affected) How to fix it (specific, actionable steps) Testing method to verify fix Visual Design Assessment Strengths: What works well visually Concerns: HIGH: Major visual problems MEDIUM: Notable issues LOW: Polish and refinement opportunities Recommendations: Specific visual improvements Design system suggestions Best practices to follow UX & Usability Assessment Strengths: Positive UX patterns identified Concerns: HIGH: Usability blockers MEDIUM: Friction points LOW: Nice-to-have improvements Recommendations: Specific UX improvements User flow optimizations Industry best practices Responsive Design Assessment Strengths: Responsive patterns that work well Concerns: Issues at various breakpoints Mobile-specific problems Desktop-specific issues Recommendations: Breakpoint adjustments Mobile improvements Desktop enhancements Component & Pattern Review Strengths: Well-designed components Concerns: Inconsistencies Missing states Pattern violations Recommendations: Component improvements Design system alignment Pattern library suggestions 4. Interactive Review Process When conducting the review: Request design artifacts if not provided (screenshots, Figma links, prototypes, live URLs) Ask about target users and accessibility requirements Understand the context (project stage, constraints, goals) Provide incremental feedback for large interfaces Offer specific examples of how to fix issues Reference standards (WCAG, platform guidelines) Prioritize issues clearly (critical → low) Suggest tools for testing and validation Provide code examples where helpful (HTML, CSS, ARIA) Offer to review specific areas in more depth 5. Reference Standards & Guidelines When relevant, reference: Accessibility Standards: WCAG 2.1 Level A (minimum) WCAG 2.1 Level AA (target)