合計100％を維持する方法
私は、投資ポートフォリオを再調整するためのOSXデスクトップアプリケーションに取り組んでいます。ユーザーがさまざまなセクター（米国株式、債券、現金など）に対して希望する目標配分を入力できる画面があります。ユーザーは、さまざまなパーセンテージで、好きなだけ多くのセクターを持つことができます。ただし、合計の割合は明らかに100％でなければなりません。
現在、私は現在の合計を表示しているだけなので、ユーザーは100に関してどこにあるかを確認でき、合計が100％でない場合に画面を終了するとアラートが表示されます。しかし、ユーザーの負担を取り除くためのより良い方法がなければなりません。セクターを追加および/または調整しながら、合計を簡単に100％に維持する方法はありますか？
すぐに頭に浮かぶ2つの考えは、常に100％のスライダーを含めることで、ユーザーがさまざまなセグメントのサイズを調整できるようにすることです。ユーザーが必要に応じてセグメントを追加または削除できるようにします。
別のオプションは、グラフで同じことをすることかもしれません。スライダーと円グラフは視覚的に忙しいので、2つを組み合わせてみませんか？
視覚的な混乱を取りすぎないように注意してください。棒グラフは調整がより簡単で、調整値がより伝統的です（グラフィックスで遊んでいるときに他の人が同じことを示唆しているのに気づきました）一方で、円グラフは100％グループの割合を表示するためにもっと伝統的かもしれません。両方を含めると、非常にグラフィカルな方法で情報を複製することになり、ユーザーにとっては役に立たない場合があります。
100％を維持することは、ユーザーが何かを変更したときに他のセクターを調整しないと不可能です。それは混乱する可能性があります。おそらく、視覚的なフィードバックを使用して、未割り当ての量またはオーバーフローを表示できます。
円グラフの代わりに、各金額のセグメントを含む進行状況バーを表示します。合計が100％未満の場合、最後に割り当てられていない金額が表示されます。 100％より大きい場合は、オーバーフローを示します。他のセグメントや他のセグメントと視覚的に区別できることを確認してください。
うまくいけば、モックは十分に理解可能です：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
（グラフの下の値は明らかに構成されています）
白いドット（より直感的なシンボルに置き換えることができます）はドラッグ可能であり、その結果、範囲の値が変化します。必要に応じて、値をクリックすると編集可能なテキストボックスになります（ただし、これは最大値に関する追加のロジックを必要とするため、範囲がその近傍をカバーしません）。これにより、各範囲を正確に制御することが容易になり、各変更は1つの近隣のみに影響するため、これはユーザーにとってかなり予測可能です。
必要なのは、すべての要素を細かく管理する必要がなく、合計が100％になる前に要素が離れないようにするために、割り当ての上限と下限を設定できることです。円グラフとリストビューを組み合わせ、リストの下部に「利用可能な割合」のインジケーターを追加すると、どちらの方法でも管理できるようになります。私が重要だと思うのは、ユーザーが1つのセクターを増やしても、他のセクターには影響せず、オーバーフロー/アンダーフローがあることを明確にすることです。これを円グラフで行うには、グラフからリークするか、ギャップを表示するか、代わりに棒グラフの例を使用します。 （常に合計を100％に維持する場合、変更するセクターは隣接するセルも変更することを意味しますが、これは望ましくない場合があります）
テキストフィールドの問題の一部は、それらを使用するのが面倒な場合があることです。AdobeAfter Effectsには、数値フィールドをクリックして左右にドラッグすると、その数値が増減するので、使用できないという賢いUIがあります上下の小さな矢印を入力またはクリックします。