UX et markup des formulaires de login et d'inscription
Dans la foulée de #5357 (closed), je fais un ticket différent car le sujet est plus ouvert à discussions.
D'abord une petite radiographique de ce qu'il y a actuellement :
- La partie encadrée en jaune est un bloc d'explication que l'on peut surcharger. Les squelettes-dist proposent cette explication par défaut.
- Surlignés en vert ce sont les
<legend>
. - Et donc l'ensemble est regroupé dans
<fieldset>
, c.à.d tout ce qu'il y a en dehors du bouton de validation.
Voici mes griefs dans l'ordre :D
Explication n°1
1er problème : le 1er bloc d'explication contient lui-même un <legend>
, ce qui fait qu'on se retrouve avec 2 pour le même <fieldset>
. Ce qui n'est pas valide.
Mais surtout la dist ne devrait proposer aucune explication par défaut : on ne sait d'avance à quoi va servir l'inscription, ça peut être pour pleins de raisons différentes propres à chaque site.
Elle ne devrait proposer que la possibilité de mettre une explication si on veut.
Je crois me souvenir d'un ticket pas trop lointain qui a ajouté la possibilité de surcharger (ou j'ai rêvé ?). Mais il faut aller plus loin : rien par défaut !
Explication n°2
Dans la 2ème explication, « Indiquez ici votre nom et votre adresse email » me semble superflu et redondant. On a déjà des labels parfaitement clairs avec les champs.
Et je pense qu'on peut la placer après les saisies, c'est une explication complémentaire.
Dernière remarque : comme c'est le cas dans le message de retour, on envoie des identifiants, au pluriel. Donc « Vos identifiants personnels vous parviendront (…) ».
Un titre de formulaire
Je pense que ces 2 formulaires devraient avoir un titre général, un <h3 class="titrem">
.
Même si c'est même intitulé que le bouton de validation, ça me semble pas grave (c'est par exemple ce qu'on a dans cet article sur l'UX des signin/signup).
Par contre les <legend>
des fieldsets peuvent être un peu superflues dans ce cas là.
Peut-être les masquer visuellement ?
Proposition
En tenant compte de toutes ces remarques, çe nous donnerait ceci :
Et le avant pour comparer sans les annotations :