価格でフィルタリングするためのファセット検索フォーム要素としての価格スライダー対範囲リンク
フロントエンドのjqueryスライダーウィジェットを、カタログ内のアイテム数を減らすファセット検索のコンテキスト内で、価格範囲でフィルターするリンクのリストと比較する場合、前述の2つのインターフェース要素のうち、速度を検討するときに最適です。どのユーザーがカタログ製品を、使いたい金額を表す範囲に制限できますか？
スライダーは、ユーザーの認知負荷が高くなります。また、スライダーを使用した相互作用の実装は、時間のロスにつながる可能性があります。
ユーザーが製品の意図した価格帯を念頭に置いているシナリオで、考えられる問題は次のとおりです。
- ユーザーは常に意図した数とスライダーの位置をマッピングする必要があります。意図した数がスライダーに表示されている場合でも、一部のユーザーはまだクリックするだけではなく、そこでスライドします。一定のフィードバックループが必要なため、認知負荷が高くなります。
- 使用可能なスライダーのスペース要件を考慮してください。
- 視認性の欠如
![enter image description here]()
- スライダーを変更するとすぐにコンテンツが読み込まれると、コンテンツのちらつきやネットワーク負荷が発生します。そのため、スライダーの位置が最終的なものであるかどうかを納得させるのが良いでしょう。この待機時間をリソースの読み込み時間に追加します。したがって、ユーザーにとってタイムクリティカルになる可能性があります。
一連の価格帯をハイパーリンクとして持つユーザーインタラクションは、次の2つのステップで構成されます。
- 必要なリンクを認識します。
- クリックして。
スライダーを支持する2つの引数：
私がfooを買おうとしているのであれば、私は通常、価格の上限ではなく、下限ではなく操作しています。常にではないが、通常。スライダーを使用すると、上限を調整しながら、下限を$ 0に保つことができます。価格範囲を設定するためのリンクは、完璧なfooの検索を強制する（リンクをクリック>最低価格範囲をスクロール> 2番目に低い価格範囲をクリック>スクロール...）すべての結果を1つのページにまとめるのではなく。
このコンテキストでスライダーをどのように使用するかを考えると、私は間違いなく（そして他の人も同様に賭けます）最初の支出制限で買い物をし、最初の検索で得た結果に満足できなかったので上限をより高く調整しました。私は自分が欲しいものを手に入れるためにもっとお金を使う必要があると決心しました。これは私が購入するどんな店にとっても勝利です。
とは言っても、スライダーを使用した実際の結果に関するデータ（またはanecdata）が誰かにあれば、私は気に入っています。
[〜＃〜] eta [〜＃〜]
私はnewegg.comでこの代替設計に出くわしました。各価格帯のチェックボックスを使用すると、幅広い価格を選択して検索できます。
それらの実装では、価格範囲を選択するとページが自動的に再読み込みされるため、上記で概説した特定のユースケース（最低価格から個人的な支出の最大値までの幅広い範囲を選択）は非常に煩わしいことに注意してください。すべて。クリック。リロード。ページ。ただし、ライブフィルターまたは「送信」ボタンを使用すると、この問題を軽減できます。
スライダーは価格帯を自由に選択できます。
スライダーの問題
ただし、これらは通常複数の基準の1つであり、画面の大部分はフィルターではなく結果を表示する必要があるため、通常は非常に小さいです。
特定の価格を選択するには、ピクセルパーフェクトポジショニングが必要です（または、ハードリミットの場合は、達成することさえできません）。
単一のリニアスライダーで$ .01 .. $ 10,000に及ぶ必要がないように、範囲は他のクエリアスペクトによって制限される必要がありますが、これはしばしば厄介なステップになります。
$ 100 .. $ 200を選択すると、正確に2つの結果が得られ、99.99ドルで数十のオプションが非表示になります。
アフォーダンスは、1回のクリックではなく、2つのドラッグアンドエイム操作です。
なぜ価格でフィルタリングしたいのですか？
予算の制限が厳しい場合と弱い場合があります "$ 99.99、1セント以上ではない"と 「高品質のやかんに約100ドルで結構です」
上限を使用して、不要な製品機能を除外することもできます。統合されたレシピブラウザーを備えたおしゃべり用のやかんは必要ありません。
下限は通常、不適切な一致を除外するために使用されます。私はやかんを検索し、2ページのやかんステッカーを0.99ドルで、または知覚される最低品質で入手しました-薄っぺらな大部分がプラスチックのやかんではなく、頑丈なやかんが欲しいです。
価格は、多くの場合、フィルタリングが難しい別の属性の便利なプロキシであることに注意してください。
2つのスライダーまたは範囲スライダーは通常、最も単純な実装です。
価格帯には、手動設定または適切なアルゴリズムが必要です。優れたアルゴリズムは、価格クラスターを探し、実際に使用可能な結果を反映する意味のある範囲を自動的に提案できます。
$25..$75 (25 items)
$89.99..$130 (30 items)
$180 and up (12 items)
[custom]
固定制限を有効にするために、「カスタム範囲」ポップアップを使用して、「自然な」ステップの大きなサイズのスライダーを使用し、理想的には、その範囲内の結果の数を即座にフィードバックすることができます。
あるいは、価格はほとんどすべてのアプリケーションで主要なソート条件です。これは結果の提示に悪用される可能性があります。
価格が大きく異なる場合は、すべての結果を表示するのではなく、価格帯でグループ化します。例えば。 2ページのやかんステッカーの代わりに、上位5件と「1ドル未満でもっと」へのリンクを表示する
また、ナビゲーション支援を提供することもできます。ページ番号ではなく価格で並べ替える場合は、価格インジケーターを使用します。
ユーザーがスライドしている間にフィルターされた結果が変化し、ユーザーがフィルターを適用するために別のボタンをクリックする必要がない場合は、価格スライダーで問題ありません。
Herokuの価格スライダーはここに似ています https://www.heroku.com/pricing
ユーザーがフィルターをスライドしているときにフィルターの適用を表示できる限り（すべてのデータが既に読み込まれていると想定）、スライダーが役立ちます。
そうしないと、ユーザーが最初にマウスをドラッグしてスライダーを動かし、次にフィルターされた値をダウンロードして表示するのがさらに面倒になります。