Flèche déroulante

Définition, exemples et bonnes pratiques

À retenir

  • Indique la présence d'un contenu caché.
  • Permet d'économiser de la place sur l'interface.
  • Change souvent de direction lors du clic pour signaler l'état (ouvert/fermé).

Une flèche déroulante est une petite icône graphique, prenant souvent la forme d'un triangle ou d'un chevron, qui permet de masquer ou d'afficher des informations d'un simple clic. C'est comme la poignée d'un tiroir : on l'utilise pour faire apparaître une liste de choix ou des détails supplémentaires sans encombrer l'écran en permanence.

Étymologie

Le terme associe « flèche » (pour sa forme pointue indiquant une direction) et « déroulante » (pour l'action de déployer un contenu, à la manière d'un store ou d'un parchemin). En anglais, on utilise souvent les termes drop-down arrow ou chevron.

Exemples d'usage

  • Le sélecteur de pays dans un formulaire d'inscription sur internet.
  • L'icône à côté d'un dossier dans l'explorateur de fichiers qui permet de voir les sous-dossiers.
  • Le bouton permettant d'afficher les options de tri (par date, par nom) dans une application de messagerie.

Cas d'usage

On l'utilise principalement dans la conception d'interfaces (UI) pour économiser de l'espace. Elle intervient dans les menus de navigation, les listes de choix (combobox) et les sections accordéons qui se replient et se déplient.

Bonnes pratiques

Pour une bonne expérience utilisateur, la flèche doit changer d'orientation selon que le contenu est ouvert ou fermé (par exemple, pointer vers le bas pour 'fermé' et vers le haut pour 'ouvert'). Elle doit également être assez large pour être manipulée facilement sur un écran tactile.

Synonymes

chevron indicateur de déploiement flèche de sélection

Antonymes

icône statique

Conseil

Si vous développez une application, évitez de cacher des fonctions cruciales derrière des flèches déroulantes, car certains utilisateurs pourraient ne pas penser à cliquer dessus pour explorer les options masquées.

Questions fréquentes

Quelle est la différence entre une flèche et un chevron ?

Visuellement, la flèche possède souvent un trait (corps), tandis que le chevron est simplement un angle (v ou >). En informatique, ils remplissent la même fonction de déploiement.

Pourquoi ma flèche ne fonctionne pas ?

Il peut s'agir d'un bug d'affichage ou d'un script (JavaScript) bloqué qui empêche l'action de déroulement de s'exécuter.