Development #75382
Formulaires: amélioration design des widgets en erreur
0%
Description
Étape pour la validation des champs à la volée.
Améliorer le design des champs en erreur.
Basé sur ce qui est proposé dans le design system gouv.fr: https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217088099/Champs+de+saisie+-+Input#%5BhardBreak%5D%C3%89tats-erreur-et-succ%C3%A8s
Fichiers
Demandes liées
Historique
Mis à jour par Robot Gitea il y a environ un an
- Statut changé de Nouveau à En cours
Thomas Jund (tjund) a ouvert une pull request sur Gitea concernant cette demande :
- URL : https://git.entrouvert.org/entrouvert/publik-base-theme/pulls/202
- Titre : WIP: css: improve styles of form field on error (#75382)
- Modifications : https://git.entrouvert.org/entrouvert/publik-base-theme/pulls/202/files
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
- Fichier proposition-champ-erreur.png proposition-champ-erreur.png ajouté
Partage du même style entre `$form-style; classic & light`;
Modification du rouge de color-error pour avoir un bon contraste en a11y.
Il y a une 30aine de thèmes qui personnalisent les widgets en erreur à checker.
Image d'un input en erreur avec le thème de Marseille.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
- Lié à Development #70037: Aide à la saisie des usagers (validation des champs à la volée) ajouté
Mis à jour par Anaïs Ecuvillon → en congés, retour le 30/04 il y a environ un an
Dans #70037#note-15, on indiquait modifier l'ordre d'affichage des éléments, pour avoir libellé/remarque/champ/erreur, pour éviter le décalage du champ lors de la saisie, ça me semble être un pré-requis pour mieux me rendre compte du rendu.
Et du coup, je me demande si ça ne rend pas mieux avec la remarque dans sa couleur initiale (et non en rouge).
Pour info, le système de desgin de l'état que tu pointes est obsolète, voici l'url qui t'intéresse : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/champ-de-saisie
ça gagnerait à ce que l'espacement entre le champ et le message d'erreur soit + important. (Pas autant que celui du design d'Etat, mais plus que sur ta capture d'écran).
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
- Fichier field-on-error-allred-only-hint.png field-on-error-allred-only-hint.png ajouté
- Fichier field-on-error-mutiples-red.png field-on-error-mutiples-red.png ajouté
2 variantes :
- Version où le texte de commentaire reste en $font-color;
- Version où je mixe $font-color et $error-color pour créer des variantes
J'ai encore un peu assombri le rouge par défaut de $error-color pour garantir qu'il ai un contraste suffisant si on pose un #eee en $body-background
Avis bienvenus
Mis à jour par Frédéric Péters il y a environ un an
Perso ça fait très bizarre j'ai cru que le "Expression rationnelle ..." était une erreur pour le champ code postal avec un problème de marge. Peut-être que si la remarque avait été en rouge ça l'aurait moins fait. Dans la seconde, moins, mais ça peut venir en partie du fait que je sache désormais quoi regarder.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
- Fichier Capture d’écran du 2023-04-06 11-44-52.png Capture d’écran du 2023-04-06 11-44-52.png ajouté
Peut-être que si la remarque avait été en rouge ça l'aurait moins fait
Laisser la remarque en $font-color était une proposition d'Anaïs, et je suis ok avec ta remarque, ça "coupe" la relation entre le label et l'input.
Du coup, je pense que d'indiquer l'input en erreur à travers une bordure left plutôt que bottom serait pertinent :
- lier graphiquement le label et le message d'erreur avec un liseré rouge vertical
- pouvoir élargir la bordure rouge à 3px par défaut sans provoquer un décalage vertical du layout (parce que le widget ne s'agrandit pas)
(et on reste sur une bordure bottom pour le style light)
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
- Fichier Capture d’écran du 2023-04-11 15-24-18.png Capture d’écran du 2023-04-11 15-24-18.png ajouté
Petit changement d'icon.
Après avoir passé en revue les différentes customisations existantes, il s'avère qu'une majorité reprend l'icon "point d'exclamation" de .pk-error, ce que je trouve tout à fait logique et cohérent.
Mis à jour par Anaïs Ecuvillon → en congés, retour le 30/04 il y a environ un an
ok pour moi pour le point d'exclamation, idem pour la bordure à gauche plutôt qu'en bas. C'est même très bien.
Je ne sais plus si je l'ai déjà dit, mais le libellé du champ et la remarque en rouge, je trouve ça trop de rouge (je ne sais plus si ça fait partie du RGAA), le message d'erreur et la bordure rouge me semble suffisant.
Et dans tous les cas, si ça doit rester rouge, alors la remarque devrait utiliser le même rouge que le libellé et le message d'erreur et pas une couleur supplémentaire.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
alors la remarque devrait utiliser le même rouge que le libellé et le message d'erreur et pas une couleur supplémentaire.
Je trouvais ça trop plat graphiquement, qu'on perd au niveau de la hiérarchie de l'information.
J'ai aussi fait ce choix en rapport avec les listes radios, si tout est dans le même rouge c'est pas terrible.
Après il faudrait vraiment que tu puisses te rendre compte sur un cas réel, j'ai isolé le code de ce design "par défaut", permettant de le faire évoluer et le modifier sans impacter les thèmes qui ont déjà posé des personnalisations.
Aucun problème pour moi de me ranger à ton avis, mais pour éviter les "mauvais choix" parce que captures d'écran, est-ce qu'il ne serait pas envisageable de discuter de cela et faire des ajustements une fois le patch en test ?
Mis à jour par Anaïs Ecuvillon → en congés, retour le 30/04 il y a environ un an
- tout en rouge (le même rouge)
- tout en rouge (la remarque avec un autre rouge)
- le libellé et la remarque dans la couleur initiale
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
- Fichier anais-uniquement-erreur-et-champ-rouge.png anais-uniquement-erreur-et-champ-rouge.png ajouté
- Fichier anais-tout-meme-rouge.png anais-tout-meme-rouge.png ajouté
- Fichier proposition-thomas.png proposition-thomas.png ajouté
Les 3 captures d'écran demandées par Anaïs.
J'ai pris des captures des pages entières, avec uniquement 2 champs en erreur (la majorité du temps, avec la validation à la volée, il n'y aura qu'un champ à la fois en erreur) : un input et la liste radio, parce que les boutons radios ne prennent pas de couleur particulière lorsqu'ils sont en erreur.
- Ma proposition, avec label et commentaire en rouge mais des rouges différents, générés automatiquement en fonction de la couleur "erreur" choisie.
- Demande d'anais 1 : idem que précédemment, mais avec le même rouge pour tous les éléments
- Demande d'Anais 2 : uniquement le champ et le message d'erreur en rouge, les labels et les commentaires ne bougent pas (dans le cas de la liste radio, seul le message d'erreur sera rouge)
Les captures ont été prisent avec le thème Marseille. Veuillez noter qu'en fonction du thème, le rendu et les contrastes seront différents.
J'aimerais qu'on évite de multiplier les tests et captures et qu'on choisisse parmis les 3 options proposées.
Mis à jour par Benjamin Dauvergne il y a environ un an
N'hésitez pas à me dire si je suis à l'ouest, mais n'a-t-on pas dit que les messages d'erreur devaient maintenant se positionner entre le libellé et le/les champ/s ? ou alors c'est uniquement les remarques, oubliez.
PS: pour participer utilement; je préfère le 1, les deux autres, trop de rouge inutile, on ne sait plus où sont les alertes/erreurs.
Mis à jour par Olivier Renard il y a environ un an
le 1 est minimaliste et fonctionne.
le 2 est trop rouge, et noie l'erreur entre le libellé la remarque, l'erreur (donc pas à retenir).
le 3 est subtile et fonctionne avec la déclinaison de rouge.
Donc en premier choix 3 (proposition de Thomas) ou en second choix 1 (uniquement erreur et champ rouge)
Mis à jour par Pierre Cros il y a environ un an
Plutôt pour la proposition de Thomas parce qu'elle permet aussi d'obtenir Anaïs 1 ou Anaïs 2 si on choisit dûment la couleur d'erreur.
Mis à jour par Benjamin Dauvergne il y a environ un an
Aussi je trouve la bordure rouge à gauche trop "subtile" je préfère le choix du système de design de l'état d'une bordure rouge en dessous (https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/champ-de-saisie/) et je trouve qu'il n'y a toujours pas assez d'espace entre les champs, idem ça rend mieux dans le SDD, l'espace supplémentaire entre les champs rend plus agréable le lien entre l'erreur et le champ.
Mis à jour par Brice Mallet il y a environ un an
Préférence pour la version la plus simple : anais-uniquement-erreur-et-champ-rouge.png
Mis à jour par Frédéric Péters il y a environ un an
Pour le moment le code correspond à la "version de Thomas" et comme il y avait de l'assentiment dessus c'est celui-là que j'ai actualisé et il n'est pas là pour faire autre chose, donc en tout cas pour ce vendredi ce qui va se trouver déployé et en capture dans les notes de mise à jour ça sera ça. Libre ensuite d'hurler lundi pour que Thomas rapidement propose le code pour autre chose.
Mis à jour par Robot Gitea il y a environ un an
- Statut changé de Solution proposée à Solution validée
Frédéric Péters (fpeters) a approuvé une pull request sur Gitea concernant cette demande :
Mis à jour par Robot Gitea il y a environ un an
- Statut changé de Solution validée à Résolu (à déployer)
Frédéric Péters (fpeters) a mergé une pull request sur Gitea concernant cette demande :
- URL : https://git.entrouvert.org/entrouvert/publik-base-theme/pulls/202
- Titre : css: improve styles of form field on error (#75382)
- Modifications : https://git.entrouvert.org/entrouvert/publik-base-theme/pulls/202/files
Mis à jour par Transition automatique il y a environ un an
- Statut changé de Résolu (à déployer) à Solution déployée
Mis à jour par Anaïs Ecuvillon → en congés, retour le 30/04 il y a 12 mois
et après test en condition réel, ce qui est déployé en recette fonctionne très bien. Belle fonctionnalité ! Merci Thomas.