Bases de la conception

Dans la première section, vous avez appris à créer un formulaire de base. Cette section est consacrée aux bonnes pratiques. Dans ce module, vous découvrirez l'expérience utilisateur, et pourquoi une interface utilisateur (UI) bien implémentée peut faire la différence.

Remplir un formulaire peut être chronophage et frustrant. Ce n'est pas une fatalité. Pour garantir une expérience utilisateur de qualité, assurez-vous qu'elle est intuitive. Veillez à optimiser la structure du formulaire et la conception graphique (mise en page, espacement, taille et couleur de la police). et une UI logique (comme la formulation des étiquettes et les types d'entrée appropriés). Voyons comment vous pouvez améliorer votre formulaire et le rendre plus facile à utiliser.

Libellés

Vous rappelez-vous à quoi sert l'élément <label> ? Une étiquette décrit une commande de formulaire. Une étiquette visible et bien écrite aide l'utilisateur à comprendre l'objectif d'une commande de formulaire.

Utiliser un libellé pour chaque commande de formulaire

Voulez-vous ajouter une commande de formulaire à votre formulaire ? Commencez par ajouter le libellé du nouveau champ. De cette façon, vous n'oubliez pas de l'ajouter.

Ajouter d'abord des étiquettes vous aide également à vous concentrer sur les objectifs du formulaire : de quelles données ai-je besoin ici ? Une fois que tout est clair, vous pouvez aider l'utilisateur à saisir des données et à remplir le formulaire.

Formulation des étiquettes

Supposons que vous souhaitiez décrire un champ de messagerie. Pour ce faire, procédez comme suit:

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

Ou vous pouvez le décrire comme ceci:

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

Quelle description choisissez-vous ?

Dans notre exemple, l'expression « Adresse e-mail » est à privilégier, car les étiquettes courtes sont plus faciles à lire, réduisent l’encombrement visuel, et aider les utilisateurs à comprendre plus rapidement quelles données sont nécessaires.

Position du libellé

Avec CSS, vous pouvez positionner un libellé en haut, en bas, à gauche et à droite d'une commande de formulaire. Où le placez-vous ?

Émissions de recherche il est recommandé positionner le libellé au-dessus de la commande de formulaire, de sorte que l'utilisateur puisse parcourir rapidement un formulaire et voir à quelle commande de formulaire appartient le libellé.

Conception de formulaires

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

Vous devez également différencier visuellement les différents types de commandes de formulaire. Un bouton doit ressembler à un bouton. Une entrée comme une entrée. Faites en sorte que les utilisateurs reconnaissent facilement l'objectif d'un contrôle de formulaire. Par exemple, si un élément ressemble à un lien, le fait de cliquer dessus devrait ouvrir une nouvelle page, sans envoyer de formulaire.

Aider les utilisateurs à naviguer dans les formulaires

Une mise en page extravagante peut être amusante, mais elle peut gêner le remplissage d'un formulaire.

En particulier, séries de recherche qu'il est préférable d'utiliser une seule colonne. Les utilisateurs ne veulent pas perdre de temps à chercher où se trouve la commande de formulaire suivante. En utilisant une seule colonne, il n’y a qu’une seule direction à suivre.

Aider les utilisateurs à interagir avec les formulaires

Pour éviter les appuis et les clics accidentels, et aider les utilisateurs à interagir avec votre formulaire, faites en sorte que vos boutons soient suffisamment grands. La méthode recommandée la taille de l'élément tactile d'un bouton est d'au moins 48 pixels. Vous devez également ajouter un espacement suffisant entre les commandes de formulaire à l'aide de l'margin. propriété CSS pour éviter les interactions accidentelles.

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

Vous pouvez définir différentes tailles pour différents périphériques de pointage, (par exemple, une souris) à l'aide de la fonctionnalité multimé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 les Fonctionnalité multimédia CSS pointer.

Afficher les erreurs là où elles se produisent

Pour permettre aux utilisateurs d'identifier facilement la commande de formulaire qui requiert leur attention, affichent des messages d'erreur à côté de la commande de formulaire à laquelle ils font référence. Lorsque vous affichez des erreurs lors de l'envoi du formulaire, veillez à accéder à la première commande de formulaire non valide.

Indiquer clairement aux utilisateurs quelles données ils doivent saisir

Assurez-vous que les utilisateurs comprennent comment saisir des données valides. Doit-il entrer au moins huit caractères pour un mot de passe ? Dites-le-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>

Indiquer clairement aux utilisateurs les champs obligatoires

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

Si un champ est obligatoire, indiquez-le clairement. Le cours Anatomie des formulaires accessibles décrit d'autres façons d'indiquer champs obligatoires. Si la plupart des champs d'un formulaire sont obligatoires, il peut être indiquer des champs facultatifs.

Comment connecter les messages d'erreur aux commandes de formulaire afin de les rendre accessibles aux lecteurs d'écran ? Pour en savoir plus, consultez le module suivant.

Testez vos connaissances

Testez vos connaissances sur la conception de formulaires

Comment décririez-vous une commande de formulaire ?

Utiliser l'élément <label>
Avec l'attribut description
Utiliser l'élément <description>
Avec l'attribut placeholder

Quelle est la taille recommandée pour les zones cibles tactiles ?

48 px
16 px
Assez gros pour appuyer dessus avec une pomme de terre.
31,5 px

Où devez-vous placer les messages d'erreur ?

Où vous voulez.
En haut de <form>.
Ne jamais afficher de messages d'erreur
À côté de la commande de formulaire

Ressources