Formulaires
Présentation
Un formulaire est un groupe d'éléments d'interface utilisateur qui peuvent être utilisés pour collecter des informations auprès d'un utilisateur dans divers contextes. Il existe différentes façons de présenter des formulaires, par exemple dans un tiroir d'applications, dans le cadre d'un processus ou sur une page. Les formulaires présentent des informations sous forme de blocs logiques faciles à comprendre et à utiliser pour les utilisateurs.
Quand l'utiliser
- Lorsqu'une application doit collecter des données auprès de l'utilisateur
- Lorsque l'utilisateur doit afficher les données disponibles
Quand ne pas l'utiliser
N'utilisez pas les formulaires comme seul moyen d'afficher des données. Pensez à utiliser des fiches et des vues de listes pour des ensembles de données plus simples, et des tables ou des graphiques de visualisation de données pour des ensembles de données complexes.
Structure
- Titre de page/du formulaire : indique l'objectif de la page ou du formulaire. Utilisez le style de texte h1 pour le titre de page/formulaire.
- Titre de section : indique l'objectif d'une section ou de groupes d'informations. Utilisez le style de texte h2 pour le titre de section.
- Élément de formulaire d'interface utilisateur : permet aux utilisateurs de saisir ou de sélectionner des données.
- Groupe de boutons : permet aux utilisateurs de soumettre ou d'annuler les données saisies dans le formulaire.
Directives générales
Structure, espacement et disposition
- Utilisez un titre approprié pour indiquer l'objectif du formulaire. Les titres de page ou de formulaire utilisent le style de texte h1.
- Structurez les formulaires de manière logique et utilisez le fractionnement pour faciliter la compréhension et la mémorisation des informations.
- Utilisez des sections avec des en-têtes appropriés pour indiquer des groupes d'informations. Les en-têtes de section utilisent le style de texte h2.
- Pour les formulaires plus longs, divisez le flux en différentes étapes, phases ou sections à l'aide d'éléments d'interface utilisateur tels que des fiches, des accordéons, des indicateurs de progression ou des onglets.
- Veillez à ce que le titre, les contrôles de formulaire et les différentes sections du formulaire soient suffisamment espacés.
| Regroupement d'informations à l'aide de fiches | Regroupement d'informations à l'aide de sections de page |
|---|---|
 |  |
Formulaires à plusieurs colonnes
- Utilisez des formulaires à colonne unique lorsque l'espace est limité. Par exemple, sur les tableaux de bord, les appareils mobiles et les formulaires d'étape.
- Sur des appareils plus volumineux et lorsqu'une disposition à une colonne peut être source de distraction, utilisez des dispositions à plusieurs colonnes pour utiliser l'espace disponible.
- Organisez les groupes ou les sections dans l'ordre de lecture naturel des utilisateurs, et de manière à ce qu'une section mène à l'autre.
Actions de formulaire/section
- Utilisez un bouton principal pour l'action principale et un bouton tertiaire pour l'annulation.
- Regroupez les actions avec le contenu manipulé. Cela garantit que les utilisateurs associent l'action au contenu.
Validation
- Utilisez la validation côté client ou côté serveur sur les formulaires en fonction de la complexité du formulaire et du cas d'utilisation.
- Utilisez des messages de statut au niveau des champs pour afficher les résultats de la validation côté client sur des champs individuels.
- Indiquez le statut du champ avec le message approprié pour aider les utilisateurs à résoudre les erreurs.
- Notifications de fenêtres contextuelles utilisateur pour afficher les messages de validation de formulaire côté serveur.
- Si les appels de validation du serveur sont susceptibles d'entraîner des retards, utilisez le chargeur pour indiquer le statut du système.
Éléments de formulaire de l'interface utilisateur
| Type | Finalité |
|---|---|
| Saisie de texte et zone de texte | Pour entrer du texte et des nombres dans les champs de saisie de données. |
| Cases d'option | Pour sélectionner une seule option dans une liste de 6 options ou moins. |
| Liste déroulante, recherche | Pour sélectionner une seule option dans une liste de plus de 6 options. |
| Case à cocher | Pour sélectionner une ou plusieurs options dans une liste. |
| Bouton bascule | Pour sélectionner des options opposées. |
| Sélecteur de date | Pour sélectionner une date, une heure ou une plage de dates. |
| Chargeur de fichiers | Pour charger un ou plusieurs fichiers dans le formulaire. |
| Curseur | Pour effectuer une sélection à partir d'une valeur numérique comprise dans une plage spécifiée. |
| Stepper | Pour augmenter ou diminuer une valeur numérique de manière incrémentielle. |
Contenu
Directives générales relatives à la rédaction
- Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
- Utilisez des verbes au présent et la forme active dans la plupart des cas.
- Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
- Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
- Utilisez des termes et des phrases concis.
Regrouper les champs de manière logique
Si votre formulaire nécessite que les utilisateurs saisissent un grand nombre de données, regroupez les champs associés. Cela permet aux utilisateurs de comprendre les informations qu'ils doivent fournir. Par exemple, le nom et la date de naissance d'un utilisateur peuvent être classés dans la catégorie Informations personnelles. L'adresse et le numéro de téléphone peuvent être insérés dans la catégorie Informations sur le contact.
Source : Nielsen Norman
Marquer les champs obligatoires
Utilisez un astérisque pour marquer les champs obligatoires. L'astérisque doit précéder l'étiquette du champ. Cela permet aux utilisateurs de localiser facilement les champs devant obligatoirement être renseignés en regardant uniquement le caractère le plus à gauche de l'étiquette. Bien que ce ne soit pas obligatoire, vous pouvez également marquer des champs facultatifs pour réduire davantage la charge cognitive des utilisateurs.
Source : Nielsen Norman
Expliquer les exigences en matière de saisie et de formatage
S'il existe des exigences spécifiques qu'un utilisateur doit suivre pour saisir correctement les données, indiquez les instructions exactes. Ne laissez pas les utilisateurs deviner des éléments tels que les exigences en matière de mot de passe ou la façon de formater une date. Pour les conseils ou les instructions qui sont essentiels pour remplir le formulaire, placez ce texte en dehors du champ afin qu'il soit toujours visible.
Source : Nielsen Norman
Éviter le texte d'espace réservé
Un texte d'espace réservé entraîne divers problèmes d'utilisation. Lorsque les utilisateurs commencent à taper, le texte de l'espace réservé disparaît. Cela sollicite la mémoire à court terme des utilisateurs. En outre, le texte de l'espace réservé est souvent peu contrasté, ce qui signifie que les utilisateurs malvoyants peuvent le trouver difficile à lire.
Source : Nielsen Norman
Accessibilité
- Tous les champs doivent avoir une étiquette aria appropriée qui indique la finalité du champ.
- Utilisez
aria-describedbypour prendre en charge plus longtemps le texte accessible aux utilisateurs de lecteurs d'écran. - La couleur ne doit pas être utilisée comme seul moyen de communiquer les scénarios d'erreur. Utilisez du texte et des icônes pour aider les lecteurs d'écran à annoncer les erreurs et les régions actives lorsque des erreurs se produisent globalement.
- Pour les images décoratives qui n'ajoutent pas d'informations au contenu de la page, fournissez un texte alt vide (alt="") afin qu'elles soient ignorées par les technologies d'assistance. Source : W3C Web Accessibility Initiative - Decorative Images
Réactivité
Les mises en page de formulaires à plusieurs colonnes sont englobées de sorte que les colonnes s'empilent les unes en dessous des autres sur des écrans étroits (mobiles) et que l'image ait la même largeur que les éléments de l'interface utilisateur ci-dessous. Les images peuvent être supprimées ou placées de manière à ne pas avoir d'impact sur les éléments critiques présentés à l'utilisateur.
Création de thèmes
Par défaut, le thème et la marque correspondent à ceux de l'application, sauf s'ils sont remplacés.
Il est possible de donner un thème aux modèles pour répondre à des exigences spécifiques en matière de valorisation de la marque et aux besoins des clients. Cela inclut des éléments visuels tels que les couleurs, la typographie, les icônes, les boutons et d'autres composants et éléments graphiques.
En savoir plus sur les thèmes avec les jetons de conception
Composants associés
- Sélecteur de date
- Bouton bascule
- Lien
- Bouton
- Sélecteur d'heure
Ressources
Téléchargez un fichier ZIP contenant tous les derniers modèles Jutro et commencez à concevoir des expériences.