機能に取り組んでいますが、機能値の合計(100%)を4つの要素に分配する必要があります。最善のオプションは入力フィールドだと思いますが、スライダーからの視覚的なフィードバックが好きです、何か提案はありますか?-
上に示したスライダーのデザインは、アクセシビリティの観点から非常に混乱する可能性があります。誰かが色を適切に見ることができなかった場合はどうなりますか?
3つのスライダー「ハンドル」が4つのフィールドに表示されます。それも奇妙に思えます。
ベクトル1を25%、ベクトル2を26%にする必要がある場合はどうなりますか?これは非常に退屈なマウスのドラッグのようです。
フォームフィールドを使用すると、各フィールドにすばやく移動したり、値を入力した後、自動的に次のフォームフィールドに移動したりできます。
これは正確な作業です。直接番号を入力するのが最善の選択だと思います。
ただし、さらに視覚的なものが必要な場合は、グラフまたは4つの値が100%にどのように分布しているかを示します。たとえば、ベクトル1では、25%と入力します。次に、残りの進捗状況などを示すグラフを描画します。
100まで自動補完する棒グラフを使用すると、より効果的に作業できます。それらを線形スケールで接続することは、各変数を決定するよりも複雑なアクションです。 1を増やすと、近隣変数が自動的に減少します。
割り当てられていないパーセンテージバーを追加して、少しわかりやすくすることができます...
ユーザーが入力したデータを取得するための最良の方法がフォームフィールドであることに気付いたと思います。バーのハンドルを移動するのと同じくらい難しくはありません。私は考えています フィッツの法則 。ただし、両方を使用できなかった理由はありません。
情報の表示に関しては、棒グラフが適切に機能するか、「ドーナツ」グラフも機能する可能性があります。このアイデアが気に入ったのは、完全な円が表示されるため、合計を最大100%まで簡単に確認できるためです。
興味がありませんが、残りのパーセンテージを常に埋めるデフォルトの要素はありますか? 20%、20%、15%を入れた場合のように、ファクター4が自動的に45%に入ると言いますか?リニアスライダーは、不足しているパーセンテージがあることを表していない可能性があるので、質問します。 20%、20%、20%、20%と入力した場合、100%がどのように見えるのかわからないため、バーが80%しかないことに気付かない可能性があります。ドーナツグラフを使用した場合、合計が100にならないことを示す不完全な円が表示されます。
線形のスライダー/バーに固執する場合は、「エンドポイント」インジケーターを使用することをお勧めします。これにより、合計が100%に達していないかどうかを確認でき、色以外のものを使用して、要因。
「ドーナツ」または円グラフの例: