検索条件を入力するUIを考えてみる

概要

検索条件を設定するUIを考える機会があり、レイアウトパターンをいくつか検討してみました。
それぞれ良いところや向いているものがあるので、要件に応じて選択できるようにしていきます。

レイアウトパターン

2カラム

検索条件を設定するUIは sticky でスクロールしてもずっと表示されていることを想定しています。
このパターンの良いところは、検索中の条件が常に見えていることです。
検索結果などのコンテンツ表示領域は検索条件を設定するUI分だけ狭くなってしまうので、広いコンテンツ表示領域を求められる場合には採用しづらそうです。

画面上部の通常ブロック

これは本当に見慣れたただのブロック要素として縦に並べたものです。
これも sticky で画面上部に固定しても良さそうです。固定する場合は検索条件を設定するUIとコンテンツ表示領域をどれくらいのバランスにするか、または検索条件を設定するときだけ広がるような機能があると良いかもしれません。

画面上部からのオーバーレイ

これは複雑な検索条件の設定が必要なサービスで採用すると良さそうです。
ヘッダーがある場合は、AWSコンソール画面のようにヘッダーから伸びてくるようにしたら良いかと思います。
検索条件を設定する領域を広く取れる上に、検索条件を設定しない間は現在の複雑な検索条件がテキストで表示されるようなことを想定しています。
上記のサンプルでは検索条件を設定しない間のUIの高さが大きめになっていますが、これはサンプルとして見やすくしているだけなので、通常のWebサイトのヘッダーくらいの高さで良いと思います。

検索ボタンからのモーダル

上記のサンプルではヘッダーの検索ボタンをクリックしたら検索条件を設定するUIがモーダルで表示されることを想定しています。
画面が広く使えるので、検索条件の選択肢をセレクトボックスではなくチェックボックスやラジオボタンで一覧表示することに向いています。

サイドバーからのオーバーレイ

サイドバー内にあるメニューにhoverするか、ボタンを押すかなどしてオーバーレイすることを想定しています。
管理画面やサービスのドキュメント系でよくあるサイドバーをそのまま使えそうです。
また、このレイアウトパターンも検索条件を設定するUIとしてかなり広めの表示領域を確保できるので、複雑な検索条件を見やすく並べることもできます。

右側からオーバーレイ

いつでも検索条件を設定するUIにアクセスできるレイアウトの別パターンです。
レイアウトとしてサイドバーが縦に長い印象があるので、横方向で縦に画面の高さいっぱいでオーバーレイするのは相性が良さそうです。

まとめ

それぞれサービスの要件に合っているかどうかを見極めつつ採用していきたいですね。
私がこれから携わるサービスでは複雑な検索条件を設定することを想定しており、かつサイドバーがあればヘッダーも不要かもしれないので画面上部からのオーバーレイで提案してみようと思います。