web-dev-qa-db-ja.com

複数の属性選択に基づいてリストの選択を表示する

私の従来のデスクトップアプリ(Webアプリではない)には、比較的短いアイテムのリスト(通常は10から20)の画面があり、そこからユーザーは任意の組み合わせ(すべてを含む)を選択できます。

アイテムには複数の属性(3つのブールフラグとタグ)があります。

私の最初は、チェックボックスとコンボボックスを使うことでした。私が見つけた問題は、タグと2つのチェックボックスが選択されていて、ユーザーがチェックボックスをオフにすると、選択された項目が選択/チェックされた属性に反映されなくなることです。

問題を複雑にするために、ユーザーはリスト内の任意のアイテムを直接チェック/チェック解除できます。タグとチェックボックスは単なるショートカットです。

例:ディーゼルにチェックマークを付けたが、コンバーチブルにはチェックマークを付けなかった。
現在選択されている車のリストには、ディーゼルであるSLKが含まれていませんが、コンバーチブルであるため選択されていません。

Car Selection mockup

私は2つの可能な解決策を考えることができます(どちらも理想的ではないようです):

  1. リストがチェックされているだけでなく、チェックされていない属性の結果であることを明確にしてください(チェックボックスではなく別のUIコントロールが必要になる場合があります)。
  2. 選択がアクションのみであり、選択されたアイテムを反映することが期待されないように画面を設計します。
4
SteB

おそらく、自然言語の検索/フィルターUIを試してみることができます。私はまだコンテキストがよくわかりませんが、特定のシナリオでは、このようなものはユーザーがすぐに理解するのは簡単かもしれません-添付を参照してください。

enter image description here

1
Amit Jain

私の背景はインタラクションUIデザインなので、これが私の解決策です...

厳密な一致と緩い一致の条件に別のコントロールを追加しないと、物事が簡単になります

以下の私の解決策を参照してくださいLEFTは完全一致およびRIGHTはすべての可能な一致

both options solution

0
Ahsan Idrisi

それはあなたの仕事に依存します。たとえば、レンタカーを借りている場合、ユーザーは車のリストをいくつかのパラメータでフィルタリングできますが、車のモデルにはいくつかの好みがあります。次に、解決策は私の写真のようにすることができ、フィルターに一致する車を色分けするだけです。写真を参照してください。フィルターはヒントとして機能しますが、ユーザーはどの車でも選択できます。

enter image description here

リジッドフィルターを使用する場合は、一致しないオプションを非表示にします。

0

これはUXの問題ではなく、機能の問題です。アプリがサポートする必要のある要件は次のどれかを決定する必要があります。

  1. ユーザーはポジティブ選択基準のみを適用できます。つまり、選択をコンバーチブルのみに制限するか、コンバーチブルフラグを無視するかを選択できます。
  2. ユーザーはポジティブとネガティブの両方の選択基準を適用できます。つまり、コンバーチブルのみを選択するか、すべてのコンバーチブルを選択から除外するか(他の条件に一致する場合でも)、またはコンバーチブルフラグを無視するかを選択できます。 。

ケース2では、 トライステートチェックボックス を使用することをお勧めします。これにより、ユーザーがポジティブ、ネガティブのどちらを選択しているかが非常に明確になります。

ケース1では、2つのオプションを考えることができます。

  • 3つのチェックボックス(3つのブールフラグ用)を常に表示したままにします。この場合、「変換可能」チェックボックスをオフにすると、選択可能な結果が変更され、変換可能と変換不可能の両方が含まれます。
  • チェックボックスを使用する代わりに、削除ボタンの付いた小さなラベルを使用します。この場合、ユーザーはラベルを削除して選択基準をリセットするだけです。
0
Vince Bowdren