4つのコントロール間の累積パーセンテージ
ユーザーが4つのベクトルで値を変更できるようにする必要があるトリッキーなリクエストがあります。問題は、それらの間の4つのベクトルの合計が100％でなければならないことです。
私の最初の考えは、4つのスライダーで行くことです。
これは、合計が100％でなければならないため、ユーザーは別の値を上げる前に1つの値を下げる必要があることを意味します。これは十分直感的ですか？
たぶん、100％未満（赤）と100％（緑）の値のヘルプテキストと赤/緑のラベルがあるのでしょうか。
誰かがこれに対してよりエレガントな解決策を持っているなら、私はここにそれを望んでいます！
ユーザーの仕事を簡単にする
1％の精度を気にしているのがシステムなのかユーザーなのか、自問してください。ユーザーは本当に分散されたパーセンテージ、または各ポイントの優先度について考えたいですか
単純な相対値を求める
高レベルの精度が純粋にシステムのドメインである場合は、ユーザーに、相対的なスケールで各ポイントにどれだけ関心があるかを尋ねることを検討してください。これをバックエンドで分解して、それらの割合を計算できます。数学をしている人間はいません。
コンピュータに難しいことをさせましょう
この図では...
ユーザーには次のように表示されます：
低
中
高い
システムは次のことを認識します：
"Meh" = ((1*20)*(100/((1*20)+(3*20)+(5*20))) = 11.11111%"Sure" = ((3*20)*(100/((1*20)+(3*20)+(5*20))) = 33.33333%"OMG!!!" = ((5*20)*(100/((1*20)+(3*20)+(5*20))) = 55.55555%
ユーザーにとってもコンピュータにとっても簡単です。それは完璧な世界です！
それに応じて、4つのセクションに分割され、ラベルが付けられた（または、例の画像で使用したように色付けされた）単一のバーを使用できます。各パーティションが出会う領域はサイズ変更ハンドルであり、サイズ変更はそれに応じて隣接するパーティションを拡大および縮小しますが、バー全体は100％に制限されます。
各色の正確なパーセンテージを示す凡例付き。
スライダーを使用する必要はありますか？ユーザーが値を相対量と考えていることがわかっている場合、スライダーは適切な選択ですが、数値ではありません。たとえば、音量や明るさのコントロール。
ユーザーが値を決定する必要がある場合は、「残りの値」インジケーターとともに単純な値入力インターフェイスを提供することもできます。ややこのように：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
このようにして、次のことができます。
マウスの使用は避けてください。キーボードは、あらゆるデータ入力アクティビティに適したメディアです。
より少ないアクション-ユーザーはスライダーの値の配置を行ったり来たりする必要がありません。
数値を処理するためのより良い制御を提供します。
4つのスライダーを使用して結果を正規化することもできます。つまり、合計がx％になる場合は、各値に100/xを掛けます。そうすれば、ユーザーが希望する比率を維持しながら、ユーザーに制約を心配する必要がなくなります。
1つのスライダーを調整すると、残りのロック解除スライダーを自動調整して、合計を100％に保ちます
4つの値すべてを一度に設定できるシンプルなUIを提示できます。私は モックアップを作成しました この原理を示しています。 UIが常にexactly100％（丸めのため）に存在しないことを確認することに特に焦点を合わせていないことに注意してください。私はそれを読者への演習として残します。
この制御方式は「反転制御方式」であり、選択ポイントを設定に近づけるほど効果が強くなります。これは通常は直感的ですが（図ではほとんど正しくありません）、より単純な実装を選択することもできます。
mockup も作成しました。大きな違いは、コントロールを「動かす」ことで値を増やす代わりに、「領域サイズを増やす」ことです。どちらのUIもユーザーにとって直感的に理解できるはずなので、これは個人的な好みのほうを検討します。
編集（＃2）
一部の値の組み合わせは選択できないことがわかりました。これは私の意図ではありませんでしたが、4つの値がすべて連動している場合、ユーザーは4つのコントロールとその値に視覚的に関連付けられるべきであるという事実を指摘します。これは、スライダーが認知的不協和を引き起こすことを意味します。
ユーザーが合計が常に100％となる値の任意の組み合わせを選択できるようにするUIの 番目 （および最終）バージョンを作成しました。このバージョンでは、4つのコントロールを視覚的にリンクすることの重要性がまだ概説されているため、ユーザーは1つのポイントの移動が他のポイントにどのように影響するかを判断できます。
