スムーズに検索させよう!複雑な検索をするときの画面やUIパターン

2016.02.09
  • UXデザイン

こんにちは、久保田です。今日はオンラインショッピングや物件検索などで使用される、検索画面や検索時に使われるUIを見ていきたいと思います。検索と一口に言っても、用意されたカテゴリーの中から1点選ぶものから、複数項目を選べる複雑な検索など様々です。そもそも検索はユーザーが目標物にたどり着くための便利な機能ですが、選択項目が多かったり、各条件が関係し合っている場合などは、見せ方を工夫しないと検索そのものが役に立たなくなってしまいます。事例をあげながら見ていきますので、検索機能のデザインをする際の参考にしてみてください。

もくじ

大きく3構成にてご紹介していきます。

  1. よくある検索方法
  2. 複雑な検索(詳細検索)
  3. 工夫されたUIやデザインパターン


1. よくある検索方法

例えば、オンラインショッピングサイトで買い物をするとき、サイトトップページからユーザーはどのように検索をするでしょうか?国内の主要なECサイトを10サイトほど調べてみると、「キーワード入力」や「カテゴリー/目的などの分類」から探す方法が主に使用されているようです。

1-1:キーワードを入力して探す

キーワード検索をよく見かけるのは、amazonなどのショッピングサイトではないでしょうか。すでに欲しいものがあるユーザーは商品名やジャンルなどのキーワードを入力するだけで良く、検索の精度が良ければ確実に探し求めることができます。「まず検索」とさせたい場合、検索窓の位置はページ上部に配置されていることが多いです。

1-2:カテゴリーや目的などの分類から探す

キーワード検索とならびよく見られるのが、カテゴリーや目的から探す方法です。ユーザーがよく使用するカテゴリーや動機が分かっていたり、クライアント側がそう分類している場合に有用です。
事例にあげた賃貸検索の場合は、赤枠の部分になります。勤務先が変わった人は「通勤・通学時間から探す」が便利ですし、住みたい路線がある人や土地勘がある人は「駅・路線から探す」を使うのではないでしょうか。それぞれの目的に合った入り口を用意してあげることで、「どうやって検索したら良いのか」「どんなキーワードで検索すればよいのか」を考えずに検索を始められます。書いてあることを読みながら進んでいくので、心理的にも自分が何をしたい/しているのか理解しながら
検索を始めることができるでしょう。

2. 複雑な検索(詳細検索)

ユーザーが求めているものを具体的に考えていくとたくさんの要望があることが分かります。例えばHOME'Sの場合、先ほどあげたカテゴリー以外にも「家賃」「間取り」「駅徒歩分」など複数の要望があるはずです。そういった複数条件がどのように検索できるようになっているのか見てみましょう。

2-1:独立した詳細検索ページがある

初回検索ページ(カテゴリー検索など)の続きとして、独立した1ページの詳細検索が用意されているケースです。条件を一覧で確認できるので、項目が多い場合に便利です。

2-2:検索結果ページに詳細検索できるUIがある

初回検索時には最小限の条件数で検索させ、あとから詳細検索できるものです。検索はやや面倒な作業でもあるので、入力が負担になり過ぎない配慮としてや、最初から絞り込まれ過ぎてしまうと結果数が少なくなってしまうためにそうなっていると考えられます。
配置位置のパターンとしては、ページの上部か左右に置かれていました。項目数が少ない場合は画面上部にあり、多い場合は左右に配置されているケースが多いようです。

2-2-1:画面の上部に配置

2-2-2:画面の左右に配置

また、ZOZOTOWNのように検索項目を開閉できるようにしておき、複数ある項目を分かりやすくしてあるUIパターンもありました。詳細検索の項目数が多いと縦スクロールが長くなってしまうため、開閉で表示させるのは有効そうですね。


2-3:モーダルで表示する

モーダルで細かい検索条件を一覧表示させるパターンです。(事例:SUUMO)
事例のSUUMOの場合、右下の「さらに条件を追加する」ボタンからモーダルが開かれて詳細条件を設定することが出来ます。
モーダルは、ウインドウサイズが小さい環境で見ている場合、画面内に収まりきらないというデメリットもあるので、その場合はモーダルの中をスクロールさせるなどの工夫が必要になります。そういった点も理解して使用すると良いでしょう。

2-4:別ウインドウで表示する

別ウインドウで表示するものも事例としてはありましたが、気が付かないこともあるのであまり使用されるケースは少ないと考えられます。
--
「 2. 複雑な検索(詳細検索)」 で挙げた詳細検索画面は、複数採用されているWEBサイトが多く見られました。(例えば、独立した詳細検索ページがあり、さらに検索結果ページに詳細検索UIがある...など。)
ユーザーが詳細設定しそうなタイミングに用意してあげると親切ですね。

3. 工夫されたUIやデザインパターン

最後に、検索時に使用されるデザインパターンや工夫されたUIを見てみましょう。使い方次第では、検索以外でも使えるUIです!

3-1:アイコン、イラストを使う

テキストだけでなくイラストと組み合わせる見せ方です。イラストやアイコンがあれば必ずしも分かりやすくなるということではないですが、人の目を捉えるためのアイキャッチとして使用することで、目を引くことが出来ます。ただし、やり過ぎると可読性を失ったり気が散ることになるので、気をつけましょう。

3-2:すでにユーザーが知っている図形を使う

HOME'Sでも出てきましたが、地図のようにすでに知っている形を使用すると、「どこに何があるのか」が把握しやすくなります。日本地図は多くの人が目にしたことがある形なので、何県がどのあたりの位置にあるのか予め知っているため、認識を助ける役割があります。

3-3:選択する度に結果が更新される

HOME'Sの場合は、項目を選択する度に結果が更新されるようになっています。同じ物件検索サイトでも、SUUMOは選択後に再度検索ボタンを押すことで結果が表示されます。これは、どちらのほうがユーザーにとって良いのかだけでなく、都度通信するのかなどサーバー側との兼ね合いが出てくる場合もありますので、実装者と相談して検討が必要です。

3-4:検索できる状態になったらボタンが出現する

たくさん選択項目がある場合、項目一覧の最後(ページ下部など)に実行ボタンがあるとそのボタンにたどり着くまでの時間が長くなってしまいます。じっくり選んでから実行するようなものは項目一覧の後に配置すれば良いのですが、とにかくまず検索して欲しいなど実行するまでの心理的ハードルを下げたい場合や、画面の中に実行ボタンが埋もれないようにしたい場合は、検索できる状態になったタイミングでボタンを出現させるUIが有用です。
検索以外でも、複数選択してお気に入りに登録する場面や、資料請求などのページで見られます。

3-5:スライドバーで設定できる

ZOZOTOWNの詳細設定が面白いと思いました。キーボードで数値も入力できますが、スライドバーで感覚的に設定することができます。特に服は体型によってサイズが様々なので、「もうちょっと」大きい/小さいサイズを検索するときに便利なUIと言えます。

3-6:検索項目に親子関係がある場合

大分類と小分類を2ステップで選択させるものです。大分類を切り替えるとそれに紐づく小分類の表示が変わるので、ユーザーも自分が探したいものがどこにあるのか確認しながら選択ができます。(事例:リクルートエージェント)

3-7:ドロップダウンから検索させる

項目を選ぶと検索内容が表示されるパターンです。考え方としては開閉の見せ方に違いとも言えるかもしれません。(事例:一休.com)

おわりに

おそらく多くの人が毎日一度は行っている「検索」。複雑な検索をさせるときは適切な表現を取り入れて、スムーズに検索できるようにしてあげたいですね。

この記事をシェアする
久保田 さや佳
久保田 さや佳
グラフィック・木工・建築・Webデザインと広く学び、広告代理店を経てシナップへ。使いやすさと結果を出せるデザインに挑戦し続けています。

関連記事

Webサービスを成功に導くシナップのUXリサーチ

2023.10.04
  • UXデザイン

一見良さそうに見えるデザインにも問題点が… デザイン4大原則から考えるUIデザインの完成度を高める方法

2023.06.06
  • UXデザイン
  • UI/UX

カスタマージャーニーマップは何で作る?カスタマージャーニーマップを作るツール3選

2022.10.25
  • UXデザイン

UXリサーチとは?今日からスモールスタートで始めるUXリサーチ

2022.06.14
  • UXデザイン

成長するサービスに必要不可欠なデザインシステム4つのメリット

2021.11.09
  • UXデザイン

成長するサービスを支えスケールを可能にするデザインシステムとは

2021.10.12
  • UXデザイン

いますぐできる利用者のネガティブな感情を取り除き、 ポジティブな感情をもたらすUXデザインのヒント

2021.04.13
  • UXデザイン

春のスタートダッシュを決めよう!~2021年度版:Web業界の新人さんにオススメの書籍10選~

2021.04.07
  • UXデザイン

この3つだけはおさえておきたい。明日から作業効率が大幅アップする!この半年で行われたAdobeXDの新機能(2020年6月-12月)

2021.01.14
  • UXデザイン

2020年春からおさえておきたいデザイントレンド 7選

2020.04.14
  • UXデザイン

参考にしたいデザインシステムまとめ 10選

2019.04.11
  • UXデザイン

簡単に作れて見栄えする!CSSで作るリッチなhover演出

2018.06.21
  • UXデザイン

パーツごとに見るモバイルUI:参考にしたいUIまとめ

2017.09.12
  • UXデザイン

パーツごとに見るモバイルUI:フォームの事例と、UIを考えるときのポイント

2017.09.06
  • UXデザイン

パーツごとに見るモバイルUI:カルーセルの事例と、設計・デザイン時に気をつけること

2017.08.29
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニューを押した際のナビゲーションの表現方法

2017.08.23
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介

2017.08.09
  • UXデザイン

視覚で伝わるインフォグラフィック!面白い事例も作ってみました!

2017.06.01
  • UXデザイン

初めてでも大丈夫!Adobe XDの書き出し機能と使い方

2016.12.14
  • UXデザイン

スムーズに検索させよう!複雑な検索をするときの画面やUIパターン

2016.02.09
  • UXデザイン

よくわかるIoTの仕組み 「モノ」とインターネットを接続するには

2015.11.19
  • UXデザイン

記事をページ分割するメリット・デメリット(モバイルフレンドリー対応)

2015.08.07
  • UXデザイン

モバイルフレンドリー対応:スマホで読まれる文字数は?

2015.07.30
  • UXデザイン

スマホサイトの「続きを読む」は必要か?(モバイルフレンドリー)

2015.05.28
  • UXデザイン

人気記事

このサイトでは、利用状況の把握などのために、プライバシーポリシーに基づき、Cookieを使用してアクセスデータの取得・利用等を行います。