概要
様々なWEBサイトにおいて、検索ボックスのUI/UXについて調査を行い、WEBサイト作成のためのUI検討の参考になる様にまとめていきます。夏休みの自由研究みたいなものです。
注意点として、2023年8月時点の調査のため、今後機能が追加されたりUIが大きく変わる可能性はあります。
制限
- 調査で使用する端末はPCで統一します。（スマホやタブレットによるUI/UXの観点は、PCとは意図が変わってくるのため考慮しません。）
- 同サイト内に検索ボックスがある場合は、1つに絞り調査します。
- 検索ボックスは、キーワード検索の部分だけを調査対象とします。（フィルター機能などは考慮しません）
技術系
1. Qiita
記事検索ページ: https://qiita.com/search
読み取れるUI/UXの内容としては以下の通りです。
| UI/UX | 詳細 |
|---|---|
| 虫メガネアイコン | あり |
| プレースホルダ | あり |
| ホバー時 | 検索履歴のツールチップが表示され、履歴から選択可能 |
| 選択時 | 枠線協調 |
| 検索実行 | Enterキー |
| 大文字小文字の判別 | 区別しない |
| ブラウザバック | 前回の検索に戻れる |
| 検索内容 | 全文検索 |
| 検索結果 | キーワード部分がハイライト |
| 検索オプション | 検索オプション |
| AND検索 | あり |
| その他 | オプションのアイコンから、検索オプションのツールチップが表示され、クリックで指定できる |
調査結果
見た目は、シンプルで使いやすく「検索ボタンが無いこと」や「検索オプション機能」は、ある程度ITリテラシーの高い技術者目線で使いやすいようにUIが実装されていました。
また、InstallとインストールやGCPとGoogle Cloud Platformなどのように、表記ゆれを解決するような検索機能があったらいいなと思いました。
2. Zenn
記事検索ページの検索BOX
読み取れるUI/UXの内容としては以下の通りです。
| UI/UX | 詳細 |
|---|---|
| 虫メガネアイコン | あり |
| プレースホルダ | あり |
| 選択時 | 枠線協調 |
| 入力中 | Enterで検索が表示とテキストがされる |
| 検索実行 | Enterキー |
| 大文字小文字の判別 | 区別しない |
| ブラウザバック | 前回の検索に戻れる |
| 検索内容 | タイトルとタグやユーザー名など |
| 検索結果 | アニメーションで表示 |
| AND検索 | あり |
調査結果
デザインやアニメーションがオシャレですが、Qiitaに比べると検索機能は少ないです。
特に複数キーワードでAND検索を行ってもタイトルでしかHITしないので、表示されるコンテンツ量が少なく不便に感じました。今後の機能拡張に期待です。
飲食系
3. ぐるなび
TOPページの検索ボックス
読み取れるUI/UXの内容としては以下の通りです。
| UI/UX | 詳細 |
|---|---|
| 虫メガネアイコン | あり |
| プレースホルダ | あり |
| 選択時 | 枠線協調 |
| 入力中 | 検索の履歴が表示され、選択することができる |
| 検索実行 | 検索ボタン |
| ブラウザバック | 前回の検索に戻れる |
| 検索内容 | タイトルとジャンルなど |
| AND検索 | よく分からない |
| 表記ゆれ | 対応している。例）「すきやき」→「すき焼き」 |
調査結果
技術系記事のサイトにくらべ、サジェスト機能やキーワード履歴が可能でした。
「Enterキーで検索実行」がなかったり、「複数キーワード指定方法」が良くわからなかったり、使いにくい点が何点かありました。
4. 食べログ
TOPページの検索ボックス
読み取れるUI/UXの内容としては以下の通りです。
| UI/UX | 詳細 |
|---|---|
| 虫メガネアイコン | あり |
| プレースホルダ | あり |
| 選択時 | 枠線協調、検索履歴を表示 |
| 検索履歴削除 | ×アイコンで削除可能 |
| 入力中 | サジェストが表示され、選択することができる |
| 検索実行 | 検索ボタンとEnterキー |
| ブラウザバック | 前回の検索に戻れる |
| 検索内容 | タイトルとジャンルなど |
| AND検索 | あり |
| 表記ゆれ | 対応している。例）「すきやき」→「すき焼き」 |
| 検索ボックスのクリア | ×アイコンでクリアできる |
調査結果
ぐるなびより、サジェスト機能やキーワード履歴がとても充実しており、
なんとなく入力した「魚」というキーワードから「海鮮」というキーワードが表示されたり
直近の一度行った検索は、クリックのみでたどり着けるようになっていました。
さらに検索履歴が削除できたり、痒い所に手が届く感じがとても良いと感じました。
SNS系
5. Twitter
URL：https://twitter.com/explore
話題を検索画面
読み取れるUI/UXの内容としては以下の通りです。
| UI/UX | 詳細 |
|---|---|
| 虫メガネアイコン | あり |
| プレースホルダ | あり |
| 選択時 | 枠線協調、検索履歴を表示 |
| 入力中 | 検索の履歴が表示され、選択することができる |
| 検索履歴削除 | ×アイコンで削除可能 |
| 検索実行 | Enterキー |
| ブラウザバック | 前回の検索に戻れる |
| 検索内容 | 全文検索 |
| AND検索 | あり |
| 表記ゆれ | 対応している。例）「すきやき」→「すき焼き」 |
| 検索ボックスのクリア | ×アイコンでクリアできる |
| 検索オプション | 高度な検索の使い方 |
調査結果
SNSだけあって、サジェスト機能がリアルイムのトレンドになっていることや、検索キーワード決定後、「話題のツイート」や「最新」のタブに切り替えて意図に合わせた検索結果を表示できることが特徴だと感じました。
まとめ
「技術系」と「飲食系」と「SNS系」の5サイトについて検索ボックスのUI/UXについてまとめてみました。今回、調査した以外業界だと、検索ボックスの仕様が変わってくると思うので、第二弾として調査してみたいと思います。
検索ボックス1つでUI/UXの要素って意外と多いですよね。
そして、検索ボックスの機能の指標がある程度分かってきたので、別の記事でまとめられたらいいなと思います。
あと、5年後10年後どのようにUI/UXが変わっていくかも興味がありますね。
以上です。ここまで見ていただきありがとうございました。
追記
第二弾書きました！