Project

General

Profile

Evolution #4749

[UX] Comportement des labels : quoi par défaut, quoi ponctuel ?

Added by RastaPopoulos ♥ 11 days ago. Updated 5 days ago.

Status:
Nouveau
Priority:
Normal
Assignee:
-
Category:
ergonomie
Target version:
Start date:
04/27/2021
Due date:
% Done:

0%

Resolution:

Description

Ce ticket sert à réfléchir et possiblement reconcevoir les choix par défaut pour les labels des formulaires.

État des lieux

On le sait, l'ergo c'est normalement beaucoup d'objectif : certains placements, certaines tailles, épaisseurs, etc fonctionnent mieux que d'autres, et ceci est prouvable par tests utilisateurs.

Or cela fait des années que les tests par eye-tracking montrent que les formulaires sont
1) lu plus rapidement
2) avec une meilleure compréhension
lorsque les labels sont au-dessus des champs.

Ça ne veut pas dire qu'il faut totalement interdire autrement mais : ça veut clairement dire que ça devrait être le comportement par défaut. Et seulement ponctuellement, par choix explicite, pouvoir mettre les labels sur le côté.

Par ailleurs les pros de l'ergo (sur base des mêmes tests) préconisent tou⋅tes : dans les rares cas où on met les labels sur le côté, ça devrait être calé à droite sur le champ, pour les mêmes raisons de compréhension.

Les avantages des labels au-dessus :
- prouvé que c'est bien mieux compris par tout le monde
- lecture plus rapide
- fonctionne de base sur tous les écrans, pas d'adaptation à faire
- polyvalent et générique sur le contenu des labels : marche mieux quelque soit la longueur, et donc à prioriser dans un contexte multilingue
=> cela correspond bien au maximum de notre utilisation : un CMS multi-lingue, allant enfin vers le responsive, se souciant d'accessibilité.

Le seul désavantage : allonge la hauteur des formulaires, mais ça n'a un impact surtout que pour les formulaires ayant vraiment vraiment beaucoup de champs, ce qui est rare !
Quand un formulaire est extrêmement long, il y a même plusieurs méthodes qui peuvent être utilisées sans pour autant passer les labels sur le côté :
1) placer certains champs sur le même ligne (prénom + nom, etc)
2) découper le formulaire en plusieurs étapes.

Proposition pour le futur

- tous les labels doivent être au-dessus comme comportement par défaut
- pour certains cas, une classe permet de mettre sur le côté : valable uniquement en grand écran, ça reste au-dessus en mobile first
- si sur le côté : c'est mieux si aligné sur le champ (donc à droite en LTR)
- ex de rare formulaire candidat : changement des dates

Quelques sources

Tests utilisateurs
https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

Placing a label above an input field works better in most cases
Placing labels above input fields is preferable
In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users
if you choose to place them to the left of input fields, at least make them right aligned

Chez le très connu cabinet d'ergo Nielsen Group
https://www.nngroup.com/articles/form-design-white-space/

We recommend placing field labels above the corresponding text fields [en gras chez eux !]
it makes the form easier to scan, because users can see the text field in the same fixation as the label. Top placement also allows for longer field labels
If the labels are too far to the left, it can be difficult to associate the correct label with its corresponding field

Chez Adobe, ils préconisent de suivre les recommandations de la première source
https://xd.adobe.com/ideas/principles/web-design/best-practices-form-design/

Matteo Penzo’s 2006 article on label placement suggests that forms are completed faster if labels are on top of the fields. Top-aligned labels are good if you want users to scan the form as quickly as possible.
The biggest advantage of top-aligned labels is that different-sized labels and localized versions can more easily fit the UI.
Takeaway: If you want users to scan a form quickly, put labels above the fields. The layout will be easier to scan because the eye will move straight down the page. However, if you want users to read carefully, put labels to the left of the fields. This layout will slow down the reader and make them scan in a Z-shaped motion.

Chez une appli de conception d'interface
https://phase.com/magazine/usability-of-forms/

from a cognitive point of view, the association is powerful
Also, the eyes move only in one direction since the scanning is top down as compared to Z shape (left-right and top-bottom) for inline labels
Design is space efficient and hence adaptable to all resolutions; in short, responsive in nature
We also get flexibility regarding the length of labels. This proves useful while working with variable label lengths like multilingual support for applications
One drawback of this approach is the increased height of the form. However, it can be solved with alternate designs like a grouping of fields or stepper forms

History

#1 Updated by tcharlss 🐽 11 days ago

- tous les labels doivent être au-dessus comme comportement par défaut
- pour certains cas, une classe permet de mettre sur le côté : valable uniquement en grand écran, ça reste au-dessus en mobile first
- si sur le côté : c'est mieux si aligné sur le champ (donc à droite en LTR)
- ex de rare formulaire candidat : changement des dates

Tout à fait d'accord dans l'ensemble, difficile d'argumenter contre si le constat est supporté par de multiples tests utiliateurs⋅trices.

Hum j'ai pas encore lu tous les liens, pour ceux restant optionnellement sur le côté, on parle bien juste de changer l'alignement du texte ? Afin qu'il colle aux inputs ?

J'ajoute que les labels sur le côté sont délicats à styler avec le markup actuel : obligé de mettre un padding-left de la taille voulue pour le label + marge négative sur le label lui-même. Ça serait peut-être plus simple et solide en css grid d'ailleurs, enfin bref.

#2 Updated by RastaPopoulos ♥ 11 days ago

Hum j'ai pas encore lu tous les liens, pour ceux restant optionnellement sur le côté, on parle bien juste de changer l'alignement du texte ? Afin qu'il colle aux inputs ?

oui c'est ce qui ressort : si on met sur le côté, alors le label devrait vraiment être collé collé avec le champ, pour déjà amélioré la lecture, sinon il est trop loin

la contrepartie c'est que tout à gauche, il n'y a alors plus de bord aligné sur l'ensemble de la hauteur, et donc ça aussi ce n'est pas bon pour la lecture (mais quand même mieux que si les labels sont éloignés des champs)… mais bon c'est bien pour ça que le mieux c'est au-dessus de toute façon, car sur le côté dans les deux cas (aligné gauche ou droite) ya des inconvénients

#3 Updated by nicod _ 11 days ago

tcharlss 🐽 a écrit :

Ça serait peut-être plus simple et solide en css grid d'ailleurs, enfin bref.

En grid ou flex, oui, ce serait vachement mieux, pour ne plus avoir à jouer sur ces marges négatives, paddings etc...
Beaucoup mieux.

#4 Updated by cedric - 5 days ago

  • Target version set to 4.0

Also available in: Atom PDF