関係パーセンテージを変更するためのアプリインターフェイス
関係パーセンテージを変更するための優れたアプリインターフェイス（ウェブまたはモバイル）を見たり使用したりしたことのある人はいますか？たとえば、100ポンドを構成するには3つの金額を変更する必要があり、そのために任意の順列を使用できる必要があります。
私が考えることができる唯一のアプローチは、スライダーのようなもので、お金のポット間の分割線をクリックしてドラッグし、各ポットの金額を調整することができます。ライン内のラベルは、各ポットの更新された金額を表示するために動的に更新する必要があります。
私はこのソリューションにあまり満足していませんし、マネーポットの数が10に変更された場合などに使用できると確信する必要もあります（現時点ではポットの最大数はわかりませんが、 10を超えることはありません）。
どんな提案もありがたく受けました！
HumbleBundle.comには、これに対処するための興味深いUIがあります。彼らはインディーゲームのバンドルを販売し、ユーザーが各開発者が受け取る金額、慈善団体に寄付する金額、およびHumble Bundleのヒントとして残す金額をユーザーに選択させます。
私はこの問題を何度も経験しましたが、良い解決策を見つけることはできませんでした。私はいくつかのアプローチを試してみました（そして、ほとんどの場合より良い方法がなかったので、それらをそのまま使用しました）.
あなたが提案したもの。問題は、スライダーを変更するとどうなるかです。その隣の金額を変更すると、機能はポットの順序に依存します。お金をAからCに移動したい場合はどうしますか？最初にスライダーをAとBの間で動かし、次にBとCの間で動かさなければなりません。ポットが増えると、次第に悪化します。
棒グラフ付き。各ポットはバー（duh）で表されます。バーが下げられたときに私が最初にしたことは、それを他のバーに分配することでした。チェックボックスでそれらを選択できます。そうすれば、バーAを10ドル下げることができます。バーBとCをチェックしてDとEをチェックしなかった場合、BとCは5ドル増えます。これはデモでは視覚的によく見えますが（バーを移動すると残りの部分も移動します！）、実際には問題なく動作しました。あなたがそれらを言うまで、誰もチェックボックスが何であるかを理解することができませんでした。
ユーザーにリストの通常の入力ボックスに数字を入力させるだけです。これは安っぽいように見えますが、実際のユーザー（つまり、きれいなインターフェースでgeeやgawkだけでなく、実際に製品を使用しているユーザー）にとっては非常に理解しやすく高速です。しかし、大きな問題は（いつものように...）モダリティです。数が必要な合計に達しているかどうかをいつチェックしますか？入力中の数値の合計を常に確認し、正しく合計されない場合は編集ボックスの背景を赤で表示しました。別のケースでは、すべてをモーダルダイアログに移動して、そこで確認できるようにしました。もちろん、モーダルダイアログは常に警戒態勢です。
次回は、次のことを試してみたいです（時間がある場合）。各ポットを円で表し、その中にすべての円（各ポット）が円に配置されています。各円を選択すると、「移動量：」と表示される追加のUIコントロールと、編集ボックスとスピナーが表示されます。そこで金額を入力し、それを別の円にドラッグできます。このようにして、ある円から別の円にお金を移動することができ、合計は常に同じままです。欠点は、各ポットの合計金額が相互に比例的にどのように関連しているのか（おそらくサークルサイズを使用しているためか）を簡単に確認できないことと、他の複数のポットにお金を分割できないことです（これは、犠牲にする）。たぶん私は円を大きいものから小さいものに順番に並べて、ある種のシェルスパイラルパターンのように見えるようにして、ユーザーの相対的な位置をすぐに示します。金額が互いに近い場合は、あまり追加されない場合があり、円のジャンプが混乱する場合があります。まだわかりませんが、実験の余地はかなりあります:)
（私のユースケースでは、移動されたのは通常お金ではありませんでしたが（それはいくつかのケースではありました）、もちろんそれはUIに違いはありません）。
編集：
リクエストにより、こちらがモックアップです。この場合、円はサイズでソートされます。固定位置の方がいいかもしれませんが、実験が必要だと思います。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
Roelが指摘したように、モックアップで見栄えがするすべてが実際に機能するわけではありません。この相互作用の主な問題は、視覚化すると実行が容易になるが、円や棒などの有限の形状を使用することは不可能です。これは、ユーザーが割り当て可能な数を超える状況を考慮する必要があるためです。したがって、値をバケットに分割する優れたユーザーエクスペリエンスの条件は次のとおりです。
- 各バケットの独立した編集
- バケットを追加/削除する機能
- 割り当てられる残りの量を知る
- 分布の視覚的表現
- 無効な割り当てで受け入れることを除いて、ユーザーアクションの制限なし
これが私が提案するものです：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
この設定により、ユーザーは完全に自由に行動できるため、すべての目標を達成できます。
- スライダーまたはクリッカーを使用して値を割り当てることができます
- バケットを追加または削除できます
- 彼らはどれだけの量が利用可能であり、使用され、残っているかを知っています
さらに、それらが行き過ぎた場合、最大でfour視覚的キューがあり、無効であることを通知できます選択：
- フォーム上部のメッセージ（オプション、自動的に、またはユーザーが無効な選択を送信しようとしたときに表示されます）
- 使用可能/使用済み/左側のテーブルの値の赤いハイライト（色覚異常のユーザーに役立つように感嘆符を追加できます）
- 円グラフの分布を無効にする（円グラフが存在する場合はオプション）
- 無効化された送信ボタン（オプション、表示されていません）
2つのモックアップを作成しました。あなたはこのようなことを考えましたか？
ここに、ユーザーが右クリックメニューなしで追加または削除できるようにする[分割]ボタンと[マージ]ボタンを備えたバージョンがあります（そのため、モバイルデバイスで機能します）。表示されます。）
この方向に向かうもう1つの利点は、右上隅のズーム+および-ボタンを使用すると、モバイルデバイス上でも、薄いスライスを効果的に分割または削除できることです。また、通常はマウスでデバイス上にツールチップを置く必要がある小さなラベルを表示することもできます。ズームインしている間、画像全体のプレビューが下に表示される必要があります。
二次的な永続的な視覚化には、各スペースの値と色の見本が含まれている必要があると思います。このようにして、モバイルユーザーやデスクトップユーザーは、ズームインしたりマウスをホバーする必要なく、全体的なデザインに352、368、35、745が含まれていることを簡単に確認できます。順序は常にプライマリビジュアライゼーションと一致する必要があります。
アプリケーションによっては、順序は関係ない場合があります。その場合、ボタンを使用して、減少または増加などの最適な順序でバーを再配置できます。バーを操作した後、ユーザーに[並べ替え]ボタンをクリックするための微妙なヒントを提供する必要があります。混乱を招くため、ユーザーがマウスを離すたびに自動で並べ替えることはお勧めできません。
ハンブルバンドルの方向はどうですか？ただし、スライダーをロックする機能を追加すると、一度ロックすると調整されなくなります。
D
私は常に棒グラフが好きでした;）私は、各ポットに棒を追加することができ、ユーザーが棒の1つをスライドすると、他の棒が比例して変化することを想定しています。しかし、これはまだ何らかのスライダーです:(
クリスチャンのコメントに続き、私は Superfund ring-chart を見ました。各セグメントは、マウスがその上または近くに移動するとライブになります。マウスをクリックして上下にドラッグすると、そのセクターの値がそれぞれ増加または減少します。
Raphael JS を使用して、データを入力する2つの方法を提供するために、同様の動作とリンクされた入力テキストボックスで何かを生成しました。
しかし、私はそれについて大いに満足していません：それは本当にそれほど直感的ではありませんでした。
だから私は今 修正バージョン を使用して再設計に取り組んでいます Jqueryマルチスライダーウィジェット ：
値は、区切りバーをドラッグするか、テキストボックスに数値を入力するか、カーソルがテキストボックスの1つにあるときに上下に押すと変更できます。