Formulaires et bonnes pratiques le retour

Jérémie Chaine
Conception d'interface
un commentaire

En complément de mon billet « formulaires et bonnes pratiques», je présente ici une synthèse des excellents travaux de Matteo Penzo. Ce dernier à soumis les théories présentées précédemment à des tests d’utilisabilité pour évaluer leur validité et les enrichir de données empiriques

Premier test : L’alignement vertical

Le placement des libellés juste au dessus de leur champs d’entrées permet à l’utilisateur de capter les deux informations en un seul mouvement oculaire.
Il est intéressant de noter que lorsque le libellé est familier à l’utilisateur, son nom de famille par exemple, il ne focalise pas son regard sur le libellé pour le lire. Ce qui réduit les temps de fixation et de saccade (mouvement involontaire des yeux de faible amplitude )

Dans le cas ou les utilisateurs déplacent leur regard du libellé au champs d’entrée les temps de saccade mesurés restent plus court, 5Oms (millisecondes), contre un temps dix fois plus élevé dans le cas de libellés alignés horizontalement et justifiés à gauche.
Les formulaire sont donc renseignés plus rapidement avec une charge cognitive réduite.

Autre élément qui ressort des tests, le menu déroulant est l’élément le plus attractif des formulaires et ce indépendamment de sa position dans le formulaire. Son pouvoir d’attraction dépasse même celui du bouton de validation. Lors de la présentation des formulaires simples sur page blanche la première chose sur lesquelles TOUT les utilisateurs ont fixés leur attention est le menu déroulant.

Deuxième test : Libellé gras, alignement vertical

L’utilisation du gras a eu pour conséquence d’augmenter le temps de saccade lors de la lecture du libellé à son champs d’entré de 60%. On passe de 50ms pour une police maigre à 80ms pour une police grasse, sans constater d’avantage significatif si ce n’est une mise en avant plus accentuée. Les libellé en gras sont plus difficilement lus et perçus, probablement à cause de la confusion visuelle générée par le gras du libellé et les frontières du champs de saisie

Troisième test : alignement horizontal justifié à gauche

Les tests montrent que tout les utilisateurs perçoivent aisément la relation entre le libellé et le champs de saisie (saccade simple entre ces deux éléments). Néanmoins on note une durée moyenne de saccade de 500 ms, ce qui est assez long. Ce résultat illustre la lourdeur du traitement cognitif induit par cette présentation. Les tests montrent également que l’utilisateur fait bien la relation entre le libellé et son champs de saisie sans fixer inutilement son regard sur la zone blanche. Néanmoins dans certains cas les distances excessives, libellé / champs de saisie, force les utilisateur à passer plus de temps à interagir visuellement avec le formulaire.

Quatrième test : alignement horizontal justifié à droite

L’alignement à droite réduit le nombre de fixations de près de la moitié prouvant que cette disposition a considérablement réduit la charge cognitive exigée pour des utilisateurs pour accomplir cette tache. De plus le temps de saisie à été réduit de moitié par rapport à un alignement horizontal justifié à gauche.

Presque aucune activité de saccade n’a été observé entre les libellés et leur champs de saisie, la compréhension du champs à saisir étant facilité par la réduction du mouvement oculaire. Alors que l’on relevait des saccades de 500ms pour les libellés alignés à gauche, les scores des libellés alignés à droite atteignent 240 ms pour un utilisateur débutant et 170 ms pour un utilisateur expert.

Conclusion :

• Position des libellés : placer les libellés au dessus des champs est la présentation la plus efficace dans la plupart des cas car les utilisateurs ne sont pas obligés de regarder séparément le libellé et le champs de saisie. Il faut toute fois faire attention à bien séparer visuellement le libellé et le champ

• Alignement des libellés : Le placement des libellé au dessus des champs est préférable mais si vous choisissez de placer les libellés à gauche des champs préférez un alignement à droite. L’alignement à gauche est cause de surcharge cognitive

• Libellés en gras : Dans ce cas la lecture est plus difficile, il est donc préférable d’utiliser des polices « maigre ». Cependant si vous choisissez de mettre vos libellés en gras, utilisez de fines bordures de champs

• Menu déroulant : ces éléments sont à utiliser avec parcimonie à cause de leur effet attractif. À utiliser pour des données importantes. Lorsqu’ils sont utilisés pour des données peu importante, il faut veiller à les placer bien au dessous des champs important.