Toupie

Définition, exemples et bonnes pratiques

À retenir

  • Sert à augmenter ou diminuer une valeur numérique.
  • Composée d'une zone de texte et de deux boutons fléchés.
  • Facilite la saisie sur les écrans tactiles ou avec une souris.

En informatique, une toupie est un petit élément d'interface graphique qui permet à l'utilisateur de modifier une valeur numérique à l'aide de deux petites flèches (généralement haut et bas). C'est comme le réglage de la température sur un thermostat numérique où l'on clique pour faire défiler les chiffres.

Étymologie

Le terme est une métaphore de l'objet ludique qui tourne sur lui-même. En informatique, il s'agit de la traduction française du mot anglais spinner. L'image de la toupie évoque le mouvement de rotation ou le défilement cyclique des nombres dans le champ de saisie.

Exemples d'usage

  • Choisir le nombre d'articles dans un panier d'achat en ligne.
  • Régler l'heure ou la minute d'un rendez-vous dans un calendrier.
  • Ajuster la taille d'une image ou d'une police dans un logiciel de création.

Cas d'usage

La toupie intervient principalement dans le développement d'interfaces (UI) et de formulaires. Elle est utilisée pour saisir des données quantitatives précises sans obliger l'utilisateur à utiliser son clavier.

Bonnes pratiques

Il est essentiel de définir des limites minimales et maximales pour éviter des erreurs (par exemple, interdire une quantité négative). Il est aussi conseillé de laisser le champ de texte modifiable manuellement pour les utilisateurs qui préfèrent taper directement le nombre.

Synonymes

spinner bouton incrémentiel sélecteur numérique

Antonymes

curseur de défilement curseur de sélection

Conseil

Si vous développez pour le web, utilisez simplement la balise HTML <input type="number">. Le navigateur se chargera d'afficher automatiquement une toupie adaptée au système de l'utilisateur (ordinateur ou mobile).

Questions fréquentes

Quelle est la différence entre une toupie et un curseur (slider) ?

La toupie est préférée pour une saisie précise d'un nombre exact, alors que le curseur est plus adapté pour une estimation visuelle ou une plage de valeurs étendue.

Est-ce accessible aux personnes malvoyantes ?

Oui, à condition que le champ soit correctement codé pour que les lecteurs d'écran puissent annoncer le changement de valeur à chaque clic sur les flèches.

Peut-on changer l'incrément ?

Oui, on peut configurer une toupie pour qu'elle avance de 1 en 1, de 10 en 10, ou même avec des nombres décimaux.