予算作成インターフェースを作成する方法（アイテムの合計は100でなければなりません）？
ユーザーがいくつかの（変化する）数のアイテムに予算を分配できる視覚的なWebインターフェイスを構築しようとしています。たとえば、予算が100ポイントの場合、次のように割り当てます。
50 points to 'Apples'
50 points to 'Oranges'
または：
75 points to 'Apples'
25 points to 'Oranges'
ユーザーが新しいカテゴリを追加したい場合は、次のようになります。
30 points to 'Pears'
60 points to 'Apples'
10 points to 'Oranges'
しかし、「ジャンプ」がなければ、上記の割り当ては、ポイントが棒グラフとして表されている場合に与えられます。ユーザーがスライダーを項目ごとに移動できるようなオーディオイコライザーインターフェイスのようなものを想像していますが、「数学」を正しく理解できず、重要な何かが欠けているように感じます。ここに制約があります：
- すべての数値を0から100の間にしたい
- 予算を常に満たしてほしい（つまり、合計が100になる）
- ユーザーがアイテムを「カート」に追加/削除できるようにしたい
- ユーザーに計算をさせたくない
- スライダーの動きはすべて連続している（つまり「ジャンプ」しない）ことを強くお勧めします
更新：試してみる/投票するプロトタイプがいくつかあります：
避けるべき問題の1つは、他の変数を自動調整して合計を100％に維持することです。変数が2つ以上あるときはいつでもそれに対処しなければならないことは非常に煩わしくなります。制限を少し緩和すれば、より使いやすいインターフェースを作成できると思います。
私はうまくいくと思うテキスト入力/ビジュアル表示の一部であるソリューションを思いつきました... 
直感的に、テキストボックスにパーセンテージを直接入力できます。しかし、さらに一歩進めるために、各列にハンドルを作成してドラッグ可能にすることもできます。たとえば、「オレンジ」列を取得して30％までドラッグすると、100％の合計要件を満たすことができます。
（編集）他の返答は、実際には2つの異なるケースがあると私に考えさせました：相対的な割り当てを行うことと、限られたコンテナーを埋めることです。
相対割り当て
相対的な割り当ては、フルーツパンチのレシピを作成することであり、それから未知の量のフルーツパンチが作成されます。
「良い」と感じるマルチタップスライダーはまだ見つけていません。 「新しいもののためのスペースを作るためにそれぞれの5％を絞る」などの典型的な操作は、それを行うには混乱です。
あなたのターゲットオーディエンスが数字を入力できるならば、これが私の提案です：
1。ユーザー入力から「合計100％」制約を削除
必要なのは、相対割り当てです。
ユーザーに任意の数値を入力させ、その合計を100にマッピングできます。
total = sum(input[1..N])
if (total == 0)
ShockUser();
percent[1..N] = 100* input[1..N] / total
現時点では、有効な入力に厳密に必要ではない制約に従うことをユーザーに強制します。この制約を保持するためだけにユーザー入力を拒否または変更する必要がありますが、制約はデータ自体には影響しません。
2。即時フィードバックを提供する
入力を使用して、円グラフ、リンググラフ、または合計棒グラフを即座に更新します。スケッチの例：
即時フィードバックは、ユーザーが効果を確認するために重要です。
。 3D円グラフを使用せず（前部を強調）、小数を許可（科学者を満足させる）
ここでの唯一の弱点は、一部の人々が考えているかもしれないことです。すべての値を2倍にすると、割り当てが何らかの形で増加します。特に、割り当てが他の人と「競合」している場合はなおさらです。
アイデアは：
- ミックスにベーコンを少なめにしたい。 「ベーコン」の数を減らします。半分の数=半分の量のベーコン。
- レモンをいくつか投入します。 「24レモン」とは、オレンジと同じ数のレモン、リンゴの2倍の数のレモンを意味します。
- 私はcan常にパーセンテージを入力し、自分自身が100になるようにします。必ずしもそうする必要はありませんが
- そのインターフェースでよりトリッキーなのは（たとえば、マルチタップスライダーと比較して）、他のアイテムに影響を与えずに2つのアイテム間で分配することです。ただし、パーセンテージ入力よりも複雑ではありません。
限定コンテナ
限定されたコンテナのシナリオでは、Maxの果物を正確に入れる余地があり、リンゴの絶対数が重要です。 （もちろん、それぞれの果物は同じサイズです...）
その場合、Steve Worthamの提案は実際に効果的です。次のように拡張できます。
各タイプの「塗りつぶし」ボタン。
Total < Max。残りのスペースを1種類の果物で満たします。各タイプの「縮小」ボタン。
Total > Max。選択したタイプを減らして、合計をMaxにします（または、このタイプが十分でない場合は、タイプをゼロに設定します）。「塗りつぶす/比例を減らす」ボタン。 （ラベルについてはわかりません）。これは、上記の推奨される相対割り当てと同様に機能します。
どちらの場合も、相対計算は奇妙な数値につながる可能性があります。アプリケーションによっては50％から41.666 ...％に減少するため、よりフレンドリーな粒度に丸めることができます。
ジョン、
あなたが探しているのは これはここ のようなレンジスライダー（別名デュアルスライダー）だと思います。
ユーザーには、「新しいカテゴリ」というボタンがあり、新しいカテゴリの名前を要求し、ユーザーがバー上のポイントを選択するように要求します。選択したポイントに新しいハンドルが表示され、配置したカテゴリから適切な数のポイントが取得されます。
また、「カテゴリの削除」ボタンもあり、ユーザーはハンドルの1つを選択する必要があり、その点を隣接する点の間で均等に分配します。
ハンドルの横にカテゴリ名を表示する方が少し簡単な垂直バーを使用すると、おそらく最もうまく機能します。
すべての条件を満たしているようで、ポイントの再配分のロジックは非常に明確でグラフィックです。
基本的には、このコントロールでグラデーションを作成するのと同じです。
オーディオイコライザーの後にUIをモデル化する場合、重要なのは、各スライダーの位置がそのカテゴリーの割り当てを表すようにすることです他のすべてのカテゴリーに対して。スライダーの位置を絶対数値にマッピングしないでください。代わりに、各スライダーの数値スケールを動的に変更して、数値が常に100になるようにします。これにより、ユーザーがタッチしない限り、スライダーの位置を変更する必要がなくなります。例えば：
1）ユーザーが最初のカテゴリを追加します。
Apples ---------------+--------------- 100%
2）ユーザーが2番目のカテゴリを追加します。
Apples ---------------+--------------- 50%
Oranges ---------------+--------------- 50%
3）ユーザーはオレンジスライダーをリンゴの約1/2に調整します。
Apples ---------------+--------------- 67%
Oranges -------+----------------------- 33%
4）ユーザーが3番目のカテゴリを追加します。
Apples ---------------+--------------- 40%
Oranges -------+----------------------- 20%
Pears ---------------+--------------- 40%
特定のスライダーの割り当て値を計算するには、次のようにします。
100 * slider_position/sum_of_all_slider_positions
ロールプレイングゲームのように、さまざまなリソースや特性のバランスについて話しているように見えます。
スケール感なく、割り当てを視覚的に表示し、ユーザーが値をドラッグできるようにするとどうなるでしょうか。
計算はバックグラウンドで自分で行うことができます。
たとえば、重み付けを スパイダーチャート として表示できます。
ユーザーが軸に沿って値をドラッグして、多かれ少なかれ重要にすることができるように拡張されました。 （これは、ユーザーが使用する視覚的なバランスであるため、目に見える数値スケールを使用したくないことに注意してください。）
説明のために、スパイダーチャートに表示する5つのカテゴリ（知性、カリスマ、強さ、スタミナ、器用さ）があると考えてください。まず、5つすべての「中間レベル」設定は25（可能な50のうち）です：（25、25、25、25、25）。これらを合計100に合わせてスケーリングすると、（20、20、20、20、20）になります。
次に、ユーザーはバランスの構成を開始し、知性と器用さをフルにドラッグし、スタミナを10まで下げます。5つのカテゴリの値は（50、20、20、10、50）になります。これらを合計して100のギブに収まるようにスケーリング（33.3、13.3、13.3、6.7、33.4）
ただし、これらのスケーリングされた値は、一度計算された画面の出力としてのみ使用することに注意してください。
1つの値を上にドラッグすると、他のすべての属性への割り当てが自動的に減少します。また、計算はプロセスの最後に行われるため、丸め誤差によって、表示された値にフィードバックループが発生することはありません。
暗闇の中でのショットですが、Mountain Goat Software（Mike Cohn's Company）が提供するProject Success Sliders Toolをご覧になることをお勧めします。このツールはさまざまな制約の下で動作しますが、私はそれが提供するuiとuxが好きです。
あなたが望んでいるように見える方法で問題にアプローチできるとは思いません。他のカテゴリを調整して、ユーザーが現在ポイントを割り当てているカテゴリを補正することはできません。
そうした場合、各調整によって他のすべてのカテゴリのポイントもシフトし、すでに割り当てられているポイントが変更されるため、ユーザーは希望どおりの割り当てを取得するのに苦労します（それが理にかなっていると思います）。
あなたがおそらくすべきことは、すべてのスライダーを0から100の間で移動できるようにし、100を超えるまたは下回るポイントの数をユーザーに明確に視覚化し、100にあるとき（すべてが緑色）を明確に示すことです。そして、それらが100でない場合（すべてが赤）。
必要に応じて、正確に100ポイントを使用していない限り、「保存」をブロックします。
おそらく、「残りのもの」を要素として追加することもできます。残りは表示されますが、読み取り専用になります。要素を追加すると、残りの部分を取得できます。残り物が0でない限り、続行/保存/することはできません...
apples: [ 20 ]
oranges: [ 30 ]
budget: 50 !!
または視覚的にはpeterchenが示したように、赤い部分が残っています。
私はこれに似たものに取り組みました。私たちの利点は、デフォルトのカテゴリが存在することでした。それを活用できる場合は、次のようなものから始めることができます。
[100] Default
------------------
+ new
次に、カテゴリを追加できます。デフォルトから差し引くaを入力します。
[60 ] Default
------------------
- [20 ] food
- [20 ] rent
+ new
カテゴリを削除するか、カテゴリ値フィールドを空白にすると、その金額がデフォルトに戻ります。
新しいカテゴリの割り当てをすべて使い果たすと、データはデフォルトなしで保存されます。
ただし、このソリューションとの違いは、データと一緒に保存するために許容できる、ある種のデフォルトのカテゴリが必要になることです。
最善の解決策は、peterchenとPeter Fringの組み合わせかもしれません。
「割り当てられていない」ポイントをカウントできますか？各アイテムのポイントと未割り当てポイントの数の合計は、常に100でなければなりません。
上記の例では、pearsの数を15まで増やした場合、未割り当てバケットの数は5に減少します。フォームを送信すると、残りの未割り当てポイントは、各アイテムの相対値に従って配分されます。括弧内には、「未割り当て」バケットから自動的に割り当てられるポイントを含む、各アイテムに割り当てられたポイントの数が表示されます。
このアイデアは、レンジスライダーにも適用できます。
|=========================+===============++----------|
A OP
割り当てられていないポイントは、スライダーの端にある空のスペースで表されます。 （A）pples、（O）ranges、または（P）eachのいずれかのコントロールを移動すると、すべてが右にシフトし、割り当てられていない部分の長さが変更されます。
ジョン、
新しいカテゴリに追加して、いくつかのポイントが自動的に追加され、他のポイントから差し引かれるのが最善の方法だとは思いません。ユーザーがオレンジに対して意図的に75％を選択した場合、ユーザーは、新しいカテゴリを追加することで、その数値が後日自動的に変更されることを期待できません。 （あなた自身が数学がどのように機能するかについて正しい「感覚」を得ることができないという事実は、同じことがあなたのユーザーの場合にも当てはまることを示しています）。
IMOのより適切なオプションは、新しいカテゴリを追加するときに何らかの処理を行うために、この新しいカテゴリにリソースを割り当てる必要があることを視覚的に示すことです。アクセシビリティのために、ここでは実際には色を使用できないため、各カテゴリに対してティックとクロスを提案します。すべてのリソースが割り当てられている場合、すべてのカテゴリが「チェック」されますが、1つのカテゴリが欠落している場合は、それに対して「クロス」します。
OK、アイテムのリソース量として「0」をどのように選択するかについて別のジレンマを残しますが、このアプローチがあなたが望んでいるものだと感じた場合、それは別に調査する問題です。
簡単な方法の1つは、スライダー値の合計に対するスライダー値のパーセンテージを計算し、計算されたそれぞれのパーセンテージにスライダー値を再割り当てすることです。このようにして、スライダーの値が再調整されます。
slider1.value = (slider1.value / sumOfSliderValues) * 100 ;
slider2.value = (slider2.value / sumOfSliderValues) * 100 ;
slider3.value = (slider3.value / sumOfSliderValues) * 100 ;
小さな丸め誤差がありますが、スライダーの値を正確かつ常に合計100にする必要がある場合に対処できます。
Angularjsを使用してこれをデモンストレーションするためにフィドルをセットアップしました。ご覧ください デモ
これは興味深い質問であり、このスレッドにはすでに多くの優れた解決策があります。あなたはあなたの説明から1つの重要な情報を残したと思います。実行されているタスクの実際の性質。ユーザーが実際に関心のある数値とカテゴリーを編集するとき、カテゴリーに絶対数を割り当てるか、数値全体で適切な分布を考え出します。
トラックの充填のようなタスクです。つまり、（例に固執するために）100個の果物を入れる余地があり、トラックには各カテゴリがいくつ必要ですか。ユーザーは通常、最初に1種類のすべての部分を削除してから、残りの部分に入力する必要があります。これが事実である場合、ユーザーが別の要素を減らす必要がある要素よりも上に要素を増やしようとしたときに、入力が総数に対する制約であり、超えることができないインターフェイスが最善の策だと思います。
一方、アイテム間の比率がより重要な場合は、工業用フルーツパイのミックスを微調整し、常に100ポンドのバッチでそれを作成します。これは、最適な割り当てです。何か動的なインターフェイスでは、何か変更があったときにすべてのスライダーが動くようになっています。
どうやったらいいの？ユーザーがどのような配布戦略を使用したいかを質問します（比例、最初からカット...、最大からカット...）。例えば：
最初のものを追加する（「りんご」）：100％
100 points to 'Apples'
2番目のものを追加する（ 'オレンジ'）->ユーザー入力：30％
70 points to 'Apples'
30 points to 'Oranges'
3番目のものを追加（ 'Pears'）->ユーザー入力：20％（[x]比例）
20 points to 'Pears'
56 points to 'Apples'
24 points to 'Oranges'
追加：
[x]ロックオプションを追加して、いくつかの値を保持したい
個人金融のウェブサイト Buxfer があります。
IOUコンポーネントがあります。必要なものの基本的な実装があります。複数の人がいて、共有と費用がかかります。均等に分割する必要がある場合は、テキストボックスを備えたシンプルなUIを提供して、さまざまな量を提供します。
最初は等分割から始まり、変更を加えると、まだ変更されていないフィールドが自動的に更新されます。
いずれかのフィールドで手動編集を行っても、その内容はプログラムで変更されないことに注意してください。
すべてを編集し、合計が金額に達しない場合、システムは保存を許可しません。私はこのUIのいくつかの側面が好きでした。
- 共有者を動的に追加できます。
- これにより、常に合計金額が取引金額になります。
- システムは、ユーザーがまだ操作していないフィールドのみを更新します。ユーザーの入力を上書きしません。
- ユーザーが明示的に編集したフィールドに別の境界線または何かを与えることにより、さらに拡張できます。
- 常に、等分割でリセットするオプションをユーザーに提供します。
おそらく、ユーザーがフィールドに変更を加えるとすぐに反映されるグラフでそれを補強できます。各バーのベースに実際の値を設定し、各バーが消費する総予算のパーセンテージに基づいて勾配を与えることができます。おそらく、パーセンテージを示すオーバーレイを各バーに追加できます。
アルゴリズムのバランスを取る方法は不可欠ですが、ユーザーが明示的に入力した金額に触れるのはうんざりです。これにより、コントロールが制限されます。ユーザーがグラフを操作している間、システムがユーザーの状態に基づいて決定を下すことができない場合は、個々のバーを赤にしたり、グラフ全体を赤にしたりできます。
基本的に、数学の部分は複雑になります。いくつかの数値を調整しようとするときは、おそらく履歴値、トレンド値などを考慮するでしょう。彼のために意思決定をするユーザーの反応も、多くの違いを生みます。
Buxferはニュートラルな方法で進み、残りの量を均等に分割します。それができない場合は、保存/送信アクションを無効にし、合計しないことをユーザーに通知します。そのルートが不要な場合は、プロファイルに基づいたユーザーの行動、システムの使用方法と使用方法に関する詳細情報が必要です。それでも、システムによってひいきにされた不均等な分割を望まない束に迷惑をかけるリスクがあります。それら。
一部の計算が行われているときに、カテゴリを動的に追加する方法の問題があります。これまでの数学にどのような影響がありますか？ユーザーが金額に触れていない場合、またはユーザーがまだ触れていない金額間の均等分割の場合にのみ、均等分割をお勧めします。
いずれにせよ、強引であるかユーザーの操作を厳しく制限するか、または自由でユーザーが保存する前に間違った入力を修正するように強制するかの選択肢が残っています。この選択は、アプリケーションのコンテキスト、割り当てられるデータの種類、システムが持つメタ情報の量を考慮して行うことができます。
作業時間も考慮してください。パワーユーザーは、グラフ操作を含まないデータの入力方法を期待します。
また、あなたの明確な要件がジャンプなしについて述べていることを知っていますが、その結果、63、41、39などの量が発生します。それを個人的なペットのピーブと呼びますが、スライダーにそのような量を我慢できないので、丸めようとします私が扱っているデータの種類に基づいて、5、2、または10の最も近い倍数まで。これは時間がかかり、煩わしいです。 （これは個人的な意見であり、いかなる検索にも裏付けされていないため、割引してください）。何かに予算をかけようとしているとき、私は上記のような詳細よりも球場に傾倒しています。
さらに何かを追加する必要がある場合はお知らせください。