# Production Deployment Checklist: Experimental Navigation (Radial Menu & Nonlinear UX)

> **Version:** 1.0.0 | **Last Updated:** 2025 | **Target:** Experimental/Avant-garde navigation systems
> 
> ⚠️ Experimental UX patterns carry higher risk — this checklist is non-negotiable before production.

---

## Quick Reference

| Section | Items | Priority |
|---|---|---|
| Performance Audit | 12 items | 🔴 Critical |
| Accessibility Audit | 14 items | 🔴 Critical |
| Mobile/Touch Audit | 10 items | 🟠 High |
| Browser Compatibility | 11 items | 🟠 High |
| User Testing | 9 items | 🟡 Required |

**Sign-off required:** Lead Dev + Design + QA before merge to `main`.

---

## Section 1 — Performance Audit

> Radial menus and nonlinear UX rely heavily on transforms, animations, and scroll-based effects. Poor performance = broken experience. Target: **Lighthouse Performance ≥ 90** on mobile.

---

### 1.1 Lighthouse Baseline

- [ ] **Run Lighthouse in incognito, throttled to "Mobile" preset**
  
  *Why:* Extensions and cached assets skew scores. Mobile throttling reflects real-world conditions for experimental UX which is heavier than conventional navigation.
  
  ```bash
  # CLI audit — no browser extensions, reproducible in CI
  npx lighthouse https://your-domain.com \
    --preset=perf \
    --emulated-form-factor=mobile \
    --throttling-method=simulate \
    --output=json \
    --output-path=./reports/lighthouse-$(date +%Y%m%d).json
  
  # Quick score check
  cat ./reports/lighthouse-*.json | \
    node -e "const d=require('fs').readFileSync('/dev/stdin','utf8'); \
    const r=JSON.parse(d); \
    console.log('Performance:', r.categories.performance.score * 100)"
  ```

- [ ] **Performance score ≥ 90 on mobile, ≥ 95 on desktop**
  
  *Why:* Radial menus with CSS transforms + JS orchestration easily drop to 60-70 without optimization. Set the bar high before launch.
  
  ```bash
  # Automated assertion in CI (fail build if below threshold)
  npx lighthouse-ci autorun \
    --collect.url=https://your-domain.com \
    --assert.assertions.performance=["error", {"minScore": 0.9}]
  ```

- [ ] **Verify no render-blocking resources tied to navigation scripts**
  
  *Why:* Navigation JS loading synchronously blocks FCP — users see broken layout before menu initializes.
  
  ```html
  <!-- WRONG: blocks render -->
  <script src="/js/radial-nav.js"></script>
  
  <!-- CORRECT: defer non-critical navigation JS -->
  <script src="/js/radial-nav.js" defer></script>
  
  <!-- Even better: dynamic import after LCP -->
  <script>
    window.addEventListener('load', () => {
      import('/js/radial-nav.js').then(({ initRadialMenu }) => {
        initRadialMenu();
      });
    });
  </script>
  ```

---

### 1.2 CSS Transform Optimization

- [ ] **All animated elements use `transform` and `opacity` ONLY — no layout-triggering properties**
  
  *Why:* Animating `top`, `left`, `width`, `margin` triggers layout recalculation on every frame. Radial menu with 8 items animating `top/left` = 8 × 60fps layout thrashes = jank.
  
  ```css
  /* ❌ WRONG — triggers layout + paint */
  .radial-item {
    transition: top 0.3s, left 0.3s, opacity 0.3s;
  }
  
  /* ✅ CORRECT — compositor-only, no layout */
  .radial-item {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.3s ease;
  }
  
  /* Radial positioning via transform, not top/left */
  .radial-item:nth-child(1) {
    --angle: 0deg;
    --radius: 120px;
    transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle)));
  }
  ```
  
  ```javascript
  // Verify in DevTools console — should show "Composite" not "Layout"
  // Open DevTools > Rendering > Paint flashing
  // Trigger menu open — NO green flashing on radial items = ✅
  
  // Programmatic check
  const items = document.querySelectorAll('.radial-item');
  items.forEach(el => {
    const styles = getComputedStyle(el);
    const animatedProps = styles.transition;
    const hasLayoutProps = /top|left|right|bottom|width|height|margin|padding/.test(animatedProps);
    console.assert(!hasLayoutProps, `❌ Layout property in transition: ${el.className}`);
  });
  ```

- [ ] **Verify GPU layer promotion is intentional — no layer explosion**
  
  *Why:* Excessive `will-change` or `translateZ(0)` creates too many GPU layers, consuming VRAM and causing compositing overhead. Especially bad on low-end mobile.
  
  ```javascript
  // DevTools > Layers panel — count layers before/after menu open
  // Expected: < 20 new layers created when menu opens
  
  // Chrome DevTools command
  // Open: chrome://flags/#show-composited-layer-borders
  // Then inspect: Layers tab in DevTools
  
  // Check layer count programmatically (rough estimate)
  const promoted = [...document.querySelectorAll('*')].filter(el => {
    const style = getComputedStyle(el);
    return style.willChange !== 'auto' || 
           style.transform !== 'none' ||
           style.position === 'fixed';
  });
  console.log(`Promoted elements: ${promoted.length}`);
  // Should be < 30 total, alert if > 50
  ```

---

### 1.3 `will-change` Audit

- [ ] **`will-change` applied only to elements about to animate, removed after animation**
  
  *Why:* Static `will-change: transform` on all menu items wastes GPU memory 24/7 even when menu is closed. On mobile with 2GB RAM, this causes browser to drop frames elsewhere.
  
  ```javascript
  // ❌ WRONG — permanent will-change
  // CSS: .radial-item { will-change: transform; }
  
  // ✅ CORRECT — dynamic will-change lifecycle
  class RadialMenu {
    open() {
      // Apply BEFORE animation starts
      this.items.forEach(item => {
        item.style.willChange = 'transform, opacity';
      });
      
      // Animate
      this.animateIn();
    }
    
    onAnimationComplete() {
      // Remove AFTER animation ends — critical!
      this.items.forEach(item => {
        item.style.willChange = 'auto';
      });
    }
    
    close() {
      this.items.forEach(item => {
        item.style.willChange = 'transform, opacity';
      });
      
      this.animateOut().then(() => {
        this.items.forEach(item => {
          item.style.willChange = 'auto';
        });
      });
    }
  }
  ```

- [ ] **Audit existing `will-change` declarations in codebase**
  
  *Why:* Accumulated technical debt — developers add `will-change` to fix jank, forget to remove it.
  
  ```bash
  # Find all will-change in CSS/SCSS/styled-components
  grep -r "will-change" ./src --include="*.css" --include="*.scss" \
    --include="*.ts" --include="*.tsx" --include="*.js" \
    -n --color=always
  
  # Count occurrences
  grep -r "will-change" ./src | grep -v "will-change: auto" | wc -l
  # Target: 0 static will-change declarations in CSS files
  # All should be dynamically applied via JS
  ```

---

### 1.4 Locomotive Scroll / Lerp Performance

- [ ] **Locomotive Scroll lerp value validated: 0.05–0.15 range**
  
  *Why:* Lerp value controls smoothing lag. Too low (0.02) = sluggish, high input latency perception. Too high (0.5) = no smoothing benefit, defeats purpose. Default 0.1 is baseline but tune per device.
  
  ```javascript
  // locomotive-scroll config validation
  const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    lerp: 0.1,          // ← Validate this value
    multiplier: 1,
    smartphone: {
      smooth: false,    // ← CRITICAL: disable on mobile (see mobile section)
      lerp: 0.1
    },
    tablet: {
      smooth: true,
      lerp: 0.08        // Slightly more responsive on tablet
    }
  });
  
  // Assertion
  console.assert(scroll.options.lerp >= 0.05 && scroll.options.lerp <= 0.15,
    `⚠️ Lerp value ${scroll.options.lerp} outside recommended range`);
  ```

- [ ] **Verify Locomotive Scroll does not conflict with radial menu fixed positioning**
  
  *Why:* Locomotive uses `transform: translateY()` on scroll container, which creates a new stacking context. Fixed-positioned radial menu gets trapped inside transformed parent — common bug.
  
  ```javascript
  // Test: open radial menu while page is mid-scroll
  // Expected: menu stays in viewport center, doesn't scroll with content
  
  // Diagnostic
  const menuEl = document.querySelector('.radial-menu');
  const scrollContainer = document.querySelector('[data-scroll-container]');
  
  // Check if menu is child of scroll container (it shouldn't be)
  const isTrapped = scrollContainer.contains(menuEl);
  console.assert(!isTrapped, 
    '❌ Radial menu is child of scroll container — will be transformed by Locomotive');
  
  // Fix: move menu to body level
  // document.body.appendChild(menuEl);
  
  // Verify stacking context isn't breaking fixed position
  let parent = menuEl.parentElement;
  while (parent) {
    const style = getComputedStyle(parent);
    const hasTransform = style.transform !== 'none';
    const hasFilter = style.filter !== 'none';
    if (hasTransform || hasFilter) {
      console.warn(`⚠️ Stacking context parent: ${parent.tagName}.${parent.className}`);
    }
    parent = parent.parentElement;
  }
  ```

- [ ] **RAF loop does not run when Locomotive is idle**
  
  *Why:* Locomotive's requestAnimationFrame loop runs continuously by default, consuming CPU even when nothing is scrolling. On battery-powered devices, this drains battery and causes thermal throttling.
  
  ```javascript
  // Check if custom RAF loops are properly cancelled
  // DevTools > Performance > Record idle state for 5 seconds
  // Expected: < 5% CPU usage when page is not being interacted with
  
  // If using custom lerp loop, implement idle detection
  class SmoothScroll {
    #rafId = null;
    #isScrolling = false;
    #idleTimeout = null;
    
    startLoop() {
      if (this.#rafId) return; // Prevent duplicate loops
      this.#rafId = requestAnimationFrame(this.tick.bind(this));
    }
    
    stopLoop() {
      if (this.#rafId) {
        cancelAnimationFrame(this.#rafId);
        this.#rafId = null;
      }
    }
    
    onScroll() {
      this.#isScrolling = true;
      this.startLoop();
      
      clearTimeout(this.#idleTimeout);
      this.#idleTimeout = setTimeout(() => {
        this.#isScrolling = false;
        // Stop RAF when scroll has settled
        if (Math.abs(this.current - this.target) < 0.1) {
          this.stopLoop();
        }
      }, 150);
    }
  }
  ```

---

## Section 2 — Accessibility Audit

> Experimental navigation must not exclude users. A radial menu that only works with a mouse is a lawsuit waiting to happen. WCAG 2.1 AA minimum — target AAA where possible.

---

### 2.1 Keyboard Navigation

- [ ] **Radial menu fully operable with keyboard alone — no mouse required**
  
  *Why:* ~7% of users rely on keyboard navigation. Radial menus are inherently spatial — keyboard users can't "point" to items. Must implement logical tab order or arrow key navigation.
  
  ```javascript
  // Keyboard navigation implementation for radial menu
  class RadialMenuKeyboard {
    constructor(menu) {
      this.menu = menu;
      this.items = [...menu.querySelectorAll('[role="menuitem"]')];
      this.currentIndex = 0;
      
      menu.addEventListener('keydown', this.handleKeydown.bind(this));
    }
    
    handleKeydown(e) {
      switch(e.key) {
        case 'ArrowRight':
        case 'ArrowDown':
          e.preventDefault();
          this.navigate(1);
          break;
          
        case 'ArrowLeft':
        case 'ArrowUp':
          e.preventDefault();
          this.navigate(-1);
          break;
          
        case 'Enter':
        case ' ':
          e.preventDefault();
          this.activate();
          break;
          
        case 'Escape':
          e.preventDefault();
          this.close();
          // Return focus to trigger element — critical!
          this.triggerElement.focus();
          break;
          
        case 'Tab':
          // Trap focus within open menu
          e.preventDefault();
          this.navigate(e.shiftKey ? -1 : 1);
          break;
      }
    }
    
    navigate(direction) {
      this.currentIndex = (this.currentIndex + direction + this.items.length) 
        % this.items.length;
      this.items[this.currentIndex].focus();
    }
  }
  
  // Test with axe-core
  // npm install axe-core
  import axe from 'axe-core';
  axe.run(document.querySelector('.radial-menu')).then(results => {
    if (results.violations.length > 0) {
      console.error('Accessibility violations:', results.violations);
    }
  });
  ```

- [ ] **Focus is trapped inside open radial menu and restored on close**
  
  *Why:* Without focus trap, Tab key exits the menu while it's visually open, creating a disconnect between visual state and keyboard position. Users lose orientation.
  
  ```javascript
  // Focus trap utility
  function createFocusTrap(container) {
    const focusableSelectors = [
      'a[href]', 'button:not([disabled])', 'input:not([disabled])',
      'select:not([disabled])', 'textarea:not([disabled])',
      '[tabindex]:not([tabindex="-1"])', '[role="menuitem"]'
    ].join(', ');
    
    const getFocusable = () => [...container.querySelectorAll(focusableSelectors)];
    
    function handleTab(e) {
      if (e.key !== 'Tab') return;
      
      const focusable = getFocusable();
      const first = focusable[0];
      const last = focusable[focusable.length - 1];
      
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
    
    return {
      activate: () => {
        container.addEventListener('keydown', handleTab);
        getFocusable()[0]?.focus();
      },
      deactivate: () => container.removeEventListener('keydown', handleTab)
    };
  }
  
  // Verify focus trap is working
  // Manual test: Tab through all menu items — should cycle, not escape menu
  ```

- [ ] **Visible focus indicators on all interactive elements — not just `:focus` but `:focus-visible`**
  
  *Why:* Experimental designs often remove focus rings for aesthetics (`outline: none`). This makes keyboard navigation invisible — users can't tell where they are.
  
  ```css
  /* ❌ NEVER DO THIS */
  * { outline: none; }
  *:focus { outline: none; }
  
  /* ✅ CORRECT — enhance, don't remove */
  .radial-item:focus-visible {
    outline: 3px solid var(--color-focus, #0066ff);
    outline-offset: 4px;
    /* Custom focus for radial items */
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.3);
  }
  
  /* For radial geometry, consider custom focus indicator */
  .radial-item:focus-visible::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid var(--color-focus);
    animation: pulse-focus 1s infinite;
  }
  ```
  
  ```bash
  # Automated check for outline removal
  grep -r "outline.*none\|outline:.*0" ./src --include="*.css" --include="*.scss" \
    --include="*.ts" --include="*.tsx" | \
    grep -v "focus-visible\|focus-within\|:focus" | \
    grep -v "\/\/"
  # Should return 0 results
  ```

---

### 2.2 ARIA Roles & Labels

- [ ] **Radial menu has correct ARIA role structure: `menu`, `menuitem`, `menubar` as appropriate**
  
  *Why:* Screen readers need semantic context to announce navigation. Without roles, a div-based radial menu is announced as generic content — users have no idea it's a navigation menu.
  
  ```html
  <!-- Radial menu ARIA structure -->
  <button 
    id="radial-trigger"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-controls="radial-menu"
    aria-label="Open navigation menu"
  >
    <!-- Icon -->
  </button>
  
  <nav
    id="radial-menu"
    role="menu"
    aria-label="Main navigation"
    aria-labelledby="radial-trigger"
    hidden
  >
    <a 
      role="menuitem" 
      href="/about"
      tabindex="-1"  <!-- Managed focus via JS -->
    >
      About
    </a>
    
    <a 
      role="menuitem" 
      href="/work"
      tabindex="-1"
      aria-current="page"  <!-- If on current page -->
    >
      Work
    </a>
  </nav>
  
  <script>
  // Sync aria-expanded with visual state
  const trigger = document.getElementById('radial-trigger');
  const menu = document.getElementById('radial-menu');
  
  function openMenu() {
    trigger.setAttribute('aria-expanded', 'true');
    menu.removeAttribute('hidden');
    // Focus first item
    menu.querySelector('[role="menuitem"]').focus();
  }
  
  function closeMenu() {
    trigger.setAttribute('aria-expanded', 'false');
    menu.setAttribute('hidden', '');
    trigger.focus(); // Return focus to trigger
  }
  </script>
  ```

- [ ] **Live region announces navigation state changes to screen readers**
  
  *Why:* When nonlinear navigation loads content via AJAX/SPA routing, screen readers don't know page changed. Users think nothing happened.
  
  ```html
  <!-- Add to HTML — announce route changes -->
  <div 
    id="nav-announcer"
    role="status"          
    aria-live="polite"     
    aria-atomic="true"
    class="sr-only"        
  >
    <!-- JS will update this -->
  </div>
  
  <style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  </style>
  
  <script>
  // Announce navigation to screen readers
  function announceNavigation(pageName) {
    const announcer = document.getElementById('nav-announcer');
    // Clear first, then set — forces screen reader to re-read
    announcer.textContent = '';
    requestAnimationFrame(() => {
      announcer.textContent = `Navigated to ${pageName}`;
    });
  }
  
  // Hook into your router
  router.on('navigate', ({ to }) => {
    announceNavigation(to.meta.title || to.name);
  });
  </script>
  ```

- [ ] **Test with actual screen readers: VoiceOver (macOS/iOS) and NVDA (Windows)**
  
  *Why:* axe-core catches structural issues but not experiential ones. Only a real screen reader reveals whether the radial menu makes sense when heard, not seen.
  
  ```bash
  # VoiceOver macOS test commands
  # Enable: Cmd + F5
  # Navigate to menu trigger: Tab
  # Expected announcement: "Open navigation menu, button, collapsed"
  # Open menu: Space/Enter
  # Expected: "Main navigation, menu"
  # Navigate items: Arrow keys
  # Expected: "About, menu item, 1 of 5"
  
  # NVDA Windows (free)
  # Download: https://www.nvaccess.org/download/
  # Enable: Ctrl + Alt + N
  # Forms mode: F (navigate interactive elements)
  # Same test as above
  
  # Automated with jest-axe
  # npm install jest-axe
  import { axe, toHaveNoViolations } from 'jest-axe';
  expect.extend(toHaveNoViolations);
  
  test('radial menu has no accessibility violations', async () => {
    render(<RadialMenu />);
    const results = await axe(document.body);
    expect(results).toHaveNoViolations();
  });
  ```

---

### 2.3 `prefers-reduced-motion`

- [ ] **ALL animations disabled or replaced with instant transitions when `prefers-reduced-motion: reduce`**
  
  *Why:* Users with vestibular disorders, epilepsy, or motion sensitivity can experience nausea, migraines, or seizures from animated radial menus. This is a medical necessity, not a preference.
  
  ```css
  /* Base animations for radial menu */
  .radial-item {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease;
  }
  
  .radial-menu {
    animation: menu-bloom 0.5s ease forwards;
  }
  
  /* Locomotive scroll-based parallax */
  [data-scroll-speed] {
    transition: transform 0.1s linear;
  }
  
  /* OVERRIDE — instant transitions for reduced motion */
  @media (prefers-reduced-motion: reduce) {
    /* Remove ALL transitions */
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    
    /* Specifically disable Locomotive Scroll smooth scrolling */
    [data-scroll-container] {
      overflow: auto !important;
      transform: none !important;
    }
    
    /* Radial menu: appear instantly */
    .radial-menu {
      animation: none;
    }
    
    .radial-item {
      transition: none;
      /* Items appear at final position immediately */
    }
    
    /* Disable parallax */
    [data-scroll-speed] {
      transform: none !important;
    }
  }
  ```
  
  ```javascript
  // JS-side reduced motion check — for JS-driven animations
  const REDUCED_MOTION = window.matchMedia('(prefers-reduced-motion: reduce)');
  
  function getAnimationConfig() {
    if (REDUCED_MOTION.matches) {
      return {
        duration: 0,
        delay: 0,
        easing: 'linear',
        // Still provide visual feedback, just instant
      };
    }
    return {
      duration: 400,
      delay: (index) => index * 50,
      easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
    };
  }
  
  // Listen for changes (user can change setting while page is open)
  REDUCED_MOTION.addEventListener('change', () => {
    // Re-initialize animations with new config
    initAnimations(getAnimationConfig());
  });
  
  // Verify in browser console
  console.log('Reduced motion:', window.matchMedia('(prefers-reduced-motion: reduce)').matches);
  ```

- [ ] **Locomotive Scroll disabled entirely under `prefers-reduced-motion`**
  
  *Why:* Locomotive's smooth scrolling adds artificial lag between user input and page movement — this exact sensation triggers motion sickness in sensitive users.
  
  ```javascript
  // Conditionally initialize Locomotive
  function initScroll() {
    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    
    if (prefersReduced) {
      // Native scroll — no JS overhead
      document.documentElement.style.scrollBehavior = 'auto';
      console.log('ℹ️ Smooth scroll disabled: prefers-reduced-motion');
      return null;
    }
    
    const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true,
      lerp: 0.1,
    });
    
    return scroll;
  }
  
  // Test: Enable reduced motion in macOS System Preferences > Accessibility
  // Then verify: No scroll smoothing, no parallax, no menu bloom animation
  ```

---

### 2.4 Screen Reader Compatibility

- [ ] **Nonlinear page transitions don't break screen reader document order**
  
  *Why:* SPA transitions that reorder DOM elements confuse screen readers — the virtual cursor position becomes invalid. Users get lost or hear repeated content.
  
  ```javascript
  // After any SPA navigation/transition
  function afterPageTransition(newPageElement) {
    // 1. Set focus to new page heading
    const heading = newPageElement.querySelector('h1, [role="heading"]');
    if (heading) {
      heading.tabIndex = -1;
      heading.focus();
      // Remove tabindex after focus (don't pollute tab order)
      heading.addEventListener('blur', () => heading.removeAttribute('tabindex'), 
        { once: true });
    }
    
    // 2. Update document title
    document.title = newPageElement.dataset.pageTitle || document.title;
    
    // 3. Announce to live region
    announceNavigation(document.title);
    
    // 4. Ensure new content is in natural DOM order
    // Check: content shouldn't be after footer in DOM but visually before it
    validateDOMOrder(newPageElement);
  }
  
  function validateDOMOrder(container) {
    const main = container.querySelector('main, [role="main"]');
    const footer = document.querySelector('footer, [role="contentinfo"]');
    
    if (main && footer) {
      const mainPos = main.compareDocumentPosition(footer);
      const isMainBeforeFooter = mainPos & Node.DOCUMENT_POSITION_FOLLOWING;
      console.assert(isMainBeforeFooter, 
        '⚠️ DOM order issue: main content appears after footer in DOM');
    }
  }
  ```

---

## Section 3 — Mobile/Touch Audit

> Radial menus on mobile are high-risk: thumb reach, touch accuracy, and OS-level conflicts (iOS bounce, Android back gesture) can break the experience entirely.

---

### 3.1 Touch Target Sizing

- [ ] **Every radial menu item has minimum 44×44px touch target (Apple HIG) / 48×48dp (Material Design)**
  
  *Why:* The average adult fingertip is 8-10mm. At 96dpi, 44px ≈ 11.6mm — the minimum for reliable touch accuracy. Smaller targets cause mistaps, frustration, and users abandoning navigation.
  
  ```css
  /* Radial menu item — visual size may differ from touch target */
  .radial-item {
    /* Visual presentation */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    
    /* EXTEND touch target without changing layout */
    position: relative;
  }
  
  .radial-item::before {
    content: '';
    position: absolute;
    /* Extend touch area to 44px minimum on all sides */
    inset: calc(-1 * max(0px, (44px - 100%) / 2));
    /* Or explicit: */
    top: -6px; right: -6px; bottom: -6px; left: -6px;
    /* Debug: background: rgba(255,0,0,0.2); */
  }
  
  /* Alternative: padding approach */
  .radial-item-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
  }
  ```
  
  ```javascript
  // Automated touch target audit
  function auditTouchTargets(selector = '[role="menuitem"], a, button') {
    const MIN_SIZE = 44;
    const elements = document.querySelectorAll(selector);
    const violations = [];
    
    elements.forEach(el => {
      const rect = el.getBoundingClientRect();
      if (rect.width < MIN_SIZE || rect.height < MIN_SIZE) {
        violations.push({
          element: el,
          width: Math.round(rect.width),
          height: Math.round(rect.height),
          text: el.textContent.trim().slice(0, 30)
        });
      }
    });
    
    if (violations.length > 0) {
      console.table(violations.map(v => ({
        text: v.text,
        width: v.width,
        height: v.height,
        issue: `${v.width < MIN_SIZE ? `width ${v.width}px` : ''} ${v.height < MIN_SIZE ? `height ${v.height}px` : ''}`.trim()
      })));
      console.error(`❌ ${violations.length} touch target violations found`);
    } else {
      console.log(`✅ All ${elements.length} touch targets meet 44px minimum`);
    }
    
    return violations;
  }
  
  // Run after menu opens
  document.querySelector('.radial-trigger').addEventListener('click', () => {
    setTimeout(() => auditTouchTargets('.radial-item'), 100);
  });
  ```

- [ ] **Radial menu center trigger is reachable in thumb zone on mobile**
  
  *Why:* For a bottom-center radial trigger on 6-inch phone, bottom 40% is the comfortable thumb zone. A top-left hamburger forces uncomfortable grip shifts.
  
  ```javascript
  // Check trigger position relative to thumb zone
  function checkThumbZone() {
    const trigger = document.querySelector('.radial-trigger');
    const rect = trigger.getBoundingClientRect();
    const viewportHeight = window.innerHeight;
    
    // Thumb zone: bottom 50% of screen (rough heuristic)
    const thumbZoneTop = viewportHeight * 0.5;
    const isInThumbZone = rect.top >= thumbZoneTop;
    
    console.log({
      triggerBottom: Math.round(rect.bottom),
      viewportHeight: Math.round(viewportHeight),
      fromBottom: Math.round(viewportHeight - rect.bottom),
      inThumbZone: isInThumbZone
    });
    
    if (!isInThumbZone) {
      console.warn('⚠️ Radial trigger is in awkward reach zone on mobile');
    }
  }
  
  // Run on mobile viewport
  if (window.innerWidth < 768) checkThumbZone();
  ```

---

### 3.2 JavaScript Fallback for Non-Touch Scenarios

- [ ] **Navigation works without JS — core links accessible in `<noscript>`**
  
  *Why:* Lighthouse SEO, corporate networks with JS blocked, first-paint before JS hydration. A radial menu that doesn't render without JS leaves users stranded.
  
  ```html
  <!-- Progressive enhancement: base navigation always exists -->
  <nav class="nav-fallback" aria-label="Main navigation">
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/work">Work</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
  
  <!-- JS enhances into radial menu -->
  <script>
    // Hide fallback nav when JS initializes radial menu
    document.addEventListener('DOMContentLoaded', () => {
      const radialMenu = initRadialMenu();
      if (radialMenu) {
        document.querySelector('.nav-fallback')
          ?.setAttribute('aria-hidden', 'true');
        // Or: document.querySelector('.nav-fallback').style.display = 'none';
      }
    });
  </script>
  
  <!-- Ensure fallback is visible without JS -->
  <noscript>
    <style>
      .nav-fallback { display: block !important; }
      .radial-menu-trigger { display: none; }
    </style>
  </noscript>
  ```
  
  ```bash
  # Test without JS
  # Chrome DevTools > Settings > Debugger > Disable JavaScript
  # Then navigate to site
  # Expected: Fallback nav visible and functional
  
  # Or use curl to verify nav links in HTML
  curl -s https://your-domain.com | \
    grep -E '<a href' | \
    grep -v "radial\|js-only"
  ```

- [ ] **Touch event conflicts with browser gestures resolved (iOS swipe back, Android back gesture)**
  
  *Why:* A radial menu that opens on swipe can conflict with iOS Safari's back-swipe gesture. Users accidentally navigate backward instead of opening menu. Especially destructive in nonlinear UX patterns.
  
  ```javascript
  // Detect and handle gesture conflicts
  class TouchGestureManager {
    constructor(menuElement) {
      this.menu = menuElement;
      this.startX = 0;
      this.startY = 0;
      this.EDGE_THRESHOLD = 30; // px from screen edge
      
      this.menu.addEventListener('touchstart', this.onTouchStart.bind(this), 
        { passive: true });
      this.menu.addEventListener('touchmove', this.onTouchMove.bind(this), 
        { passive: false }); // Non-passive to allow preventDefault
    }
    
    onTouchStart(e) {
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    }
    
    onTouchMove(e) {
      const deltaX = e.touches[0].clientX - this.startX;
      const isEdgeSwipe = this.startX < this.EDGE_THRESHOLD || 
                          this.startX > window.innerWidth - this.EDGE_THRESHOLD;
      
      // Don't intercept edge swipes — let browser handle navigation
      if (isEdgeSwipe && Math.abs(deltaX) > 10) {
        return; // Allow iOS swipe-back
      }
      
      // Prevent scroll if menu interaction
      if (this.menu.classList.contains('is-open')) {
        e.preventDefault();
      }
    }
  }
  
  // Verify: open radial menu, swipe from left edge
  // Expected: menu closes AND iOS back gesture fires (no conflict)
  ```

---

### 3.3 Touch Device Detection

- [ ] **Hover states replaced with appropriate touch states on touch devices**
  
  *Why:* CSS `:hover` states that reveal radial menu items are broken on touch — no hover state exists. Users see nothing interactive until they tap, getting no affordance.
  
  ```javascript
  // Robust touch detection (pointer media query preferred over userAgent sniffing)
  const isTouch = window.matchMedia('(hover: none) and (pointer: coarse)').matches;
  const isFinePointer = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
  
  // Apply class to root for CSS targeting
  document.documentElement.classList.toggle('is-touch', isTouch);
  document.documentElement.classList.toggle('is-pointer', isFinePointer);
  
  // Also handle hybrid devices (Surface, iPad with mouse)
  window.matchMedia('(hover: none)').addEventListener('change', (e) => {
    document.documentElement.classList.toggle('is-touch', e.matches);
  });
  ```
  
  ```css
  /* Hover-only reveals — only on pointer devices */
  @media (hover: hover) and (pointer: fine) {
    .radial-trigger:hover .radial-preview {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Touch: always visible affordance */
  @media (hover: none) {
    .radial-preview {
      opacity: 1; /* Always show, no hover needed */
    }
    
    /* Larger hit areas on touch */
    .radial-item {
      min-width: 48px;
      min-height: 48px;
    }
    
    /* Active state feedback */
    .radial-item:active {
      transform: scale(0.95);
      background: rgba(255, 255, 255, 0.2);
    }
  }
  ```

- [ ] **Long-press doesn't conflict with OS context menus on touch (especially iOS)**
  
  *Why:* If radial menu opens on long-press, iOS long-press also shows "Copy Link" / "Open in New Tab" context menu on links. Two menus appear simultaneously — broken experience.
  
  ```javascript
  // Prevent iOS callout on radial menu items if using long-press trigger
  const radialItems = document.querySelectorAll('.radial-item');
  radialItems.forEach(item => {
    // Prevent iOS magnifier/callout
    item.style.webkitTouchCallout = 'none';
    item.style.webkitUserSelect = 'none';
    item.style.userSelect = 'none';
  });
  
  // Better: use touchstart/touchend for long-press, not contextmenu
  let longPressTimer;
  const LONG_PRESS_DURATION = 500;
  
  trigger.addEventListener('touchstart', (e) => {
    longPressTimer = setTimeout(() => {
      openRadialMenu();
    }, LONG_PRESS_DURATION);
  }, { passive: true });
  
  trigger.addEventListener('touchend', () => {
    clearTimeout(longPressTimer);
  });
  
  trigger.addEventListener('touchmove', () => {
    clearTimeout(longPressTimer); // Cancel if user is scrolling
  });
  ```
  
  ```css
  /* CSS to prevent context menus on radial items */
  .radial-menu,
  .radial-item {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  ```

---

## Section 4 — Browser Compatibility

> Experimental navigation relies on cutting-edge APIs. Ship the innovation, but never break for users on older browsers.

---

### 4.1 View Transitions API

- [ ] **Feature detection implemented — graceful fallback for unsupported browsers**
  
  *Why:* View Transitions API has ~75% browser support (2025). 25% of users (including Firefox users with the flag off) will see broken transitions or errors if no fallback exists.
  
  ```javascript
  // Feature detection + fallback
  async function navigateWithTransition(url, transitionType = 'default') {
    // Check support
    if (!document.startViewTransition) {
      // Fallback: instant navigation
      console.log('ℹ️ View Transitions not supported — instant navigation');
      await instantNavigate(url);
      return;
    }
    
    // Enhanced: View Transition
    const transition = document.startViewTransition(async () => {
      await instantNavigate(url);
    });
    
    // Set transition type for CSS targeting
    transition.ready.then(() => {
      document.documentElement.dataset.transitionType = transitionType;
    });
    
    try {
      await transition.finished;
    } catch (err) {
      // Transition can fail if user navigates away during animation
      console.warn('View transition interrupted:', err);
    } finally {
      delete document.documentElement.dataset.transitionType;
    }
  }
  
  // Polyfill option
  // npm install @vite-plugin-view-transitions
  // OR use @astrojs/transitions for Astro projects
  
  // Check current support
  console.log('View Transitions supported:', 'startViewTransition' in document);
  ```
  
  ```css
  /* View Transition fallback-safe CSS */
  /* Old content exit */
  ::view-transition-old(root) {
    animation: fade-out 0.25s ease forwards;
  }
  
  /* New content enter */
  ::view-transition-new(root) {
    animation: fade-in 0.25s ease forwards;
  }
  
  /* Named transition for radial menu */
  .radial-menu {
    view-transition-name: radial-nav;
  }
  
  /* These rules are ignored in unsupported browsers — safe to include */
  ```

- [ ] **Verify View Transitions work correctly in Safari Technology Preview (partial support)**
  
  *Why:* Safari added View Transitions in v18 but with quirks around `view-transition-name` on dynamically created elements. Radial menus create items dynamically.
  
  ```javascript
  // Safari View Transitions compatibility check
  function getSafariVersion() {
    const match = navigator.userAgent.match(/Version\/(\d+)/);
    return match ? parseInt(match[1]) : null;
  }
  
  const safariVersion = getSafariVersion();
  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  
  // Disable complex transitions on Safari < 18
  const USE_TRANSITIONS = document.startViewTransition && 
    !(isSafari && safariVersion < 18);
  
  // For dynamically created radial items on Safari
  function assignViewTransitionName(element, name) {
    // Safari requires the element to be in DOM before assigning name
    if (isSafari) {
      requestAnimationFrame(() => {
        element.style.viewTransitionName = name;
      });
    } else {
      element.style.viewTransitionName = name;
    }
  }
  ```

---

### 4.2 CSS Anchor Positioning Fallback

- [ ] **CSS Anchor Positioning (`anchor()`, `position-anchor`) has JavaScript fallback**
  
  *Why:* CSS Anchor Positioning (Chrome 125+) has ~65% support. If you're using it to position radial menu items relative to trigger, Firefox and Safari will get mis-positioned items without fallback.
  
  ```javascript
  // Feature detection
  const SUPPORTS_ANCHOR = CSS.supports('anchor-name: --test');
  
  if (!SUPPORTS_ANCHOR) {
    console.log('ℹ️ CSS Anchor Positioning not supported — using JS positioning');
    initJSPositioning();
  }
  
  // JS fallback positioning for radial items
  function initJSPositioning() {
    const trigger = document.querySelector('.radial-trigger');
    const items = document.querySelectorAll('.radial-item');
    
    function positionItems() {
      const triggerRect = trigger.getBoundingClientRect();
      const centerX = triggerRect.left + triggerRect.width / 2;
      const centerY = triggerRect.top + triggerRect.height / 2;
      const RADIUS = 120;
      
      items.forEach((item, index) => {
        const angle = (index / items.length) * 2 * Math.PI - Math.PI / 2;
        const x = centerX + RADIUS * Math.cos(angle);
        const y = centerY + RADIUS * Math.sin(angle);
        
        item.style.position = 'fixed';
        item.style.left = `${x}px`;
        item.style.top = `${y}px`;
        item.style.transform = 'translate(-50%, -50%)';
      });
    }
    
    positionItems();
    window.addEventListener('resize', positionItems);
    window.addEventListener('scroll', positionItems);
  }
  ```
  
  ```css
  /* Progressive enhancement with @supports */
  @supports (anchor-name: --nav-trigger) {
    .radial-trigger {
      anchor-name: --nav-trigger;
    }
    
    .radial-item {
      position: fixed;
      position-anchor: --nav-trigger;
      /* Items use anchor() for positioning */
    }
    
    .radial-item:nth-child(1) {
      top: anchor(top);
      left: calc(anchor(center) + 120px);
    }
  }
  
  /* Fallback: items hidden, JS will position them */
  @supports not (anchor-name: --nav-trigger) {
    .radial-item {
      /* Base positioning, JS overrides */
      position: fixed;
      opacity: 0; /* Hidden until JS positions */
    }
    
    .js-positioned .radial-item {
      opacity: 1; /* Show after JS runs */
    }
  }
  ```

---

### 4.3 Safari iOS Quirks

- [ ] **100vh bug addressed — radial menu overlay doesn't get cut off by iOS Safari toolbar**
  
  *Why:* iOS Safari's dynamic toolbar means `100vh` is taller than the visible viewport. A full-screen radial overlay using `height: 100vh` gets partially hidden behind the address bar.
  
  ```css
  /* ❌ WRONG — gets clipped by iOS toolbar */
  .radial-overlay {
    height: 100vh;
  }
  
  /* ✅ CORRECT — use dvh or fallback */
  .radial-overlay {
    /* Fallback for browsers without dvh */
    height: 100vh;
    /* Dynamic viewport height — accounts for iOS toolbar */
    height: 100dvh;
  }
  
  /* Alternative JS approach */
  ```
  
  ```javascript
  // JS fix for iOS Safari 100vh bug
  function setViewportHeight() {
    // Get actual visible viewport height
    const vh = window.visualViewport ? 
      window.visualViewport.height : 
      window.innerHeight;
    
    document.documentElement.style.setProperty('--vh', `${vh * 0.01}px`);
  }
  
  setViewportHeight();
  window.addEventListener('resize', setViewportHeight);
  
  // If using visualViewport API (more accurate)
  if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', setViewportHeight);
    window.visualViewport.addEventListener('scroll', setViewportHeight);
  }
  ```
  
  ```css
  /* Use custom property */
  .radial-overlay {
    height: calc(var(--vh, 1vh) * 100);
  }
  ```

- [ ] **Safari iOS `position: fixed` doesn't jitter during momentum scroll**
  
  *Why:* Fixed-position radial trigger on iOS Safari notoriously jumps/jitters during kinetic (momentum) scroll. Users see the trigger bouncing — looks broken.
  
  ```css
  /* Prevent iOS fixed element jitter */
  .radial-trigger {
    position: fixed;
    /* Force hardware acceleration to prevent jitter */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Prevent backface visibility issues */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  
  /* If Locomotive Scroll is disabled on iOS (recommended): */
  .locomotive-scroll-disabled .radial-trigger {
    /* Native scroll — fixed works correctly */
    position: fixed;
  }
  ```
  
  ```javascript
  // Detect and disable smooth scroll on iOS
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || 
    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
  
  if (isIOS) {
    // Disable Locomotive on iOS
    document.documentElement.classList.add('ios-device');
    // Use native scroll
    locomotiveScroll.destroy();
  }
  ```

- [ ] **Radial menu tested on iPhone SE (small screen, 375px) and iPhone Pro Max (430px)**
  
  *Why:* Radial menu radius that works on 390px screen may overflow or overlap items on 375px SE. Large phones need different radius. One-size-fits-all breaks.
  
  ```javascript
  // Responsive radial radius
  function getRadialRadius() {
    const vw = window.innerWidth;
    
    if (vw < 390) return 90;  // SE: tight radius
    if (vw < 430) return 110; // Standard: comfortable
    if (vw < 768) return 130; // Large phone: spacious
    return 150;               // Tablet/desktop
  }
  
  // CSS custom property approach
  function updateRadialRadius() {
    const radius = getRadialRadius();
    document.documentElement.style.setProperty('--radial-radius', `${radius}px`);
  }
  
  updateRadialRadius();
  window.addEventListener('resize', updateRadialRadius);
  ```
  
  ```css
  .radial-item:nth-child(1) {
    --angle: 0deg;
    transform: rotate(var(--angle)) 
               translateX(var(--radial-radius, 120px)) 
               rotate(calc(-1 * var(--angle)));
  }
  ```

- [ ] **Overscroll and bounce behavior handled for full-screen radial overlay**
  
  *Why:* iOS rubber-band scroll effect shows through a full-screen radial menu overlay, revealing content underneath. Breaks the illusion of the overlay.
  
  ```javascript
  // Prevent scroll-through on overlay open
  let scrollPosition = 0;
  
  function lockScroll() {
    scrollPosition = window.scrollY;
    document.body.style.overflow = 'hidden';
    document.body.style.position = 'fixed';
    document.body.style.top = `-${scrollPosition}px`;
    document.body.style.width = '100%';
  }
  
  function unlockScroll() {
    document.body.style.removeProperty('overflow');
    document.body.style.removeProperty('position');
    document.body.style.removeProperty('top');
    document.body.style.removeProperty('width');
    window.scrollTo(0, scrollPosition);
  }
  
  // Use on radial menu open/close
  radialMenu.addEventListener('open', lockScroll);
  radialMenu.addEventListener('close', unlockScroll);
  ```
  
  ```css
  /* CSS approach using overscroll-behavior */
  .radial-overlay {
    overscroll-behavior: contain;
    /* Prevents pull-to-refresh and over-scroll on overlay */
    touch-action: none; /* If overlay shouldn't scroll at all */
  }
  ```

---

## Section 5 — User Testing Checklist

> Code that passes all technical audits can still fail users. Experimental navigation requires validation with real humans — 5 is the minimum, more is always better.

---

### 5.1 Test Setup Requirements

- [ ] **Minimum 5 participants recruited across user segments**
  
  *Why:* Nielsen's Law of 5 Users — 5 users uncover ~85% of usability issues. For experimental navigation, diversify: 2 tech-savvy, 2 average users, 1 non-tech-savvy. Include at least 1 mobile-first user.
  
  ```markdown
  ## Participant Recruitment Template
  
  ### Screening Criteria:
  - Age range: 18-65 (not just developers/designers)
  - Device: 2 mobile-only users, 2 desktop, 1 either
  - Tech comfort: Mix of levels — avoid recruiting only devs
  - Navigation style: 1 keyboard-primary user if possible
  
  ### Required minimum:
  | # | Age | Device | Tech Level | Notes |
  |---|-----|--------|------------|-------|
  | 1 | 22-35 | Mobile | High | Power user |
  | 2 | 35-50 | Desktop | Medium | Regular web user |
  | 3 | 18-25 | Mobile | Medium | Social media native |
  | 4 | 45-65 | Desktop | Low | Non-tech-savvy |
  | 5 | Any | Any | Any | Wildcard |
  
  ### Compensation:
  - Remote: $25-50 gift card
  - In-person: $50-75
  ```

- [ ] **Test environment set up with session recording (with consent)**
  
  *Why:* Memory is unreliable. Recording captures micro-hesitations, scroll behaviors, and accidental taps that observers miss. Essential for post-test analysis.
  
  ```markdown
  ## Tool Options:
  
  ### Remote Testing:
  - **Maze** (maze.co) — task completion rates, heatmaps
  - **UserZoom** — enterprise, full session recording
  - **Lookback.io** — think-aloud, webcam + screen
  - **Hotjar** — heatmaps post-launch (not moderated)
  
  ### In-Person:
  - OBS Studio (free) — screen + webcam recording
  - Loom — quick async recordings
  
  ### Consent template (add to test intro):
  "This session will be recorded for research purposes only.
  The recording will only be viewed by our design team.
  You may stop at any time. Do you consent? Y/N"
  
  ### Setup checklist:
  - [ ] Recording software tested before session
  - [ ] Consent form signed
  - [ ] Test URL loaded in private/incognito browser
  - [ ] Notifications disabled on test device
  - [ ] Realistic content (not lorem ipsum) in navigation
  ```

---

### 5.2 Discovery Test (Can Users Find the Navigation?)

- [ ] **Unprimed discovery test: "Please find the About page" with no hints**
  
  *Why:* The most critical test for experimental navigation. If users can't discover the radial menu without being told it exists, the UX is too experimental for production. Target: ≥ 4/5 users discover it within 30 seconds.
  
  ```markdown
  ## Discovery Test Protocol
  
  ### Task Script:
  "I'm going to show you a website. Without any guidance from me,
  please navigate to the About page. Think aloud as you explore."
  
  ### Success Metrics:
  | Metric | Target | Fail Threshold |
  |--------|--------|----------------|
  | Discovery time | < 15 sec | > 45 sec |
  | Success rate | ≥ 4/5 users | < 3/5 users |
  | With hesitation | Acceptable | N/A |
  | Requires help | Maximum 1/5 | > 2/5 users |
  
  ### Observation Points:
  - [ ] Where does user look first? (Eye tracking or verbal)
  - [ ] Do they hover over trigger? (Affordance working)
  - [ ] Do they see the trigger at all?
  - [ ] Do they try scrolling to find navigation?
  - [ ] Verbal confusion: "Where is the menu?"
  
  ### If discovery fails:
  - Trigger affordance insufficient → add label/animation hint
  - Trigger invisible → increase contrast, size, or add pulse animation
  - Consider: "NEW" tooltip on first visit using localStorage
  
  ### localStorage first-visit hint:
  ```
  
  ```javascript
  // First-visit navigation hint
  const HINT_KEY = 'nav-hint-shown';
  
  if (!localStorage.getItem(HINT_KEY)) {
    // Show hint animation on trigger
    document.querySelector('.radial-trigger').classList.add('show-hint');
    
    // Optionally show tooltip
    showTooltip('Click to explore', document.querySelector('.radial-trigger'));
    
    // Mark as shown after interaction
    document.querySelector('.radial-trigger').addEventListener('click', () => {
      localStorage.setItem(HINT_KEY, '1');
      document.querySelector('.radial-trigger').classList.remove('show-hint');
    }, { once: true });
    
    // Auto-dismiss after 5 seconds
    setTimeout(() => {
      document.querySelector('.radial-trigger').classList.remove('show-hint');
    }, 5000);
  }
  ```

- [ ] **Second-visit test: user can navigate without assistance**
  
  *Why:* Experimental navigation has a learning curve. If users can't remember how it works on second visit, it fails the efficiency test. SUS score drop from visit 1 to visit 2 should be < 10 points.
  
  ```markdown
  ## Second Visit Protocol
  
  ### Method: 2-session study (1 week apart)
  
  ### Session 1 — Learn:
  - Unprimed discovery test
  - Complete 3 navigation tasks
  - Rate: "How difficult was navigation?" (1-7 scale)
  
  ### Session 2 — Retention:
  - Same 3 tasks, no hints
  - Record time-to-complete
  - Rate same question
  
  ### Pass Criteria:
  - Task time: Session 2 ≤ 50% of Session 1 time
  - Difficulty rating: Session 2 ≤ Session 1 - 1 point
  - Error rate: Session 2 ≤ 50% of Session 1 errors
  
  ### Quick Learnability SUS Survey (after each session):
  1. I thought the navigation was easy to use.          (1-5)
  2. I needed to learn a lot before using it.           (1-5, reversed)
  3. I felt confident using the navigation.             (1-5)
  4. I found the navigation unnecessarily complex.      (1-5, reversed)
  5. I would use this navigation frequently.            (1-5)
  
  SUS Score = ((Sum of odd items - 5) + (25 - Sum of even items)) × 2.5
  Target: SUS ≥ 68 (industry average), ≥ 80 preferred
  ```

---

### 5.3 Cognitive Load Assessment

- [ ] **NASA-TLX or simplified cognitive load survey administered after navigation tasks**
  
  *Why:* Users may successfully complete tasks but feel mentally exhausted doing so. High cognitive load means the navigation is working against users. Acceptable: < 45/100 on NASA-TLX for primary navigation tasks.
  
  ```markdown
  ## Simplified Cognitive Load Survey
  (Administered immediately after each navigation task)
  
  Rate each from 1 (Very Low) to 10 (Very High):
  
  1. **Mental Demand:** How mentally demanding was this?
  2. **Effort:** How hard did you have to work?
  3. **Frustration:** How insecure/annoyed were you?
  4. **Performance:** How successful were you? (reversed: 10=failure)
  
  Score = (MD + E + FR + (10 - P)) / 4 × 10
  
  ## Benchmarks:
  | Score | Rating | Action |
  |-------|--------|--------|
  | 0-30 | Excellent | Ship it |
  | 30-50 | Acceptable | Minor tweaks |
  | 50-70 | Poor | Significant redesign |
  | 70+ | Critical | Do not ship |
  
  ## Common Cognitive Load Triggers in Radial Menus:
  - Too many items (> 8) → Hick's Law violation
  - Items without labels (icon only) → Recognition burden
  - No clear entry/exit affordance → Disorientation
  - Animation obscures item positions → Spatial memory failure
  
  ## Quick Hick's Law check:
  ```
  
  ```javascript
  // Hick's Law: reaction time = a + b × log2(n + 1)
  // Maximum recommended: 7 ± 2 items (Miller's Law)
  
  function auditMenuItems() {
    const items = document.querySelectorAll('[role="menuitem"]');
    const count = items.length;
    
    if (count > 9) {
      console.error(`❌ Too many menu items: ${count}. Max: 9 (Miller's Law)`);
      console.info('Solution: Group items into categories, use nested radial menu');
    } else if (count > 7) {
      console.warn(`⚠️ ${count} menu items approaching cognitive limit (7±2)`);
    } else {
      console.log(`✅ Menu item count: ${count} — within cognitive limits`);
    }
    
    // Check for icon-only items (no accessible label)
    items.forEach(item => {
      const hasText = item.textContent.trim().length > 0;
      const hasLabel = item.hasAttribute('aria-label') || 
                       item.hasAttribute('aria-labelledby');
      
      if (!hasText && !hasLabel) {
        console.error(`❌ Icon-only menu item without label: ${item.innerHTML}`);
      }
    });
  }
  
  auditMenuItems();
  ```

- [ ] **Post-test interview: "Can you describe how the navigation works?" — user should explain correctly**
  
  *Why:* Mental model alignment test. If user can't describe the navigation pattern back to you, their mental model doesn't match your design model. Future interactions will be hit-or-miss.
  
  ```markdown
  ## Mental Model Interview Protocol
  
  ### After all tasks are complete, ask:
  
  1. **Model accuracy:** 
     "In your own words, can you describe how the navigation works?"
     
     Scoring:
     - Accurate description → ✅ Mental model aligned
     - Partially correct → ⚠️ Some aspects unclear
     - Incorrect/confused → ❌ Mental model misaligned, redesign needed
  
  2. **Expectation check:**
     "Was there anything that surprised you about how the navigation behaved?"
     
     Listen for: Animation timing, item positions, close behavior
  
  3. **Comparison:**
     "How does this compare to navigation on other websites you use?"
     
     Listen for: Positive novelty vs. confusion/preference for conventional
  
  4. **Trust:**
     "Would you feel confident finding any page on this site without help?"
     
     Yes → ✅ | Unsure → ⚠️ | No → ❌
  
  ## Minimum Pass Threshold:
  - 4/5 users: Accurate mental model description
  - 5/5 users: Positive or neutral novelty assessment
  - 4/5 users: Confident they could find pages independently
  
  ## If mental models are misaligned:
  - [ ] Add onboarding tooltip sequence (first-visit only)
  - [ ] Consider adding visible navigation labels at all times
  - [ ] Reassess whether radial pattern serves this audience
  - [ ] A/B test against conventional navigation (same content)
  ```

---

## Sign-Off Matrix

> All items in sections 1-2 must be ✅ before production. Sections 3-5: max 2 deferred items with documented mitigation.

```markdown
## Deployment Approval

| Role | Name | Date | Signature |
|------|------|------|-----------|
| Lead Developer | | | |
| UX/Design Lead | | | |
| QA Engineer | | | |
| Accessibility Review | | | |
| Product Owner | | | |

## Deferred Items (max 2, must have mitigation):
| Item | Section | Mitigation | Target Date |
|------|---------|------------|-------------|
| | | | |

## Final Scores:
- Lighthouse Mobile Performance: ___/100 (Required: ≥ 90)
- Lighthouse Accessibility: ___/100 (Required: ≥ 95)
- User Testing SUS Score: ___/100 (Required: ≥ 68)
- Cognitive Load Score: ___/100 (Required: ≤ 50)
- Browser Matrix Coverage: ___%  (Required: ≥ 95%)

## Launch Decision:
[ ] APPROVED — All critical items passed
[ ] CONDITIONAL — Deferred items documented and tracked
[ ] BLOCKED — Critical failures must be resolved
```

---

*Checklist maintained by: [Team] | Review cycle: Per release | Based on: WCAG 2.1 AA, Apple HIG, Material Design, Nielsen Norman Group research*