Blog

Formulaires : la mort des listes déroulantes ?

Article source

Quoi, qu’est-ce qu’elles ont, mes listes déroulantes ?

J’ai récemment travaillé sur un long formulaire de souscription en ligne et, pendant ce projet, j’ai dû me poser plusieurs questions : comment dynamiser ce formulaire (beaucoup trop long), comment utiliser les bons composants au bon moment et comment personnaliser ces composants pour qu’ils adoptent la charte graphique de notre client.

Et bien croyez-moi (ou non) mais le plus compliqué de tout ce qu’on a dû concevoir pour ce formulaire fut de trouver une alternative aux listes déroulantes !

Les listes déroulantes : mon pire cauchemar

Les listes déroulantes « classiques », c’est un peu le cauchemar des designers (elles sont moches et peu personnalisables) et le rêve des développeurs (elles sont faciles à intégrer et respectent les règles basiques d’accessibilité, comme la navigation au clavier, par exemple).

Et pourtant, ces listes déroulantes posent plusieurs problèmes, non négligeables pour l’utilisateur (ou en tous cas pour moi 😉

Pas ou peu de personnalisation possible

Les listes déroulantes ne sont pas facilement personnalisables au niveau du design et leur affichage varie (sur desktop comme sur mobile) en fonction des navigateurs ou des systèmes d’exploitation :

Listes déroulantes
             Différence d’affichage d’une liste fermée entre PC et Mac
Listes déroulantes
Affichage d’une liste déroulante “classique” ouverte

Inefficaces pour les choix réduits

Ces listes ne sont pas efficaces pour un nombre de choix réduit.

Listes déroulantes
Il faut deux clics pour ouvrir une liste déroulante qui contient peu d’items

Inadaptées au mobile

Lorsqu’on ouvre une liste déroulante sur un mobile iOS, le système ouvre un picker natif, ce qui rend fastidieux la sélection des listes longues :

Listes déroulantes
Pour les listes longues comme la nationalité, la sélection au picker est fastidieuse

Les pickers natifs iOS peuvent aussi couper certains intitulés trop longs, qui ne veulent, du coup, plus rien dire pour l’utilisateur :

Listes déroulantes
Si les libellés sont trop longs, ils sont coupés par le picker natif

Bon alors, qu’est-ce qu’on fait ?

Pour toutes les raisons évoquées ci-dessus, nous avons réfléchi à plusieurs cerveaux (puisque c’est quand même souvent plus efficace qu’un seul 😉 pour trouver une alternative aux listes déroulantes classiques.

Listes déroulantes courtes

Pour les listes de moins de 5 items, la réponse fut assez rapidement trouvée puisqu’il n’est jamais conseillé d’utiliser une liste déroulante dans ces cas-là… Nous avons donc pris le parti de faire des boutons radios afin que le contenu soit directement visible et sélectionnable :

Listes déroulantes
Pas besoin d’une liste déroulante pour un choix entre moins de 5 items

Listes déroulantes longues

Pour les listes de plus de 5 items, nous avons opté, sur desktop, pour l’ouverture d’une pop-in, avec une petite animation que nous avons travaillée à 4 mains (merci Laurent J.) :

Listes déroulantes
Affichage de la liste sur Desktop

Sur mobile, cette pop-in prend tout l’écran et arrive par le bas comme une vue modale. Cela permet à l’utilisateur d’avoir une zone de selection beaucoup plus confortable qu’un picker et de se concentrer totalement sur l’action qu’il doit faire.

Listes déroulantes
Affichage de la liste sur Mobile

Et après ?

Le composant est partiellement développé, voire quasiment terminé (encore merci Laurent ;). Il répond déjà à plusieurs normes d’accessibilité et il est compatible avec les principaux navigateurs. Nous avons commencé à le faire tester, et pour le moment, les retours sont plutôt positifs.

Nous espérons le terminer rapidement et, pourquoi pas, le mettre à disposition de ceux qui, comme nous, veulent crier “à mort les listes déroulantes” !