Les listes déroulantes et les menus déroulants sont partout : sites, applications mobiles, logiciels. Leur principal atout ? Afficher plusieurs options dans une zone réduite. Découvre ci-dessous comment concevoir des listes déroulantes et des menus déroulants de manière efficace.
Tu te demandes dans quelle situation une liste ou un menu déroulant peuvent être utiles ? Voici les cas les plus fréquents :
dans un formulaire, une liste déroulante permet de proposer plusieurs choix (ex. : liste de pays) ;
dans une barre de navigation, un menu déroulant permet de donner accès à plusieurs pages.
Sur les sites simples, l’affichage d’un menu déroulant ressemble à une simple liste de libellés.
Sur les sites complexes, ils sont remplacés par des méga menus.
Il s'agit d'un large bandeau qui affiche de nombreux libellés organisés sur plusieurs colonnes, avec ou sans photos.
Tu penses que le bon sens suffit pour concevoir des listes déroulantes ou des menus déroulants ?
Découvre les bonnes pratiques à appliquer pour encore plus d’efficacité.
1. Utilise une liste déroulante uniquement si elle est pertinente
Mauvaise pratique : utilisation d’une liste déroulante pour afficher uniquement deux valeurs (ex. : oui/non).
Problèmes :
ça augmente l’effort à faire. Ton utilisateur doit faire deux clics pour sélectionner une valeur alors que si tu utilises des boutons radio ou des cases à cocher, il ne fait qu’un clic.
ça ralentit la découvrabilité des contenus. Ton utilisateur doit cliquer dans la liste déroulante pour découvrir les valeurs proposées.
Mon conseil : utilise une liste déroulante uniquement si elle est vraiment pertinente. Il n’y a pas de nombre maximum ou minimum. En fonction du contexte, ça peut être quand les valeurs sont supérieures à deux, trois ou quatre.
2. Privilégie un champ de saisie si nécessaire
Mauvaise pratique : utilisation de trois listes déroulantes (jour, mois et année) pour indiquer sa date de naissance.
Problème : ça ralentit le temps de complétude du formulaire. Dans mon exemple, ton utilisateur devra faire six clics pour indiquer sa date de naissance.
Mon conseil : privilégie un champ de saisie pour la date de naissance, au lieu d’afficher trois listes déroulantes.
Bonus : pour une meilleure expérience utilisateur, indique le format attendu (ex. : JJ/MM/AAAA) et ajoute des séparateurs en dur dans le champ de saisie.
3. Affiche le libellé au-dessus de ta liste déroulante
Mauvaise pratique : affichage du libellé, c'est-à-dire du titre de la liste déroulante, à l'intérieur de celle-ci (ex. : Pays).
Problème : ça augmente la charge cognitive. Ton utilisateur doit se souvenir du libellé de ta liste déroulante une fois la valeur saisie.
Mon conseil : affiche le libellé de manière fixe au-dessus de ta liste déroulante et affiche comme valeur par défaut le terme Sélectionnez.
4. Affiche les valeurs de ta liste déroulante par ordre alphabétique
Mauvaise pratique : affichage des valeurs de ta liste déroulante dans un ordre arbitraire ou logique pour toi.
Problèmes :
ça augmente la charge cognitive. Ton utilisateur doit essayer de comprendre ta logique ;
ça rallonge la durée de sélection. Ton utilisateur devra potentiellement lire toutes les valeurs avant de sélectionner la bonne.
Mon conseil : affiche les valeurs de ta liste déroulante par ordre alphabétique.
Bonus : pour une liste de pays sur un site français, tu peux afficher la valeur France en haut de ta liste, suivie d’un séparateur, puis afficher la liste de tous les pays, en remettant la valeur France.
5. Propose une saisie au clavier en complément
Mauvaise pratique : sur YouTube Studio, dans la liste déroulante de la langue de diffusion, il faut faire jusqu’à 15 scrolls pour sélectionner la dernière option.
Problème : ça augmente le temps de sélection. Ton utilisateur doit faire beaucoup de scrolls, surtout si la valeur qui l’intéresse est en bas de la liste.
Mon conseil : en complément d’une sélection de valeur au clic, propose à ton utilisateur une réduction du nombre de valeurs lors de la saisie de plusieurs lettres.
6. Reste homogène
Mauvaise pratique : sur iTunes, le contenu du menu déroulant de la rubrique Présentation est différent en fonction de l’onglet actif (Albums ou Morceaux, par exemple).
Problèmes :
ça augmente la confusion. Ton utilisateur risque de ne pas comprendre pourquoi une option est présente dans un cas et pas dans l'autre ;
ça augmente la charge cognitive. Ton utilisateur doit se souvenir dans quel cas une option est présente ou non ;
ça ralentit le temps d’apprentissage. Ton utilisateur doit à chaque tentative apprendre le fonctionnement des listes puisqu’elles ne sont pas homogènes.
Mon conseil : privilégie un contenu homogène quand les libellés de tes listes ou menus sont identiques.
7. Grise au lieu de masquer
Mauvaise pratique : dans un logiciel, en fonction du contexte, certaines options peuvent être indisponibles. Pour gagner de la place, il peut être tentant de les supprimer.
Problèmes :
ça augmente la confusion. Une option fréquemment utilisée qui disparaît sans raison évidente perturbe ton utilisateur ;
ça augmente la frustration. Ton utilisateur risque d’être frustré de ne pas avoir un menu complet à chaque itération.
Mon conseil : privilégie un affichage permanent des options disponibles et grise-les si elles ne peuvent pas être sélectionnées.
Bonus : pour une meilleure expérience utilisateur, ajoute une information pour expliquer à ton utilisateur pourquoi les options ne sont pas disponibles.
8. Evite les listes trop longues
Mauvaise pratique : affichage d’une liste déroulante avec trop de lignes nécessitant d’avoir un scroll interne.
Problèmes :
ça augmente la charge cognitive. Ton utilisateur doit faire un effort pour se souvenir des valeurs de ta liste puisqu’elles ne sont pas toutes visibles en permanence ;
ça augmente l’effort physique. Ton utilisateur doit faire preuve de dextérité pour ne pas sortir de la zone de sélection.
Mon conseil : privilégie un menu déroulant sans scroll. Si tu as trop d’options, envisage de les afficher dans un méga menu.
Cet article est issu d'une ressource publiée sur le site du Nielsen Norman Group, la référence mondiale en ergonomie digitale et en UX design.
Accès à l'article rédigé par Angie Li sur le site du Nielsen Norman Group
Tu as probablement déjà entendu parler de la règle des trois clics. Mais s'agit-il d'un mythe ou d'une réalité ?
Lire l'article
Il existe des pictos connus de tous. Ce n’est pas la peine d’ajouter un libellé. Vraiment ? Je te démontre le contraire.
Lire l'article
Les FAQ (Frequently Asked Questions) : un outil stratégique et incontournable pour améliorer l’expérience utilisateur.
Lire l'article