Les listes déroulantes : un choix judicieux en termes d’UX/UI ?

Article écrit par Guillaume BUISSON, Associate Consultant, membre de la B-Com chez Beijaflore Digital

 

Une liste déroulante (en anglais dropdown list) est un élément d’interface graphique qui permet à l’utilisateur de sélectionner une ou plusieurs options au sein d’une liste prédéfinie ; d’où son appellation plus commune « select element ».

Elle est encore utilisée majoritairement en informatique et demeure le choix par défaut pour les outils de conception de formulaire.

Cependant, les listes déroulantes ne simplifient pas toujours la vie aux utilisateurs. En dépit de leurs avantages et inconvénients des alternatives sont possibles en fonction de cas traité.

1. Exemple de liste déroulante basique

 

La liste déroulante présente quelques avantages…

La liste déroulante est un excellent moyen de recueillir des informations sans que l’utilisateur ait besoin de les saisir.En effet, l’utilisateur sera guidé, pas à pas, pour sélectionner ses choix parmi une infinité d’options prédéfinies : cela permet d’éviter le hors sujet ou les réponses inexploitables. Elle est aussi compacte et fait partie de l’interface utilisateur par défaut des applications web et mobiles.

Parmi ses avantages, il est possible de citer :

  • La conservation de l’espace. Elle est excellente pour donner des options à un utilisateur lorsque l’espace dédié est minime.
  • C’est une entrée standard. Elle est simple d’utilisation pour l’utilisateur et bénéficie d’un comportement intuitif. Ce module est également facile à intégrer et maintenir pour les équipes de développement :elle fait partie d’un « package simple » avec une customisation contrôlée.
  • Elle permet la collection de données qualifiées et catégorisées automatiquement. Une collecte sans choix pour l’utilisateur peut être imprévisible et donner lieu à des réponses hors sujets, mal orthographiées ou difficilement interprétables. Grâce à des choix prédéfinis, on évite à l’utilisateur de s’égarer et de fausser l’analyse des données. La collecte est ainsi pérennisée.
  • La liste déroulante s’adapte à tout format d’écran et optimise l’affichage utilisateur sur desktop comme sur mobile, tout en garantissant l’accès à l’ensemble des choix sélectionnables.
  • La liste déroulante est accommodante pour la mise à jour de son contenu. Il n’est pas nécessaire de connaitre le nombre de choix de votre liste à l’avance; elle pourra être enrichie dès que nécessaire. La conception est donc simple ; la modification et la mise à jour le sont tout autant.

C’est une option fiable et sécurisante, qui ne reste néanmoins pas exempte de défaut.

 

…aussi bien que des inconvénients

La liste déroulante peut parfois être difficile d’utilisation et demander davantage d’efforts que prévu aux utilisateurs.

  • Sa flexibilité peut rapidement se transformer en cauchemar pour les utilisateurs si la liste contient un nombre trop important d’éléments. Par exemple, une liste où un utilisateur devra sélectionner son pays parmi une liste exhaustive. Dans la même veine, l’équipe de conception pour le gouvernement britannique a mené des recherches sur l’utilisation des listes déroulantes en se focalisant sur la date de naissance : « People found this hard to use – it took them a relatively long time to find their year in the list».
  • Un autre inconvénient des listes déroulantes réside dans la non-complétion de certains champs car les utilisateurs ne les voient pas. Selon les analyses de Formisimo (site spécialisé dans la data), un grand nombre d’utilisateurs ne les remplissent pas malgré leur caractère quasi obligatoire : « Drop-down fields consistently appear high up in our client’s Most Corrected reports too. This report tells clients which fields their users revisited in order to correct data ».

Ceci s’expliquerait par la taille des champs et donc par la conservation de l’espace mentionnée précédemment. En effet, un élément visuellement petit peut communiquer à l’utilisateur qu’il n’est pas important et donc dispensable. Inconsciemment, l’utilisateur le passera ou même le manquera.

Une autre explication est que la liste déroulante semble être déjà terminée. En effet, lorsqu’un utilisateur rempli un formulaire, il recherche instinctivement les champs à remplir. Les listes déroulantes peuvent parfois sembler déjà renseignées lorsqu’elles portent un intitulé de pré-remplissage tel que « Select your color » (voir figure 2) alors qu’elle attendent un choix de la part de l’utilisateur.

Il serait donc plus naturel pour un utilisateur de remplir des textes vides, de disposer de boutons radio ou d’utiliser des cases à cocher.

 

2. Bouton radio versus liste déroulante

Quelques inconvénients supplémentaires de la liste déroulante

  • La liste déroulante cache l’ensemble des choix et options possibles. C’est un gain de place contre un gain en visibilité et en performance. C’est pourquoi il est recommandé de se tourner vers un bouton radio.
  • Le nombre maximal de caractères affichés dans le menu doit être adapté à l’ensemble des choix sélectionnables, pour garantir une lisibilité de l’entièreté du libellé, y compris sur mobile.
  • Dans une étude menée par Conversion XL, il est constaté que les listes déroulantes ralentissent considérablement les utilisateurs par rapport à l’utilisation des boutons radio : « Survey participants completed the radio button form (n = 354) an average of 2.5 seconds faster than the form with select menu buttons (n = 354). This was significantly faster at a 95% confidence level».

 

 

Quelques bonnes pratiques en termes d’expérience utilisateur

Malgré les avantages et inconvénients des listes déroulantes, il est légitime de se demander ce qu’il est préférable d’utiliser pour gagner en performance, visibilité et expérience utilisateur. Est-il préférable d’utiliser une liste déroulante ? Comment la mettre en valeur ? Comment la remplacer et par quoi ?

Voici quelques exemples pour illustrer différents types de situation qu’il est possible de rencontrer.

 

La Bascule

Pour une entrée à deux choix, une bascule (ou switch/toggle) peut être utilisée pour remplacer la liste déroulante. Elle est visiblement plus esthétique et le gain en clarté est assez signifiant. La fonctionnalité est également très ergonomique, et adaptée aux formats digitaux (tablette et mobile).

3. Option à deux choix : bascule versus liste déroulante

Le bouton radio

Grand concurrent de la liste déroulante, le bouton radio (ou radio button) peut servir de remplaçant pour presque tout type d’usage. Il permet une meilleure lisibilité des choix à l’utilisateur sans le forcer à interagir. Il faut cependant rester vigilant sur le nombre de choix sélectionnables en bouton radio affiché, pour ne pas surcharger l’interface utilisateur. Les libellés proposés doivent être également être clairement distincts et compréhensibles les uns des autres, pour éviter toute incompréhension ou sélection accidentelle.

 

4. Comparaison entre le bouton radio et la liste déroulante

Le champ de texte

Simple, il peut cependant être plus efficace qu’une liste déroulante pour des cas précis tel que pour la date de naissance et pour saisir les informations bancaires. Il faut cependant que le texte soit bien mis en valeur dans sa disposition.

5. Champ de texte versus liste déroulante

La bonne utilisation d’une liste déroulante

Dans certains cas, la liste déroulante est le meilleur choix quand celle-ci est non essentielle et que son espace dédié est limité.

  • L’exemple le plus probant et le plus courant n’est autre que le tri d’une liste interactive associée à une page web. On les retrouve très souvent sur des sites d’e-commerce afin de proposer à l’utilisateur un tri par prix, avis, disponibilité ou plus communément par tri croissant, décroissant ou alphabétique.

 

6. Liste déroulante utilisée pour affiner sa recherche

 

  • Il est important d’utiliser des étiquettes descriptives pour les listes déroulantes (la sélection par défaut). Cela permet à l’utilisateur de se situer et de se rappeler de l’information à renseigner au travers de cette liste.

 

7. Sans étiquette versus étiquette

  • De plus, il est impératif de trier les options de manière prévisible pour que les réponses les plus fréquentes se trouvent vers le haut. En fonction de la situation, appliquer des tris alphabétiques et chronologiques peuvent aider à situer l’utilisateur et simplifier son expérience.

 

  • Gagnez en performance ! Préférez des options courtes, lisibles et pertinentes. Évitez la surcharge d’informations ainsi que des options trop longues, qui risquent de noyer l’utilisateur et le perdre.

 

Sources