Formulaires

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

Avantages

Inconvénients

  • Les formulaires permettent aux utilisateurs de saisir rapidement et facilement des informations.

  • Les formulaires peuvent être utilisés pour collecter des données structurées et organisées.

  • Les formulaires peuvent être utilisés pour valider les données saisies par l'utilisateur et fournir des messages d'erreur en cas de saisie incorrecte.

  • Les formulaires peuvent être utilisés pour créer des flux de travail et des processus automatisés.

  • Les formulaires peuvent parfois être complexes et intimidants pour les utilisateurs.

  • Les formulaires peuvent nécessiter un grand nombre de champs à remplir, ce qui peut prendre du temps.

  • Les formulaires peuvent ne pas être adaptés aux types de données que l'utilisateur souhaite saisir.

  • Les formulaires peuvent être un vecteur d'erreurs de saisie.

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

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/

https://www.nngroup.com/articles/hostile-error-messages/

https://www.nngroup.com/articles/error-message-guidelines/