web-dev-qa-db-ja.com

スライダー対選択ボックス/ドロップダウン

値を調整するための2つの関連するUIを備えたWebアプリがあります。 1つ目は、ユーザーが金額の最大100%を加算または減算できるようにすることです。これは推定値であるため、大まかな範囲(10%ごとなど)で問題ないか、継続的な選択でも機能します。 2番目は、利用可能な範囲のパーセンテージを個別のステップで選択します。 100%、75%、50%、25%、10%。

私は2つの主要なUIを考えました-選択ボックス:

select box adjustment UI

およびスライダー:

slider adjustment UI

注:範囲スライダーでは、上限値が100%にロックされます。また、FWIW、違いがある場合、これらの行がいくつかあります。

enter image description here

選択ボックスの利点は、それらがネイティブコントロールであり、常に一定の豊かな対話をもたらすこと、そしておそらくテキストで少し明示的であることです。スライダー、OTOHは視覚的なインジケーターと数値的なインジケーターを提供します。 各デザインの他の長所と短所?考慮すべき他のデザイン?

3
sprugman

別のオプションはラジオです。
値が大まかな範囲である場合、妥当な値に関連付けられたラジオのセットにより、ユーザーはシングルクリックで選択肢を選択できます。
予算が許せば、選択したラジオまでのすべてのラジオを何らかの方法で強調表示するjs関数を使用して、ラジオのストライプで構成されたコントロールを作成します。
これは、シングルクリックの選択を視覚的なフィードバックと一致させます。
無線が見えている必要がないことに注意してください。少しのjsを使用して、それらを非表示にし、ラベルのみを表示します。関連するラベルをクリックするとボタンが作動するため、ボタンを表示する必要はありません。 jsを実行できないブラウザーとスクリーンリーダーでのみ表示されます。

1
Juan Lanus