検索 UI まとめてみた。

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

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

フリーワード型

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

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

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

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

サジェスト型

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

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

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

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

グループ型

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

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

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

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

あとからフィルター型

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

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

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

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

条件指定型

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

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

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

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

レコメンド型

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

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

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

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

おわりに

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

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

おわりのおわりに

他のパターンを見つけたら都度追記する。
(不動産系アプリとか調べてない)

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


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

サポートいただけた場合、書籍や note に使いたいと思います! ただ、note はあたまの整理とノウハウ共有が目的なので、もし参考になったよ、という場合は投げ銭ではなく SNS 等でシェア or スキ いただけると嬉しいです〜

励みになります!
268

UI まとめてみた。

いろんな UI のリファレンスをパターン整理したもの。
21つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。