web-dev-qa-db-ja.com

データフィルターの優れたUXプラクティス

私は実際にデスクトップアプリケーションの再設計を行っています。そして、私の課題の1つは、テーブルベースの画面からフィルターシステムを設計することです。

これは、私の前に働いたデザイナーからの実際のデザイン提案です(言語:ポルトガル語(ブラジル))。

アコーディオンを閉じたフィルター: Filters with the accordions closed

2つのアコーディオンが開かれたフィルター: Filters with 2 accordions opened ユーザーのフィードバック:-最初は、このアコーディオンをフィルターとして認識していませんでした。 -異なるユーザーが最初のアコーディオンの1つのフィルターと3番目のアコーディオンの2つのフィルターを使用するため、カテゴリー内のアイテムの分離はうまく機能しません。そのため、フィルターアクティビティでは、さまざまなアコーディオンを多数クリックする必要があります。

この種のデータをフィルタリングするためのベストプラクティスを知りたい。フィルターは垂直形式である必要があり、印刷が示すように「テキスト入力」または「選択入力」である必要があります。

お時間をいただきありがとうございます。英語のエラーについては申し訳ありません。

4
Mário Barbosa

どのフィルターがユーザーの間で最も一般的であるかを特定し、それらを常に表示できるようにします。次に、詳細、追加のフィルターなどという名前のリンクの下にある追加のフィルターを非表示にできます。

フィルターがたくさんある場合、ユーザーに負担がかかりすぎるため、一度にすべてを表示するのは最善の方法とは言えません。

2
Gosia

最初、彼らはこのアコーディオンをフィルターとして認識しませんでした

アコーディオンは通常フィルターには使用されないため、ここでは放棄する必要があります。現在使用中のフィルターは常に表示されている必要があり、アコーディオンでそれを実現することは困難です。

異なるユーザーが最初のアコーディオンの1つのフィルターと3番目のアコーディオンの2つのフィルターを使用するため、カテゴリー内のアイテムの分離はうまく機能しません。そのため、フィルターアクティビティでは、さまざまなアコーディオンを多数クリックする必要があります。

すべてのフィルター入力を1つのUI要素にフラット化すると、これらのナビゲーションの問題が解決します。一度に表示するにはフィルタが多すぎる可能性がありますが、一部のフィルタを他のフィルタボタンの背後に隠すことができます。各アコーディオンには複数の入力が含まれているため、フィルター入力を再編成する必要がある場合があります。一部の入力は論理的に単一のフィルターとして機能する場合があり、一部の入力は論理的にフィルターにグループ化する必要がある場合があります。各フィルターには、フィルターを適用またはクリアするための独自のコントロールが必要です。

この種のデータをフィルタリングするためのベストプラクティスを知りたい。フィルターは垂直形式である必要があり、印刷が示すように「テキスト入力」または「選択入力」である必要があります。

以下の asos.com の例は、各フィルターのわかりやすいタイトルのドロップダウンとしてフィルター入力を示しています。オプションを選択すると、フィルターが適用されます。適用されたフィルターは、ドロップダウンの上にある青いバーで強調表示されます。

Vertical filter on Asos website

以下の airbnb.com の例でもフィルター入力をドロップダウンとして使用していますが、フィルターはポップアップモーダルのボタンとしてスタイル設定されています。フィルターは、フィルターの[適用]ボタンをクリックすると適用されます。適用されたフィルターは緑色で強調表示されます。

Vertical filter on Airbnb website

1
Andre Dickson

展開すると、同じスペース内のすべてのフィルターを表示する[フィルター]ボタンがあります。ユーザーはフィルターを選択し、「適用」をクリックします。ページが結果とともに再読み込みされます。

例: Airbnb で[その他のフィルター]をクリックします。 enter image description here

0
Nicolas Hung