web-dev-qa-db-ja.com

単一のテキストフィールドとは対照的に、多くのフィルターオプションを備えたフィルター検索に最適なUI

単一のテキスト入力ではなく、多くのフィルターを使用して検索する場合、どのUIが最高のユーザーエクスペリエンスを提供しますか。

例:ユーザーが結果をフィルターできる15のフィルター(すべてオプション)があります。テキスト検索ではなく、これらのフィルターに重点が置かれています。これらのフィルタをすべて圧倒することなく表示し、雑然としたインターフェースを作成する最良の方法は何ですか?

これをきちんと管理することができた唯一のサイトはOKCupidで、これを使用すると、ユーザーはリストから特定のフィルターを選択してカスタマイズできます。

49
Garen Checkley

多くのサイトでは、検索用のフィルターが多すぎるという問題があります。 ほとんどのサイトは、基本的でより高度なフィルターオプションを提供しています-これらは、基本的な調査基準が何であるかを特定するために注意深く調査する必要があります。次に、各基準に合うようにフィルターを注意深く設計する必要があります。これには芸術のようなものがあります。

一般的には、ダイアログではなくリストのレイアウトを選ぶのが最善だと思います。たとえば、これにより、ユーザーはアコーディオンを開いたり閉じたりして、興味のある基準にカスタマイズすることができます。

アイデアを探す価値のあるセクターの1つは、就職活動サイトです。彼らは通常、まさにこの問題を抱えており、多くのさまざまなタイプのユーザーを扱います。 1つの解決策は、ユーザーが必要なフィルターを選択して上部にタグとして表示できるようにすることです...事実上、ユーザーはクエリを視覚化できます。たとえば Reed クエリ項目をオレンジ色で上部に表示します...いつでも削除できます。また、各基準のフィルターウィジェットを選択し、データの場所(機密情報)を表示することもできます。

The reed employment search bar

フィルターをページの焦点にして楽しくすることもできます-この初期段階の設計アイデアで私がしたように:

Balsamiq mockup of an advanced search page with sliders and buttons

これは、ユーザーが[詳細検索]を選択した後の最初の検索ページです。さらに操作する場合は、左側のナビゲーションの結果ページに、より簡単なフィルターとボタンが表示されました。スケッチはBalsamiqモックアップで行われます

19
Lisa Tweedie

私はこのコントロールを使用しており、エンドユーザーに対してあらゆる種類の検索条件を明確にするのに役立ちました。これは DocumentCloud によるjavascriptプラグインで、 Visual-Search と呼ばれます。その見事なプラグインであり、検索を表現するための最善の方法です。できるだけ多くのフィルターを追加しますが、エンドユーザーがそれを使用することは非常にクリーンで明確であり、それはまさに、アプリケーションを使用するときに誰もが見るものです。

お役に立てれば。

enter image description here

13

ファセットナビゲーションは、あなたが説明するような状況を解決するための非常に人気のある検索パターンになっています。 Amazon 非常によく使用しています。

本の抜粋 検索パターン ピーターモービルとジェフリーカレンダーによるファセットナビゲーションについて:

プログレッシブ開示とインクリメンタル構築の原則に従って、ユーザーは一連の小さく単純なステップを実行することにより、高度なブールクエリに相当するものを作成できます。

私は Gmailが検索機能を検索ボックスに統合する方法 も気に入っています。キーワードを使用して検索を絞り込みます。

8
Pep López

Atlassian Jira はとてもうまくいくと思います。 Jiraには膨大な数のフィルターが存在する可能性があります。ほとんどのユーザーはそれらのサブセットを望んでいます。 Jiraはデフォルトで最も一般的に使用されるフィルターを表示することで問題を解決します。他のすべては「もっと」ドロップダウンボタンの下に隠されています。ユーザーは、追加のフィルターを追加/削除することを選択できます。

4
Rasha

フィルタリングと検索は似ていますが異なる問題です。ほとんどのWebデザインは組み合わせを採用しています。

たとえば、Amazon.comを見てみましょう。 SaaSリレーショナルデータを表示するアプリは、多くの場合グリッドコントロールでフィルターを使用します。調査によって裏付けられた、このタイプの問題の非常にスケーラブルなパターンの良い例は http://mspace.fm/mspace

問題の詳細によっては、高度な「検索」を実行するときに、OS X Finderディスプレイなどの従来のフォームコントロールを使用できる場合があります。ユーザーは、検索、フィルター、または類似のものの違いについて常に理解している(または気にしていない)ことに注意してください。

2
Jon Innes

検索範囲を絞り込む必要があります。フィルターをあまり必要としないように、主要な手順をユーザーに説明します。システムにユーザーの選択を記憶させます。そうすれば、彼/彼女はいつも帰り道を知っています。

あまりにも多くのフィルターから選択する必要がある場合、ユーザーはストレス/不満を感じるでしょう。結果...ユーザーはサイトを離れます。

0