検索結果ページでの広範なフィルタリング
私は非常に複雑なインターフェースに取り組んでいます。そこには大量のアイテムが含まれている/大量の検索機能があります。 EbayやAmazonなどと同様に検索はフィルター可能です。フィルターは非常に複雑です（実際にはカテゴリーによっても異なります）。検索結果の上には、並べ替えやその他の機能さえあります。
多くの結果があるので、サムネイルと追加情報（名前、所有者など）を含む1つの画面にそれらの40を表示します。
このようなフィルターパネルの通常の場所は、フィルターされたオブジェクトの左側です。ただし、この場合（多くの追加情報）、結果を閲覧したいだけのユーザーが気になる可能性があると思います。検索語は、最初の結果ページの結果を絞り込むのに十分な「整形式」である可能性があると思います（特に、検索エンジンが関連性の順序付けに十分な場合）。
表示される情報の量は膨大です。少なくとも30のフィルターの可能性とさらに多くのバリエーション（フィルターされたカテゴリに応じて）+ソート+> 40の結果（アイテム名、所有者など）。
私のチームのほとんどのメンバーは、「左側のフィルターを閉じる可能性なしにすべてのフィルターを表示する」と考えています。これは通常の方法です（少なくとも位置は非常に一般的です）。
私の見解：
- フィルターグループを閉じることができるように矢印を追加します（フィルターグループはデフォルトで閉じています）
- ペイン全体を右に再配置する
よくあることではありませんが、それが最大の欠点です。それでも、主なポイントである結果に集中することができます。
この場合、どちらが良いですか？
すべてを通常のままにしておきます（左側のすべてをフィルタリングして開きます）-> Amazon.com
デフォルトですべてのフィルターを閉じ、「学習可能な」インターフェースを作成します-> google.com
デフォルトですべてのフィルターを閉じ、ページを並べ替えて検索結果の右側に表示します（一般的ではありませんが、コンテンツに焦点を当てています）
すべてのフィルターを開いたままにしますが、結果の右側に配置します（一般的ではありませんが、コンテンツに焦点を当てています）
左側にフィルターを配置し、カテゴリを折りたたみ可能にします。これは最も一般的なアプローチであるため、別の方法で行うと、ユーザーを混乱させたり混乱させたりする可能性があります。頻繁に使用されるオプションを展開して表示したい場合があります。ユーザーの調査とテストを行うことで、それらがどのオプションであるかを確認できます。
複雑なフィルタリングオプションを備えた多くのサイト（主にオンラインストア）があり、その方法は次のとおりです。
LinkedIn
ここではいくつか興味深いことが起こっています。まず、検索クエリはフィルターの真上に表示され、フィルターの選択を維持したまま再度検索することができます。次に、いくつかのカテゴリ（つまり現在の会社、Relationship、およびLocation）は展開して表示されます（スクリーンショットの高さを下げるために折りたたみました）。 3つ目は、無料アカウントでは利用できない追加のフィルターを表示して、プレミアム製品を宣伝するためにフィルターを使用することです。
デル
デルは、いくつかのことをうまく行っており、いくつかはうまくいっていません。良い要素は、結果を絞り込むオプションであり、フィルターされたときに表示される結果の数を表示し、一般的に使用される選択のみを表示し、次にView Moreを追加して、ハイライトOnSaleフィルター。悪い選択は、通常expandを意味する三角形ですが、サブフィルターはなく、赤い色を使用してカテゴリを示し（コントラストが多すぎる）、貧弱ですフィルターグループの名前の選択（Helpful LinksandShop by Price）、フィルターの上に関連リンクを置きます。
Amazon
Amazonのフィルタリングは、最初はより直線的です。検索用語が複数の部門にまたがっている場合、Amazonはそれを絞り込むことを提案し、それから初めて、ブランド、価格、評価などのより伝統的なフィルターを提供します。出荷オプションや部門など、一部のフィルターは線形であることに注意してください。一方、ブランドなど、複数のフィルターを使用できるフィルターもあります。さらに、利用規約を説明するオプションの横にリンクWhat's this?もあります。
カヤック
カヤックは、サービスを使用する理由が最低のチケット価格を見つけて、各フィルターオプションの横に表示し、一部のオプションを無効にすることを知っています（つまり、出発/返却、同じ空港）。また、いくつかのオプションの説明も含まれています。最大の欠点は、リストが長いにも関わらず、省略可能なオプションがないことです。実際、Layover Airports以下はデフォルトで折りたたまれていますが、いったん展開すると最小化できません。
UXの観点では、左側または右側にフィルターを配置することはそれほど重要ではないと思います。ただし、フィルターをかけたいときはいつでも画面の左側に移動することに慣れているユーザーに留意してください。フィルターを右側に配置することには明らかな利点がないため、現在の設計との整合性を重視して投票し、左側に残します。
フィルターのセクションを折りたたむ限り、実際に描写するフィルターオプションが多数ある場合、これは非常に役立ちます。ただし、ユーザーがセクションを折りたたんだり展開したりして、ユーザーが見つけようとしているフィルターを検索している状況は作成しないことに注意してください。おそらく、より関連性の高い質問は、多くのフィルターが本当に必要か、役立つか、効果的か？
過剰なフィルターを簡略化しながらユーザーのニーズを達成できる設計を想像できる場合は、そのために努力する必要があります。おそらく、ユーザーがフィルターを操作する方法は、チェックボックス以外の方法を使用する方が効果的です。私はあなたのフィルターの意味がわからないので、私は言うことはできませんが、単にそれらを折りたたむだけではなく、それについて調べます。
お役に立てば幸いです。
これが私の頭に浮かぶものです。
- 最も一般的に使用される、または関連するフィルターのみを表示し、残りを非表示にします（Google Serpなど）。
- 結果の上にあるライトボックスまたは展開可能なボックスにフィルターを表示し、ajaxで結果を更新します。フィルターの選択に適合する製品の量に応じて自動的に変化する結果カウンターを使用することもできます。
- スライダー、ドロップダウン自動提案フィールドなどを使用して、フィルターのサイズを最小化します。
- フィルターを左側または上部（スペースを節約するために2列以上）に表示すると、ほとんどの人が検索結果を見つける可能性が高くなります。
私はあなたの選択肢に投票します2：
私が行ったユーザビリティテストでは、ユーザーは、ページの上部に配置されたときに、フィルターメソッドをより頻繁に見て使用しました。しかし、彼らのほとんどはそれらをまったく使用しないことを望んだ。
私が行ったすべてのテストに基づいて、私は通常、フィルター機能に時間と費用をかけすぎないようにアドバイスします。特にアイテムが簡単にスキャンできる場合、人々はフィルター機能を信頼するよりも、100件の結果のページを閲覧することを好みます。彼らは何かを見逃すのを恐れています。
ツールショップのA/Bテストで、フィルターなしではctrが高いと述べています： http://whichtestwon.com/uk-tool-centres-filer-test-results