検索 UI まとめてみた
見出し画像

検索 UI まとめてみた

あき - 良いもの作って正しく届ける

検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。

パターン一覧
1. フリーワード型
2. サジェスト型
3. グループ型
4. あとからフィルター型
5. 条件指定型
6. レコメンド型

フリーワード型

キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。

画像1

良いところ
シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。

イマイチ
キーワードが間違っていると、対象へたどり着けないことがある。

感想
タスク管理やシンプルなファイル管理に多く採用されていた。
複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。

サジェスト型

キーワードを入力すると、検索候補が表示。

画像2

良いところ
キーワードを正確に把握していなくても対象へたどり着ける。サジェストキーワードである程度ユーザーを誘導できる。

イマイチ
そもそもキーワードが思い浮かばない場合は NG。

感想
漠然とした目的はあるが、その達成方法はわからない。とりあえず検索してみる、のような UX で多く採用されていた。たとえば、Amazon や Google の検索など。サジェストキーワードで、質の高い検索結果へ誘導できるので、ユーザー満足度アップにも効果的。キーワードを把握している場合も入力の手間が省けて便利。

グループ型

検索結果が複数グループにわかれて表示。Android だとタブ UI。

画像3

良いところ
すべての検索が一箇所で済むのでシンプル。何度も検索し直す手間が省ける。グループ別に整理され、リストの見通しもよくなる。

イマイチ
グループ同士の役割が近いと混乱を招く。たとえば、タスク管理のプロジェクトとラベルなど。どのグループにあるか探す必要が発生するので、手間。

感想
検索結果から回遊が発生しやすそう。たとえば、note で「デザイン」でキーワード検索した場合、ノートをみて、マガジンみて、ハッシュタグやユーザーをみて、という風に回遊するユーザーが多くなりそう。

あとからフィルター型

検索結果にフィルター機能がついている。並び替えや絞り込みができる。

画像4

良いところ
検索前の UI がフリーワードと変わらないのでシンプル。必要になったときだけ、補助的に利用できる。

イマイチ
毎回同じような条件で検索を繰り返す場合には、タップ数が増えるので手間。最初に条件指定してしまったほうが早い。

感想
まずはシンプルに検索する。見つからなければ、より対象を絞る、になっているので、理にかなっている。色んな角度や粒度でみたいときに、条件指定型と異なり、再検索している感覚が少ない(画面遷移が発生しないので)。気軽に使えそう。

条件指定型

検索前に条件を指定する。

画像5

良いところ
検索結果を事前に絞り込める。検索結果が求めるものに近づく。範囲指定で検索できる。

イマイチ
UI が複雑かつ重い印象になりがち。

感想
条件が多いと、リストが続いて単調。条件を増やしすぎないようにする。楽天市場の例は、こだわり派には良さそう。しかし、なんとなく探してるユーザーには、レコメンド型のほうが良さそう。画面占有率が高くなりがちなので、何を優先すべきか気をつける。

レコメンド型

ユーザーが入力する前におすすめコンテンツを表示して誘導する。

画像6

良いところ
ユーザーを誘導できる。

イマイチ
誘導が強引すぎると嫌われそう。コンテンツが多くて逆に迷う。

感想
目的が曖昧なユーザーへは有効そう。強引になりすぎないように気をつける。また本来はユーザーを適切なコンテンツへ誘導する、が目的なのでコンテンツを増やしすぎて、迷わせないように気をつける。画面占有率も高めなので、ユーザー側での条件指定とバランスを考える。重く単調にならないように気をつける。

おわりに

いくつかのパターンに分類したが、全部きれいに分類できるわけではない。実現したい UX をもとに、いくつかのやり方を組み合わせると良さそう。

パターン一覧
1. フリーワード型
2. サジェスト型
3. グループ型
4. あとからフィルター型
5. 条件指定型
6. レコメンド型

参考
Pinterest に他スクショとあわせてアップしてあります。リファレンスとして役立ちそうでしたら、活用くださいませ。

▼ 他の UI まとめてみた

▼ 募集中
最近、会社の人以外と話さなくなったので、オンラインで雑談してくれる人募集してます。気軽に声かけてください〜


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
あき - 良いもの作って正しく届ける

いただいたサポートは書籍や他の方の note に使います。 また記事の感想をシェアいただけるとシンプルにうれしいです。コツコツ良い記事を書きますのでどうぞよろしくお願いします〜!

ありがとうございます!よければシェアもお願いします!
あき - 良いもの作って正しく届ける
プロダクトマネジネント、UX / UI デザインを中心に "良いもの作って正しく届ける" ための情報を発信してます。 良いプロダクトを作りたい人の役に立つかも。 家計簿 Zaim → SHOWROOM → Wantedly