web-dev-qa-db-ja.com

データのテーブルをフィルタリングするためのUX

名前、場所、ステータスでフィルタリングできるデータのテーブルがあります。

Table of data for Filtering

これらの各列のデータは、ポータルの管理者には明らかです(つまり、最初の列は子の名前、2番目の列はその場所です)。

したがって、見出しの代わりにフィルターオプションを追加しました。フィールドプレースホルダーは、「場所によるフィルター」など、列名を暗示するため、それ自体がラベルとして機能します。

最も有用なフィルターの1つは子ステータスです。そのため、右側の列でこのフィルターを繰り返し、各ステータスの子の合計数を示しています。ステータスフィルターはテーブルの上部で見落とされている可能性があるため、右側に目立つようにして、フィルターをシングルクリックに減らしました。

質問

  • スクリーンショットに示すように、テーブルの見出しをフィルターオプションで置き換えることは適切ですか?

  • 右側のステータスフィルターを繰り返すことについてどう思いますか。 (これは、チェックボックスではなく単純なリンクの形を取る可能性が高いことに注意してください)。

9
slawrence10

あなたが提案するフィルター方法は通常かなりうまく機能します。私達は私達の製品の一つでそれの変形を使用しています:

Filtering of data table example

この方法でも、データの順序付けに使用できる見出し行が上部にあります。これにより、フィルターに値が入力されている場合でも、どの列に何が含まれるかを確認できます。

免責事項:これは、ユーザーが徹底的に訓練されているWebアプリです。これらのフィールドがフィルタリングに使用されていることを説明する視覚的な手掛かり(ラベルまたはアイコン)を追加することをお勧めします。また、送信ボタンを検討することもできます(現時点ではライブフィルタリングのみを行っています)。

他の1つ:大量のデータ(およびユーザーがあまり馴染みのない列の名前/値)を含むテーブルがある場合、見出し行を最上部に固定することは理にかなっています。 [〜#〜] x [〜#〜]行ごとに見出し行を下にスクロールまたは繰り返すときのビューポートの.

9
vincent.io

テーブルの上部にあるフィルタリングリンクはうまく機能すると思います。

最初は、右のフィルタリングテーブルを理解できませんでしたが、Amazonのフィルタリングシステムに似ています。それで、おそらくフィルタリングテーブルを左側に置く方が良いでしょうか?

enter image description here

WordPressを使用してテーブルの上で行われたことも確認しました。これは、右側のテーブルよりも目立つようです(目立つようにRHSに置いた方が目立ちますが、目立たず、遠く離れているようです)ユーザーが見ているところから):

enter image description here

4
icc97