coastdigitalgroup/coastai-skills

Système de Mise en Page à Écran Partagé

Objectif

Le Système de Mise en Page à Écran Partagé fournit un framework standardisé, réactif et accessible pour la structuration de pages web à double panneau. Les conceptions à écran partagé divisent la zone d'affichage en deux zones horizontales ou verticales distinctes, associant généralement un panneau visuel ou média (illustration de marque, vidéo, canevas de produit interactif, ou témoignage en vedette) avec un panneau interactif ou de contenu (formulaire d'authentification, étape d'intégration, récit de proposition de valeur, ou configurateur de fonctionnalités).

Concevoir une interface à écran partagé efficace nécessite d'équilibrer les proportions spatiales, d'assurer une hiérarchie visuelle égale ou délibérée entre les deux panneaux, de maintenir un défilement indépendant des panneaux sans bogues de double barre de défilement, de gérer les transitions à contraste élevé sur des thèmes de couleur d'arrière-plan asymétriques, et de mettre en œuvre un empilement réactif mobile qui préserve l'ordre de lecture logique et la gestion du focus conformément aux normes WCAG 2.1 AA.

Cas d'Utilisation

• Interfaces d'Authentification et de Passerelle (Connexion / Inscription) : Associer un formulaire de connexion ou d'inscription interactif sur un panneau avec des illustrations de marque percutantes, des témoignages clients, ou des points forts de fonctionnalités produit sur le panneau adjacent.
• Héros de Pages d'Atterrissage Produit : Présenter un récit de titre à fort taux de conversion et un appel à l'action principal sur le panneau gauche tout en présentant un modèle 3D interactif, un aperçu d'interface utilisateur d'application, ou une démonstration vidéo sur le panneau droit.
• Flux d'Intégration et Assistants en Plusieurs Étapes : Combiner des conseils d'étape persistants, des indicateurs de progression, ou des visualisations d'aperçu sur un côté avec des champs de formulaire actifs sur l'autre.
• Présentations de Comparaison et de Double Fonctionnalité : Afficher deux produits contrastés, des niveaux de forfaits, ou des transformations « Avant vs. Après » côte à côte avec une hiérarchie visuelle indépendante.
• Pages d'Inscription à des Événements et Webinaires : Structurer des biographies de conférenciers et des ordres du jour à côté d'un formulaire d'inscription fixe.

Quand ne PAS Utiliser

• Tableaux de Bord d'Applications Multi-Enregistrements : Pour les logiciels de productivité nécessitant une navigation continue dans une liste à côté d'un espace de travail d'enregistrement actif (par exemple, boîte de réception email, helpdesk CRM), utilisez le système-de-mise-en-page-maître-détail.
• Mises en Page d'Application Complexes à Plusieurs Colonnes : Pour les tableaux de bord SaaS nécessitant une navigation persistante par barre latérale verticale, des barres de commande supérieures et des grilles de widgets, utilisez le système-de-mise-en-page-de-tableau-de-bord ou le système-de-navigation-par-barre-latérale.
• Grilles de Données à Haute Densité : Pour les données tabulaires structurées sur plusieurs lignes et colonnes, utilisez le système-d-interface-de-tableau-de-données ou le système-de-grille-réactif.
• Articles Éditoriaux à Colonne Unique : Pour les documents textuels longs ou les articles de blog destinés à une lecture verticale ininterrompue, utilisez le système-de-mise-en-page-d-article ou le système-de-composition-de-section.

Entrées

1. Ratio de Séparation et Intention Spatiale : Proportion préférée (séparation équilibrée 50/50, séparation axée sur le héros 60/40, ou séparation axée sur le formulaire 40/60).
2. Attribution des Rôles des Panneaux : Définir l'objectif du Panneau A (panneau Visuel/Média/Marque) et du Panneau B (panneau Interactif/Formulaire/Contenu).
3. Jetons d'Appariement de Surface et de Thème : Couleurs et thèmes de surface (par exemple, panneau d'illustration de marque sombre associé à un panneau de formulaire clair, ou surfaces claires doubles) issus du système-de-couleurs-accessibles et du système-de-conception-de-thème-sombre.
4. Actifs de Média et de Densité de Contenu : Actifs visuels (images, SVG, canevas vidéo, maquettes de produit) et schémas de formulaire/contenu à intégrer.

Sorties

1. Spécification du Canevas à Double Panneau : Définitions de mise en page CSS Grid pour les ratios de séparation sur bureau, le confinement de la hauteur du conteneur (100vh / 100%), et les limites lisses des panneaux.
2. Règles de Confinement des Médias et de Contraste d'Arrière-Plan : Règles CSS pour le cadrage des images (object-fit: cover), les dégradés d'arrière-plan, la distribution du poids visuel, et les superpositions de lisibilité.
3. Modèle d'Empilement Réactif et de Flux Mobile : Règles de point d'arrêt réactif convertissant les panneaux côte à côte horizontaux en rangées empilées verticales tout en préservant l'ordre de lecture DOM et la visibilité du contenu prioritaire.
4. Plan d'Accessibilité ARIA et de Focus Clavier : Définitions de régions repères ARIA (role="region" ou éléments sémantiques <main> / <aside>), règles de hiérarchie des titres, et gestion des indicateurs de focus WCAG AA.

---

Flux de Travail

1. Établir le Conteneur de la Zone d'Affichage et la Géométrie des Panneaux

Construire le wrapper d'écran partagé externe et définir les limites de mise en page pour éviter les barres de défilement indésirables du navigateur :

• Confinement de la Hauteur de la Zone d'Affichage : Pour les expériences plein écran (comme les pages d'authentification ou les héros de page d'atterrissage), définir le conteneur principal sur display: grid; min-height: 100vh; width: 100%; overflow: hidden;.
• Ratios de Colonnes sur Bureau :
  • Séparation Équilibrée 50/50 : grid-template-columns: 1fr 1fr; (Idéal pour des propositions de valeur de poids égal ou des pages d'authentification).
  • Séparation de Fonctionnalité 60/40 : grid-template-columns: 3fr 2fr; (Donne un espace prépondérant aux aperçus de produits interactifs).
  • Séparation Axée sur le Formulaire 40/60 : grid-template-columns: 2fr 3fr; (Priorise la complétion de formulaires multi-champs tout en conservant le contexte de la marque).
• Confinement Indépendant des Panneaux : Assurer que les panneaux individuels gèrent le débordement avec élégance (overflow-y: auto; height: 100%;) pour éviter qu'un panneau long n'étire toute la zone d'affichage ou ne provoque des doubles barres de défilement.

2. Formuler le Panneau Visuel et Média (Panneau A)

Le panneau visuel crée un engagement immédiat avec la marque et une résonance émotionnelle :

• Calque d'Arrière-Plan et Contraste : Si le Panneau A utilise des couleurs de marque sombres ou de la photographie, s'assurer que la typographie interne respecte le contraste WCAG AA (≥4,5:1).
• Cadrage et Échelle des Médias : Envelopper les illustrations ou les maquettes de produit dans des éléments conteneurs avec des contrôles de taille stricts (width: 100%; height: 100%; object-fit: cover; ou object-fit: contain;).
• Visuels Décoratifs vs. Informatifs :
  • Si l'imagerie est purement décorative, appliquer alt="" et aria-hidden="true".
  • Si l'image contient du texte ou des captures d'écran de produit, fournir un texte alt descriptif ou une typographie de légende appariée.

3. Formuler le Panneau Interactif et de Contenu (Panneau B)

Le panneau interactif génère les actions de l'utilisateur (saisie de formulaire, clics de conversion, lecture) :

• Alignement du Contenu et Rembourrage : Centrer le contenu verticalement dans le Panneau B en utilisant display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(2rem, 5vw, 4rem);.
• Verrouillage de la Largeur du Formulaire : Limiter les éléments du formulaire à une mesure de lecture maximale (max-width: 440px; width: 100%;) afin que les champs de saisie ne s'étirent pas inconfortablement sur les écrans ultra-larges.
• Hiérarchie des Cibles Tactiles et des Entrées : Standardiser les boutons principaux, les entrées de formulaire et les liens en utilisant le système-de-boutons-et-d-actions et le système-de-conception-de-formulaires avec des cibles tactiles d'au moins 44x44px sur les zones d'affichage tactiles.

4. Configurer l'Empilement Réactif Mobile et le Flux Prioritaire

Sur les zones d'affichage mobiles (généralement < 768px ou < 1024px), les panneaux côte à côte deviennent à l'étroit et illisibles :

• Transition d'Empilement au Point d'Arrêt : Passer grid-template-columns à une mise en page à colonne unique (grid-template-columns: 1fr; min-height: auto; overflow: visible;).
• Ordre DOM vs. Priorité d'Empilement Visuel :
  • Pages d'Authentification et de Formulaire : Le formulaire interactif (Panneau B) est l'objectif principal de l'utilisateur. Placer le Panneau B en premier dans le DOM afin que les utilisateurs mobiles voient les champs de saisie immédiatement sans faire défiler une illustration marketing longue. Utiliser l'ordre CSS order ou le placement DOM naturel.
  • Pages Héros et de Présentation : Placer le titre narratif (Panneau B) en premier, suivi du visuel du produit (Panneau A).
• Réduction de la Hauteur des Médias : Dans les vues empilées mobiles, réduire la hauteur du panneau visuel (max-height: 280px ou aspect-ratio: 16/9) afin qu'il ne domine pas tout l'écran mobile.

5. Mettre en Œuvre le Focus Clavier et les Repères ARIA

• Structure Sémantique et Repères :
  • Envelopper le panneau de contenu/formulaire principal dans <main> ou role="main".
  • Envelopper le panneau de présentation visuelle/marque dans <aside aria-label="Présentation du Produit"> ou <section aria-label="Points Forts de la Marque">.
• Ordre de Lecture et de Focus : Assurer que l'ordre de tabulation DOM s'écoule naturellement de gauche à droite (ou de haut en bas sur mobile) en correspondance avec la mise en page visuelle sans sauts de tabindex confus (tabindex="0" ou focus naturel).
• Anneaux de Focus à Travers les Limites de Thème : Assurer que les anneaux de focus maintiennent un contraste de 3:1 à la fois contre les panneaux visuels sombres et les panneaux de formulaire clairs (outline: 2px solid var(--focus-ring); outline-offset: 2px;).

---

Règles de Décision

Ratios de Séparation de Mise en Page et Correspondance des Cas d'Utilisation

Type de Page	Ratio de Séparation sur Bureau	Ordre d'Empilement Mobile	Rôles de Panneaux Recommandés
Authentification Connexion / Inscription	Séparation 50 / 50	Formulaire en Haut, Média en Bas	Panneau A : Art de Marque / Témoignage ; Panneau B : Formulaire de Connexion (<main>)
Section Héros Produit	Séparation 60 / 40	Copie en Haut, Média en Bas	Panneau A : Copie & Appel à l'Action (<main>) ; Panneau B : Canevas d'Application Interactif
Assistant d'Intégration	Séparation 40 / 60	Étapes en Haut, Entrées en Bas	Panneau A : Liste de Contrôle des Étapes / Aperçu ; Panneau B : Champs de Formulaire Actifs
Comparaison Double	Séparation 50 / 50	Option A en Haut, Option B en Bas	Panneau A : Niveau A / Avant ; Panneau B : Niveau B / Après

Directives de Contraste d'Arrière-Plan Asymétrique

• Panneau Visuel Sombre + Panneau de Formulaire Clair : Définir des propriétés personnalisées CSS indépendantes pour chaque panneau (--pane-bg, --pane-text, --pane-border). Ne jamais hériter des couleurs de texte à travers la limite de séparation.
• Ligne de Séparation : Sur les séparations doubles claires ou doubles sombres, insérer une bordure subtile de 1px (border-right: 1px solid var(--border-subtle)) pour établir une séparation visuelle entre les panneaux.

---

Contraintes

• Accessibilité (WCAG 2.1 AA) :
  • SC 1.4.3 Contraste (Minimum) : Le texte sur les deux panneaux doit respecter au moins un rapport de contraste de 4,5:1 par rapport à son arrière-plan respectif.
  • SC 1.3.2 Séquence Significative : L'ordre de tabulation visuel et l'ordre de lecture du lecteur d'écran doivent correspondre à la priorité logique de la page (Formulaire Interactif en premier sur l'authentification ; Titre de Proposition de Valeur en premier sur les héros).
  • SC 2.4.7 Focus Visible : Les champs de saisie et les boutons focalisés doivent comporter des indicateurs de focus non rognés avec un contraste ≥3:1 par rapport aux couleurs de surface du panneau.
  • SC 2.5.8 Taille des Cibles : Tous les déclencheurs interactifs doivent satisfaire aux cibles tactiles minimales (24x24px minimum, 44x44px recommandé pour le tactile).
• Prévention des Décalages de Mise en Page et des Débordements : Les mises en page à écran partagé plein écran sur bureau doivent utiliser overflow: hidden sur le wrapper principal et overflow-y: auto à l'intérieur des panneaux défilables individuels pour éliminer les à-coups de mise en page au niveau de la fenêtre et les doubles barres de défilement.
• Longueur de Ligne de Typographie : Les mesures de texte dans les deux panneaux doivent rester entre 45 et 75 caractères par ligne (unités ch) pour maintenir une lisibilité confortable.

---

Schémas d'Échec Courants

• Piège de la Double Barre de Défilement : Laisser height: 100vh sur les éléments enfants sans verrouillage du débordement du conteneur, ce qui fait que la fenêtre du navigateur et le panneau enfant affichent des barres de défilement verticales indépendantes.
• Occlusion du Contenu Principal Mobile : Placer un grand panneau d'art visuel avant le formulaire de connexion dans l'ordre DOM mobile, forçant les utilisateurs mobiles à faire défiler 600 px d'imagerie marketing pour atteindre le champ de nom d'utilisateur.
• Surcharge de Texte Non Vérifiée sur l'Art : Rendre le texte directement sur des photos d'arrière-plan détaillées sans superpositions de dégradé sombre (rgba(0,0,0,0.6)), rendant le texte illisible et ne respectant pas le contraste WCAG AA.
• Étirement Illimité des Entrées de Formulaire : Permettre aux champs de formulaire sur une vue de bureau à séparation 50/50 de s'étirer sur une largeur de 800 px, créant des cibles tactiles maladroites et une distorsion visuelle.
• Poids Visuel Inégal : Rendre un panneau excessivement sombre et saturé tandis que le panneau adjacent est blanc uni avec un petit texte, provoquant un déséquilibre visuel et une fatigue oculaire élevée.

---

Critères de Validation

• Le confinement de la zone d'affichage gère proprement le ratio de séparation sur bureau (50/50 ou 60/40) sans doubles barres de défilement de fenêtre.
• Le point d'arrêt réactif mobile (<768px) empile les panneaux en une seule colonne avec des contraintes de hauteur appropriées sur les éléments médias.
• L'ordre de lecture DOM priorise la tâche principale (par exemple, formulaire d'authentification en premier sur les écrans de connexion mobiles).
• Le contraste du texte sur les panneaux de séparation sombres et clairs satisfait au WCAG AA (rapport ≥4,5:1).
• Les entrées interactives et les boutons présentent des largeurs limitées (max-width: 440px) et des cibles tactiles ≥44x44px.
• Les repères ARIA sémantiques (<main>, <aside>, role="region") différencient correctement les deux panneaux.