coastdigitalgroup/coastai-skills

Système de Mise en Page des Détails Produit

Objectif

Le Système de Mise en Page des Détails Produit fournit un cadre visuel et spatial standardisé et haute performance pour structurer les Pages de Détail Produit (PDP) du commerce électronique. La Page de Détail Produit est le moteur de conversion le plus critique de tout site e-commerce ou de vente directe aux consommateurs. Elle nécessite un équilibre entre médias riches, configurateurs multi-variantes, modèles de prix dynamiques, signaux de confiance et appels à l'action (CTA) principaux dans une interface cohérente, scannable et entièrement accessible.

Une approche systématique résout les points de friction courants de conception, tels que les grilles d'achat non alignées ("Buy Boxes"), les curseurs média désorientants, le décalage de mise en page lors des changements de variantes (CLS), les déclencheurs d'achat mobile cachés et les blocages d'accessibilité critiques sur les sélecteurs personnalisés. Ce système fait le pont entre la présentation marketing et l'implémentation technique, garantissant que les pages se chargent de manière stable et génèrent un maximum de conversion tout en respectant strictement les normes WCAG AA.

Cas d'Utilisation

• E-commerce B2C & Vente Directe aux Consommateurs (DTC) : Conception de pages produit très soignées pour des biens physiques, vêtements, cosmétiques ou électronique.
• Ventes de Produits Numériques et d'Abonnements : Organisation des points forts des fonctionnalités, des sélecteurs de niveaux et des processus de paiement sur les pages de logiciels, d'adhésions ou de services.
• Pages de Catalogues Industriels et B2B : Structuration de pages de pièces matérielles complexes et lourdes en spécifications avec schémas téléchargeables et constructeurs de devis.
• Vues de Détail de Marketplace : Standardisation des grilles de mise en page pour des annonces multi-vendeurs diverses (immobilier, réservations de voyage, ventes de pair à pair).

Quand Ne PAS Utiliser

• Pages de Comparaison de Plans SaaS : Pour comparer des forfaits d'abonnement distincts côte à côte, utilisez pricing-table-ui-system ou comparison-matrix-system.
• Découverte de Produits Principale (PLP) : Pour parcourir les catalogues ou les listes de résultats de recherche, utilisez card-ui-system et filter-and-sort-system.
• Captation de Leads Simple ou Formulaires : Pour des formulaires de contact de base, des newsletters ou des inscriptions en une seule étape, utilisez form-design-system.
• Contenu Éditorial et Blog : Pour la narration, les newsletters et les colonnes de texte uniquement, utilisez article-layout-system.

Entrées

1. Inventaire de Contenu et d'Actifs : Images/vidéos de produits haute résolution (ratios d'aspect, exigences de zoom), spécifications, avis, structures de prix et garanties de confiance.
2. Complexité de la Matrice de Variantes : Nombre d'options (par exemple, couleur, taille, matière) et présence de relations de dépendance (par exemple, "La taille L est disponible uniquement en Noir").
3. Échelle de Typographie et d'Espacement : Échelles de tailles relatives et jetons d'espacement fluides (provenant de fluid-typography-system et fluid-spacing-system).
4. Jetons de Couleur et d'Élévation : Couleurs d'accentuation de la marque, nuances de statut (solde, avertissement, rupture de stock), élévations de surface et états actif/focus/survol (provenant de accessible-color-system et elevation-and-depth-system).
5. Contraintes de la Fenêtre d'Affichage Mobile : Limites de la fenêtre d'affichage et encoches des appareils (notamment l'indicateur d'accueil iOS et les barres de menus du navigateur).

Sorties

1. Plan Spatial à Double Volet : Grille structurelle divisant l'écran en un Volet Média à fort impact sur la gauche et un Volet Configurateur d'Achat (Buy Box) scannable sur la droite.
2. Règles d'Empilement et de Flux Responsive : Spécifications de transition montrant comment la mise en page se réduit en une pile verticale optimale pour mobile.
3. Tiroir d'Achat Sticky Mobile : Spécification pour une barre d'achat ancrée à la fenêtre d'affichage qui persiste sur les viewports mobiles après le pli du CTA principal.
4. Anatomie des Sélecteurs et Échantillons Interactifs : Conceptions au niveau des composants pour les boutons de taille, les échantillons de couleur et les compteurs de quantité.
5. Spécifications Aria live et Clavier : Parcours clavier clairs, tabindex de défilement, rétention du focus et déclencheurs d'annonce de statut pour la conformité avec les lecteurs d'écran.

---

Workflow

1. Établir la Mise en Page Spatiale à Double Volet (Desktop >1024px)

Structurez la vue desktop en utilisant une grille CSS à 2 colonnes ou une disposition Flexbox, divisée proportionnellement :

• Colonne de Gauche : Le Volet Média (Occupe 50–55 %) : Affiche les actifs visuels produit haute fidélité. Pour empêcher les utilisateurs de perdre leur contexte d'achat lors de longs défilements, définissez la colonne parente avec align-items: start; et rendez le conteneur média sticky : position: sticky; top: calc(var(--global-header-height) + var(--space-m));.
• Colonne de Droite : Le Configurateur d'Achat / Buy Box (Occupe 45–50 %) : Contient toutes les métadonnées et les contrôles de transaction. Gardez-la dans une seule colonne verticale avec une hiérarchie claire qui se lit de haut en bas.
• Gouttière de la Grille : Maintenez une gouttière visuelle généreuse (par exemple, gap: clamp(24px, 4vw, 48px)) pour garder les médias et les contrôles distincts mais unifiés.

2. Concevoir la Hiérarchie Visuelle du Configurateur d'Achat (Buy Box)

Appliquez le flux de lecture "F-Pattern" dans la colonne Buy Box. Ordonnez les éléments logiquement :

1. Fil d'Ariane et Indicateur de Catégorie : Texte petit et discret en haut (par exemple, "Boutique > Plein air > Vestes") pour le contexte.
2. En-tête Produit : Titre principal utilisant h1 stylisé avec font-size: clamp(1.75rem, 3.5vw, 2.5rem) et poids gras.
3. Résumé de Preuve Sociale : Bloc d'évaluation par étoiles affichant la note moyenne et un lien texte actif pour faire défiler directement jusqu'à la section des avis (par exemple, "★ ★ ★ ★ ☆ (128 avis)").
4. Bloc du Moteur de Prix : Prix très visible. Prix actuel en gras, prix conseillé barré plus petit (si en solde) et un badge de solde coloré clair (par exemple, "Économisez 20 €"). Placez les messages de paiement échelonné (par exemple, "Ou 4 paiements de 25 € avec Klarna") immédiatement en dessous.
5. Configurateur de Variantes : Tailles, échantillons de couleur ou matières. Utilisez des titres d'étiquettes et des espaces cohérents (par exemple, margin-bottom: var(--space-m)).
6. Réassurance sur le Stock et la Livraison : Alertes de stock en temps réel subtiles (par exemple, "● Plus que 3 en stock - livré demain") à proximité des variantes.
7. CTA d'Achat Principal : Bouton "Ajouter au Panier" ou "Acheter Maintenant" proéminent, à fort contraste, s'étendant sur toute la largeur de la Buy Box.
8. Badges de Confiance et Politiques de Retour : Groupes d'icônes/texte très visibles (par exemple, "✓ Livraison Gratuite", "✓ Retours sous 30 jours") placés directement sous le CTA principal pour minimiser les frictions d'achat.

3. Structurer la Galerie Média de Gauche

Organisez les images pour garantir une navigation rapide, légère et une stabilité de mise en page :

• Conteneur d'Affichage Principal : Ancrez l'image active dans un conteneur avec un ratio d'aspect fixe (généralement carré 1:1 ou portrait 3:4) en utilisant aspect-ratio: 1 / 1; object-fit: cover;. Cela empêche le décalage de mise en page cumulative (CLS) lors du chargement d'images de tailles légèrement différentes.
• Navigation par Vignettes : Empilez les vignettes de support horizontalement en dessous de l'image principale (ou verticalement à gauche). Assurez-vous que les vignettes actives ont une bordure à fort contraste et aria-current="true".
• Déclencheur d'Agrandissement/Zoom : Incluez une icône de zoom discrète dans le coin inférieur droit de l'image active. Son déclenchement ouvre une lightbox modale en plein écran et swipeable (image-gallery-and-lightbox-system).

4. Créer l'Empilement Mobile et le Tiroir d'Achat Sticky Mobile (<768px)

Sur les écrans mobiles, les dispositions multi-colonnes standard se brisent. Appliquez ces règles d'adaptation :

• Flux Vertical Linéaire : Réduisez la page en une pile à une seule colonne. Placez la Galerie Média tout en haut (pleine largeur ou légèrement en retrait), immédiatement suivie de l'En-tête Produit, du Prix, du Configurateur de Variantes, du CTA, puis des spécifications détaillées.
• Le Tiroir d'Achat Sticky Mobile : Car le CTA principal défile hors de l'écran rapidement sur mobile, implémentez un tiroir de paiement sticky en bas :
  • Gardez le tiroir caché lorsque le CTA en ligne est visible à l'écran.
  • Lorsque l'utilisateur fait défiler le CTA en ligne hors de vue (Seuil > 600px de défilement), faites glisser une barre sticky compacte en bas contenant : [Vignette Produit + Titre] (optionnel/réduit sur les petits viewports), [Prix] et un [CTA Ajouter au Panier Principal] occupant la moitié droite de la barre.
  • Utilisez padding-bottom: env(safe-area-inset-bottom); pour respecter les zones de balayage des appareils mobiles et éviter les chevauchements avec les commandes système.

5. Standardiser l'Interaction des Sélecteurs de Variantes et Échantillons Personnalisés

Les sélecteurs personnalisés (tels que les cercles de couleur ou les matrices de boutons) doivent avoir un aspect soigné et interagir proprement :

• Échantillons Visuels : Les cercles de couleur doivent mesurer au moins 32x32px sur desktop et 40x40px sur mobile. Les échantillons actifs sont indiqués par un anneau de bordure concentrique externe (laissant un espace blanc de 2px entre le cercle de couleur et la bordure).
• Boutons de Taille : Utilisez des contours de pilules arrondies pour les tailles (par exemple, "S", "M", "L"). Barrez et atténuez les tailles indisponibles (par exemple, opacité 0.4 avec une barre oblique) mais gardez-les focusables pour que les lecteurs d'écran puissent annoncer "Taille S - Rupture de stock".
• Retour Dynamique : Le basculement d'un échantillon doit mettre à jour instantanément le prix visible, l'avis de stock et la galerie d'images principale sans recharger toute la page.

6. Concevoir pour la Navigation au Clavier et l'Accessibilité des Lecteurs d'Écran

Les configurateurs personnalisés sont des sites fréquents d'échecs d'accessibilité. Appliquez ces directives strictes :

• Sélection d'Échantillon Sémantique : Implémentez les échantillons en utilisant des <input type="radio"> standard enveloppés dans des balises <label>, stylisées pour masquer l'entrée native visuellement tout en la gardant entièrement accessible. Cela garantit la navigation native par touches fléchées, le regroupement automatique des boutons radio et les états de focus clavier.
• Annonces Aria Live : Lorsqu'un utilisateur sélectionne un échantillon ou une variante, utilisez un div invisible aria-live="polite" pour annoncer la mise à jour aux lecteurs d'écran (par exemple, "Couleur sélectionnée : Rouge Crimson. Prix mis à jour à quatre-vingt-dix-neuf dollars. En stock.").
• Liens d'Évitement et Ancres Contextuelles : Assurez-vous que le "Lien d'avis par étoile" ait un anneau de focus visible et fasse défiler le focus clavier en douceur jusqu'à la Section des Avis (#reviews) en utilisant tabindex="-1" sur la destination.

---

Règles de Décision

Sélection du Style d'Échantillon

Nombre d'Options	Modèle de Sélecteur d'UI Recommandé	Justification de Conception
2 - 5 Options (par exemple, Rouge, Bleu, Vert)	Boutons Pilules Visuels ou Échantillons	Visibilité immédiate, faible charge cognitive, cibles faciles à toucher.
6 - 15 Options (par exemple, 10 pointures de chaussures)	Grille Flex Adaptative en Matrice	Groupement compact, s'adapte parfaitement dans la colonne Buy Box sans long défilement.
16+ Options (par exemple, 50 modèles d'appareils)	Menu de Sélection Personnalisé avec Recherche	Empêche l'encombrement visuel et les blocs de mise en page accablants de "paralysie du choix".

Division de la Mise en Page (Fenêtres Desktop vs. Tablette)

• Desktop (>1024px) : Grille à 2 Colonnes (Média Sticky à Gauche, Configurateur Défilant à Droite).
• Tablette (768px - 1023px) : Réévaluez les largeurs de colonnes. Passez à une division 50/50 ou réduisez la disposition tôt à une pile à une seule colonne avec un conteneur simplifié aligné à gauche si le configurateur de variantes contient des entrées matricielles denses.
• Mobile (<768px) : Pile stricte à 1 colonne. Le Tiroir d'Achat Sticky Mobile actif se déclenche au défilement.

Stratégie de Présentation des Prix

• Présentation en Solde : Affichez le prix de vente actuel en rouge à fort contraste ou en gras de la marque (minimum 24px/1.5rem). Affichez le prix d'origine (PDSF) barré en gris discret à côté, et incluez un badge pilule compact rempli indiquant les économies (par exemple, "Économisez 30 €" ou "-25%") pour maximiser la valeur perçue.
• Présentation Standard : Affichez le prix actuel en gras neutre-foncé/neutre-clair (correspondant à la couleur de l'en-tête du corps principal).

---

Contraintes

• Accessibilité (WCAG AA Minimum) :
  • SC 2.4.11 Focus Non Obscurci : Assurez-vous que les pilules de variantes focusables ou les boutons de quantité ne sont jamais obscurcis par les en-têtes sticky ou le tiroir d'achat mobile en bas. Utilisez scroll-margin-top et scroll-margin-bottom globaux de manière appropriée.
  • SC 2.5.8 Taille de Cible : Chaque sélecteur de variante, bulle d'échantillon et déclencheur d'incrémentation de quantité (+ / -) doit fournir une cible tactile d'au moins 24x24px avec une séparation claire, et 44x44px sur les écrans tactiles.
  • Contraste AA : Le texte principal, les prix et les états de bordure sélectionnés doivent maintenir un rapport de contraste d'au moins 4.5:1. Les cercles d'échantillon de couleur doivent avoir une étiquette de texte d'accompagnement (soit adjacente, soit comme infobulle accessible ou texte pour lecteur d'écran) pour éviter de se fier uniquement à la couleur (SC 1.4.1 Utilisation de la couleur).
• Préservation du Décalage de Mise en Page Cumulative (CLS) :
  • Réservez toujours de l'espace pour le titre du produit, le conteneur d'image et les boîtes d'avis dynamiques. Un état squelette (skeleton-state-system) ou des dimensions explicites doivent empêcher le contenu de sauter lorsque les avis dynamiques ou les compteurs de stock se chargent.
• Hauteurs de Fenêtre d'Affichage Dynamique : Le tiroir d'achat sticky mobile doit respecter les zones de sécurité de l'environnement (env(safe-area-inset-bottom)) pour garantir que les boutons de balayage d'accueil physiques n'entrent pas en conflit avec le CTA de paiement principal.

---

Schémas d'Échec Courants

• Le Décalage "Buy Box Désalignée" : Les boutons de variantes de taille ou de couleur qui s'enroulent sur des lignes différentes selon le produit, provoquant un saut dynamique du CTA "Ajouter au Panier" principal.
• L'Angle Mort Uniquement Basé sur la Couleur : Utiliser des cercles de couleur non étiquetés comme échantillons. Les utilisateurs daltoniens ne peuvent pas distinguer les échantillons verts et bruns, et les lecteurs d'écran liront uniquement "Bouton de couleur" à moins qu'un texte d'étiquette explicite ne soit associé.
• Le Blocage du Clavier Virtuel Mobile : Positionner une barre sticky en bas sur les écrans mobiles de manière à bloquer ou chevaucher les champs de formulaire lorsque le clavier virtuel mobile se déploie, piégeant l'utilisateur.
• Saut de Ratio d'Aspect d'Image : Ne pas déclarer de ratios d'aspect explicites sur l'affichage principal de la galerie, provoquant l'effondrement et l'expansion de toutes les colonnes de mise en page lorsque l'utilisateur bascule entre des images produit en paysage et en portrait.
• Double Verrouillage de Barre de Défilement : Définir la colonne sticky gauche trop haute ou la laisser déborder, provoquant un défilement indépendant de la colonne gauche dans une petite fenêtre et créant deux barres de défilement adjacentes l'une à l'autre.

---

Critères de Validation

• Configuration à Double Volet : La mise en page desktop présente une colonne média sticky à gauche et une colonne Buy Box défilante à droite avec des bordures nettes de 1px ou une division claire par des espaces blancs.
• Cascade Mobile Linéaire : La fenêtre d'affichage mobile réduit la grille à une pile à une seule colonne, le média étant tout en haut et les détails transactionnels en dessous.
• Fonctionnalité du Tiroir d'Achat Mobile : Sur mobile, un tiroir sticky en bas apparaît lorsque le CTA principal défile hors de la vue initiale, et il se cache lorsque l'utilisateur fait défiler vers le haut devant le CTA intégré.
• Accessibilité du Sélecteur de Variantes : Les sélecteurs de taille et de couleur sont implémentés avec des input[type="radio"] sémantiques et des label. Chaque choix focusable a un état de focus (anneau) clair au clavier.
• Stabilité du CLS : Le conteneur d'image principal a un ratio d'aspect explicite (par exemple, aspect-ratio: 3/4). Le titre du produit et les blocs d'avis ont une hauteur minimale réservée.
• Annonces Aria Live : Le fait de changer de variante met à jour un élément aria-live="polite" visible uniquement par les lecteurs d'écran, annonçant le prix et l'état de stock.
• Correspondance des Couleurs : Tous les échantillons de couleur non-sélectionnés ont une étiquette de texte accessible ou un aria-label. La sélection ne repose pas uniquement sur la couleur.
• Valeurs par Défaut des Variantes : Un ensemble par défaut de variantes est pré-sélectionné afin que la page ne se charge jamais avec un CTA désactivé ou un prix nul. Les annulations de sélection ne sont pas autorisées en mode mono-produit.