見出し画像

絞り込み検索をリアルタイムにするか、条件指定してから検索するか

新規で絞り込み検索を検討するとき、下記2点で迷われることはないでしょうか。

リアルタイム検索
・絞り込み条件を選ぶたびに、リアルタイムで、検索結果を反映

条件指定してから検索
・絞り込み条件を選んでから、検索ボタンを押してから検索結果を反映

これは画面のレイアウトにも関わる仕様ですが、ここではこの2つを整理してみようと思います。


リアルタイム検索

画像1

参照元:https://www.homes.co.jp/

左サイドバーに検索条件が置かれていて、条件を選択するごとに検索処理が走って右ペインの検索結果に反映されます。

リアルタイム検索方式は、指定した条件の結果がすぐにわかるため、具体的な検索対象のイメージを持っていなくても、雑多に探すことができます。

メリット
・具体的に見つけたい対象が思いついていなくても気軽に探すことができる
・自分の選択した検索結果を見ながら、徐々に対象を絞り込んでいける
・ざっくり選びたいときに有効

デメリット
・検索結果の反映待ちの時間が発生し得る
 (想定ユーザーの端末スペックや通信環境、実装に用いることのできる技術制約などに注意が必要)
・条件を選択するたびに検索処理が走るので読み込み時間が若干のストレス


条件指定してから検索

画像2

参照元:https://www.athome.co.jp/

これは、モーダルを使用した詳細検索の例です。条件指定してから検索する場合は、絞り込みのための条件を指定してから検索ボタンを実行します。これは、ある程度検索対象のイメージが具体的である場合に有効だと考えられます。

また、バックエンド的にリアルタイム検索に遅延が出るなどのシステム制約が発生する懸念や、対象ユーザーの端末の性能の懸念があるなら、条件指定してから検索する方式良い場合もあります。

メリット
・ある程度、対象を絞り込んだ後の操作に有効
・ある程度、具体的に対象の条件が明らかな場合に有効
・じっくり選びたい対象の場合は有効

デメリット
・検索結果がゼロになる場合がある
(詳細に検索できすぎてしまうため、細かく指定されすぎて検索結果がゼロになる懸念がある。検索結果数はリアルタイム表示するなどの回避策が必要。)
・サクッと探したいユーザーにとっては、検索ボタンを押す手間も増えるため冗長な場合も考えられる。

検索方式の2つのパターンを整理してみました。どちらが良い悪いではなく、どちらも一長一短あるので、想定ユーザーの属性や想定利用シーンに合わせて、柔軟に選んでいきたいものです。

余談ですが、余程絞り込み条件が多くない限りは、モーダルで切り出すよりも、サイドバーにおさめて検索結果と並べてやるほうがユーザーには親切かもしれません。

UIデザイン、エンジニアリングやマネージメント、組織について考えたことなどを徒然と書いております。リアクションいただけると励みになります!