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.
Créer des interfaces conviviales
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 ?
<description><label>descriptionplaceholderQuelle est la taille recommandée pour les zones cibles tactiles ?
Où devez-vous placer les messages d'erreur ?
<form>.