Dernière mise à jour : 2 juin 2025
La liste déroulante dévoile au clic plus de six options prédéterminées parmi lesquelles une seule réponse doit être sélectionnée.
- Guide d'utilisation
- Design
Dans cette page
1. Utilisation
Principales règles
La liste déroulante est utilisée lorsqu'il y a plus de six options de réponse.
Ces options sont initialement cachées.
Le libellé principal doit évoquer à l'utilisateur ou l'utilisatrice une bonne idée de la réponse attendue avant même le dévoilement des options prédéterminées.
Une seule réponse peut être sélectionnée dans la liste déroulante.
Les options proposées doivent être simples et précises, car aucun texte descriptif ne les accompagne.
Interactivité
- Une icône de chevron pointant vers le bas indique que la liste peut être ouverte.
- Au clic, la liste se déploie pour dévoiler les options prédéterminées disponibles.
- Pour que le choix soit délibéré, aucune option n’est présélectionnée par défaut.
- Dès qu’une option est sélectionnée, la liste déroulante se ferme.
- Pour modifier la sélection, il suffit de rouvrir la liste déroulante et de sélectionner une autre option.
2. Quand envisager autre chose
- Pour sélectionner plus d'une option parmi un choix allant jusqu'à six réponses simples et claires, on choisit la case à cocher.
- Pour présenter un ensemble de deux à six options courtes où un seul choix de réponse est possible, on opte pour le bouton radio.
- Si la réponse est unique à l'utilisateur ou l'utilisatrice ou pour ne pas limiter les options, on se sert du champ texte.
3. Rédaction UX
Règles spécifiques à la liste déroulante
Libellé principal
Le libellé principal est clair, concis et rédigé dans une forme positive.
Il commence par une majuscule.
Il ne finit jamais par un deux-points et n’a pas de ponctuation finale.
S’il s’agit d’une phrase complète ou interrogative, il peut exceptionnellement se terminer par un point ou un point d’interrogation.
Limite de caractères : 100, espaces incluses
Action attendue
L'action attendue s’affiche à l’état par défaut dans le champ de sélection pour indiquer à l'utilisateur ou l'utilisatrice ce qui doit être fait.
L'appel à l'action « Sélectionner une option » est utilisé, puisqu'il convient à toutes les listes déroulantes.
Il est toutefois possible d'adapter ce libellé au contexte de la liste par exemple « Sélectionner une région » ou « Choisir un domaine d'activité ». Le cas échéant, l'action attendue doit être rédigée selon ces règles :
- Elle prend la forme d'un appel à l'action.
- Elle commence par une majuscule et un verbe à l'infinitif.
- Elle n'a pas de ponctuation finale.
Libellé d’option
Le libellé d'option d'une liste déroulante n'est jamais accompagné d'un texte descriptif.
Il doit être clair, précis et rédigé dans une forme positive et il commence toujours par une majuscule.
Il n’a pas de ponctuation finale.
Dans une liste déroulante, on évite les libellés d'option sous forme de phrases complètes. Mais si c'est inévitable, la phrase doit se terminer par un point.
Tous les libellés d’option d’une même liste déroulante doivent suivre une structure grammaticale commune.
Par exemple, ce sont tous des noms communs ou des verbes à l’infinitif.
Les options sont classées dans un ordre logique, soit du plus courant au moins courant, du plus simple au plus complexe ou par ordre alphabétique.
Limites de caractères : 75, espaces incluses
Texte d'aide (optionnel)
Dans le cas d’une liste déroulante, l'utilisation du texte d'aide est très rare, mais le contexte peut nécessiter d'y avoir recours.
Le texte d’aide fournit une information complémentaire pour bien comprendre le libellé principal et y répondre correctement.
Puisque la liste à l'état par défaut intègre déjà dans le champ de sélection une phrase invitant à sélectionner une option, il est inutile de répéter cette indication dans un texte d'aide.
Il ne comporte pas de limite de caractères, mais il doit être précis et le plus concis possible.
Il utilise un langage simple et inclusif.
Règles générales pour les formulaires
Au-delà des règles propres au composant, il importe aussi de considérer celles qui concernent l’ensemble d’un formulaire.
Éviter les termes techniques, sauf s’ils sont connus par les personnes qui utiliseront le formulaire, par exemple des gens de métier.
Déterminer si la question est obligatoire et l’indiquer en ajoutant un astérisque.
Si une information complémentaire doit être communiquée, tenir compte du contexte pour choisir ce qui convient le mieux entre le texte d’aide et l'infobulle.
1. Anatomie
2. Astérisque et infobulle
Au niveau du libellé principal, deux éléments peuvent être ajoutés, soit :
- un astérisque (*) pour indiquer une question obligatoire ;
- une infobulle pour fournir une information complémentaire, mais non essentielle pour comprendre la question et y répondre.
Ces éléments peuvent être utilisés simultanément ou séparément selon les besoins d’information à communiquer.
3. Texte d’aide
L'utilisation du texte d'aide avec une liste déroulante est très rare. Toutefois, s'il y en a un, il se positionne sous la liste déroulante afin de fournir des informations essentielles pour répondre à la question.
4. Message d’erreur
La seule erreur possible avec une liste déroulante survient lorsqu'aucune option n'est sélectionnée. Le cas échéant, le message d'erreur se positionne sous la liste déroulante et au-dessus du texte d’aide, s’il y en a un.
5. Grille
Afin d'assurer une lisibilité optimale, il importe de respecter un certain spectre de longueur de ligne. Ces limites sont établies dans le composant selon les points de rupture de chaque taille d’écran.
6. États interactifs du champ de sélection
Défaut
Survol
Actif - focus
Rempli
Erreur
Désactivé
