web-dev-qa-db-ja.com

製品カテゴリのフィルタリングに最適なUXアプローチは?

製品の検索結果の典型的なセットと、検索結果をフィルタリングして制限するためのさまざまなチェックボックスを備えた典型的なサイドバーがあるとしましょう。この画像の左側の例のようなもの:

enter image description here

UXの観点から、より良い/簡単/より直感的:

  1. ユーザーがフィルターチェックボックスやラジオボタンなどをクリックするたびに、ページが更新され(またはAJAX経由で結果が更新され)、検索結果が更新されます。
  2. ユーザーは、さまざまなチェックボックスなどを選択した後、手動で「フィルター」ボタンを押す必要があります。

1.の長所と短所は、ユーザーがチェックボックスを押すたびに画面が更新されることです。これは、ユーザーにとって遅くて扱いにくいように見えます。

2の場合。ユーザーは、チェックしたチェックボックスや項目を実際に適用するために「フィルター」ボタンを押す必要があることに気付かない可能性があります。そのため、いくつかのチェックボックスを押して待機する可能性があり、何も起こりません。また、チェックボックスとウィジェットのリストがページよりも高い場合、[フィルター]ボタンがそれらの上部または下部にあり、ページから外れている可能性があります。そのため、ユーザーはフィルターボタンがあることを確認できません。すべて...

最善のアプローチは何ですか?本当に正しく機能するサイトを見たことがありますか。

10
Jake Wilson

ほとんどの場合、(a)不要なステップを切り取り、(b)ユーザーにアクションの結果をすぐに表示することをお勧めします。ユーザーがチェックボックスをクリックしたときに結果を自動的にフィルター処理すると、これらの両方が実行され、[フィルター]ボタンを使用すると実行されないため、最初のデザインの方が優れています。もちろん、ユーザーがフィルター設定を元に戻したり変更したりするのも簡単でなければなりません。

結果がAJAXでロードされ、最初のフィルターが完了する前に2番目のフィルターをクリックすると、ロード要求がキャンセルされ、再発行される限り、フィルタリングが遅いという懸念は問題になりません。両方のフィルターが適用されています。

8
Kevin Borders

3番目のオプションは、製品が自動的に更新されないが、フィルターボタンがフローティングの場合に検討できます。アニメーションをご覧ください:

enter image description here

したがって、フィルタリングボタンは常にユーザーの焦点に近く、マウスの移動距離は短いです。

このソリューションは、次の場合に適しています。

  • 検索がかなり遅い
  • 複雑な選択(多くのオプション)の可能性が高い
5

私の2¢...

  • アコーディオンに近づかないでください。これらは混乱し、特定のフィルターを見つけることを不可能にします
  • これはほとんどのユーザーにとって最も快適なので、配置は左側にする必要があります
  • フィルターがページに適切に視覚的に関連付けられていることを確認してください。フィルターを孤児のように見せないでください。
  • ユーザーが必要に応じて削除できるフィルターの「クラウド」を保持する
4
Aaron Benjamin

3つのデザインすべてが良くないことと、その理由を教えてください。私の答えをコメントしてください。

現在の方法:

  1. 情報と構成オプションが多すぎる
  2. 関連検索はトップ情報ではありません-カット。
  3. 「の結果」はまったく必要ありません-カット。
  4. 表示はシンプルなアイコンである必要があります。
  5. 並べ替えもアイコンにすることができます。
  6. 「CPU> Intel> New generation」のようなbreadcrumbの欠如。
  7. 選択されていないフィルターは開くことができますが、閉じている場合に適しています。
  8. 検索用語はコンボを必要としないと思います-用語を学ぶためにフリーテキスト検索が必要です。
  9. すべてのフィルターをクリアするボタンがありません!

私の意見

  1. 選択したフィルターは、無効化を許可するために閉じてはいけません。
  2. フィルターから三角形を削除する必要があるのは何ですか? -スペースと読みやすさを失っていますか?
  3. 以前の発言はすべて有効です。

私の意見II

  1. 専用ではない場合は間違ったデザイン http://en.wikipedia.org/wiki/Right-to-left -おそらく、何か新しいものを表示したいが、機能しているかどうかは気にしない-ユニークであり、クリエイティブのように見えますが、実際には機能しません。
  2. 現在の方法から有効な以前のすべての発言。

他のもの:

ユーザーがフィルターチェックボックスやラジオボタンなどをクリックするたびに、ページが更新され(またはAJAX経由で結果が更新され)、検索結果が更新されます。

答えるのはそれほど簡単ではありませんAJAXとAJAXは多くの方法で実行できます。検索結果は早くリフレッシュする。

ユーザーは、さまざまなチェックボックスなどを選択した後、手動で「フィルター」ボタンを押す必要があります。

難しくしないでください-すべての人ではありません。知覚力があり、学習が速く、視力が優れています。高齢者は、ページに多くの時間を費やしてページを拒否することを考慮してください。

ユーザーは、実際にチェックボックスやチェックしたものを適用するために「フィルター」ボタンを押す必要があることに気付かないかもしれません。そのため、いくつかのチェックボックスを押して待機する可能性があり、何も起こりません。

ユーザーが何をしているのか分からないのは間違いです。見ない場合はどうやって学ぶのですか?

私はあなたのためにいくつかの専門的な設計サービスを行うことができますが、サイトを見る必要があります(適切なseo、ナビゲーション、レイアウト、動作、および最高のUXのテストを含む)が、契約が必要です。私はあなたのサイトの設計を分析する必要があります-多分それは複数の反復が必要です-いくつかのテストも必要です。

常にすべての人に最適なサイトを作成できるとは限らないが、可能な限り最善のサイトを作成できると考えてください。そのためには、一部の機能を削減する必要があります。一部の機能は追加しないでください。

3
Chameleon

あなたの投稿の写真から、私たちはウェブサイトについて話していると思います。チェックボックス付きのサイドバーを備えた多くのウェブサイトを知っており、それらすべてがすぐに結果を表示するので、これは(他の人が述べたように)優先される選択です。モバイルでは、サイドバーが画面を引き継ぐので、ユーザーがメイン画面に戻ったときにのみフィルターを適用できます。これは、「適用」をクリックする必要があるか、メインコンテンツをクリックするかを意味します。

0
user1261104