Présentation des listes déroulantes
Utilisation
Présentation
Le composant Liste déroulante propose aux utilisateurs un ensemble d'options parmi lesquelles ils peuvent effectuer une sélection. Les listes déroulantes affichent des options au fur et à mesure, ce qui empêche les utilisateurs de voir trop d'informations en même temps. Elles peuvent également être utilisées pour regrouper des informations. Les listes déroulantes sont toujours accompagnées d'une étiquette ou d'un titre de champ positionné avant le contrôle.
Ce composant se décline en quatre variantes : select, multiple select, combobox et multiple combobox.
Quand l'utiliser
- Dans des formulaires sur des pages entières, dans des modaux ou sur des panneaux latéraux.
- Pour filtrer ou trier le contenu d'une page.
- Lorsqu'une option peut être sélectionnée, utilisez select ou combobox.
- Lorsque plusieurs options peuvent être sélectionnées simultanément, utilisez multiple select ou multiple combobox.
Quand ne pas l'utiliser
Il existe un petit nombre d'options (5 ou moins) parmi lesquelles les utilisateurs peuvent choisir. Utilisez le groupe de cases d'option pour les petits ensembles d'éléments qui s'excluent mutuellement ou les cases à cocher pour les éléments à sélection multiple.
Source : Nielsen Norman Group
Formatage
Structure
Example du composant Liste déroulante, variante select.
- Étiquette : décrit l'objectif du champ de saisie.
- Texte d'aide (facultatif) : donne un contexte supplémentaire ou aide l'utilisateur à faire le bon choix.
- Entrée de liste déroulante : affiche l'option sélectionnée par l'utilisateur ou le texte générique.
- Menu déroulant : affiche une liste d'options parmi lesquelles choisir.
Saisie semi-automatique
Jutro comporte des menus déroulants avec des champs de saisie semi-automatique. Les utilisateurs peuvent saisir manuellement du texte pour filtrer les éléments de la liste déroulante. Cette fonctionnalité permet d'aider les utilisateurs à effectuer une sélection dans une longue liste.
Une liste déroulante dont l'option de saisie semi-automatique est activée présente des suggestions lorsque l'utilisateur commence à saisir du texte. Les sélections apparaissent en fonction des caractères saisis par l'utilisateur. Plus les utilisateurs saisissent de caractères dans le champ, plus la liste s'affine.
Pour les variantes de liste déroulante qui prennent en charge la recherche et les filtres, reportez-vous aux informations sur combobox et multiple combobox.
Ordre des options
Lorsque vous utilisez la liste déroulante à des fins de tri, pensez à organiser les options dans l'ordre. Par exemple :
- Option de la plus courante à la moins courante
- Opération de la plus simple à la plus complexe
- De l'option la moins risquée à l'option la plus risquée
La première option apparaît en haut de la liste.
Évitez de classer les options par ordre alphabétique sauf si cela a du sens pour votre cas d'utilisation. Une liste de pays ou autres problèmes d'éléments connus peuvent souvent être classés par ordre alphabétique. Cependant, vous devez vous assurer que les utilisateurs verront le nom de leur sélection sans ambiguïté.
Source : Nielsen Norman Group
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.
Inclure une étiquette
Placez l'étiquette de la liste déroulante en dehors du champ de façon à ce qu'elle soit toujours visible. Une liste déroulante sans étiquette n'est pas accessible.
Ne remplacez pas les étiquettes de champ par du texte générique dans le champ. Cela nuit à la convivialité et a de nombreuses conséquences négatives.
Veiller à ce que les éléments de menu soient concis
Limitez chaque option de liste déroulante à une ligne de texte. Si le texte est trop long pour tenir sur une ligne, vous pouvez ajouter des points de suspension (...) pour le contenu excédentaire et l'accompagner d'une infobulle basée sur navigateur pour afficher la chaîne complète. Cependant, il est recommandé d'éviter de tronquer le texte si possible.
Éviter les mots de remplissage
Évitez les mots de remplissage comme « veuillez » pour réduire le nombre de mots et de caractères et faciliter l'assimilation du contenu.
« Veuillez » est souvent trop utilisé, nous le réservons donc à des situations spécifiques. Par exemple :
- Il y a un problème et nous ne pouvons pas aider l'utilisateur à le résoudre.
- L'utilisateur est invité à effectuer une opération peu pratique.
- Le logiciel est à l'origine de l'erreur.
Si vous invitez simplement un utilisateur à sélectionner une option dans le menu déroulant, vous ne devez pas ajouter « veuillez » devant.
Ajoutez un texte d'aide si cela est utile
Utilisez du texte d'aide pour afficher le contexte et indiquer ce qu'il faut sélectionner ou comment sélectionner une option. Voici quelques exemples de ce que vous pouvez inclure dans le texte d'aide :
- Une description générale des options de liste déroulante
- Des astuces pour aider l'utilisateur à effectuer la bonne sélection
- Plus de contexte pour expliquer pourquoi un utilisateur doit effectuer une sélection
N'utilisez le texte d'aide que pour les informations pertinentes. Évitez d'utiliser un texte d'aide qui reformule simplement les mêmes informations que celles qui apparaissent dans l'étiquette.
Mettez la première lettre de la phrase en majuscule pour le texte d'aide. Rédigez 1 à 2 phrases courtes et complètes qui se terminent par un point.
Utiliser un texte d'erreur pour guider les utilisateurs
Le texte du message d'erreur indique à l'utilisateur comment corriger l'erreur. Dans le cas de la liste déroulante, les erreurs sont souvent liées à un problème qui doit être résolu pour la validation intégrée. Par exemple, si un utilisateur ne sélectionne pas un statut d'emploi et qu'il s'agit d'un champ obligatoire, vous pouvez utiliser le texte d'erreur pour guider l'utilisateur vers une solution : « Sélectionnez un statut d'emploi. »
Mettez la 1re lettre du 1er mot en majuscule pour le texte d'erreur. Rédigez 1 à 2 phrases courtes et complètes qui se terminent par un point.
Marquer les champs obligatoires
Utilisez un astérisque (*) pour indiquer les champs obligatoires. L'astérisque précède 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.
En plus de marquer les champs obligatoires par un astérisque, il est recommandé d'inclure des instructions claires en haut du formulaire, telles que « Tous les champs marqués d'un astérisque sont obligatoires », afin de vous assurer que les utilisateurs comprennent la signification de l'astérisque.
Mettre la 1re lettre du 1er mot en majuscule
Les étiquettes de champs, le texte fictif et les éléments de menu doivent commencer par une majuscule.
Reportez-vous au Guide de style des textes d'interface utilisateur pour en savoir plus sur l'implémentation des majuscules en début de phrase.
Comportements
Toutes les variantes de liste déroulante partagent les comportements répertoriés dans cette section. Pour les comportements uniques, reportez-vous aux directives d'utilisation de chaque variante.
États
Le champ de liste déroulante apparaît sans valeur (par défaut), ni texte générique, ni entrée renseignée.
| Visuel | État | Description |
|---|---|---|
 | Aucune valeur (par défaut) | Indique à l'utilisateur qu'aucune valeur n'a été sélectionnée et qu'il n'y a pas d'espace réservé. |
 | Espace réservé | Indique à l'utilisateur qu'aucune valeur n'a été sélectionnée. L'espace réservé est grisé. |
 | Entrée renseignée | Indique à l'utilisateur que l'entrée est renseignée. |
Les listes déroulantes ont également des états interactifs : activé, focus, désactivé, erreur, lecture seule et affichage uniquement.
| État | Description |
|---|---|
| Activé | Indique à l'utilisateur que l'élément est prêt à interagir. |
| Focus | Indique à l'utilisateur l'élément de l'interface utilisateur sur lequel le système est centré. |
| Désactivé | Indique à l'utilisateur que la valeur de saisie ne peut pas être modifiée en raison de facteurs locaux. Par exemple, une case à cocher située au-dessus du champ de saisie doit être cochée pour accéder à ce champ de saisie. Un utilisateur peut effectuer une action pour l'activer en interagissant avec la page. |
| Erreur | Indique que l'utilisateur a commis une erreur de validation. Le texte d'erreur permet aux utilisateurs d'apporter une correction. |
| Lecture seule | Indique à l'utilisateur que la valeur de saisie ne peut pas être modifiée en raison de facteurs externes. Par exemple, pas d'accès en écriture. Un utilisateur peut effectuer une action pour l'activer, par exemple en contactant un administrateur. |
| Affichage uniquement | L'état Affichage uniquement est utilisé dans deux cas :
|
L'image suivante illustre les états interactifs de la liste déroulante.
Interactions
Souris
Les utilisateurs peuvent interagir avec cet élément en cliquant dans la zone située à l'intérieur de la bordure.
Clavier
La liste déroulante est développée et réduite à l'aide de la barre d'espace. Les utilisateurs naviguent parmi les options à l'aide des touches fléchées et les sélectionnent à l'aide de la barre d'espace ou de la touche Entrée.
Lecteur d'écran
aria-labelledby crée une association programmatique entre le champ de saisie et son étiquette. L'attribut WAI-ARIA de aria-autocomplete='list' informe qu'une liste dans laquelle l'utilisateur peut faire un choix apparaîtra, mais la zone de modification reste active. La sélection de l'option « obligatoire » dans Storybook ajoute les attributs « required » et « aria-required="true" » au champ de saisie.
Accessibilité
Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :
- Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
- Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
- Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
- Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.
La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.
Lorsque vous utilisez ce composant dans votre application :
- Facilitez la compréhension du contenu, pour les utilisateurs, en évitant les noms d'option très longs.
- Évitez d'utiliser des éléments totalement focalisables tels que des boutons, des cases à cocher et des liens, ou du contenu totalement sémantique, tel que des titres, dans vos composants de liste déroulante.