web-dev-qa-db-ja.com

小さくて有限な入力リストのための範囲スライダーの代替

不動産検索の場合、ユーザーは寝室の数を指定できます。有効な値は1、2、3、4、5+またはその間の任意の連続範囲(たとえば2〜3)であり、それを表す方法を探しています範囲スライダー以外。

ファセット検索の最初の部分として、ユーザーはそのような値をテキストで入力します。つまり、「3ベッドルーム」、「2-3ベッドルーム」、「5+ベッドルーム」などです。結果ページには、多くの構成可能な設定を持つ高度なフィルターがあります。現在のところ、これはレンジスライダーとしてありますが、特に大部分の場合、ユーザーがいずれにせよ単一の値を選択する場合は、私はそれが好きではありません。

私が今好んでいるアイデアは、疑似チェックボックスとして5つの「ボタン」を使用することですが、2と4を選択したが3は入力できないなどの「無効な」入力をユーザーが入力できるという欠点があります。最初に入力した後に値を変更するユーザーはごくわずかです。

他に検討すべきオプションはありますか?

2
rgareth

まあ、いくつかのJavaScriptを使用すると、範囲またはチェックボックスのアイデアのいずれかを拡張できるはずです。 (チェックボックスに基づく)ボタンを使用する場合は、ボタンをクリックして、クリックしたときに何が起こるかを簡単にプレビューできます。

  • すべてが選択されていない場合、クリック/タップされたものが選択されます
  • 残りの選択されていないオプションのいずれかにカーソルを合わせると、選択される範囲が表示されます(つまり、最初に3を選択すると、4にカーソルを合わせると4が強調表示され、5にカーソルを合わせると4と5が強調表示されます)。
  • エッジで選択した値の上にホバーする場合:選択されていないことを示します
  • 選択した値の上にホバーし、3つ以上のオプションが選択されている場合は、入口の方向を考慮に入れます(2-3-4が選択され、2から来る場合は2と3を、4から来ると選択を解除し、4と3を選択解除します。 )

タッチの場合、クリック動作はほぼ同じであり、人々はそれを理解します。最後のケースの非選択のみが推測するだけです(どちらがより可能性が高いかを確認し、常に下限または上限のいずれかを削除します)。スワイプも許可する必要があります。

方向を支援し、スワイプする可能性が最も高いjavascript/jqueryプラグインがあります。

1
Inca

結果ページで同じテキストフィールドを繰り返すことができない理由はありますか?

  • ソリューションはすでに機能しているようです
  • スライダーよりもはるかに多くのスペースを占めることはありません
  • ユーザーが以前に入力した内容と一致しているため、更新方法をユーザーに明確に示す必要があります
1
Tim FitzGerald