coastdigitalgroup/coastai-skills

Système d'interface utilisateur de tableau Kanban

Objectif

Le système d'interface utilisateur de tableau Kanban fournit un cadre de mise en page standardisé, haute densité et accessible pour la gestion des colonnes de statut de workflow, des éléments de tâches basés sur des cartes et des pipelines de processus. Les tableaux Kanban sont des canevas d'interaction de base dans les applications SaaS modernes, les outils de gestion de projet, les systèmes de suivi des candidats (ATS) et les pipelines CRM de vente.

Concevoir une interface Kanban efficace nécessite d'équilibrer une densité visuelle élevée, un défilement indépendant des colonnes, une hiérarchie spatiale claire, un retour d'information en temps réel sur les limites de travail en cours (WIP) et une réactivité fluide sur différentes fenêtres d'affichage. De plus, les implémentations traditionnelles de glisser-déposer uniquement par pointeur créent fréquemment de graves barrières d'accessibilité. Cette compétence comble le fossé entre la conception et l'exécution technique, en établissant des règles spatiales pour le confinement des colonnes, l'anatomie des cartes de tâches, les cibles tactiles et les workflows de réorganisation au clavier et au lecteur d'écran conformément aux normes WCAG AA.

Cas d'utilisation

• Systèmes de gestion de projet et de tâches : Structuration des tableaux de sprint, des colonnes de backlog (par exemple, Backlog, En cours, Revue de code, Terminé) et des tableaux de suivi des problèmes.
• Systèmes de suivi des candidats (ATS) : Visualisation des étapes de recrutement des candidats (par exemple, Candidature, Présélection, Entretien, Offre, Embauché).
• Pipelines de ventes et CRM : Gestion des étapes des prospects avec des valeurs de transaction agrégées et des probabilités d'étape par colonne.
• Calendriers éditoriaux de contenu : Suivi des workflows de production d'articles et de médias, de l'idéation à la rédaction, la révision et la publication.
• Espaces de travail de traitement des commandes : Suivi du traitement des commandes en plusieurs étapes dans les interfaces logistiques ou d'affichage en cuisine.

Quand ne PAS utiliser

• Grilles de données et listes financières tabulaires : Pour les données de lignes denses à plusieurs colonnes nécessitant un tri, un filtrage et une édition de cellules en masse, utilisez système-d-interface-utilisateur-de-tableau-de-données.
• Arborescences de documentation ou de fichiers hiérarchiques : Pour les structures de fichiers profondément imbriquées et les plans de documents, utilisez système-de-navigation-par-arborescence.
• Mises en page d'enveloppe SaaS verrouillées à la fenêtre d'affichage : Pour l'enveloppe d'application globale (barres de navigation, barres supérieures, panneaux repliables), utilisez système-de-mise-en-page-de-tableau-de-bord.
• Flux d'activités à colonne unique : Pour les flux chronologiques ou les simples listes de tâches verticales, utilisez système-de-flux-d-activité-chronologique ou système-d-interface-utilisateur-de-carte.

Entrées

1. Taxonomie des colonnes et étapes du workflow : La liste ordonnée des statuts de workflow (par exemple, À faire, En cours, Revue, Terminé) et leurs métadonnées de colonne (limites WIP, couleurs d'accentuation de statut, totaux des transactions).
2. Matrice de densité des données de carte : Attributs à afficher par carte de tâche (par exemple, ID de tâche, Titre, Étiquette de priorité, Date d'échéance, Avatars des responsables, Progression des sous-tâches, Nombre de pièces jointes).
3. Contexte de fenêtre d'affichage et d'enveloppe : Limites de mise en page fournies par l'enveloppe de l'application parente (à partir de système-de-mise-en-page-de-tableau-de-bord).
4. Jetons de conception : Palettes de couleurs, surfaces d'élévation, échelles d'espacement et jetons de typographie (à partir de système-de-couleurs-accessibles, système-d-élévation-et-de-profondeur et système-d-espacement-fluide).

Sorties

1. Spécification du canevas de colonne horizontale : Définitions de mise en page spatiale pour les conteneurs de défilement horizontal verrouillés à la fenêtre d'affichage, largeurs de colonne fixes et espacements entre les colonnes.
2. Anatomie de l'en-tête de colonne et de la limite WIP : Conceptions visuelles pour les en-têtes de colonne, les badges de compteur, les seuils d'avertissement de limite WIP (normal, approchant, dépassé) et les déclencheurs d'action d'ajout rapide.
3. Spécifications des composants de carte de tâche : Plans de mise en page structurés pour les cartes de tâches standard, compactes et développées, y compris les poignées de glissement, les grilles de métadonnées et les états d'interaction survol/focus/saisi.
4. Modèle accessible de clavier et de glisser-déposer : Mappages de rôles ARIA (role="region", role="list", role="listitem"), chemins de gestion du focus, raccourcis de réorganisation au clavier et modèles d'annonce aria-live.
5. Stratégie de pivotement mobile réactive : Directives d'adaptation de mise en page pour passer des mises en page multi-colonnes horizontales à des vues à onglets segmentés ou des panneaux accordéon empilés sur les petits écrans.

---

Workflow

1. Établir la structure du canevas de colonne horizontale

Structurer l'espace de travail principal du tableau dans une enveloppe verrouillée à la fenêtre d'affichage (système-de-mise-en-page-de-tableau-de-bord) :

• Dimensionnement du conteneur : Définir le wrapper du tableau sur display: flex; flex-direction: row; height: 100%; overflow-x: auto; overflow-y: hidden; pour permettre le défilement horizontal sur les colonnes tout en gardant l'en-tête du tableau fixe.
• Dimensions des colonnes : Définir des largeurs de colonne fixes ou à rétrécissement flexible (min-width: 280px; max-width: 340px; width: 300px;). Éviter que les colonnes ne rétrécissent en dessous de 280px pour éviter la troncature du texte et les cibles tactiles réduites.
• Espaces et remplissage : Définir un espacement cohérent entre les colonnes (par exemple, gap: var(--space-m, 16px)) et un remplissage horizontal (par exemple, padding: 16px 24px).
• Enveloppe de la colonne : Styliser chaque colonne comme un conteneur flexible indépendant (display: flex; flex-direction: column; max-height: 100%; background: var(--surface-neutral-subtle); border-radius: 8px; border: 1px solid var(--border-subtle);).

2. Concevoir l'en-tête de colonne et la signalisation WIP

Chaque en-tête de colonne agit comme une barre de contrôle collante en haut de la pile de colonnes :

• En-tête de colonne collant : Positionner l'en-tête en haut de la pile flexible de la colonne (flex-shrink: 0; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;).
• Éléments de l'en-tête :
  1. Indicateur d'accentuation de statut : Une pilule colorée de 10x10 px ou une bordure gauche correspondant à l'étape (par exemple, Bleu = En cours, Violet = Revue, Vert = Terminé).
  2. Titre de la colonne : Texte tronqué (font-weight: 600; font-size: 0.9375rem; color: var(--text-primary)).
  3. Compteur de cartes et badge de limite WIP : Afficher le nombre d'éléments à côté de la limite WIP (par exemple, "3/5").
  4. Menu des actions de la colonne : Un bouton d'icône 32x32 px (...) donnant accès aux paramètres de la colonne, au tri ou aux options de réduction.
• États visuels de la limite WIP :
  • Normal (Sous la limite) : Fond de badge neutre subtil (background: var(--surface-neutral-muted); color: var(--text-secondary)).
  • Avertissement (À la limite) : Fond de badge ambre (background: var(--surface-warning-subtle); color: var(--text-warning-bold)).
  • Dépassé (Au-dessus de la limite) : Badge rouge uni ou bordure d'en-tête surlignée (background: var(--surface-danger-subtle); border-color: var(--border-danger); color: var(--text-danger)), avec une icône d'avertissement accessible et une info-bulle expliquant le goulot d'étranglement du workflow.

3. Construire la région de défilement indépendante de la colonne

Empêcher l'ensemble du tableau ou de la page de défiler verticalement lors de l'inspection d'une longue liste de cartes dans une seule colonne :

• Conteneur de liste de cartes : Appliquer flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px 12px; display: flex; flex-direction: column; gap: 8px; au conteneur de liste (role="list").
• Inertie et défilement fluide : Activer -webkit-overflow-scrolling: touch; et des barres de défilement personnalisées (barres de défilement subtiles de 6 px) pour que les colonnes individuelles défilent en douceur sans déclencher de mouvement global de la page.
• Conteneur d'état vide : Si une colonne contient 0 carte, afficher un contour de zone de dépôt en pointillés (border: 2px dashed var(--border-muted); border-radius: 6px; padding: 24px; text-align: center;) avec une étiquette subtile ("Aucune tâche dans cette étape") et un bouton "Ajouter une carte" rapide.

4. Construire la hiérarchie des composants de carte de tâche

Concevoir les cartes de tâches avec un ordre de balayage visuel clair en utilisant système-de-hiérarchie-visuelle :

• Structure de base de la carte : Rendre chaque carte comme un élément de liste distinct (role="listitem" / article) avec background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 12px; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: grab;.
• Répartition des régions de la carte :
  1. Ligne supérieure (Étiquettes et actions) : Badge de priorité (par exemple, "Haute", "Urgent" dans des pilules à contraste élevé) et ID de référence de la tâche (par exemple, "PROJ-1042"). Inclure un bouton de poignée de glissement 24x24 px (aria-label="Réorganiser la carte PROJ-1042").
  2. Région médiane (Titre et description) : Titre principal de la tâche (font-weight: 600; font-size: 0.875rem; line-clamp: 2; margin-bottom: 8px;). Résumé de texte atténué facultatif sur 1 ligne.
  3. Ligne de métadonnées inférieure (Progression et responsables) : Le côté gauche affiche l'indicateur de date d'échéance (surligné en rouge si en retard) et la progression de la liste de contrôle des sous-tâches (par exemple, "3/5 ✓"). Le côté droit affiche les avatars empilés des responsables (système-d-avatar-utilisateur).
• États d'interaction de la carte :
  • Survol : Légère augmentation de l'ombre d'élévation (box-shadow: var(--shadow-md); border-color: var(--border-hover)).
  • Focus : Anneau de focus décalé très visible de 2 px (outline: 2px solid var(--focus-ring); outline-offset: 2px).
  • Glissement / État saisi : opacity: 0.6; transform: scale(1.02) rotate(1deg); cursor: grabbing; box-shadow: var(--shadow-xl); z-index: 1000;.
  • Indice de cible de dépôt : Lors du survol d'une carte au-dessus d'une zone de dépôt de colonne, afficher un espace réservé d'insertion animé (height: 60px; border: 2px dashed var(--brand-primary); border-radius: 6px; background: var(--brand-subtle);).

5. Implémenter le glisser-déposer accessible au clavier et au lecteur d'écran

Les frameworks de glisser-déposer standard (API HTML5 Drag and Drop) sont souvent inaccessibles aux utilisateurs de clavier et de lecteur d'écran. Implémenter un mode de navigation au clavier alternatif explicite :

• Déclencheur de réorganisation au clavier : Permettre aux utilisateurs de focaliser la poignée de glissement ou la carte et d'appuyer sur Espace ou Entrée pour entrer en "Mode Déplacement".
• Focus et annonce sur la sélection : Lorsque le mode Déplacement est activé, définir aria-grabbed="true" (ou aria-pressed="true" sur le déclencheur de mouvement), afficher un halo visuel "Saisi" autour de la carte et annoncer via une région aria-live="polite" invisible : "Carte PROJ-1042 saisie. Actuellement dans la colonne 'En cours', position 2 sur 5. Utilisez les touches fléchées ou Alt+Touches fléchées pour vous déplacer, Espace pour déposer, Échap pour annuler."
• Déplacement entre et dans les colonnes :
  • Touches fléchées Haut / Bas : Réorganiser la carte dans la liste de colonnes actuelle.
  • Touches fléchées Gauche / Droite : Déplacer la carte vers la colonne adjacente gauche ou droite, en l'ajoutant à la liste de cette colonne.
• Confirmation de dépôt et d'annulation :
  • Espace / Entrée : Confirmer le placement. Mettre à jour la position DOM, libérer l'état de saisie, définir le focus sur la carte déposée et annoncer : "Carte PROJ-1042 déposée dans la colonne 'Revue', position 1 sur 3."
  • Échap : Annuler le mouvement. Revenir à la position d'origine de la carte et annoncer : "Déplacement annulé. Carte retournée dans 'En cours', position 2."

6. Adaptation à la fenêtre d'affichage mobile

Le défilement horizontal multi-colonnes sur les petits écrans mobiles (<768px) entraîne une fatigue sévère du balayage horizontal et un dépôt de carte difficile. Implémenter une stratégie de transformation réactive :

• Onglets de colonne segmentés (modèle mobile recommandé) : Sur les écrans de moins de 768 px, masquer le canevas de défilement horizontal. Rendre un contrôle d'onglet segmenté collant en haut du tableau (système-de-contrôle-segmenté), affichant les titres de colonne avec les badges de nombre d'éléments (par exemple, [ À faire (4) ] [ En cours (3) ] [ Terminé (8) ]).
• Vue active à colonne unique : N'afficher que la liste des colonnes actives en pleine largeur (width: 100%).
• Fenêtre modale/feuille d'action contextuelle "Déplacer vers" : Lorsqu'une carte est tapée sur mobile, fournir un bouton explicite "Déplacer vers..." dans le menu de la carte. Le taper ouvre une feuille inférieure (implémentation-de-feuille-inférieure-accessible) répertoriant les colonnes cibles pour un repositionnement en un seul tap, éliminant complètement les gestes de glissement tactile sur les écrans mobiles.

---

Règles de décision

Stratégie de mise en page des colonnes mobiles

Largeur de la fenêtre d'affichage	Modèle d'interface utilisateur recommandé	Mécanismes d'interaction
Bureau (>1024px)	Canevas de grille horizontale multi-colonnes	Colonnes visibles simultanément, glisser-déposer par pointeur + mode Déplacement au clavier.
Tablette (768px - 1023px)	Tableau de colonnes compact (défilement horizontal)	Colonnes plus étroites (260px), accrochage fluide du balayage tactile horizontal.
Mobile (<768px)	Onglets de colonne segmentés + colonne active unique	Onglets de statut en haut, cartes pleine largeur à colonne unique, feuille inférieure "Déplacer vers".

Stratégie de largeur de colonne

• Largeur de colonne fixe (300px) : Idéal pour les tableaux standard avec 3 à 6 colonnes. Les colonnes maintiennent des largeurs prévisibles et les colonnes supplémentaires débordent proprement dans le débordement horizontal.
• Colonnes flexibles fluides (flex: 1; min-width: 280px) : Idéal pour les tableaux avec exactement 3 colonnes (par exemple, À faire, En cours, Terminé) sur les grands écrans, permettant aux colonnes de remplir uniformément toute la largeur de la fenêtre d'affichage sans espace blanc inutilisé à droite.

Gestion du dépassement de la limite WIP

• Limite WIP souple (avertissement uniquement) : Mettre en surbrillance l'en-tête de colonne en ambre/rouge avec un badge de dépassement de limite, mais permettre aux utilisateurs de déplacer les cartes dans la colonne. Recommandé pour les workflows créatifs et agiles où des goulots d'étranglement temporaires se produisent.
• Limite WIP stricte (blocage) : Empêcher le dépôt de cartes dans la colonne lorsque la limite est atteinte, en affichant une alerte modale ou en ligne : "Limite WIP atteinte (5/5). Résolvez les tâches existantes avant d'en ajouter d'autres." Désactiver le déplacement au clavier dans cette colonne. Recommandé pour les workflows opérationnels strictement réglementés.

---

Contraintes

• Accessibilité (WCAG 2.1 AA) :
  • SC 2.1.1 Clavier : Chaque fonction de la carte (modifier, réorganiser, supprimer, déplacer) doit être accessible et utilisable uniquement à l'aide d'un clavier.
  • SC 2.4.7 Focus visible : Les cartes et les poignées de glissement ciblées doivent comporter un anneau de focus non rogné avec un rapport de contraste minimal de 3:1 par rapport à l'arrière-plan.
  • SC 4.1.3 Messages d'état : Les actions de déplacement de carte, les avertissements WIP et les résultats de filtrage doivent être annoncés via une région aria-live="polite".
  • SC 2.5.8 Taille des cibles : Les poignées de glissement, les déclencheurs de menu de carte (...) et les boutons d'ajout rapide doivent fournir une cible tactile minimale de 24x24 px (44x44 px de préférence sur les appareils tactiles).
• Confinement de la mise en page et CLS : Les conteneurs de liste de colonnes doivent spécifier overflow-y: auto avec des en-têtes fixes pour empêcher l'effondrement de la mise en page ou les sauts au niveau de la page lors des mises à jour dynamiques des cartes.
• Performances : Rendre les listes de cartes efficacement. Pour les tableaux contenant plus de 200 cartes au total, implémenter le défilement de liste virtuelle (implémentation-de-liste-virtuelle) par colonne pour maintenir un rendu à 60 ips pendant les opérations de glissement.

---

…

[tronqué pour la traduction]