search-ux

検索 UX

高速で、柔軟性があり、本当に役立つ検索システムの設計に精通しています。

できること

検索入力、結果、絞り込み、検索結果がゼロの場合の状態、検索をナビゲーションとして使うパターンまで、検索体験全体を設計し、ユーザーが最小限の手間と負担で必要なものを見つけられるようにします。

検索の入り口

検索入力

• プレースホルダーテキストには、検索できる対象を記載します。「検索…」だけではなく、「商品、ブランド、カテゴリを検索」のようにします
• 入力欄の幅は、想定されるクエリの長さを示すものにします。幅が広いと、長いクエリを入力しやすくなります
• 検索画面を開いたときに、検索入力欄へ自動的にフォーカスします
• Enter キーで検索を実行し、タッチ操作のユーザー向けに分かりやすい検索アイコン／ボタンを用意します
• クエリが入力されたら、クリア／リセットボタンを表示します

オートコンプリートと候補

• 入力の手間を減らすため、2〜3文字の入力後に候補を表示します
• 最近の検索、トレンド／人気の検索、予測される入力候補の順に表示します
• 候補内のクエリ語を強調表示します（入力済みの部分を太字にします）
• 候補は5〜8件に制限します。多すぎると選択時の負荷が増します（ヒックの法則）
• キーボードで候補を移動できるようにします

ナビゲーションとしての検索

検索で何かを探すのではなく、移動するユーザーもいます。「設定」「請求書」「プロフィール」などです。この使い方を想定して設計します。

• 候補にナビゲーション先を含めます
• 完全一致するページを検索結果の上部に表示します
• 移動先が存在する場合、ナビゲーション目的のクエリに対して「結果なし」と表示しないようにします

検索結果

結果のレイアウト

• リスト：ほとんどのコンテンツタイプで使え、一覧性に優れています
• グリッド：サムネイルが主な手がかりとなる、画像、商品、カードなどのビジュアルコンテンツに適しています
• タイプ別のグループ化：ファイル、人物、メッセージなど、異なるコンテンツタイプにまたがる検索結果に適しています
• 結果件数を表示します：「『オンボーディング』の検索結果：142件」
• 複雑なコンテンツタイプでは、どのフィールド（タイトル、本文、タグ）が一致したかを表示します

検索結果の項目

各検索結果には、次の情報を表示します。

• タイトル（クエリ語を強調表示）
• 一致した箇所の抜粋（クエリ語を強調表示）
• 判断に役立つメタデータ（日付、作成者、カテゴリ、価格、ステータス）
• クリックするかどうかを判断するのに十分な情報。ただし、クリックする必要がなくなるほど多くしないこと

順位付けと関連性

• 新しさ、人気度、タイトルの完全一致には高いスコアを付けます
• パーソナライズ（ユーザーの最近のアクティビティ、役割、所在地）により、ログイン中のコンテキストでの関連性が高まります
• 重要な場合は、順位付けの基準をユーザーに示します。「並べ替え：新しい順」のように表示し、変更できるようにします

フィルタリングと絞り込み

• 考えられるすべてのフィルターではなく、現在の検索結果に関係するフィルターを表示します
• フィルターの件数を示します：「タイプ：記事（24）、動画（8）」
• 適用中のフィルターは表示し、個別に解除できるようにします
• 複数のフィルターが適用されている場合は、「すべてのフィルターをクリア」を表示します
• 属性を複数同時に絞り込むファセット検索は、カタログの項目数が多い場面に適しています

検索結果がゼロの場合

最も重要でありながら、見過ごされがちな状態です。

• 何を検索したかを明示します：「『onbording』の検索結果はありません」
• よくある入力ミスと思われる場合は、修正候補を提示します
• 関連する語句や、より広い意味の語句を提案します
• カテゴリを閲覧する、サポートに問い合わせる、人気の項目を見るなどの代替手段を提示します
• 空白のページは決して表示しません。検索結果がゼロの状態は、ユーザーの離脱を防ぐ機会です

検索分析

• 上位のクエリ：ユーザーは何を検索していますか？検索結果の不足は、コンテンツやナビゲーションに不足があることを示します
• 検索結果がゼロのクエリ：ユーザーが検索しても、システムで見つけられないものは何ですか？
• 絞り込み率：ユーザーがクエリを変更したり、フィルターを適用したりする頻度はどれくらいですか？
• クリックされた順位：最もクリックされる検索結果の順位はどこですか？下位の結果がクリックされる場合、順位付けに問題があることを示します
• 検索後の離脱：検索した後に離脱するユーザーです。多くの場合、検索結果がゼロ、または関連性が低いことが原因です

ベストプラクティス

• 検索結果がゼロ件の場合は、検索の失敗ではなくUXの課題として捉えます。検索結果がゼロ件になるクエリは、すべて対応すべき課題です
• 省スペースのためにモバイルから検索機能を削除しないでください。モバイルでは、検索が主要なナビゲーションであることがよくあります
• ユーザーが入力し直さずにクエリを調整できるよう、入力欄にクエリを保持します
• クエリを記録して、コンテンツ、IA、ナビゲーションに関する判断に役立てます。検索は、得られるユーザーフィードバックの中で最も率直なものです
• 誤字、同義語、複数形、部分一致に対応する、柔軟な検索を設計します