Project

General

Profile

Development #75382

Formulaires: amélioration design des widgets en erreur

Added by Thomas Jund over 1 year ago. Updated about 1 year ago.

Status:
Fermé
Priority:
Normal
Assignee:
Target version:
-
Start date:
13 March 2023
Due date:
% Done:

0%

Estimated time:
Patch proposed:
No
Planning:
No

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


Files


Related issues

Related to Publik - Development #70037: Aide à la saisie des usagers (validation des champs à la volée)Fermé10 October 202220 April 2023

Actions

History

#1

Updated by Robot Gitea over 1 year ago

  • Status changed from Nouveau to En cours

Thomas Jund (tjund) a ouvert une pull request sur Gitea concernant cette demande :

#2

Updated by Thomas Jund over 1 year ago

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.

#3

Updated by Thomas Jund over 1 year ago

  • Related to Development #70037: Aide à la saisie des usagers (validation des champs à la volée) added
#4

Updated by Anaïs Ecuvillon over 1 year ago

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).

#7

Updated by Thomas Jund over 1 year ago

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

#8

Updated by Frédéric Péters over 1 year ago

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.

#9

Updated by Thomas Jund over 1 year ago

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)

#10

Updated by Robot Gitea over 1 year ago

  • Status changed from En cours to Solution proposée
#11

Updated by Thomas Jund over 1 year ago

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.

#12

Updated by Anaïs Ecuvillon over 1 year ago

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.

#13

Updated by Thomas Jund about 1 year ago

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 ?

#14

Updated by Anaïs Ecuvillon about 1 year ago

Est-ce que tu peux faire 3 captures d'écran pour demander l'avis à l'équipe en réu lundi prochain ? Genre :
  • 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
#15

Updated by Thomas Jund about 1 year ago

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.

#16

Updated by Benjamin Dauvergne about 1 year ago

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.

#17

Updated by Emmanuel Cazenave about 1 year ago

Je préfère la proposition de Thomas.

#18

Updated by Olivier Renard (retour le 24 juillet) about 1 year ago

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)

#19

Updated by Pierre Cros about 1 year ago

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.

#20

Updated by Benjamin Dauvergne about 1 year ago

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.

#21

Updated by Brice Mallet about 1 year ago

Préférence pour la version la plus simple : anais-uniquement-erreur-et-champ-rouge.png

#22

Updated by Frédéric Péters about 1 year ago

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.

#23

Updated by Robot Gitea about 1 year ago

  • Status changed from Solution proposée to Solution validée

Frédéric Péters (fpeters) a approuvé une pull request sur Gitea concernant cette demande :

#24

Updated by Robot Gitea about 1 year ago

  • Status changed from Solution validée to Résolu (à déployer)

Frédéric Péters (fpeters) a mergé une pull request sur Gitea concernant cette demande :

#25

Updated by Transition automatique about 1 year ago

  • Status changed from Résolu (à déployer) to Solution déployée
#26

Updated by Anaïs Ecuvillon about 1 year ago

et après test en condition réel, ce qui est déployé en recette fonctionne très bien. Belle fonctionnalité ! Merci Thomas.

#27

Updated by Transition automatique about 1 year ago

Automatic expiration

Also available in: Atom PDF