検索 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 に他スクショとあわせてアップしてあります。リファレンスとして役立ちそうでしたら、活用くださいませ。
▼ 他の UI まとめてみた
▼ 募集中
最近、会社の人以外と話さなくなったので、オンラインで雑談してくれる人募集してます。気軽に声かけてください〜
いただいたサポートは書籍や他の方の note に使います。 また記事の感想をシェアいただけるとシンプルにうれしいです。コツコツ良い記事を書きますのでどうぞよろしくお願いします〜！