ETQ administrateur, je souhaite que la page "publier" soit plus claire

[lisa-durand]

closes #9150

On a simplifié la page publier en mettant en avant les 3 champs à remplir.
On a retiré les infos liées à la phase de test, en renvoyant à la FAQ grace à un lien placé au niveau du header - à côté du badge de "test" .

APRES

AVANT

[what-the-diff]

PR Summary

• Enhanced Flexibility in Design

  • Introduced a new CSS class to enhance the flexibility of the layout and user interface.

• Form UI Improvement

  • Implemented new form-related CSS classes to refine the aesthetics and functionality of form input fields and placeholders.

• FAQ Link Addition

  • Added quick reference to the FAQ page in the admin panel for improved user assistance.

• Form Layout Adjustment

  • Altered specific form inputs to match a new design system which results in a more organized and visually appealing layout.

• Form Element Standardization

  • Redesigned some form elements using a new design system, streamlining the interface and enhancing overall aesthetic consistency.

• Page Layout Revamp

  • Reconfigured the structure and layout of a number of pages to be more mobile-friendly and to improve content visibility for users on all devices.

• Alert Messaging

  • Incorporated new alert components to signal problematic fields and highlight missing information, promoting improved content accuracy and completeness.

• Localization

  • Detailed localization updates were made to enhance multi-language support, promoting a more user-friendly experience for global users.

[lisa-durand]

@CamilyaDellali @Olivier-Marcellin Je vous laisse regarder la capture écran en description de la Pull Request. Vous trouverez qq differences à la marge avec la maquette mais globalement c'est en accord avec ce qu'on s'est dit.

• j'ai changé un peu le wording car je le trouvais pas hyper clair à certains endroits, notamment pour bien faire la difference entre la personnalisation du lien de la demarche et l'url de partage de ce lien. Je me suis inspirée de l'ancien wording #3609 - Déplacement de l'URL qui envoie vers la procédure #4087
• j'ai stylé un peu differemment le 1er champ ou on peut personnaliser l'URL pour qu'on comprenne mieux ce qu'il se passe
• je n'ai pas ajouté le bouton "copier le lien public" car même si ça me semble une bonne idée, on est dans une phase ou on édite ce lien, il n'est donc pas sauvegardé dans la base de donnée, du coup ça fait faire une petite manip en code et en terme de "flow utilisateur" j'ai l'impression qu'on est plus dans une phase d'édition avant publication et ensuite on retrouve cette url entière facilement copiable à d'autres endroits
• j'ai déplacé le champ optionnel (si la demarche remplace une close) en dernier, pour prioriser les 2 champs obligatoires.

@CamilyaDellali , pour l'instant j'ai mis le lien vers la FAQ : https://faq.demarches-simplifiees.fr/ - je ne sais pas si au final tu preferais la doc ? ou un lien plus specifique ?

[Olivier-Marcellin]

Vu PR aujourd'hui, voici mes retours compilés :

• petite coquille sur le libellé du second champ : “Où les usagers” (pas d'accent à Ou)
• mets bien 16 px entre deux CTA (cas pour publier / annuler (et je mets tjrs 24 px en haut/bas pour les CTA qui valide la page = la règle selon équipe DSFR c'est 16 px mini autour des boutons)
• bouton envoyer une copie : le picto est send-plane
• une remarque sur l'ergonomie-accessibilité des deux champs du haut : c'est pas l'idéal de mettre une indication dans le champ, on avait dit qu'on ferait plus ça. Lorsque c'est un exemple on le place dans la description. Et pour le cas d'usage un peu particulier sur le premier champ (devoir compléter l'url), on pouvait pas faire comme sur la maquette plutôt ?
• on a perdu la notion de champs obligatoires, sauf si j'ai pas compris/modif côté dev (vois avec Kara), il me semble qu'on avait acté qu'on garde l'astérisque ? sauf certaines pages du parcours admin/instructeurs comme les notifications, etc.
• y a plus le champ Diffusion de la démarche ?

[tchak]

On ne va pas commencer à mettre des astérisques sur tous les champs ? Ce n'est pas un "formulaire", c'est l'interface d'une application.

[lisa-durand]

Vu PR aujourd'hui, voici mes retours compilés :

* petite coquille sur le libellé du second champ : “Où les usagers” (pas d'accent à Ou)

* mets bien 16 px entre deux CTA (cas pour publier / annuler (et je mets tjrs 24 px en haut/bas pour les CTA qui valide la page = la règle selon équipe DSFR c'est 16 px mini autour des boutons)

* bouton envoyer une copie : le picto est send-plane

* une remarque sur l'ergonomie-accessibilité des deux champs du haut : c'est pas l'idéal de mettre une indication dans le champ, on avait dit qu'on ferait plus ça. Lorsque c'est un exemple on le place dans la description. Et pour le cas d'usage un peu particulier sur le premier champ (devoir compléter l'url), on pouvait pas faire comme sur la maquette plutôt ?

* on a perdu la notion de champs obligatoires, sauf si j'ai pas compris/modif côté dev (vois avec Kara), il me semble qu'on avait acté qu'on garde l'astérisque ? sauf certaines pages du parcours admin/instructeurs comme les notifications, etc.

* y a plus le champ Diffusion de la démarche ?

1- il me semble pas que ce soit une coquille d'utiliser "où" avec un accent pour un "lieu"
2- ok pour les espaces
3- ok pour changer l'icone sur "envoyer une copie"
4- ok pour retirer le placeholder du champ 2 par contre pour le champ 1 je trouve ça plus compréhensible que l'url soit dans le champ, car ce n'est pas juste un placeholder, c'est au final ce qu'on soumet lorsqu'on valide le formulaire - juste on ne peut pas le modifier mais ça fait sens que ca fasse partie du champ.
5- pour les champs obligatoires, je n'ai touché à rien la-dessus - je propose qu'on y reflechisse de maniere plus globale
6- je comprends pas cette remarque - le champ diffusion a été renommé par "où les usagers trouveront-ils le lien vers la démarche ?"

[lisa-durand]

@Olivier-Marcellin - j'ai fait les modifs et j'ai MAJ la capture écran dans la description

[CamilyaDellali]

Le lien vers la FAQ ( que je vais bien sûr mettre à jour très rapidement :) ) : https://faq.demarches-simplifiees.fr/category/49-comment-tester-ma-demarche

[mfo]

C'est plus esthétique ainsi et esperons que se soit plus clair pour l'admin ! Bravo pour le gros taff de design/ui et les trads 👏