Menu déroulant dans un formulaire de demande : nombre d’options, logique de catégorisation et expérience utilisateur
1. Pourquoi le menu déroulant est un verrou invisible de la conversion
Quand un acheteur remplit un formulaire de demande, il peut sauter un champ texte, le laisser vide ou écrire n’importe quoi. Le menu déroulant, lui, ne le permet pas : il force l’utilisateur à choisir parmi une liste d’options qu’il ne connaît pas forcément, et sans le bon choix, impossible de soumettre. Cette seule interaction décide s’il continue à remplir ou s’il ferme la page et part.
Beaucoup d’équipes voient le menu déroulant comme un outil pour « éviter à l’utilisateur de taper ». En réalité, c’est un filtre. Bien conçu, il aide l’acheteur à cerner rapidement son besoin ; mal conçu, il ne comprend pas les options et abandonne. Le taux d’abandon d’un menu déroulant est souvent deux à trois fois supérieur à celui d’un champ texte.
| Composant d’interaction | Coût de complétion moyen | Plage d’abandon observée | Type d’information adapté |
|---|---|---|---|
| Champ texte | Faible, peut être ignoré | 10 % à 20 % | Description ouverte du besoin |
| Menu déroulant | Moyen, un choix obligatoire | 20 % à 35 % | Information catégorisée structurée |
| Groupe de boutons radio | Faible, visible d’un coup d’œil | 5 % à 10 % | 2 à 4 options exclusives |
| Groupe de cases à cocher | Moyen, choix multiple | 15 % à 25 % | Préférences cumulables |
| Liste déroulante avec recherche | Moyen à élevé, saisie requise | 15 % à 25 % | Plus de 30 options longues |
Le tableau ci-dessus donne les plages observées sur les formulaires B2B de sites autonomes ; elles varient selon le secteur, mais le taux d’abandon systématiquement élevé des menus déroulants est un fait établi. Menu déroulant et Conception des champs du formulaire de demande et taux de conversion sont les deux faces d’une même logique : le nombre de champs détermine la longueur globale, les options du menu déroulant déterminent le coût de complétion d’un champ.
2. La plage idéale du nombre d’options : 8 à 15
Pour un menu déroulant, plus d’options ne veut pas dire mieux. Sans faire défiler, l’œil distingue environ 7 options sur un écran ; sur mobile, à cause de la largeur réduite, 4 à 5 seulement. Au-delà, l’utilisateur commence à faire défiler et son attention se disperse. Les données des formulaires B2B montrent que les menus déroulants de 8 à 15 options affichent le meilleur taux de soumission ; au-delà de 30, ce taux chute nettement.
Voici un constat contre-intuitif : plus vous multipliez les options, plus vous croyez collecter une information précise, et plus vous perdez de demandes. Un menu déroulant qui oblige l’acheteur à chercher son pays parmi 40 pays affiche un taux d’abandon supérieur d’au moins 15 points à celui d’un menu qui n’en liste que 20. Les 20 pays en trop se paient en visiteurs qui ferment le formulaire.
| Nombre d’options | Format conseillé | Cas typique | Effet sur le taux d’envoi |
|---|---|---|---|
| 1 à 7 | Menu déroulant simple ou boutons radio | Budget, type de demande | Aucun impact négatif, voire un groupe de boutons |
| 8 à 15 | Menu déroulant standard | Marchés principaux, gammes de produits | Zone optimale, taux d’envoi stable |
| 16 à 30 | Menu déroulant avec groupes (optgroup) | Secteurs, domaines d’application | Baisse de plus de 10 % sans regroupement |
| 31 à 60 | Liste déroulante avec recherche (combobox) | Liste de pays, références produits | Baisse de plus de 20 % sans recherche |
| Plus de 60 | Menus déroulants liés sur deux niveaux | Catégories à plusieurs niveaux, hiérarchie géographique | Une liste à un seul niveau fait fuir la quasi-totalité des visiteurs |
Prenons deux cas concrets. Premier cas : vous fabriquez des pièces industrielles et votre catalogue compte 12 grandes familles ; un menu déroulant simple suffit, l’acheteur voit tout d’un coup d’œil et choisit. Deuxième cas : vous vendez des équipements à des clients dans le monde entier et visez 40 pays ; sur mobile, un menu déroulant simple demande de faire défiler 8 écrans. Il faut alors passer à une liste avec recherche, où l’utilisateur tape les premières lettres pour filtrer.
L’ordre des options compte aussi. Placez les plus fréquentes en premier, sans tri alphabétique. Mettez tout en haut les 5 marchés qui génèrent 80 % de vos demandes, puis les options plus rares. Ce simple ajustement fait généralement gagner 5 à 10 points de taux de complétion sur le champ.
3. Logique de classement : liste simple, groupes ou recherche
Quand les options se multiplient, la façon de les classer détermine la vitesse à laquelle l’utilisateur trouve la bonne. Trois approches courantes : la liste simple, le regroupement sur un niveau et la liste avec recherche. Le choix ne se fait pas au feeling, mais selon le nombre d’options et la familiarité des utilisateurs.
| Mode de classement | Nombre d’options adapté | Effort pour l’utilisateur | Difficulté technique | Cas d’usage |
|---|---|---|---|---|
| Liste simple | ≤ 15 | Faible, un clic suffit | Faible, select natif | Marchés principaux, grandes familles de produits |
| Groupes optgroup | 16 à 30 | Moyen, on choisit d’abord un groupe | Faible, pris en charge nativement | Secteurs, domaines d’application |
| Liste déroulante avec recherche | 31 à 100 | Moyen, il faut taper pour filtrer | Moyen, composant tiers nécessaire | Pays, références, SKU |
| Menus liés sur deux niveaux | Plus de 100 | Élevé, on choisit un niveau puis le suivant | Élevé, logique de liaison côté front | Catégories à plusieurs niveaux, régions et villes |
| Arborescence en cascade | Plus de 200 | Élevé, déploiement sur plusieurs niveaux | Élevé, à utiliser avec prudence | Nomenclatures complexes, organigrammes |
Une erreur fréquente consiste à regrouper avec optgroup en donnant des noms de groupes vagues. Par exemple, répartir les secteurs en « industrie », « services » et « autres » : l’acheteur ne sait pas où se ranger et le regroupement alourdit la lecture au lieu de l’alléger. Les noms de groupes doivent reprendre les mots des utilisateurs, pas votre jargon interne.
Autre scénario : votre catalogue compte 80 modèles, chacun avec des préfixes et suffixes. Utilisez alors une liste déroulante avec recherche : l’utilisateur tape un mot-clé pour filtrer, c’est bien plus efficace que de faire défiler 80 options. Côté technique, des composants open source comme Select2 ou Tom Select font l’affaire, intégrés en une demi-heure.
IV. Valeurs par défaut, placeholders et accessibilité
Une règle d’or pour les valeurs par défaut d’une liste déroulante : ne présélectionnez jamais la première option d’un champ obligatoire. Beaucoup de développeurs, pour gagner du temps, cochent la première option par défaut. Résultat : 80 % des acheteurs valident sans toucher au menu et vous récoltez une donnée que vous avez imposée, pas ce que l’acheteur voulait vraiment.
| Élément de design | Bonne pratique | Erreur à éviter | Conséquence |
|---|---|---|---|
| Valeur par défaut d’une liste obligatoire | Placeholder « Veuillez choisir » | Première option présélectionnée | Données faussées collectées |
| Valeur par défaut d’une liste facultative | Valeur vide ou sortie « Autre » | Forcer un choix | L’utilisateur bloque et abandonne |
| Texte du placeholder | Action claire : « Sélectionnez votre pays » | Vague : « Country » | L’utilisateur ne sait pas quoi faire |
| Libellé des options | Mots du point de vue utilisateur | Code SKU interne | L’acheteur ne comprend pas |
| Hauteur de la liste | Liste plein écran sur mobile | Petite fenêtre affichant 5 éléments | Il faut faire défiler sans arrêt sur mobile |
L’accessibilité est souvent négligée. Au clavier, une liste déroulante doit permettre de se focaliser avec Tab, de naviguer avec les flèches et de valider avec Entrée. Ces comportements natifs sont souvent cassés dans les composants personnalisés. Si votre formulaire doit être conforme en accessibilité, référez-vous à Accessibilité du site (WCAG) pour les exigences d’interaction clavier des listes déroulantes, ne réinventez pas la roue.
Autre détail : sur navigateur mobile, la liste déroulante native offre une meilleure expérience qu’un composant personnalisé — elle affiche un sélecteur plein écran. Sur mobile, sauf besoin de recherche, utilisez le select natif plutôt qu’une fenêtre personnalisée : les problèmes de compatibilité selon les modèles vous prendront une semaine à résoudre.
V. Erreurs courantes avec les listes déroulantes
| Erreur | Ce qu’on fait | Ce que ça donne | Bonne pratique |
|---|---|---|---|
| Plus il y a d’options, plus c’est pro | Lister tous les secteurs d’activité | Option introuvable, soumission abandonnée | Limiter à 15 options, regrouper la longue traîne dans « Autre » |
| Présélectionner la première option | Le développeur veut gagner du temps | 80 % des acheteurs ne choisissent rien, données faussées | Utiliser un placeholder pour forcer le choix |
| Noms de groupes en jargon interne | Classer par service interne | L’utilisateur ne fait pas le lien | Grouper avec les mots que connaît l’acheteur |
| Fenêtre personnalisée sur mobile | Rechercher l’uniformité visuelle | Problèmes de compatibilité à répétition | Utiliser le select natif sur mobile |
| Trier les options par ordre alphabétique | Ne pas trier pour gagner du temps | Les options fréquentes sont enterrées | Placer les options fréquentes en haut |
Parmi ces cinq erreurs, la plus sournoise est la présélection de la première option. Elle ne fait pas fuir l’utilisateur immédiatement, mais elle remplit votre CRM de fausses données — le commercial découvre que 80 % des clients ont « choisi » la même option dont vous ignorez le sens. La vérification de la qualité des données après soumission du formulaire suit la même liste de contrôles que Fiabilité du formulaire de demande de devis.
Après avoir modifié votre liste déroulante, testez impérativement avec Test A/B de formulaire Validez par la méthode : lancez une base de référence sur 2 semaines avant la refonte, puis 2 semaines après pour comparer, et vérifiez si l’évolution du taux de complétion est statistiquement significative. Ne dites pas “je trouve que c’est mieux comme ça” au feeling : chaque ajustement d’option dans un menu déroulant doit être appuyé par des données.
FAQ — Questions fréquentes
Combien d’options mettre dans un menu déroulant ?
Faut-il présélectionner une option par défaut dans un menu déroulant ?
Comment regrouper les options quand il y en a trop, sans nuire à l’expérience ?
Sur mobile, faut-il un menu déroulant natif ou un composant personnalisé ?
Dans les options d’un menu déroulant, faut-il utiliser le code SKU interne ou des mots compréhensibles par l’utilisateur ?
Comment vérifier l’effet d’une refonte de menu déroulant ?
Pour conclure
Le menu déroulant, on croit qu’il s’agit d’un simple composant de formulaire, alors qu’en réalité il détermine si l’acheteur peut vous transmettre sa demande de façon structurée et sans friction. Un menu déroulant mal conçu vous fait perdre trois prospects sur dix avant même que la collecte de demandes ait commencé.
Trois étapes pour passer à l’action : comptez d’abord le nombre d’options de chaque menu déroulant et maintenez le total dans la plage idéale de 8 à 15 ; choisissez ensuite le format d’interaction selon ce nombre : au-delà de 15 options, regroupez-les, au-delà de 30, ajoutez une recherche ; remplacez enfin la valeur par défaut des menus déroulants obligatoires par un texte indicatif pour éliminer les fausses données. Une fois ces trois étapes terminées, lancez un nouveau test A/B pour vérifier l’évolution du taux de soumission.
Une phrase à retenir : un menu déroulant n’est pas plus professionnel parce qu’il propose plus d’options. 8 à 15 choix sans défilement génèrent de vraies demandes bien mieux qu’une liste de 60 options à faire défiler : la logique de catégorisation et la conception de la valeur par défaut comptent dix fois plus que le style visuel.