検索フィルターテキストフィールドとスライダー
私は衣料品を販売するためのeコマースサイトを行っていますが、同様に反応します。予算を設定するための最善の方法を知りたい。
予算範囲のあるテキストフィールドの方がUXで優れているでしょうか、それともスライダーがすべてのデバイスで最適に機能しますか？
テキストボックスを使用して発生しないスライダーや、質問のUIスナップショットにも表示されるチェックボックスタイプの操作では、考慮すべき問題がいくつかあります（ここでは、問題とは関係ありませんが、それらは優れたファセット検索ツールです）。
1。ユーザーフィードバック
スライダーが更新されるときに、自動化された方法でユーザーにフィードバックを提供するのは、よりトリッキーです。これは、ユーザーがスライダーを動かすたびに行います。処理によってインターフェイスが詰まるリスクがありますか、または値を選択したらボタンで更新できるようにしますか？
2。結果の数
チェックボックスのデザインで実証するように、ページが読み込まれるときにセットに一致する結果の数をユーザーに与えるのは非常に簡単ですが、スライダー（およびテキストボックスも）を使用すると、この値はロード時に設定できず、ユーザーが終了する可能性があります空の結果セット。ただし、テキストボックスがいっぱいになったときにAjaxを介して更新されるテキストボックスでは、ユーザーはスライダーを使用した場合ほど多くの処理をトリガーしていないため、結果の数を計算する時間は長くなります。
空の検索ページにアクセスするユーザーは、絶対に避けてください。
3。間違いを元に戻す
スライダーで値の範囲を制限しすぎた段階に到達すると、テキストフィールドと比較してこれを元に戻すのが面倒です。 Webサイトのサイドパネルやスマートフォンなどの限られたスペースでは、スライダーハンドルが近すぎると、さらに間違いが起こりやすくなります。テキストボックスを使用すると、同じ制限されたスペースで最初のミスをより簡単に処理できます。
4。アイトラッキング
上記の例では、ユーザーは、テキストボックスのペアで2つに焦点を合わせる必要があるのとは対照的に、いつでも4つのポイントに焦点を合わせる必要があります。スライダーハンドルと返される値に重点を置いています。
これは、値をハンドルにアタッチすることで多少は助けることができますが、単純なテキストボックスと比較すると、まだ余分な脳の処理が必要です。範囲は左から右に読み取られ（UIと質問が示唆するように英語を話す人の場合）、フォーカスのぎこちない中央の中断なしで実行できます。
5。値を定義する速度
たとえば、100ポンドから200ポンドの範囲を定義したいとします。テキストボックスを使用して入力するだけです。スライダーを使用して、まず範囲の制限を確認し、次にスライドして手順を調べ、次に£100と£200がどこにあるかを推測してから、次のように調整します。私がなりたい場所
6。マウス、キーボード、指
スライダーはマウス操作を可能にします。それらにはハンドルがあり、人々はクリックしてドラッグすることでそれらに慣れています。これは、フォーカスやタイピングよりも面倒な操作です。
テキストボックスは両方の方法でフォーカスでき、ユーザーはマウスとキーボードの両方の操作に慣れています。
モバイルでは指を使用しますが、スライダーはさらに面倒です。テキストボックスはフォーカスするためのタップであり、入力するためのいくつかのタップですが、スライダーはタップして移動するためにタップするため、上記のポイント3を組み合わせます。
私の答えのいくつかのさらなる読書と情報源：
http://www.90percentofeverything.com/2007/12/21/three-user-experience-guidelines-for-ajax-sliders/
http://www.uxmatters.com/mt/archives/2010/02/numeric-filters-issues-and-best-practices.php
この2番目の記事の引用：「退屈なユーザーインターフェイスは直感的で使いやすいので、通常は非常にうまく機能することに注意してください」は、スライダーと基本的なテキストボックスの良い位置と、常に考慮すべき格言をまとめたものです。あまり技術的ではないものの、あまり面白くない基本的なフォーム要素に対して、jquery UIウィジェットを比較検討します。
PS、あなたが決めることは何でも、タブインデックスを使用し、インタラクション全体を通してキーボードフォーカスを検討する