web-dev-qa-db-ja.com

リスト内のアイテムのフィルタリングと選択を組み合わせる最良の方法

アイテムのリストを表示するWebページを作成しています。リストには3つの目的があります。

  1. 各アイテムに関するいくつかの非常に基本的な詳細を表示します
  2. 詳細を表示したり編集したりする方法を提供する
  3. 複数のアイテムを選択して一括操作を可能にする方法を提供する

リストには、リストに表示される項目を制限するためのいくつかのフィルターがあります。複数のフィルターを組み合わせることができ、フィルターごとに複数の値を選択できます。

リスト項目を選択できるので、複数の項目を操作できます。これは、移動または削除する複数のメールを選択するGmailの機能と非常によく似ています。各アイテムにチェックボックスがあり、上部に別のチェックボックスがあり、すべてを選択/選択解除します。

これまでのところ、ページは次のようになっています。

Instructors List

私の頭では、フィルタリング/選択が機能する2つの代替方法があります。

  1. シンプルなバージョンでは、ユーザーがいくつかのアイテムを選択した場合、フィルターを変更して、選択されたアイテムのうち2つが表示されなくなり、これら2つのアイテムが選択されなくなります。フィルターされたリストに表示されているアイテムのみを選択できます。

  2. 「パワーユーザー」バージョンはフィルターに関係なく選択を維持するため、ユーザーはアイテムをフィルターし、いくつかを選択し、フィルターを変更し、さらに選択して、選択したアイテムのリストを構築することができます。リストに表示されます。

これらのうちどれがより良いデザインでしょうか?それとも別の方法がありますか?シンプルなバージョンはおそらくユーザーが期待する動作だと思いますが、パワーユーザーバージョンは悪い考えですか?

4
Jonathan Sayce

フィルターのユーザーのメンタルモデルを破ると、必要に応じてアイテムを検索および検索する機能に対する信頼が失われます。操作を実行できるコレクションから検索(および収集)を分離しようとすることができます。

問題は次のように聞こえます:

  • 大量のページ付けや作業を行わないと、選択するための合理的なビューで表示できない大量のデータがあります。
  • さまざまなフィルター条件を満たすアイテムを収集して、操作を実行できるコレクションを作成するにはどうすればよいですか?
  • このコレクションを将来のビュー/操作のために保存できますか?

あなたができることは、フォトアルバムに似た、ある種のコレクションを作成することです。アルバムを使用すると、日付の範囲に基づいてアイテムをグループ化できますが、単一の属性(「人」と「馬」など)を共有するだけの多くのアイテムを含むフリーフォームアルバムを作成することもできます。任意のカメラまたはその他の属性)。

コレクションを管理、比較、または追加する必要がある場合は、いつでもコレクションに戻ることができます。

mockup

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

このようなモデルは多くのソフトウェアで見つけることができます。

たとえば、フォントマネージャーSuitcase Fusionにはサイドバーがあり、ライブラリ全体を検索してスクロールしたり、手動でフォルダを追加したりできます。いつでも更新します(ブランドの適切な書体を検索して収集しているときに、デザインクライアントごとにコレクションを作成します)、または特定の基準(たとえば、「Sans Serif」)を満たし、自動的に更新するスマート検索です。

enter image description here

アプリケーションを信頼し続ける

検索とフィルタリングを収集から分離することで、フィルターのモデルが期待どおりの状態を保つことが保証されます。

ユーザーが一般的なワークフロープロセス(フィルタリングで検索)やグループとして関連性のあるアイテムを覚えたり繰り返したりする必要をなくします

コレクションを許可することで、ユーザーは一緒に属するデータセットを覚える必要がなくなります。ユーザーのメモリと設定をアプリケーションにオフロードします。

2
Mike M