web-dev-qa-db-fra.com

Réglages approximatifs et fins avec curseur horizontal

Je suis habitué à ce que le défilement soit trois fois plus efficace que les touches fléchées dans Firefox.

Je veux donner la possibilité d'ajuster rapidement et grossièrement les valeurs en survolant le curseur et en utilisant la molette de défilement. Les ajustements les plus fins peuvent être effectués avec les touches fléchées, mais je ne veux pas que les utilisateurs doivent passer de la souris au clavier.

Mockup of horizontal slider

Autres options? Je ne suis pas tout à fait à l'aise pour les forcer à tenir, par exemple Touche Ctrl lors du défilement.

Cliquer sur la molette ne semble pas non plus faire le travail correctement.

Edit: Il semble que beaucoup de gens croient mal que faire glisser le curseur comme on ne le fait normalement pas ici. Ne vous inquiétez pas; ce sera. Oh, et une entrée numérique avec clavier est également possible.

Principalement: Je voulais concentrer ce fil sur le réglage fin par rapport au défilement et au curseur horizontal.

Maquette expliquant que oui; il y a autres façons de le faire, alors s'il vous plaît: réglage approximatif et fin par rapport au curseur et à la molette :)

Mockup – Possible layout

5
Jonta

Tout d'abord, je ne pense pas que l'utilisation de la molette de défilement pour un curseur soit très pratique:

  • Selon la vitesse de la molette de défilement, elle peut être incontrôlable (c'est-à-dire glisser trop vite)
  • Le défilement est généralement vertical, les curseurs sont horizontaux (exception: saisie multi-touch)
  • Ce n'est pas courant, les gens ne s'y attendent pas (je ne suis au courant d'aucune application faisant cela)
  • Si vous faites défiler, vous utilisez quand même la souris, donc cliquer et faire glisser devient naturel (pas besoin de passer du clavier à la souris)

Donc, ma suggestion serait de ne pas utiliser du tout le défilement pour le curseur. J'irais pour quelque chose comme Photoshop:

  • Cliquez/faites glisser pour ajuster avec la souris ou
  • Saisie numérique avec clavier ou
  • Flèches haut/bas pour un réglage fin

Voilà à quoi ça ressemble dans Photoshop:

Photoshop slider

Idées pour améliorer ce curseur:

  • Flèches plus grandes pour faire glisser
  • Ajoutez des flèches haut/bas pour un réglage précis avec la souris

Et enfin: si vous voulez toujours utiliser le défilement, je l'utiliserais pour un réglage fin (car cliquer/faire glisser fonctionne bien pour un réglage approximatif).

8
Phil

La molette a une fonctionnalité très spécifique que les utilisateurs connaissent bien - elle fait défiler la page. Vous suggérez qu'un widget le détourne, probablement sans un bon indice visuel qui expliquerait ce qui se passe, et l'utiliser à une fin complètement différente. Donc, sur toute ma page, il se comporte comme d'habitude, et puis il y a un domaine qui change ce comportement, et vous ne pouvez pas vraiment être sûr où il commence ou se termine.

Certains sites Web le font (ce site Web, par exemple - dans la zone de réponse/commentaire) - mais cela se produit généralement dans un grand élément bien défini avec des bordures distinctes - généralement des zones de texte ou d'autres contrôles avec une barre de défilement. Avec un curseur, je pense que la capacité visuelle n'est pas assez bonne pour amener l'utilisateur à s'attendre à ce comportement ou à le comprendre rapidement s'il est déclenché accidentellement.

3
Vitaly Mijiritsky

Pourriez-vous avoir un "contrôle de volume" horizontal déplaçable qui apparaît lorsque vous survolez la flèche. Vous pouvez toujours avoir un ajustement macro avec la flèche et cela vous donnera un ajustement de +/- 5 de la valeur actuelle. par exemple. (simulé à partir des commandes youtube):

enter image description here

2
icc97

Avez-vous besoin de fournir une telle gamme de valeurs? Serait-il possible d'éviter la situation?

Solution potentielle: vous pourriez ajouter un autre contrôle? peut-être des flèches de haut en bas sur lesquelles l'utilisateur pourrait cliquer pour déplacer le curseur d'une unité? Cela prendrait également en charge les touches fléchées. Ou permettre à l'utilisateur de saisir la valeur?

1
Sheff

Idée sur le dessus de ma tête: garder la molette telle quelle, mais pour un réglage fin, ajoutez une case à proximité qui fera basculer le curseur de réglage fin à réglage lâche (ou quelle que soit la terminologie utilisée pour le réglage non fin, mon esprit est vide sur quel est ce terme. Sensibilité?). De cette façon, l'utilisateur n'a pas du tout à revenir au clavier.

1
JonW

J'arrive un peu tard et je ne sais pas si cela convient à vos besoins, mais en acceptant que vous souhaitez utiliser des curseurs pour contrôler les valeurs, que diriez-vous de prendre un peu de recul et de laisser l'utilisateur contrôler la taille via l'un des trois curseurs interconnectés comme dans l'image ci-dessous:

Ils choisissent le facteur déterminant pour eux (dimension, échelle ou taille réelle sur le disque). La modification de chaque curseur affecte les autres, mais chaque curseur a son propre niveau de granularité.

Le niveau de contrôle le plus fin est via la dimension, le contrôle moyen est l'échelle et le contrôle le plus grossier est la taille du fichier.

enter image description here

1
Roger Attrill