web-dev-qa-db-ja.com

範囲/単一フィールドスイッチャー

現在、ユーザーが車を閲覧できる販売店アプリに取り組んでいます。

私たちが持っているフィルターの1つは年です。現在、ユーザーに2つのフィールド(Year From-Year To)を提供し、ユーザーが特定の車を探している場合、ユーザーが両方のフィールドに同じ値を入力することに依存しています年。

ユーザーが非常に単純で(おじいちゃんのように)、範囲の優先順位が単一の値よりも高い場合、範囲と単一の値の両方をサポートする直感的なソリューションを理解しようとしています。

4
UX Labs

私はBrunoHの答えについてコメントしようとしていました https://ux.stackexchange.com/a/122001/98561 、これはスライダーを設定するためにいくつかの必要があるため、デスクトップユーザーにとって非常に素晴らしく簡単な解決策を見つけますタッチスクリーンデバイスでは精度を達成することが困難です。私のコメントはかなり長くなったので、別の答えになりました。

BrunoHのコンセプトに2つの追加を加えて使用します。

  • 範囲と特定の値の間の明示的な選択を可能にするラジオボタン
    mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

  • 市場での中古車の供給を反映した準指数スケール。つまり、1995年から2005年に比べて自動車の数は多くありませんが、1995年から2000年までに製造された自動車の総供給量は、2017年の自動車とほぼ同じであると推測できます(年々製造される自動車は年々増えています)車は最終的には埋立地に置かれ、市場には出ません)。
    したがって、スケールは次のようになります。
    mockup

bmmlソースをダウンロード

もちろん、2009年から正確に車を探していると、少し複雑になります。これの解決策は、「特定の年」が選択されている場合、「マージン」である可能性があります。つまり、「マージン」で「2008」を選択すると、2008 +/- 1からの車が選択され、製造年で検索結果をソートします下降。製造日が早いほど、マージンが大きくなります。

それは舞台裏の多くのロジックですが、それでも非常に正確で詳細な検索オプションを必要とするユーザーのために、いくつかの「高度な検索」機能を提供することができます。

2
Mike

範囲スライダーを使用してこれを実現できます。このような: - enter image description here

このパターンの問題:開始点が固定されています。サイトが非常に古い車を扱っている場合、このソリューションは機能しません。古い車で機能させるには、fromフィールドを入力フィールドとして表示できます。このようにして、ユーザーはスライダーを使用するか、直接年を入力することができます。

3
BrunoH

私にとって、2つの相互作用の方法を持つスケールは、かなりうまく機能します。

  • クリックすると、1つの値が選択されます
  • パーツの上にドラッグすると、範囲が選択されます

(もちろん-他の回答でも既に述べたように-半対数で、編集可能なテキストボックスにも値を表示できます)。

私はまだこれを見ていませんが、最初はあまり直感的ではないかもしれません。

1
Máté Juhász