web-dev-qa-db-ja.com

複数の明示的なフィルターを許可するにはどうすればよいですか

N個のカテゴリがあり、有効にするとそれぞれが独自のものを表示します。ユーザーは最初にすべてのカテゴリのものを表示します(すべて有効になっています)。

カテゴリアクション:

  • カテゴリを無効にします。これは、残りのカテゴリのものを示しています。
  • 1つのカテゴリのみを有効にします。これにより、他のすべてのカテゴリが無効になります。
  • カテゴリを有効にします。これは、これと他の有効なものからのものを示しています。

各カテゴリにはアイコンとタイトルがあります。

これらのカテゴリを水平方向に表示し、ユーザーが各アイテムに対してこれら3つのアクションを実行できるようにするにはどうすればよいですか?

私の考えは:

  • アイテムのホバーで、カテゴリの下に別のメニューが表示され、オプションがわかります
  • アイテムのホバーでカテゴリが展開され、私のオプションが右側に表示されます(インライン)

また、アイコンはまだ問題です。経験の浅いユーザーに機能を説明するにはどうすればよいですか?プラス(+)アイコンだけがはっきりとわかります。

enter image description here

4
Odys

グローバルアクション(すべてを有効/無効にする)をUIの別の部分に移動することをお勧めします。

次に、有効と無効の2つのカテゴリの状態があります。

無効になっている場合は、クリックして有効にします。

有効になっている場合、アイコン/ラベルにカーソルを合わせると、2つのオプションがあるドロップダウンが表示されます。 「これだけを有効にする」と「無効にする」

mockup

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

「これのみを有効にする」(または「これのみを有効にする」)は少し不格好です。サウンド編集ソフトウェアでも同様のフィルタリングシナリオが発生します。ユーザーが他のすべてのトラックをオフにする必要なしに、いくつかのトラックの1つだけを聴く機能を提供する場合です。そこで使われる用語は「ソロ」ですが、それはかなり音楽的なレーベルであり、デジタルオーディオワークステーション環境では慣習的になりました。ここでは適切ではないかもしれません。

3
dennislees

私はあなたがこれのために口頭で行く必要があると思います。アイコンだけでは不十分かもしれませんが、ホバーは自明です。また、ユーザーがカーソルを遠くに移動してホバーメニューが消える可能性があるため、指定したパターンも適切ではありません(メニューに2番目の水平レベルを提供する場合と同じ問題です)。

1つのカテゴリを選択し、他のカテゴリの選択を解除すると、1人のユーザーが操作するだけでなく、メニューの複数の項目に影響を与えるため、より多くの結果をもたらすアクションです。そのため、意図しない使用を避けるために、選択する(クリックするだけで実行する)よりもこのアクションを複雑にする必要があります。たとえば、押し続けるかドラッグしてください。繰り返し実行されることはないため、さらに複雑にすることもできます(ユーザーがさらに多くのカテゴリをクリックして、これらの適切な組み合わせを選択することはできます)。

だから、このようにできると思います。カーソルがカテゴリの上にある間、ユーザーはツールチップ(または、ツールチップのペア)がカテゴリ画像の上下に拡大表示されるのを見ることができます。

  • 上記の部分は次のようになります。「クリックして選択」
  • 以下の部分は、「ここにドラッグしてこのカテゴリのみを選択する」と表示されます。

この情報は、カテゴリバー全体に提供することができます(または、表示するテキストが非常に多いため、これはさらに良いかもしれません)。ここに私が考えていることの小さな視覚化があります:

enter image description here

このシナリオでは、上位のCTAが常に表示される可能性があります。ドラッグ先のフィールド(カテゴリの下に表示される)を常に表示するか、ホバー時に表示するかを決定できます。

2
Dominik Oslizlo

ポップアップ/ドロップダウンメニューを水平方向ではなく垂直方向に積み重ねたままにします。私には、2つのレベルのインタラクションの良い違いのように感じられます。最初のレベルでは水平に移動してカテゴリを選択し、次にカテゴリ内を垂直に移動してそれぞれのオプションを選択します。

インタラクションの問題の明確さに関して、ユーザーがシステムを初めて操作するときに、ツアー/ガイドを用意することは可能ですか?その理由は、たとえそれ自体で相互作用が明らかではない場合でも、それが単純なものであれば、例を通して簡単に教えることができるからです。私にとって最も簡単な実装は次のとおりです。

  • シングルクリックで可視性を切り替え(オン/オフ)
  • ダブルクリックしてその1つだけを選択し、他のすべてをミュートします。
2
rk.

さて、私の解決策は、最初に提案されたアプローチを少し変更することです。私は一度に1つのカテゴリのみを有効または無効にすることを目的としています。つまり、1つのカテゴリを有効にし、他のカテゴリを一度に無効にする他のオプションを除外します。つまり、すべてのカテゴリフィルタが「トグルボタン」になり、それだけです。

なぜ私はそれを考えているのですか?

  • UXは常に快適さと混乱のトレードオフです。あなたが提案したアプローチは、1つのボタンを使用してすべてを有効化および無効化するのにある程度の快適性があり、視覚的および学習がかなり複雑です。

  • 私が2つの状態のみを使用することを奨励するもう1つの理由は、使用するカテゴリが5〜6個しかないため、最悪のシナリオのユーザーはn-1回タップする必要があり、4〜5回タップする必要があるため、私はそれを受け入れることができます。

2
Salman Ehsan