Pattern UI : Principes d’organisation visuelle au sein d’un formulaire

le 31/10/2012 par Géraldine Da Sylva
Tags: Product & Design, UX

Les formulaires sont les objets les plus représentés dans les sites applicatifs (applications métiers, sites e-commerce, etc…). Tout a été dit sur le sujet et pour cause, on en croise tous les jours.

Les utilisateurs continuent pourtant de s’arracher les cheveux dans leurs tâches quotidiennes de saisie de contenu ou encore lors d’un achat en ligne ou la création d’un compte : « je perds du temps », « ahhh, non… j’ai perdu toutes mes données », « je n’arrive pas à valider, les chiffres de l’image sont illisibles… », « pourquoi, me demande-t-on mon n° de mobile??? »

Afin d’apporter de la joie et soulager nos utilisateurs dans la réalisation de leurs tâches, voici les patterns et anti-patterns UI à suivre lors de la conception d’un formulaire.

Description du pattern d'organisation visuelle

L’organisation la plus lisible est l’organisation verticale des libellés et des champs de saisie. Ce mode d’alignement protège davantage l’utilisateur contre les erreurs.

Cas d’usage : pour les formulaires courts dont l’utilisation est occasionnelle.

  1. Les libellés sont justifiés à gauche et positionnés au dessus des champs de saisie.
  2. Le déplacement par tabulation respecte la séquence visuelle.

Web application form design - Luke Wroblewski

Avantages

La proximité des libellés et des champs de saisie protège l’utilisateur contre les erreurs et accélère la saisie au clavier

Web application form design - Luke Wroblewski

Cet alignement optimal décrit par Luke WROBLEWSKI a été appuyé par les tests eye tracking menés par Matteo Penzo : l’utilisateur perçoit le libellé et champ avec un seul mouvement oculaire --> rapidité optimale

uxmatters.com

Sur mobile, les libellés restent visibles à l'écran, lorsqu'ils sont au dessus des champs :

google.fr

Sur mobile, la saisie des données dans le formulaire de pole-emploi.fr est gênée par la "disparition" des libellés à l'écran :

pole-emploi.fr

En cas de multilinguisme, l’espace consacré aux libellés est moins contraint :

octo.com

Alternative

L’organisation la plus efficace en terme de saisie est l’organisation horizontale des libellés et des champs de saisie. Ce mode d’alignement est particulièrement adapté en cas d’espace limité.

Cas d’usage : pour les formulaires longs dont l’utilisation est intensive et quotidienne. A privilégier pour les applications professionnelles.

  1. Libellés alignés sur la droite
  2. Champs de saisie, listes déroulantes, radio boutons et cases à cocher alignés sur la gauche

Web application form design - Luke Wroblewski

uxmatters.com

Chez qui ça fonctionne

Chez Google : formulaire court

google.fr

Chez mon.service-public : formulaire long

mon.service-public.fr

Lorsque le formulaire est trop long, préférer la pagination du formulaire.

Antipattern

les libellés alignés sur la gauche peuvent être  distants des champs de saisie. Cette disposition va à l’encontre de la loi de proximité décrite dans la théorie de la forme (Gestalttheorie).

Les mouvements oculaires sont alors importants et les erreurs de parallaxe sont à craindre.

chez Boursorama

uxmovement.com

uxmovement.com

Sources

Best practices for WEB form design – Luke WROBLEWSKI

Ergonomie des interfaces - Jean François NOGIER

Théorie de la forme (Gestalttheorie) - W. Köhler, Psychologie de la forme

Norme NF EN ISO 9241-14 (1998). Exigences ergonomiques pour travail de bureau avec terminaux à écrans de visualisation.

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

http://uxmovement.com/forms/form-label-proximity-right-aligned-is-easier-to-scan/