web-dev-qa-db-ja.com

フィルタリングの入力ボックスとして機能するテーブルの列ヘッダー

テーブルの結果をフィルタリングするための入力ボックスとして列ヘッダーを使用することは良い考えですか?

enter image description here

4
naf

従来、グリッドは、ユーザーが列のヘッダーをクリックすると、テーブルの値が昇順または降順で並べ替えられるように設計されています。

同じヘッダー領域に検索/フィルターを含める1つの方法は、以下に示すように、セルの右隅に検索アイコンを追加することです。

enter image description here

ユーザーが検索アイコンをクリックまたはタップすると、ヘッダーラベルをフィルターテキストボックスに置き換えることができます。これにより、以下に示すようにオートコンプリート機能を実装できます。

enter image description here

お役に立てば幸いです。

4
Girish

列ヘッダーは通常、並べ替えに使用されます。

そして、この機能をフィルタリングに置き換える場合でも、次のことを行う必要があります。

  1. それが発見可能であることを確認してください(つまり、ユーザーはヘッダーを使用してフィルタリングする方法を知っています)
  2. 列ヘッダーが列ヘッダーのように見えることを確認します(すべてのユーザーがフィルタリングを必要とするわけではありません)。
  3. 並べ替えを実装する方法を検討します(現在は失われていますが、まだ役立つ可能性があります)。
  4. さらに、列ヘッダーは列のドラッグアンドドロップに使用される場合があるため、おそらくこれも見逃してしまいます。
1
alexeypegov

Excelのような多くのアプリケーションは、テーブルヘッダーに並べ替えやフィルタリングを実装しているので、ユーザーはそれをかなり認識できると思います。ただし、他の回答で指摘されているように、そこでアクションを実行できることを示す必要があります。以下にその例をいくつか示します。

  • ヘッダーフィールドを強調表示して、クリック可能に表示します。
  • ヘッダーをクリックすると上下矢印が列をソートします。
  • ユーザーが結果をフィルターできるようにするドロップダウンまたは検索ボックス。
  • より高度なフィルタリングが必要な場合にダイアログボックスを表示するアイコン。
1
sacohe

別の可能性は、テーブル全体の1つの入力ボックスです。これは、Windowsエクスプローラーで 検索/フィルターボックスが機能する方法です

1つの入力ボックスがテーブル全体で適切に機能するかどうかは、テーブル内のデータの特性によって異なります。異なる列の値の間に多くの重複がある場合、(1)自然言語のフィルター用語があいまいになる、(2)非自然言語(たとえば、System.FileName:= "quarterly report")であるため、1つのボックスが問題になる可能性があります。フィルター用語には構文の学習が必要です。

この回答で提供されている(これまでのところ)デザインはどれももっともらしいものです。

最適な設計は、いくつかの要因に依存します。(1)ユーザーが必要とする精度、(2)テーブル内のデータの量(行と列の両方)。

ユーザビリティテストで私が見たものから、ユーザーが行の小さなサブセットを探しているとき、ユーザーは最初にソートし、次にフィルターします。フィルター条件を満たす行の数が増えると(つまり、テーブルをスキャンして対象の行の先頭と末尾を確認できない場合)、フィルタリングが必要になります。ユーザーが大きなテーブルからデータを抽出し、小さなテーブルを作成する場合も、フィルタリングが必要です。その場合、データのサイズに関係なく、フィルターに一致しない行は存在できません。

フィルタリングがテーブルの主要なタスクではない場合、列ごとのフィルターコントロールでUIに負担をかける必要がない場合があるため、これについて言及します。

0
user1757436