web-dev-qa-db-ja.com

アイテムをフィルタリングして並べ替えることができる単一のテーブル

私の目標は、ユーザーが非常に長いデータのリスト(800以上)を並べ替えることができるUXを設計することです。ユーザーはリストをフィルタリングする機能を持っている必要があります。ユーザーは、多くのアイテムをリストの一番上と一番下にすばやく移動する簡単な方法が必要です。エレガントなソリューションを探しています。現在、私はリストをトップ、ミドル、ボトムに分類しました。単一のテーブルにすべてを含めると、テーブルがフィルタリングされるときに並べ替えが難しくなります。いったんフィルタリングすると、アイテムのサブセットしか表示されないため、アイテムを正しい場所に実際に移動することはできません。 enter image description here

3
Anna Rouben

これは、昨年取り組んだ問題を思い出させます。ユーザーは、ページ分割されたリストから一連のレコードを選択し、それらに一括操作を適用したいと考えました。

ページネーション(必要に応じて一種のフィルター)を使用すると、別のページに移動すると、以前の選択が表示されなくなります。レコードのフィルタリングを可能にする検索フィールドもありました。

まず選択してから

設計はユーザーストーリーの分割をマッピングしました(最初にレコードを選択し、次に操作を適用します)。基本的に、ユーザーがレコードを選択すると、折りたたまれたコンテナがリストの上に「Xレコードが選択されました」というタイトルで表示されました。そのコンテナに「一括操作」というラベルの付いたドロップダウンボタンがありました。

同様のことができます:

A table with a container on top, labelled '5 databases selected'

フィルターは完全に隠す必要はありません

このシナリオでは実用的ではないと思いますが、ページネーションがなく、約800件のレコードについて話しているわけではないので、次のことを述べなければなりません。

このような場合のフィルターは、レコードを非表示にする必要はありません。フィルターは、レコードを表す非常に小さな視覚要素を残し、ホバー(またはドラッグ)を使用してこれらの最小化されたレコードのコンテンツを表示できます。

これは、Googleの受信トレイが長い会話を折りたたむ方法に似ています。

Google's Inbox

各アイテムを線として表すことができ、ユーザーがその上または周りにカーソルを合わせると、レコードを楽しむことができます。

3
Izhaki