Un formulaire est une interface graphique permettant à l'utilisateur de saisir des informations qui seront ensuite soumises à un système ou une application. Voici une liste de ses avantages et inconvénients:
Avantages | Inconvénients |
---|---|
|
|
Anatomie de la composante
Élément | Description et interactions |
Libellé À gauche du champ; colonne gauche du formulaire | Nom officiel d'un champ. Il peut aussi y avoir un libellé pour un sous-champ (un champ qui dépend du précédent). |
Aide à la saisie (indice ou espace pour le texte) À l'intérieur d'un champ vide | Court texte à l'intérieur du champ incitant à le remplir de la bonne manière, affiché avant que le champ n'ait été sélectionné. Ce texte disparait dès que le champ est rempli et il devrait réapparaitre si le champ est vidé. |
Instructions Sous le champ | Directive affichée sous le champ qui explique les contraintes techniques liées au champ (ex.: Chiffre seulement.) - Ce texte reste toujours visible, mais est remplacé par un message d'erreur le cas échéant. |
Message d'erreur Sous le champ | Message - en rouge - affiché sous le champ s'il y a une validation nécessaire qui ne passe pas. Il remplace le texte d'instruction, s'il y a lieu. Ce texte reste affiché jusqu'au moment où la valeur (fautive) du champ est changée. |
Aide contextuelle À droite du champ; colonne droite du formulaire. | "Ce texte contextualise la façon dont la donnée du champ sera utilisée par la page ou l'application qui va l'utiliser (ex.: site de http://rc.ca ). Dans la mesure du possible, ce texte doit éviter de faire référence à l'aspect visuel du rendu de la donnée dans ladite page (ou app), car cet aspect n'est en général pas géré par Sccop (et peut changer indépendamment du développement de Scoop). Mais il y a des exceptions où le formatage de la donnée pourrait avoir une incidence sur sa présentation: il faut alors l'indiquer dans le texte d'Aide. Une icône (Info ou Warning) précède le paragraphe." |
Infobulle (bulle d'aide ou tooltip) Dans une bulle, sous l'élément concerné | Certains éléments des formulaires (comme les liens; icônes cliquables; informations en lecture seule; dates relatives; etc.) peuvent avoir un texte qui précise l'action ou l'information affichée, qui est apparait dans une bulle en hover (lorsque le curseur passe au-dessus de l'élément). |
Infobulle de la contextualisation Dans une bulle, sous l'icône de remise à l'original ("restore") | Certains champs des formulaires peuvent être préremplis par d'autres données qui proviennent d'autres champs du même formulaire; ou des préférences; ou de sources externes. Ces champs ont alors une icône de remise à l'original qui est cliquable seulement si la donnée préremplie est modifiée. Dans ce cas, en plaçant le curseur sur l'icône (située à la droite du champ), une bulle affiche la donnée qui serait remise dans le champ si l'icône était cliquée... s'il est possible de l'afficher. Autrement, un court texte devrait expliquer quelle donnée serait remise dans le champ (ex.: « Image principale »). |
Éviter d'avoir trop de champs obligatoires.
Utiliser des libellés de champ clairs et concis.
Utiliser des messages d'erreur clairs et informatifs en cas de saisie incorrecte.
Utiliser des indicateurs de progression pour montrer à l'utilisateur où il se trouve dans le processus de remplissage du formulaire.
Utiliser des boutons d'action clairs et concis.
Fournir un résumé des données saisies avant de soumettre le formulaire.
Concevoir des formulaires adaptatifs pour différents types d'appareils.
Références
Material Design : https://material.io/components/text-fields
Bootstrap : https://getbootstrap.com/docs/5.0/forms/overview/
Fluent Design : https://www.microsoft.com/design/fluent/#/controls/input
Ant Design : https://ant.design/components/form/
https://www.figma.com/file/Y3qtAvlNyXkWuGvOa9Rbo5/%F0%9F%94%B7-DX-Tous-%7C-Formulaires?node-id=0%3A1
https://www.nngroup.com/articles/required-fields/