Curseur à plages multiples pour l'allocation budgétaire
Je suis en train de concevoir un curseur qui sera utilisé pour allouer un budget fixe à différents canaux. J'ai posté quelques photos de la conception actuelle ci-dessous. À l'heure actuelle, il est possible de simplement faire glisser les poignées du curseur pour modifier l'allocation, mais vous pouvez également saisir une valeur en cliquant sur les chiffres en haut.
Le principal problème est qu'il y aura quelques nouvelles chaînes dans un avenir proche, et je ne suis pas sûr que cette solution fonctionnera aussi bien avec autant d'options. Le codage couleur sera un gâchis, et la largeur de chaque section serait si petite, qu'il pourrait être difficile de changer les paramètres plus tard. Avez-vous des suggestions sur la façon d'améliorer cette conception, ou même de faire quelque chose de complètement différent pour résoudre ce problème?
Le principal problème avec les curseurs est que la commande est importante: vous ne pouvez pas facilement déplacer 30 € du canal 2 au canal 5.
Je considère que les opérations suivantes sont pertinentes:
- augmenter le budget d'une chaîne en diminuant le budget d'une autre chaîne
- augmenter (diminuer) le budget d'un canal en prenant (en ajoutant) proportionnellement des bits (à) d'autres canaux
En principe, ces opérations pourraient être codées avec un ensemble de curseurs - en extension à la réponse de l'utilisateur 25327:
Channel 1 [---|€20|-------------------------] [lock] [fix]
Channel 2 [------------|€200|---------------] [lock] [fix]
Channel 3 [---------------|€300|------------] [lock] [fix]
Available [----------|€-20|-----------------]
[spread proportionally] [spread evenly]
Le dernier curseur indiquerait le budget disponible après avoir considéré l'allocation actuelle (négatif si dépassé le budget). [fix] ajouterait le budget disponible à (ou soustrait le budget manquant) d'un seul canal (ce bouton a désespérément besoin d'un meilleur nom).
[spread evenly] diviserait le budget disponible entre toutes les chaînes (en respectant bien sûr les limites); dans l'exemple ci-dessus, soustrayez respectivement 7/7/6 €.
[spread proportionally] répartirait le budget disponible de la même manière, mais utiliserait l'allocation actuelle comme poids (soustraire respectivement 1 €/8 €/11 €)
[lock] empêcherait la chaîne concernée de participer à toute diffusion.
L'idée de base est pas pour appliquer la contrainte "budget" dans l'interface utilisateur, car la réallocation est par nature un processus en deux étapes (retirez-le d'ici, ajoutez-le là-bas), et le "disponible" rangée agirait comme votre report.
Sliders en général:
Bien que les curseurs puissent le rendre "amusant", je les opposerais. L'allocation de précision n'est utile que s'il y a peu de choix (disons, pour un budget de 500 €, pas de 10 €). Jouer avec le curseur en sautant entre 50,01 € et 49,99 € est exaspérant.
Pour un grand nombre de canaux, seule une petite plage de curseurs est utile. (par exemple avec 10 canaux, en moyenne 10% de la largeur du curseur seraient utilisés).
Je recommanderais une entrée numérique pour chaque canal et une visualisation à la volée dans un joli graphique.
Cette solution originale est attrayante, mais je suis d'accord avec votre évaluation qu'elle n'est pas évolutive. Je dirais également qu'il est quelque peu contre-intuitif en raison de sa nature horizontale mais proportionnelle.
Pour commencer, je changerais ce modèle d'interaction en un ensemble de commandes de faders liés. Quelque chose comme ce que l'on trouve ici pour régler les graves et les aigus:
Un avantage de l'utilisation de ce modèle est que vous pouvez donner à l'utilisateur une courbe visuelle immédiate par laquelle exprimer ses allocations budgétaires, ainsi que pouvoir lier par programme chaque canal individuel à un pool de fonds disponibles.
Ce faisant, vous autorisez désormais l'augmentation de l'échelle à l'avenir. Vous pourrez également conserver votre idée d'attribuer une couleur à chaque canal, si vous le souhaitez. Si vous le souhaitez, vous pouvez ajouter un spinner numérique (entrée de numéro html) au-dessus ou en dessous du curseur vertical de chaque canal afin de représenter le montant des fonds affectés. La validation pourrait être un peu délicate, mais en fournissant à l'utilisateur plusieurs entrées à ajuster, il aura un moyen rapide de redistribuer l'affectation de fonds par canal.
J'espère que cela vous aidera à vous donner quelques idées sur où prendre cela.
Voir cette image, n excellent exemple de la façon dont Humble Bundle résout votre problème:
Vous voyez les trois curseurs principaux: Developers, Charity et Humble Tip. Vous pouvez voir comment ils trouvent une solution pour le curseur "Charity", qui est divisé en deux autres curseurs qui peuvent être modifiés sans déplacer les autres curseurs - les sous-curseurs.
Ne pouvez-vous pas retirer les poignées entre les canaux à l'intérieur du curseur et utiliser simplement les signes ci-dessus comme poignées? Si cela devient trop serré, pouvez-vous mettre tous les autres sous le canal?
Si tout cela échoue et que c'est trop compliqué - séparez chaque canal dans son propre curseur.
Comme alternative, si vous souhaitez conserver la conception d'origine, les limitations peuvent être corrigées.
Prévoyez une largeur minimale afin qu'ils ne soient pas trop serrés.
Fournissez un champ de saisie de données en cliquant sur la fenêtre contextuelle du montant pour fournir des montants plus fins
Enfin, lorsque le nombre de canaux augmente, affichez chaque canal dans un format vertical comme dans le message Peters.