Bases de la conception

Dans la première section, vous avez appris à créer un formulaire de base. Cette section porte sur les bonnes pratiques. Dans ce module, vous allez découvrir l'expérience utilisateur (UX) et comprendre pourquoi une interface utilisateur (UI) bien implémentée peut faire une grande différence.

Créer des interfaces conviviales

Remplir des formulaires peut être long et frustrant, mais ce n'est pas une fatalité. Pour offrir une expérience utilisateur optimale, assurez-vous que l'interface est intuitive. Assurez-vous de proposer une structure de formulaire et une conception graphique optimales (mise en page, espacement, taille et couleur de la police), ainsi qu'une interface utilisateur logique (libellés et types de saisie appropriés, par exemple). Découvrez comment améliorer votre formulaire et le rendre plus facile à utiliser.

Étiquettes

Vous souvenez-vous à quoi sert l'élément <label> ? Un libellé décrit un contrôle de formulaire. Un libellé visible et bien rédigé aide l'utilisateur à comprendre l'objectif d'un élément de formulaire.

Utiliser un libellé pour chaque élément de contrôle de formulaire

Voulez-vous ajouter un nouveau contrôle de formulaire à votre formulaire ? Commencez par ajouter le libellé du nouveau champ. Vous n'oublierez ainsi pas de l'ajouter.

Ajouter des libellés en premier vous aide également à vous concentrer sur les objectifs du formulaire : quelles données dois-je recueillir ici ? Une fois que vous avez compris cela, vous pouvez vous concentrer sur l'aide à l'utilisateur pour qu'il saisisse des données et remplisse le formulaire.

Formulation des libellés

Dites que vous souhaitez décrire un champ d'adresse e-mail. Pour ce faire, procédez comme suit :

<label for="email">Enter your email address</label>

Vous pouvez également le décrire comme suit :

<label for="email">Email address</label>

Quelle description choisissez-vous ?

Dans notre exemple, le libellé "Adresse e-mail" est préférable, car les libellés courts sont plus faciles à lire, réduisent l'encombrement visuel et aident les utilisateurs à comprendre plus rapidement les données requises.

Position du libellé

Avec CSS, vous pouvez positionner un libellé en haut, en bas, à gauche et à droite d'un élément de formulaire. Où le placer ?

Les recherches montrent que la bonne pratique consiste à positionner le libellé au-dessus du contrôle de formulaire. L'utilisateur peut ainsi parcourir rapidement un formulaire et voir quel libellé appartient à quel contrôle de formulaire.

Concevoir des formulaires

Une bonne conception de formulaire peut réduire considérablement les taux d'abandon de formulaire. Aidez les utilisateurs à saisir des données en utilisant l'élément et le type d'entrée appropriés. Vous pouvez choisir parmi différents éléments de formulaire et types d'entrée. Pour offrir la meilleure expérience utilisateur, utilisez l'élément et le type d'entrée les plus adaptés à votre cas d'utilisation. Si l'utilisateur doit saisir plusieurs lignes de texte, utilisez l'élément <textarea>. Utilisez <input type="checkbox"> lorsque les utilisateurs doivent accepter les conditions d'utilisation de votre site.

Vous devez également différencier visuellement les différents types de contrôles de formulaire. Un bouton doit ressembler à un bouton. Une entrée comme une entrée. Permettez aux utilisateurs de reconnaître plus facilement l'objectif d'un élément de formulaire. Par exemple, si un élément ressemble à un lien, le fait de cliquer dessus doit ouvrir une nouvelle page et non envoyer un formulaire.

Aider les utilisateurs à parcourir les formulaires

Une mise en page extravagante peut être amusante, mais peut vous empêcher de remplir un formulaire.

En particulier, les recherches montrent qu'il est préférable de n'utiliser qu'une seule colonne. Les utilisateurs ne veulent pas perdre de temps à chercher le prochain élément de formulaire. En utilisant une seule colonne, il n'y a qu'une seule direction à suivre.

Aider les utilisateurs à interagir avec les formulaires

Pour éviter les clics et les appuis accidentels, et aider les utilisateurs à interagir avec votre formulaire, assurez-vous que vos boutons sont suffisamment grands. La taille de la zone tactile recommandée pour un bouton est d'au moins 48 px. Vous devez également ajouter suffisamment d'espace entre les éléments de formulaire à l'aide de la propriété CSS margin pour éviter les interactions accidentelles.

La taille par défaut des éléments de formulaire est trop petite pour être vraiment utilisable. Vous devez augmenter la taille en utilisant padding et en modifiant la valeur par défaut de font-size.

Vous pouvez définir différentes tailles pour différents dispositifs de pointage, par exemple une souris, à l'aide de la fonctionnalité média CSS pointer.

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
}

En savoir plus sur la caractéristique média CSS pointer

Afficher les erreurs là où elles se produisent

Pour permettre aux utilisateurs de trouver facilement le contrôle de formulaire qui nécessite leur attention, affichez les messages d'erreur à côté du contrôle de formulaire auquel ils se rapportent. Lorsque vous affichez des erreurs lors de l'envoi d'un formulaire, veillez à accéder au premier contrôle de formulaire non valide.

Indiquez clairement aux utilisateurs les données à saisir

Assurez-vous que les utilisateurs savent comment saisir des données valides. Doivent-ils saisir au moins huit caractères pour un mot de passe ? Dites-leur.

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>

Indiquez clairement aux utilisateurs quels champs sont obligatoires.

<label for="name">Name (required)</label>
<input name="name" id="name" required>

Si un champ est obligatoire, indiquez-le clairement. The Anatomy of Accessible Forms explique les alternatives pour indiquer les champs obligatoires. Si la plupart des champs d'un formulaire sont obligatoires, il peut être préférable d'indiquer les champs facultatifs.

Comment associer les messages d'erreur aux contrôles de formulaire pour les rendre accessibles aux lecteurs d'écran ? Pour en savoir plus, consultez le module sur l'accessibilité.

Vérifier que vous avez bien compris

Tester vos connaissances sur la conception de formulaires

Ressources

• Create Amazing Forms (Créer des formulaires incroyables, en anglais)
• Bonnes pratiques pour la conception de formulaires mobiles
• Baymard Institute : études sur l'UX dans l'e-commerce
• Don't Make Me Think