web-dev-qa-db-fra.com

Graduations du curseur - combien de pixels?

On m'a demandé de créer un design qui utilise des curseurs pour permettre à l'utilisateur d'entrer des valeurs numériques. Bien que (à mon avis) celles-ci ne soient pas appropriées, malheureusement mes arguments pour des alternatives ont été vains! Je cherche donc à comprendre si des recherches ont été effectuées pour établir ce qu'est un gradient minimum de curseur raisonnable. Donc, sur un écran avec (disons) une largeur de 800 pixels, combien de pixels doivent être entre chaque position du curseur? Je ne suis au courant d'aucune recherche dans ce domaine et j'aimerais être dirigé vers quoi que ce soit ou entendre les expériences des autres

1
Peter

Les curseurs sont mauvais pour la précision sur une large plage, mais ils sont parfaits pour se mettre dans le bon terrain de jeu. Les Spinbox sont parfaits pour la précision, mais mauvais pour effectuer de grands changements. Serait-ce une option pour combiner un séparateur et un spinbox? De cette façon, vous pouvez utiliser le curseur pour obtenir la bonne plage et le spinbox pour affiner la valeur sélectionnée.

mockup

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

2
André

Il semble que vous pourriez être mieux servi avec un curseur transparent qui n'a pas du tout étapes préconfiguré. En d'autres termes, la barre se déplacerait en douceur pixel par pixel plutôt que de se claquer d'étape en étape. Par exemple:

Seamless Slide from Apple's iOS Human Interface Guidelines

Si une partie de l'exigence est que vous devez afficher les étapes individuelles, alors je déterminerais généralement la largeur de l'espace pour le contrôle de l'interface utilisateur (vous avez mentionné 800 px) et le diviser en fonction de la valeur d'étape minimale du l'utilisateur devrait être en mesure de définir (par exemple, uniquement des nombres entiers, 1-10, ce qui me donnerait 100 pixels entre chaque étape).

Je recommanderais au moins 5-10px d'espace entre chaque étape - sinon vous créeriez efficacement un curseur transparent dans tout sauf le nom.

1
David Perini

En fin de compte, vous avez besoin d'un bon argument pour repousser les curseurs. Les curseurs sont notoirement mauvais pour choisir une valeur en valeur précise dans un grand continuum. Par exemple, pour sélectionner une valeur avec une précision de 1 dans un espace de 800, pour toute résolution d'écran, la tâche de pointer le curseur seul serait décourageante. Look-up Fitz Law pour faire votre propre approximation du temps qu'il faudrait à un utilisateur pour accomplir cette tâche. Il serait beaucoup plus facile de définir la valeur manuellement dans une zone de texte.

Si vous avez vraiment besoin d'un curseur, je recommanderais d'utiliser une sorte d'astuce comme avoir des valeurs d'accrochage lorsque la souris a une certaine vitesse. Dans les tâches de pointage, l'utilisateur ralentit lorsqu'il s'approche de sa cible, et est lent dans la phase la plus précise du pointage. D'autres astuces comme OrthoZoom peuvent aider certains, mais cela devient vraiment fantaisiste.

1
Riche Design