Dans la première section, vous avez appris à créer un formulaire de base. Cette section traite des bonnes pratiques. Dans ce module, découvrez l'expérience utilisateur (UX) et pourquoi une interface utilisateur (UI) bien implémentée peut faire toute la différence.
Créer des interfaces conviviales
Remplir un formulaire peut être chronophage et frustrant. Ce n'est pas une obligation. Pour garantir une expérience utilisateur de qualité, assurez-vous que l'interface utilisateur est intuitive. Assurez-vous d'optimiser la structure du formulaire et la conception graphique (mise en page, espacement, taille et couleur de la police), ainsi que l'UI logique (par exemple, la formulation des libellés et les types de saisie appropriés). Voyons comment améliorer votre formulaire et le rendre facile à utiliser.
Étiquettes
Vous souvenez-vous à quoi sert l'élément <label> ?
Un libellé décrit une commande de formulaire.
Un libellé visible et bien rédigé permet à l'utilisateur de comprendre l'objectif d'une commande de formulaire.
Utiliser un libellé pour chaque contrôle de formulaire
Voulez-vous ajouter une commande de formulaire à votre formulaire ? Commencez par ajouter le libellé pour le nouveau champ. Ainsi, vous n'oubliez pas de l'ajouter.
Ajouter d'abord des libellés 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 du libellé
Supposons que vous souhaitiez décrire un champ d'adresse e-mail. Pour ce faire, procédez comme suit:
<label for="email">Enter your email address</label>
Ou vous pourriez la décrire comme ceci:
<label for="email">Email address</label>
Quelle description choisissez-vous ?
Pour notre exemple, l'expression "Adresse e-mail" est privilégiée, car les libellés courts sont plus faciles à parcourir, réduisent l'encombrement visuel et aident les utilisateurs à comprendre plus rapidement les données dont ils ont besoin.
Position du libellé
Avec CSS, vous pouvez positionner un libellé en haut, en bas, à gauche et à droite d'une commande de formulaire. Où la placez-vous ?
Des études montrent qu'il est recommandé de positionner le libellé au-dessus de la commande de formulaire pour que l'utilisateur puisse parcourir rapidement un formulaire et voir quelle étiquette appartient à quelle commande de formulaire.
Conception de formulaires
Une bonne conception des formulaires peut réduire considérablement les taux d'abandon.
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 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>.
Si l'utilisateur doit accepter les conditions d'utilisation de votre site, utilisez <input type="checkbox">.
Vous devez également différencier visuellement les différents types de commandes de formulaire. Un bouton doit ressembler à un bouton. Une entrée telle qu'une entrée. Permettre aux utilisateurs de reconnaître facilement l'objectif d'une commande de formulaire. Par exemple, si un élément ressemble à un lien, cliquer dessus devrait ouvrir une nouvelle page et ne pas envoyer de formulaire.
Aider les utilisateurs à naviguer dans les formulaires
Une mise en page extravagante peut être amusante, mais peut gêner le remplissage d’un formulaire.
En particulier, des recherches montrent 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 clics accidentels et aider les utilisateurs à interagir avec votre formulaire, veillez à ce que vos boutons soient suffisamment grands.
La taille de l'élément tactile recommandée pour un bouton est d'au moins 48 pixels.
Vous devez également ajouter un espacement suffisant entre les commandes de formulaire à l'aide de la propriété CSS margin afin d'éviter les interactions accidentelles.
La taille par défaut des commandes 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 font-size.
Vous pouvez définir différentes tailles pour différents dispositifs 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 la fonctionnalité multimédia CSS pointer
Afficher les erreurs là où elles se produisent
Pour que les utilisateurs sachent facilement quelle commande de formulaire requiert leur attention, affichez les 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 d'un formulaire, veillez à accéder au premier contrôle de formulaire non valide.
Indiquez clairement aux utilisateurs quelles données saisir
Assurez-vous que les utilisateurs comprennent comment saisir des données valides. Doit-il saisir au moins huit caractères pour un mot de passe ? Parlez-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 ! L'article Anatomie des formulaires accessibles présente les alternatives pour indiquer les champs obligatoires. Si la plupart des champs sont obligatoires, il peut être préférable d'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 à ce sujet, consultez le module suivant.
Testez vos connaissances
Tester vos connaissances sur la conception de formulaires
Comment décririez-vous un contrôle de formulaire ?
<description>.<label>.descriptionplaceholderQuelle est la taille recommandée pour les éléments tactiles ?
Où placer les messages d'erreur ?
<form>.