web-dev-qa-db-ja.com

年齢層スライダーに最適なUI

ユーザーが「年齢範囲」を選択できるようにするスライダーを作成しています。

施設は、特定のパラメーターに基づいてユーザーを募集することです。たとえば、ユーザーが欲しい：

  • 英国に住んでいる人
  • 女性です
  • 20〜35歳

最初の「イギリス在住」は、ドロップダウンを使用して選択できます。 2番目の「女性」は、ラジオボタンで選択できます。 「〜の間」には何を使用することをお勧めしますか？私たちはスライダーを考えていましたが、それでも問題があります。

誰かがスライダーを使用して範囲を選択する推奨/例を持っていますか？それでも、スライダーは最も適切なUIツールですか？

formsgui-designsliders
2
DLM

私は2つの spinners に "From"および "To"ラベル（または "between"/"and"）を付けることをお勧めします。これにより、キーボードコントロール、アクセシビリティ、タブ移動/フォームナビゲーションが向上しますが、ドロップダウンとは異なり、ユーザーが任意の値を入力する機能：

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

3
J. Dimeo

年齢の範囲の矢印を使用して、このようなスライダーはどうですか。

enter image description here

1
Rizwan Javaid

スライダーは直感的ではなく、ドロップダウンほど広く使用されていません。ドロップダウンを使用することをお勧めします。あなたの年齢層が何であるか知っているように、あなたはそれを明示的に述べることができます これのように。

0
philip

まあ、あなたは http://vanderlee.github.io/limitslider/ または https://api.jquerymobile.com/rangeslider/ を使用して正確な機能を提供できますあなたが探しています。さらに、2番目のリンクを見ると、スライダーの最初と最後に選択ボックスが表示されます。これは、美観や使いやすさのためにスライダーを使用することを考えていますか。美学が必要な場合は、スライダーでレイアウトに遊び心のある興味深い要素を追加できることに同意します。ただし、2番目のリンクに戻りましょう。

[start value][--------slider--------][end value]

意味的に言えば、最初と最後に値があるため、スライダー要素をWordtoに簡単に変換できます。ヘルパーラベル（from）を追加すると、次のようになります。

from [start value] to [end value]

または単に置く：

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

そして、そこに行きます：摩擦のないフォーム要素範囲の値の代わりに単一の値を持っているので、フィルタリングプロセスも簡単になります。つまり、未確定の範囲を取得する代わりに、結果を正確にフィルタリングできるようになりました。 16歳は50歳と同じではないことに同意することができます。以下を見てください：

enter image description here

ご覧のように、年齢などのデリケートな変数の範囲スライダーデータをフィルター処理することは非常に問題になる可能性があるため、今は必要性を認識していなくても（将来について誰が知っているか）、特定の値を設定することをお勧めします。

また、範囲が必要な場合は、fromとtoを常に組み合わせることができます必要に応じてフィールドを簡単に

0
Devin