web-dev-qa-db-ja.com

フィルタリング用の年齢層スライダー

私は出会い系サイトを構築していて、検索ページ内にはフィルタリングセクションがあり、もちろんフィルターの1つは年齢層用です。この情報を取得するための最良の方法は何ですか?現在のプロトタイプでは、以下に示すようにスライダーを使用しています。

enter image description here

ただし、以下に示すように、年齢範囲が小さい場合は少し注意が必要です。

enter image description here

私の質問は次のとおりです。

  1. まず、スライダーはこの目的に適したコントロールですか?理想的には、よりモダンな外観を与えると思うので、スライダーを使用することを好みます。使いやすさの点では、ドロップダウンほど難しいとは思いませんし、最近のほとんどのユーザーはスライダーに慣れていると思います。
  2. スライダーを保持する場合、2番目の画像の問題を回避するにはどうすればよいですか? 18-99のすべての値ではなく、より大きな増分があると考えていました。たとえば、40歳以降は5ずつ増分します。例:45、50、55、60 ...値が少ない場合、これは各値の間隔を広げます。
2
GSTAR

モバイルタッチスクリーンと障害を持つユーザーを考慮することを忘れないでください。

スライダーを使用するには、動きを動的にし、表示される数値をクリックできるようにして、各ボックスに正確な値を入力して、スライダーツールで行った選択を修正できるようにします。

「ダイナミックスライダー」は、最初に大きな動きに対して数をわずかに変更します-右側ボールは、途中で保持されている場合は5倍、押して保持されている場合は10倍ロールアップします極右。

手放すとバーが「ほぼ中央に」配置されるため、各ボールを簡単にクリックして、何度でも左または右にスライドさせて、各番号を微調整できます。たとえば、24〜28を選択したが、現在は非常に接近しているため、再調整できません。代わりにこれを表示します:

Fixed Slider

追加のコントロールは、中央に配置されたグラバーです。範囲の幅が適切になったら、バーの中心をタップして、端点を調整せずに範囲を上下にスライドできます。

Slider with center grabber

タッチスクリーン(またはマウス)で各ボールに簡単にアクセスし、左右にスライドさせて数を調整する方法をご覧ください。 機能性がスライダーの長さと動きを数値で完全にスケーリングしないのではないかと心配しています。

2つのホイールを上下に押して下限または上限を調整する方法を考えてください。それぞれを移動するボールの間隔を気にせず、対応する番号の適切な動きを取得します。

「単純なスライダー」は単純すぎて、あなたが説明した問題にぶつかります。 FWIW:年齢による差別を避けるために、上限を最大40年まで増やします。

2
Rob

テンキーでカスタム範囲を作成するためにアクティブ化できるスライダーの横にあるチェックボックスを無効にすることができます

0
santih

最初の質問に答えるには、キャプチャしたい情報に基づいて入力用のUI要素を設計する必要があります。そのため、一定ではない年齢範囲の入力を処理する場合、考慮する必要はありません(ただし、情報の処理または表示に関しては問題になる可能性があります)。

これは、増分サイズに関する2番目の質問につながります。これは、ユーザーに対する検索パラメーターの具体性に関係しています。非常に特定の年齢層を検索できることが期待される場合は、それに応じて対応する必要があります。

また、柔軟な検索オプションを提供したい場合は、スライダーだけでは十分ではないようです。ただし、スライダーで更新される直接の値を入力できるスライダーもあります。

このリファレンスでは、精度と制御がUI要素の選択/設計にどのように影響するかについて説明します。 https://www.nngroup.com/articles/sliders-knobs/

対象となる2つの主なタイプは次のとおりです。

入力コントロールには主に2つのタイプがあります。

個別のコントロールは、利用可能な手順またはオプションの数を制限しています。例には、オン/オフスイッチまたはチェックボックス、ラジオボタン、いくつかの事前選択されたオプションが含まれます。

連続的なコントロールは、通常、最小値と最大値の間の範囲の入力を可能にします。スライダーまたはノブは継続的なコントロールです。 (理論的には、連続パラメーターは範囲内の任意の可能な値を取ることができます。)

0
Michael Lai