Sélectionnez une valeur numérique avec les boutons +/- ou entrez manuellement?

Question

Sur la conception sur laquelle je travaille, l'utilisateur attribue une valeur à chaque élément, puis si la valeur est supérieure à 1, un deuxième attribut dépendant apparaît (comme indiqué). Je veux que les nombres soient grands et non par défaut une zone de texte moche et occupée. Cependant, la seule solution à laquelle je pouvais penser est un combo de boutons -/+ encore plus laid et plus occupé, qui est également incroyablement cher (et, j'ai trouvé, presque impossible à adapter en mode mobile).

Y a-t-il une meilleure manière de faire cela?

Answer 1

Qu'en est-il des contrôles d'interface utilisateur suivants: champs de texte (limités aux nombres) pour accéder à n'importe quel numéro dont un utilisateur a besoin.

Answer 2

Les boutons plus/moins comme interface utilisateur pour sélectionner une valeur peuvent être une solution acceptable, mais uniquement dans des cas spécifiques, tels que:

• La gamme de choix possibles est petite (donc l'utilisateur ne reste pas en cliquant 20 fois)
• Il y a un effet visible immédiat lors de la modification de la valeur (par exemple, la mise à jour d'un graphique)

Si le nombre de choix est relativement petit, vous pouvez simplement utiliser une boîte de sélection déroulante. Cela vous permettrait de styliser le nombre assez grand, et pour le changer, il vous suffit de cliquer/toucher le nombre pour ouvrir la boîte de sélection.

Answer 3

Vous pouvez essayer l'approche suivante: normalement, les chiffres apparaissent tels quels, sans boutons ni zones de texte supplémentaires. Cependant, lorsque l'utilisateur touche le numéro, un petit curseur apparaît en dessous, avec les étiquettes "+" et "-" aux extrémités. Faire glisser le nombre vers la droite augmenterait sa valeur (la vitesse d'augmentation dépend de la distance par rapport au centre du curseur) et le faire glisser vers la gauche la réduit. Lorsque l'utilisateur relâche sa touche, le numéro revient à sa position d'origine, aligné avec le reste des numéros.

^{télécharger la source bmml - Wireframes créés avec Balsamiq Mockups}

Si l'espace horizontal est vraiment limité, vous pouvez à la place rendre le curseur vertical, auquel cas, lorsque vous ajustez un nombre, vous réduisez tous les autres nombres et peignez les contrôles au-dessus de certains d'entre eux.