Curseur avec 3 gestionnaires vs champs d'entrée
Je travaille sur une fonctionnalité si vous devez répartir le total de la valeur de la fonctionnalité (100%) entre 4 facteurs, je pense que la meilleure option est les champs de saisie, mais j'aime le retour visuel du curseur, une suggestion? - 
La conception du curseur, comme illustré ci-dessus, pourrait être incroyablement déroutante du point de vue de l'accessibilité. Et si quelqu'un ne pouvait pas voir correctement les couleurs?
Je vois 3 curseurs "poignées" mais 4 champs. Cela semble étrange aussi.
Que se passe-t-il lorsque le vecteur 1 doit être de 25% et le vecteur 2 doit être de 26%? Cela ressemble à une souris très fastidieuse.
À l'aide des champs de formulaire, vous pouvez rapidement accéder à chacun d'eux ou après qu'une valeur est remplie, passer automatiquement au champ de formulaire suivant.
C'est un travail précis, je pense que la saisie directe des numéros est le meilleur choix.
Cependant, si vous voulez quelque chose de plus visuel, montrez un graphique ou quelque chose de la façon dont les 4 valeurs sont réparties sur les 100%; par exemple, dans le vecteur 1, ils entrent 25%. Dessinez ensuite un graphique qui montre la progression à gauche ou quelque chose.
Je pense que votre curseur pourrait certainement fonctionner, mais a) je suis entièrement d'accord avec les problèmes d'accessibilité des couleurs, b) assurez-vous que la piste du curseur représente clairement 100% quelle que soit la position des poignées, et c) vous pourriez changer quelques éléments un peu pour rendre les associations plus claires:
Gardez les champs et les noms de vecteurs centrés (autant que possible) sur/sous leurs segments associés (ils pourraient tous deux être sur ou sous, peu importe), et ne laissez pas la couleur confondre le problème. Je n'utiliserais pas non plus de gris clair : les contrôles à faible contraste ne sont PAS cool, ils sont juste plus difficiles à utiliser pour un segment de vos clients.
Seulement 0,02 $.
L'utilisation d'un graphique à barres qui se complète automatiquement à 100 peut fonctionner mieux. Les connecter sur une échelle linéaire est une action plus complexe que de décider de chaque variable. lorsque vous en augmentez un, diminuez automatiquement la variable de voisinage.
Vous pouvez ajouter une barre de pourcentage non affectée, pour rendre les choses un peu plus claires ...
Je pense que vous êtes au courant avec les champs de formulaire étant le meilleur moyen d'obtenir des données saisies par l'utilisateur, ce n'est pas aussi difficile que d'essayer de déplacer les poignées sur une barre; Je pense loi de Fitts . Aucune raison pour laquelle vous ne pouviez pas avoir les deux.
Quant à l'affichage des informations, un graphique à barres fonctionne bien, ou un graphique en "beignet" peut également fonctionner. J'aime cette idée car elle montre un cercle complet afin que vous puissiez facilement le voir jusqu'à 100%.
Par intérêt, avez-vous un facteur par défaut qui remplit toujours le reste du pourcentage? Comme si je mettais 20%, 20% et 15% - dira que le facteur 4 se remplit automatiquement à 45%? Je demande parce qu'un curseur linéaire pourrait ne pas représenter qu'il manque un pourcentage. Si je mets 20%, 20%, 20% et 20%, je ne me rendrais peut-être pas compte que la barre n'est longue que de 80%, car je ne sais pas à quoi ressemble 100%. Si vous utilisiez un graphique en anneau, vous auriez un cercle incomplet indiquant que les totaux ne correspondent pas à 100.
Si vous vouliez vous en tenir à un curseur/barre linéaire, je recommanderais simplement d'utiliser et l'indicateur de "point final", afin que vous puissiez voir si le total de 100% n'a pas été atteint, et évidemment utiliser autre chose que de la couleur pour distinguer les les facteurs.
Exemple de "beignet" ou de camembert:
