Écran pipeline

Configurer les étapes de recrutement (juin 2026)

Prototypes interactifs pour tester l'UX/UI d'une liste réordonnable d'étapes.

Interaction de liste : où placer les actions

Actions en ligne : Très découvrable, mais la ligne sature vite.
Dropdown « … » : Plus épuré et extensible, moins découvrable

Visibilité candidat : config interne et vue candidate

Colonne miroir :. Une timeline à part, alignée sur les étapes. Clair mais prend de la place.
Pastille + légende : L'état tient sur la ligne. Plus compact, moins explicite.

Ajout d'étape : où, et avec quelle friction

Bouton en bas : Rapide, ajoute en fin de liste.
Action en ligne « + » : Rapide et visible, pas vraiment clair
Modale guidée : Nom et position d'un coup ; rien n'est créé avant validation.
Menu « … » : Position précise au-dessus ou en dessous, mais l'action est cachée (slide d'avant).

Gestion de l'état : quand persiste-t-on ?

Commit explicite : On édite en brouillon ; une barre « N modifs » apparaît en édition.
Auto-save : Chaque modif est persistée, avec un indicateur d'état.
Hybride : Chaque action est atomique, avec un « annuler » ponctuel.

Note méthodologique : comment ces prototypes ont été produits

Ces protos ont été fabriqués en une session de pair-design avec un agent IA (Claude Code), à partir de maquettes lofi et du Storybook existant. L'agent lit le code, les DDR et le composant drag'n'drop déjà intégré, puis construit des variantes réelles dans le design system, les vérifie dans le navigateur, et itère à chaque retour.

Le découpage en quatre décisions (interaction, visibilité, ajout, état) et les recommandations viennent de cet aller-retour, fondé sur une revue rapide de l'état de l'art à chaque sujet.

Déroulé de la session (prompts et actions)

Cadrage initial. Prototyper 2-3 pistes d'interaction pour la liste, sur critères d'usabilité, accessibilité et pérennité. → Lecture des DDR, du composant CspSortableList et de l'intégration en cours ; recherche a11y (RGAA 2.5.7) ; trois protos posés.
Recentrage. Abandonner la piste clavier, corriger la sémantique « obligatoire » (et non « désactivé »), clarifier la visibilité candidat, creuser le renommage. → Étapes obligatoires repensées (épingle au lieu du cadenas), modale de renommage, prototype de visibilité en deux variantes.
Ajout et confirmation. Comparer plusieurs façons d'ajouter une étape ; ajouter une confirmation de suppression. → Trois approches d'ajout, dialog de confirmation partagé.
Anti-pattern signalé. Modale imbriquée et souci de z-index sur le select. → Remplacement par des radios en ligne dans la modale.

Déroulé de la session (suite)

Gestion de l'état. Préciser commit explicite, auto-save et hybride, et trancher la position du CTA selon les bonnes pratiques. → Trois modèles d'état prototypés ; recommandation commit explicite avec barre contextuelle.
Mise au propre. Nettoyer la nomenclature des stories (sans « option A/B »), réordonner le dossier (data, shared, variants), produire cette présentation. → Stories regroupées par sujet, une par variante ; arborescence revue.
Finitions. Une iframe par option dans le deck, réglage des ratios pour limiter les marges, et nettoyage du style rédactionnel.

À chaque étape : lint, typecheck et vérification visuelle dans le navigateur avant de passer à la suite.