web-dev-qa-db-ja.com

スライダーかチェックボックスか?

自分のウェブサイトに価格のフィルターを配置したい。現在、sliderとして配置しています。

私はスライダーの左側と右側にそれぞれ最小値と最大値を示す入力フィールドを追加することについて考えました。これにより、次のようになります。

enter image description here

しかし、それは場所を散らかしませんか?

価格のフィルタがcheckboxとして配置される場所もあります。

enter image description here

しかし、それを行う他の方法は何ですか?どれが一番いいですか?

ユーザーがスライダーを変更するか、チェックボックスをオンにすると、リストは動的にフィルターされます。

PS:画像は私のデザインのものではありません。デザインはきれいですが、作成中です! :)

前もって感謝します! :)

2
Mehul Tandale

入力テキスト(from)+スライダー+入力テキスト(to)がより良い解決策だと思います。この場合、いくつかのチェックボックスをオンにすることなく、独自の範囲を設定できます。ただし、顧客がスライダーの範囲を変更するたびにサーバーへのリクエストを最小限にしたい場合は、「OK」ボタンを追加できます。この場合、ユーザーは範囲を設定し(okを押して)、結果を確認します。

例を見る

Range input fields with an OK button above a corresponding slider

1
Vlad Kozlovskiy

私はJeromeRに「依存する」と同意します(UXに関するすべての良い質問にはそのように答えます:-)。オーディエンス、状況、ページの他の要素などの詳細により、得られる答えが変わる場合があります。

ユーザーが特定の詳細な値に追加のテキストボックスの精度を必要としない場合は、スライダーが良い解決策となる可能性があると思いますが、ユーザーがそのレベルの具体性を必要としない限り、混乱を招く可能性があります。

また、スライダーを1回変更するたびにサーバーにアクセスすることは、ユーザーにとってかなり負担になる可能性があることにも同意します(特に、細かい粒度が必要な場合)。 ...特に多くのフィルターを設定する場合。

ただし、これは、新しいリクエストごとに読み込まれるデータの量にも依存します。各サーバーヒットが少量のデータのみをプルダウンし、かなり高速である場合は、すべての調整のリクエストを処理できる可能性があります。ただし、特定のリクエストの結果が大きく、ユーザーが多くの調整を行う必要がある場合は、リクエストを明示的に送信する前に、ユーザーに詳細を調整させることができます。

私は個人的には、このような範囲タイプの値にチェックボックスを使用するのは好きではありません(多くの決定を行うために、より多くのスペースを取り、ユーザーに認知的負荷をかける傾向がある場合のみ)が、いつものように、このコントロール。

それであなたは行き​​ます:それは依存します。しかし、おそらくこれにより、もう少し考える必要があります。幸運を!

0
Mattynabib