モバイルで範囲スライダーを表示する方法
これは私の最初のUXの質問であり、UXとこのフォーラムの初心者です。詳細が必要な場合はお知らせください...
私はレスポンシブ注文フォームを設計しています。このフォームには、価格範囲をすばやく見つけるための範囲スライダーがあります。これはページの価格を動的に変更し、ユーザーにとってはとても楽しいものです。ただし、スライダーはタッチアンドドラッグのモバイルシナリオではあまりうまく機能しないようです。
それで、私が知らない、モバイルで使用するのが楽しいレンジスライダーを表示する良い方法はありますか？ HTML/JSで作成され、ブラウザ内で使用できる必要があります。通常のデフォルトドロップダウンなどの代わりに、何か違った楽しい使い方を探しています。
これは私が反応させたい私のスライダーです：
サークルスライダーを使用すると、視覚的魅力を高めることができます。以下は maniacdev.com からの手の込んだ例です。また、これは CodePen の別の簡単な例です。円以外に、他のオプションは考えられません。範囲スライダーは範囲スライダーであり、範囲の増加または減少を表すためにその基準を移動するポイントです。ただし、範囲スライダーのスタイル設定は大きな影響を与える可能性があり、多くの例が見つかります here 幸運を。
Thunderbirdの検索で日付範囲ウィジェットを見てください。
ウィジェットは最初に、検索結果が指定されたディメンションに沿ってどこにあるかのヒストグラムを表示します。次に、クリックするサブ範囲が表示されるので、ズームインおよびズームアウトできます。検索結果を考慮に入れることの利点は、ほぼ等しい量の結果を与える動的に計算された範囲を提供できることです。
もちろん、欠点は、ユーザーが範囲を選択する自由が少ないことです。
適用可能かどうかはアプリの詳細によって異なりますが、少なくとも1つの代替手段です。
ヒューリスティックな方法として、ユーザーが好みの範囲を正確に把握している場合（たとえば、冷蔵庫を探している場合の最大価格がわかっている場合）、スライダーは優れていると言えます。その決定を行うには、より多くの情報が必要です（つまり、彼らは通常の電力消費量が何であるかわからず、ヒストグラムを見て、省電力冷蔵庫が消費するkWhの数を理解する必要があります）。