Principes UX essentiels pour les applications web modernes

L'UX au cœur du succès des applications web

Dans un monde où l'attention des utilisateurs est de plus en plus difficile à capter, l'expérience utilisateur (UX) devient le facteur différenciant principal entre une application qui réussit et une qui échoue. Une bonne UX ne se contente pas d'être "jolie" : elle guide intuitivement l'utilisateur vers ses objectifs tout en créant une expérience mémorable et efficace.

Les fondamentaux de l'UX : Lois et principes universels

1. La Loi de Fitts : Optimiser les interactions

La loi de Fitts stipule que le temps nécessaire pour atteindre une cible dépend de sa taille et de sa distance. Plus un élément est large et proche, plus il est facile et rapide à atteindre.

/* Application de la loi de Fitts en CSS */
/* Boutons d'action principaux - Plus gros, plus faciles à cliquer */
.primary-button {
  min-width: 120px;
  min-height: 44px; /* Recommandation mobile */
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;
  
  /* Augmentation de la zone de clic */
  position: relative;
}

.primary-button::before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  /* Zone de clic étendue invisible */
}

/* Actions secondaires - Plus petites mais toujours accessibles */
.secondary-button {
  min-width: 80px;
  min-height: 36px;
  padding: 8px 16px;
  font-size: 14px;
}

/* Éléments fréquemment utilisés - Proches et accessibles */
.frequent-action {
  position: sticky;
  top: 20px;
  right: 20px;
  z-index: 100;
}

/* Navigation - Éléments importants en premier */
.main-nav {
  display: flex;
  justify-content: flex-start; /* Important à gauche */
}

.main-nav .logo {
  margin-right: auto; /* Logo toujours accessible */
}

.main-nav .primary-nav {
  display: flex;
  gap: 8px; /* Proximité des éléments liés */
}

/* Responsive - Adaptation mobile */
@media (max-width: 768px) {
  .primary-button {
    width: 100%;
    min-height: 50px; /* Plus large sur mobile */
  }
}

2. La Loi de Hick : Réduire la complexité des choix

Plus vous donnez d'options à un utilisateur, plus il lui faudra de temps pour prendre une décision. Simplifiez les choix pour améliorer la rapidité de décision et réduire la frustration.

// React - Menu de navigation simplifié
function NavigationMenu({ user }) {
  // Réduire les options selon le contexte
  const getMenuItems = () => {
    if (!user) {
      return [
        { label: 'Accueil', path: '/' },
        { label: 'À propos', path: '/about' },
        { label: 'Se connecter', path: '/login', primary: true }
      ];
    }
    
    // Menu utilisateur connecté - Max 5-7 items
    return [
      { label: 'Dashboard', path: '/dashboard' },
      { label: 'Projets', path: '/projects' },
      { label: 'Messages', path: '/messages' },
      { label: 'Profil', path: '/profile' },
      { label: 'Déconnexion', path: '/logout' }
    ];
  };
  
  return (
    <nav className="main-navigation">
      {getMenuItems().map(item => (
        <NavItem key={item.path} {...item} />
      ))}
    </nav>
  );
}

// Composant de sélection avec regroupement
function ProductSelector({ products }) {
  // Regrouper pour réduire la complexité cognitive
  const groupedProducts = products.reduce((groups, product) => {
    const category = product.category;
    if (!groups[category]) groups[category] = [];
    groups[category].push(product);
    return groups;
  }, {});
  
  return (
    <div className="product-selector">
      {Object.entries(groupedProducts).map(([category, items]) => (
        <div key={category} className="product-group">
          <h3 className="group-title">{category}</h3>
          <div className="group-items">
            {items.slice(0, 5).map(product => ( // Limiter à 5 par groupe
              <ProductOption key={product.id} product={product} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

// Progressive disclosure pour réduire la surcharge
function AdvancedSettings({ isExpanded, onToggle }) {
  return (
    <div className="settings-section">
      <h3>Paramètres</h3>
      
      {/* Options de base toujours visibles */}
      <div className="basic-settings">
        <Setting label="Notifications" type="toggle" />
        <Setting label="Langue" type="select" />
        <Setting label="Thème" type="radio" />
      </div>
      
      {/* Options avancées masquées par défaut */}
      <button 
        onClick={onToggle}
        className="expand-trigger"
      >
        {isExpanded ? 'Masquer' : 'Options avancées'} 
        <ChevronIcon rotated={isExpanded} />
      </button>
      
      {isExpanded && (
        <div className="advanced-settings">
          <Setting label="Cache" type="number" />
          <Setting label="Debug Mode" type="toggle" />
          <Setting label="API Endpoint" type="text" />
        </div>
      )}
    </div>
  );
}

3. La Loi de Miller : Limitation de la mémoire de travail

L'esprit humain peut garder en mémoire de travail environ 7±2 éléments simultanément. Structurez l'information en chunks de taille appropriée.

Architecture de l'information et navigation

Hiérarchie visuelle et scannabilité

Les utilisateurs scannent plus qu'ils ne lisent. Créez une hiérarchie claire qui guide naturellement le regard vers les éléments importants.

/* Hiérarchie typographique claire */
.content-hierarchy {
  /* Titre principal - Plus gros, plus de contraste */
  h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 1.5rem;
  }
  
  /* Sous-titres - Différenciation progressive */
  h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 600;
    color: #2a2a2a;
    margin: 2rem 0 1rem 0;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 0.5rem;
  }
  
  h3 {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 600;
    color: #3a3a3a;
    margin: 1.5rem 0 0.75rem 0;
  }
  
  /* Corps de texte - Lisibilité optimale */
  p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a4a4a;
    margin-bottom: 1.25rem;
    max-width: 65ch; /* Ligne de lecture optimale */
  }
  
  /* Éléments de mise en avant */
  .highlight {
    background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.2em;
    background-position: 0 88%;
    transition: background-size 0.25s ease-in;
  }
  
  .highlight:hover {
    background-size: 100% 100%;
  }
  
  /* Call-to-action - Maximum de contraste */
  .cta {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transform: translateY(0);
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  }
  
  .cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
  }
}

/* Layout en F-pattern et Z-pattern */
.f-pattern-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "primary secondary tertiary"
    "content content sidebar";
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
}

.hero-section {
  grid-area: header;
  /* Zone de scanning horizontal primaire */
}

.primary-content {
  grid-area: primary;
  /* Point focal principal */
}

.secondary-content {
  grid-area: secondary;
  /* Élément de scanning horizontal secondaire */
}

/* Mobile : Z-pattern simplifié */
@media (max-width: 768px) {
  .f-pattern-layout {
    grid-template-areas:
      "header"
      "primary"
      "secondary"
      "content"
      "sidebar";
    grid-template-columns: 1fr;
  }
}

Navigation et wayfinding

Les utilisateurs doivent toujours savoir où ils sont, d'où ils viennent et où ils peuvent aller. Implémentez des systèmes de navigation clairs et cohérents.

// React - Système de navigation contextuelle
function ContextualNavigation({ currentPath, userRole, breadcrumbs }) {
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  
  return (
    <nav className="contextual-nav" role="navigation" aria-label="Navigation principale">
      {/* Breadcrumbs pour l'orientation */}
      <Breadcrumbs items={breadcrumbs} />
      
      {/* Navigation principale avec état actif */}
      <ul className="main-nav" role="menubar">
        {getNavigationItems(userRole).map(item => (
          <NavItem 
            key={item.path}
            {...item}
            isActive={currentPath.startsWith(item.path)}
            hasSubMenu={item.children?.length > 0}
          />
        ))}
      </ul>
      
      {/* Recherche contextuelle */}
      <SearchBox 
        isOpen={isSearchOpen}
        onToggle={setIsSearchOpen}
        placeholder={getSearchPlaceholder(currentPath)}
        filters={getContextualFilters(currentPath)}
      />
      
      {/* Indicateur de position dans un workflow */}
      {isInWorkflow(currentPath) && (
        <WorkflowIndicator 
          currentStep={getCurrentStep(currentPath)}
          totalSteps={getTotalSteps(currentPath)}
        />
      )}
    </nav>
  );
}

// Composant de navigation par étapes
function WorkflowIndicator({ currentStep, totalSteps }) {
  return (
    <div className="workflow-indicator" aria-label={`Étape ${currentStep} sur ${totalSteps}`}>
      {Array.from({ length: totalSteps }, (_, i) => {
        const stepNumber = i + 1;
        const isComplete = stepNumber < currentStep;
        const isCurrent = stepNumber === currentStep;
        
        return (
          <div 
            key={stepNumber}
            className={`step ${isComplete ? 'complete' : ''} ${isCurrent ? 'current' : ''}`}
            aria-current={isCurrent ? 'step' : undefined}
          >
            <span className="step-number">{stepNumber}</span>
            <span className="step-label">{getStepLabel(stepNumber)}</span>
          </div>
        );
      })}
    </div>
  );
}

/* CSS pour la navigation */
.contextual-nav {
  position: sticky;
  top: 0;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  z-index: 50;
  padding: 1rem;
}

.main-nav {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-item.active {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-color);
}

.workflow-indicator {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  gap: 1rem;
}

.step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.step.current {
  background: var(--primary-color);
  color: white;
  font-weight: 600;
}

.step.complete {
  background: var(--success-color);
  color: white;
}

.step.complete .step-number::after {
  content: '✓';
  margin-left: 0.25rem;
}

Feedback et états du système

Communication en temps réel avec l'utilisateur

Les utilisateurs doivent toujours comprendre ce qui se passe dans votre application. Implémentez des feedbacks clairs pour tous les états du système.

// React - Système de feedback complet
function FeedbackSystem() {
  const [notifications, setNotifications] = useState([]);
  const [loadingStates, setLoadingStates] = useState(new Map());
  
  // Hook pour gérer les états de chargement
  const useAsyncAction = (actionName) => {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    
    const execute = async (asyncFunction) => {
      setIsLoading(true);
      setError(null);
      
      try {
        const result = await asyncFunction();
        
        // Feedback de succès
        addNotification({
          type: 'success',
          title: 'Succès',
          message: `${actionName} terminé avec succès`,
          duration: 3000
        });
        
        return result;
      } catch (err) {
        setError(err);
        
        // Feedback d'erreur
        addNotification({
          type: 'error',
          title: 'Erreur',
          message: err.message || `Erreur lors de ${actionName}`,
          duration: 5000,
          actions: [
            { label: 'Réessayer', action: () => execute(asyncFunction) },
            { label: 'Signaler', action: () => reportError(err) }
          ]
        });
      } finally {
        setIsLoading(false);
      }
    };
    
    return { execute, isLoading, error };
  };
  
  return { useAsyncAction, notifications, setNotifications };
}

// Composant de notification riche
function Notification({ notification, onDismiss }) {
  const { type, title, message, duration, actions } = notification;
  
  useEffect(() => {
    if (duration) {
      const timer = setTimeout(() => onDismiss(notification.id), duration);
      return () => clearTimeout(timer);
    }
  }, [duration, notification.id, onDismiss]);
  
  return (
    <div className={`notification notification--${type}`} role="alert" aria-live="polite">
      <div className="notification__icon">
        {type === 'success' && <CheckIcon />}
        {type === 'error' && <ErrorIcon />}
        {type === 'warning' && <WarningIcon />}
        {type === 'info' && <InfoIcon />}
      </div>
      
      <div className="notification__content">
        <h4 className="notification__title">{title}</h4>
        <p className="notification__message">{message}</p>
        
        {actions && (
          <div className="notification__actions">
            {actions.map((action, index) => (
              <button
                key={index}
                className="notification__action"
                onClick={action.action}
              >
                {action.label}
              </button>
            ))}
          </div>
        )}
      </div>
      
      <button 
        className="notification__dismiss"
        onClick={() => onDismiss(notification.id)}
        aria-label="Fermer la notification"
      >
        <XIcon />
      </button>
    </div>
  );
}

// États de chargement avec skeleton
function LoadingState({ type = 'content', lines = 3, showAvatar = false }) {
  return (
    <div className="loading-skeleton" aria-label="Chargement en cours">
      {showAvatar && (
        <div className="skeleton-avatar"></div>
      )}
      
      <div className="skeleton-content">
        {Array.from({ length: lines }, (_, i) => (
          <div 
            key={i}
            className={`skeleton-line ${i === lines - 1 ? 'skeleton-line--short' : ''}`}
          ></div>
        ))}
      </div>
    </div>
  );
}

// États vides avec actions
function EmptyState({ 
  icon, 
  title, 
  description, 
  primaryAction, 
  secondaryAction 
}) {
  return (
    <div className="empty-state" role="status">
      <div className="empty-state__icon">
        {icon}
      </div>
      
      <h3 className="empty-state__title">{title}</h3>
      <p className="empty-state__description">{description}</p>
      
      <div className="empty-state__actions">
        {primaryAction && (
          <button 
            className="btn btn--primary"
            onClick={primaryAction.action}
          >
            {primaryAction.label}
          </button>
        )}
        
        {secondaryAction && (
          <button 
            className="btn btn--secondary"
            onClick={secondaryAction.action}
          >
            {secondaryAction.label}
          </button>
        )}
      </div>
    </div>
  );
}

Gestion des erreurs et récupération

// Error Boundary avec récupération gracieuse
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      hasError: false, 
      error: null, 
      errorInfo: null,
      retryCount: 0 
    };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({
      error,
      errorInfo
    });
    
    // Log de l'erreur pour debugging
    console.error('Error boundary caught an error:', error, errorInfo);
    
    // Reporting automatique (optionnel)
    if (this.props.reportError) {
      this.props.reportError(error, errorInfo);
    }
  }

  handleRetry = () => {
    this.setState(prevState => ({
      hasError: false,
      error: null,
      errorInfo: null,
      retryCount: prevState.retryCount + 1
    }));
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary">
          <div className="error-boundary__content">
            <h2>Oups, quelque chose s'est mal passé</h2>
            <p>
              Une erreur inattendue s'est produite. Nos équipes ont été notifiées.
            </p>
            
            {this.state.retryCount < 3 && (
              <button 
                onClick={this.handleRetry}
                className="btn btn--primary"
              >
                Réessayer
              </button>
            )}
            
            <details className="error-details">
              <summary>Détails techniques</summary>
              <pre>{this.state.error && this.state.error.toString()}</pre>
            </details>
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}

// Hook pour gestion d'erreurs dans les composants
function useErrorHandler() {
  const [error, setError] = useState(null);
  
  const handleError = useCallback((error, context = {}) => {
    setError({ error, context, timestamp: Date.now() });
    
    // Log et reporting
    console.error('Error handled:', error, context);
  }, []);
  
  const clearError = useCallback(() => {
    setError(null);
  }, []);
  
  const retryLastAction = useCallback(() => {
    if (error?.context?.retryFunction) {
      clearError();
      error.context.retryFunction();
    }
  }, [error, clearError]);
  
  return {
    error,
    handleError,
    clearError,
    retryLastAction
  };
}

Accessibilité et inclusion

WCAG et bonnes pratiques

L'accessibilité n'est pas un "nice-to-have", c'est une obligation légale et morale. Intégrez les standards WCAG dès la conception.

// React - Composants accessibles
function AccessibleButton({ 
  children, 
  onClick, 
  disabled, 
  loading, 
  ariaLabel, 
  variant = 'primary' 
}) {
  const buttonRef = useRef(null);
  
  // Gestion du focus pour les modales
  useEffect(() => {
    if (loading) {
      buttonRef.current?.setAttribute('aria-busy', 'true');
    } else {
      buttonRef.current?.removeAttribute('aria-busy');
    }
  }, [loading]);
  
  return (
    <button
      ref={buttonRef}
      className={`btn btn--${variant} ${loading ? 'btn--loading' : ''}`}
      onClick={onClick}
      disabled={disabled || loading}
      aria-label={ariaLabel}
      aria-describedby={loading ? 'loading-description' : undefined}
      type="button"
    >
      {loading && (
        <>
          <span className="btn__spinner" aria-hidden="true" />
          <span id="loading-description" className="sr-only">
            Chargement en cours
          </span>
        </>
      )}
      
      <span className={loading ? 'btn__text--hidden' : 'btn__text'}>
        {children}
      </span>
    </button>
  );
}

// Formulaire accessible avec validation
function AccessibleForm({ onSubmit, children }) {
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  
  const validateField = (name, value) => {
    // Logique de validation...
    return null; // ou message d'erreur
  };
  
  return (
    <form 
      onSubmit={onSubmit} 
      noValidate
      role="form"
      aria-label="Formulaire de contact"
    >
      {/* Message d'erreur global */}
      {Object.keys(errors).length > 0 && (
        <div 
          role="alert" 
          aria-live="polite"
          className="form-errors"
        >
          <h3>Veuillez corriger les erreurs suivantes :</h3>
          <ul>
            {Object.entries(errors).map(([field, error]) => (
              <li key={field}>
                <a href={`#${field}`}>{error}</a>
              </li>
            ))}
          </ul>
        </div>
      )}
      
      {children}
    </form>
  );
}

function AccessibleInput({ 
  id, 
  label, 
  type = 'text', 
  required, 
  error, 
  helpText,
  ...props 
}) {
  const helpId = `${id}-help`;
  const errorId = `${id}-error`;
  
  return (
    <div className="form-field">
      <label htmlFor={id} className="form-label">
        {label}
        {required && (
          <span className="required-indicator" aria-label="requis">
            *
          </span>
        )}
      </label>
      
      <input
        id={id}
        type={type}
        required={required}
        aria-invalid={error ? 'true' : 'false'}
        aria-describedby={`${helpText ? helpId + ' ' : ''}${error ? errorId : ''}`}
        className={`form-input ${error ? 'form-input--error' : ''}`}
        {...props}
      />
      
      {helpText && (
        <div id={helpId} className="form-help">
          {helpText}
        </div>
      )}
      
      {error && (
        <div 
          id={errorId} 
          className="form-error" 
          role="alert"
          aria-live="polite"
        >
          {error}
        </div>
      )}
    </div>
  );
}

// Navigation accessible au clavier
function AccessibleModal({ isOpen, onClose, title, children }) {
  const modalRef = useRef(null);
  const previousFocus = useRef(null);
  
  useEffect(() => {
    if (isOpen) {
      previousFocus.current = document.activeElement;
      modalRef.current?.focus();
      
      // Trap focus dans la modal
      const focusableElements = modalRef.current?.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      
      const firstElement = focusableElements?.[0];
      const lastElement = focusableElements?.[focusableElements.length - 1];
      
      const handleTab = (e) => {
        if (e.key === 'Tab') {
          if (e.shiftKey && document.activeElement === firstElement) {
            e.preventDefault();
            lastElement?.focus();
          } else if (!e.shiftKey && document.activeElement === lastElement) {
            e.preventDefault();
            firstElement?.focus();
          }
        }
        
        if (e.key === 'Escape') {
          onClose();
        }
      };
      
      document.addEventListener('keydown', handleTab);
      
      return () => {
        document.removeEventListener('keydown', handleTab);
        previousFocus.current?.focus();
      };
    }
  }, [isOpen, onClose]);
  
  if (!isOpen) return null;
  
  return (
    <div 
      className="modal-overlay" 
      role="dialog" 
      aria-modal="true"
      aria-labelledby="modal-title"
    >
      <div 
        ref={modalRef}
        className="modal-content"
        tabIndex={-1}
      >
        <header className="modal-header">
          <h2 id="modal-title">{title}</h2>
          <button 
            onClick={onClose}
            aria-label="Fermer la modal"
            className="modal-close"
          >
            ×
          </button>
        </header>
        
        <div className="modal-body">
          {children}
        </div>
      </div>
    </div>
  );
}

Tests utilisateurs et métriques UX

Métriques quantitatives

Tests utilisateurs modulaires

// Framework de tests A/B pour l'UX
class UXTestFramework {
  constructor(analytics) {
    this.analytics = analytics;
    this.activeTests = new Map();
    this.userSegments = new Map();
  }
  
  // Test A/B simple
  createABTest(testName, variants, traffic = 0.5) {
    const test = {
      name: testName,
      variants,
      traffic,
      startDate: new Date(),
      participants: new Set()
    };
    
    this.activeTests.set(testName, test);
    return test;
  }
  
  // Assignation d'utilisateur à une variante
  getVariant(testName, userId) {
    const test = this.activeTests.get(testName);
    if (!test) return null;
    
    // Hash stable basé sur userId + testName
    const hash = this.hashUserId(userId + testName);
    const bucket = hash % 100;
    
    if (bucket < test.traffic * 100) {
      const variantIndex = bucket % test.variants.length;
      const variant = test.variants[variantIndex];
      
      // Tracking participation
      test.participants.add(userId);
      this.trackEvent('ab_test_participation', {
        testName,
        variant: variant.name,
        userId
      });
      
      return variant;
    }
    
    return null;
  }
  
  // Métriques d'engagement
  trackEngagement(event, data) {
    this.analytics.track(event, {
      ...data,
      timestamp: Date.now(),
      activeTests: Array.from(this.activeTests.keys())
    });
  }
  
  // Heatmap tracking
  trackMouseMovement(element, eventData) {
    const rect = element.getBoundingClientRect();
    
    this.trackEvent('mouse_movement', {
      element: element.tagName,
      elementId: element.id,
      className: element.className,
      x: eventData.clientX - rect.left,
      y: eventData.clientY - rect.top,
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight
      }
    });
  }
  
  // Funnel tracking
  trackFunnelStep(funnelName, step, success, metadata = {}) {
    this.trackEvent('funnel_step', {
      funnel: funnelName,
      step,
      success,
      metadata,
      timestamp: Date.now()
    });
  }
  
  hashUserId(input) {
    let hash = 0;
    for (let i = 0; i < input.length; i++) {
      const char = input.charCodeAt(i);
      hash = ((hash << 5) - hash) + char;
      hash = hash & hash; // Convert to 32-bit integer
    }
    return Math.abs(hash);
  }
}

// Hook React pour tests UX
function useUXTest(testName, variants) {
  const [variant, setVariant] = useState(null);
  const [userId] = useState(() => localStorage.getItem('userId') || 'anonymous');
  
  useEffect(() => {
    const framework = window.uxTestFramework;
    if (framework) {
      const assignedVariant = framework.getVariant(testName, userId);
      setVariant(assignedVariant);
    }
  }, [testName, userId]);
  
  const trackConversion = (conversionType, value = 1) => {
    if (variant) {
      window.uxTestFramework?.trackEvent('conversion', {
        testName,
        variant: variant.name,
        conversionType,
        value,
        userId
      });
    }
  };
  
  return { variant, trackConversion };
}

// Utilisation dans un composant
function ProductPage() {
  const { variant, trackConversion } = useUXTest('button_color', [
    { name: 'blue', color: '#3b82f6' },
    { name: 'green', color: '#10b981' },
    { name: 'red', color: '#ef4444' }
  ]);
  
  const handlePurchase = () => {
    trackConversion('purchase');
    // Logique d'achat...
  };
  
  const buttonStyle = variant ? { backgroundColor: variant.color } : {};
  
  return (
    <div className="product-page">
      <h1>Produit Awesome</h1>
      <button 
        style={buttonStyle}
        onClick={handlePurchase}
        className="purchase-btn"
      >
        Acheter maintenant
      </button>
    </div>
  );
}

Conclusion

L'UX des applications web modernes repose sur une compréhension profonde des utilisateurs et l'application rigoureuse de principes éprouvés. En 2024, une bonne UX doit être accessible, performante, intuitive et adaptée aux nouveaux usages comme la navigation vocale et les interactions gestuelles.

N'oubliez pas que l'UX est un processus itératif : testez régulièrement avec de vrais utilisateurs, mesurez l'impact de vos décisions et améliorez continuellement. La meilleure interface est celle qui se fait oublier pour laisser place à l'accomplissement fluide des objectifs de l'utilisateur.