web-dev-qa-db-ja.com

デフォルトのフィルタリング動作:すべてが表示されるか、すべてが非表示になりますか?

当社のウェブサイトに選択フィールドがあります。そして今日、ユーザーが初めてフィルターオプションに直面しているときに、フィルターオプションについてオフィスで話し合いました。

オプションA enter image description here

アクティブなフィルターはありません。すべての結果が表示されます。

オプションB enter image description here

すべてのフィルターがアクティブです。すべての結果が表示されます(アクティブなフィルターがないため)。

どのオプションをお勧めしますか?

12
Daniël

定義により、フィルターは、ユーザーが最も興味のある結果のサブセットに絞り込むのに役立つツールです。したがって、フィルターがアクティブな場合、表示される結果は元の結果の総数より少なくなるはずです。

このため、オプションBは十分に直感的ではありません。私が間違っていない場合、オプションBは加算的アプローチを使用してアイコンを処理します(フィルターをオンにすると、チェックボックスのように「この側面に関連する追加の結果がいくつか表示されます」。これは、従来のフィルターによって暗示される"subtractive"アプローチとは対照的です(フィルターをオンにすると、「この側面に関係のない結果を取り除き、関連する結果のみを表示します」。このように、オプションAの方が適切と思われます。

しかし、私の印象は、オプションAの視覚的なコントラストが不足しているということです。無効なアイコンのように見えます。高齢者にとっても、ユーザビリティの問題があるかもしれません。

したがって、全体として、下のスケッチのように両方を組み合わせることをお勧めします。

デフォルト(すべての結果が表示され、アクティブなフィルターはありません) enter image description here

バンクフィルターがアクティブになり、関連する結果のみが表示されます。 enter image description here

アイデアは、円またはフラットシャドウのような微妙な視覚的キュー(まだフラットなデザインを維持している)を使用して、現在アクティブになっているフィルターを示すことです。

さらに、「銀行、木、山に関連する結果を表示しています」などのラベルが付いたテキストと、ページをデフォルトの合計結果状態に更新するボタンまたは何かを一緒に使用することを検討することもできます(「すべての結果」)。

私のスケッチは、スペース、配置、および書体の要件を満たしていないことに注意してください。

21
Son Do Lenh

レストランを表示したい場合は、アクティブになるまでアイコンをクリックします。これらはフィルターではなく、イネーブラー(おそらく間違ったWord)です。フィルターはふるいのようなものであり、アクティブなときに物事を通過させません

すべてのフィルターがオンかオフかは、ユースケースによって異なります。地図だと思いますか?特別なものを見つけようとしているユーザーです。最初にすべてをオフにすると、マップが空になります。ユーザーが近くにあるお店を閲覧しているだけの場合は、アクティブ化されているすべてのアイコンを使用すると、完全なリストが表示されます。

妥協:完全なリストが使用できない場合は、いくつかのアイコンを有効にして、ユーザーが異なる状態になっていることをユーザーに表示することもできます。すべてを無効/有効にするボタンを追加して、その状態から抜け出すために多くのクリックを回避することをお勧めします。

1
user50401

一度に1つのフィルターしかアクティブにできない場合は、フィルター選択 "SHOW ALL"があり、すべてのフィルターボタンが有効になっている必要があります。境界線などのインジケーターを使用して、選択されているボタンを示します。

フィルターを組み合わせることができる場合は、フィルターを「OR」グループにグループ化することをお勧めします。各グループには「ANY」ボタンが必要です。 「ANY」をクリックするか、「ANY」が選択されているときに任意のフィルターをクリックすると、クリックされたフィルターが選択され、その他のフィルターはすべて選択解除されます。グループでonly選択したフィルターをクリックすることは、「すべて」をクリックすることと同じです。他の場合では、フィルターをクリックするとトグルとして機能します。表示されるアイテムがすべてのグループで示された条件を満たす必要があることは明らかであるため、各グループには説明的なラベル(たとえば、「髪の色は...である必要があります」)が必要です。グループで「すべて」が選択されている場合、ラベルは淡色表示され、特に関連がないことを示します。スペースによっては、ラベルテキストに選択肢を示すと役立つ場合があります[例: 「髪の色は[〜#〜] black [〜#〜]または[〜#〜] brown [〜#〜]または[〜# 〜] red [〜#〜] "]、フィルターが人にマルチカラーの髪を持たせる必要がないことを明確にするため。

0
supercat

本当に役立つ答えを出すには、もう少し知っておく必要があると思います。フィルターが適用されるアイテムは、一致するアイコンの1つに制限されますか、それとも1つのアイテムが複数に表示されますか?コンテンツはどのように整理され、ユーザーはそもそもどのようにフィルタリングするのですか?

Amazonで見られるように、ケースは製品カテゴリに近い可能性があります。あるものは1つのカテゴリにあり、多くはありません。カテゴリは、ユーザーが関連するアイテムへの閲覧の範囲を制限するのに役立ちます。

また、Stack Exchangeのタグに近い場合もあります。1つのモノに複数のタグを付けることができ、ユーザーは興味のあるものすべてを見つけるのに役立ちます。

ただし、より多くのアイコンを選択すると、より多くのコンテンツが表示されます。アイコンを選択解除すると、アイコンを選択解除すると、コンテンツが少なくなります。したがって、論理的な方法は、オプションAを使用することです。

オプションAの問題は、ユーザーが通常1つのアイコンのみを選択することを想定し、オプションAの場合、該当しないすべての選択を解除する必要があると想定すると、ユーザーにとって煩雑になる可能性が高いことです。

すでに指摘したように、すべてを選択解除してすべてのコンテンツを表示することも直感的ではありません。ただし、ユーザーが実際にサイトをどのように使用しているかによっては、これが最善の解決策になる場合もあります。

どちらも状況を明確にし、同じ追加を必要とする2つの代替ソリューションがあります。

「すべて表示」オプションを追加します。

ソリューション1:フィルターをカテゴリーのように扱います。つまり、ユーザーに1つだけ選択させます。これは非常に一般的で、非常によく学んだ行動です。ユーザーが複数のアイコンを選択できるようにする必要がある場合は、お勧めします…

ソリューション2:以下に示すように、すべてのフィルターがアクティブな場合を特別なケースとして扱います。アイデアは、「すべて表示」を特別なトグルとして持つことです。しかし、これでも多少あいまいだと思います:-)

Special Operator "Show all"

0
Christian

すべてのアイコンがグレー表示されていることは、表示されているすべての製品と同じであることは非常に直感的ではないようです。何かがグレー表示されている場合、それは「無効」状態のようなものです。使用されていないことを意味します。あなたはそれらを灰色にすることによって物事を除外する必要があります。ページにアクセスしてすべての結果が表示されると、それらのアイコンが表すすべてのカテゴリが機能します。次に、クリックしてグレー表示し、結果を削除します。

オプションBが優れています。

0
AdamUX