📘️ Book Club：検索機能の重要性と、適切にデザインおよび最適化されたインターフェースの例

noko

2022年2月14日 07:20

適切にデザインおよび最適化された検索インターフェースはユーザーがまだ発見していないニーズに接続する強力なポータルになります。また、ユーザーのエンゲージメントを維持し、探しているものを簡単に見つけるのに役立つ優れた方法です。

今回は優れた検索機能のUIデザインが施されているサイトを参考に検索機能の重要さについて学んでいきたいと思います。

検索機能のUIデザインが重要な理由

今日、ほとんどのサイトには検索バーがありますが、多くのサイトは全体的な検索エクスペリエンスを提供していません。

優れた検索は、検索バーを超えて、さまざまな機能、アウトカムの関連性を含んでいます。では、なぜ検索UIに注意を払うことが重要なのでしょうか？

検索インターフェースは、ユーザーがサイトで最初に操作するものかもしれません。それはあなたの提供するプロダクトやサービス、またブランドの認識、そして検索インターフェースは全体的な経験を形作るかもしれません。

さらに、検索するユーザーは、閲覧するユーザーよりもコンバージョンに至る可能性が200％高くなると言われています。

逆に検索インターフェースが使いにくく、役に立たない結果が得られる場合、サイトは検索のメリットを受け取ることができません。サイトの検索の機能とUIを最適化すると、訪問者の満足度が高まり、コンバージョン、エンゲージメント、粘着性が向上します。

便利で魅力的なエクスペリエンスを提供するために微調整できます。例えば検索バーのデザインと機能、検索結果ページのレイアウトと機能、検索フィルターとファセットなどはすべて、特定のユースケースに合わせて最適化できます。

💡ファセット検索とは、あらかじめWebサイト側が用意した検索条件をユーザーが選択することで、Webサイト内のコンテンツを絞り込めるナビゲーションの仕組みのことです。

ユーザーに最適なサービスを提供するために検索UIをカスタマイズしたサイトの例を見てみましょう。

マイクロコピーに関する役立つヒントと提案

マイクロコピーは、ユーザーがインターフェイスをナビゲートして使用するのに役立つ、サイト周辺の簡潔で役立つテキストの用語です。

マイクロコピーは、ユーザーがさまざまな検索コンポーネントの意図を理解できるようにすることで、サイトの使いやすさを向上させます。

Birchboxは、検索バー内のマイクロコピーを使用して、ブランドと製品の両方を検索すると結果が得られることをユーザーに伝えます。

このサイトでは、検索バーのすぐ下にある検索候補にマイクロコピーも使用しています。これは、顧客が見逃しにくい場所でターゲットブランドを強調することにより、企業がビジネス目標を推進するための戦略的な方法になります。

一貫した検索バーの配置

一部のサイトでは、ナビゲーションが製品を強調するための主要な方法です。それでも、検索を怠ってはなりません。

カルティエのサイトのように、検索は配置とスタイル設定で重視されない場合がありますが、ユーザーが検索に慣れている場所に検索バーを配置することは依然として重要です。

カルティエの検索バーはサイズが小さく、コントラストが最小限に抑えられていますが、ページに関係なく、右上隅のユーザーが期待する場所にあります。

オートコンプリートまたはクエリの提案

オートコンプリートまたはクエリの提案は、予測検索または自動提案とも呼ばれ、ユーザーが入力するときにリアルタイムでユーザーに提供される検索の推奨事項です。これらの提案は、ユーザーのクエリやサイトで人気のあるクエリに関連しており、検索プロセスを高速化し、クリックスルーを増やすことでユーザーのニーズを満たすことを目的としています。

ユーザーがManoManoの検索バーに入力すると、特定の製品の提案とより幅広いカテゴリの提案の両方が提供されます。ユーザーが最適なオプションをすばやく選択できるように、提案間の違いは太字で示されています。

検索バーからのインスタントフィルタリング

検索フィルターとファセットは、ユーザーがサイトをナビゲートするときに意図を絞り込むのに役立ちます。通常検索ページに表示されるファセットフィルターは、ユーザーが事前定義されたカテゴリで検索を絞り込むのに役立ちます。

これらは、大規模なカタログや、製品にさまざまな属性があるカタログに非常に役立ちます。ユーザーをガイドするために、JBHi-Fiは検索バーからのドロップダウンでファセットを活用します。顧客がテレビなどの幅広いカテゴリのアイテムを検索すると、ユーザーが検索エクスペリエンスの最初から検索を指定するのに役立つフィルターカテゴリが表示されます。

横断検索による包括的な結果

Federated search (横断検索)
横断検索は、1つ以上の検索エンジン上に構築された検索アプリケーションを介してさまざまなソースから情報を取得します。ユーザーは、フェデレーションに参加している検索エンジン、データベース、またはその他のクエリエンジンに配布される単一のクエリ要求を行います。

横断検索を使用すると、使いやすいインターフェイスで、製品、ドキュメント、製品ガイド、記事などのさまざまな結果をユーザーに提供できます。これは、顧客エンゲージメントの向上やコンバージョンの増加など、会社に多くのメリットをもたらします。

Birchboxサイトで数回のキーストロークを行うだけで、関連する製品、トップブランド、有用なカテゴリ、および関連記事が顧客に提示されます。これにより、より包括的な検索エクスペリエンスが作成され、検索時間を大幅に短縮できます。横断検索は、キュレーションの背後にある思考のレベルがユーザーに明らかであるため、ブランドに対する顧客の認識を強化することもできます。

ダイナミックなブラウジング体験のためのファセット

ナショナル・ジオグラフィック・エクスペディション

ファセットは検索結果を絞り込むのに最適ですが、探索的なナビゲーションエクスペリエンスの強力な基盤にもなります。National Geographic Expeditionsはファセットを活用して、検索バーなしでコンテンツをガイドが使用する独自のブラウジング体験を実現します。遠征のホームページでは、ユーザーは目的地、旅行の種類、出発月で旅行を検索できます。

結果ページでは、価格、旅行の長さ、興味などの側面で検索をさらに絞り込むことができます。これらのファセットは簡単に調整でき、ユーザーが最初から検索を開始する必要はありません。これはすべて、ユーザーが検索バーに入力しなくても実行できます。最終的に、検索UIは、ユーザーのニーズとユーザーのためにキュレートしたいエクスペリエンスに最もよく合うようにデザインする必要があります。

便利な「結果なし」ページ

Under Armour —

一般に、「結果なし」ページはUXの行き止まりであり、検索を最適化することで回避できます。ただし、ユーザーがWebサイトに関係のない製品やコンテンツを検索したり、タイプミス許容システムでは回復できないわかりにくい検索クエリを入力したりする場合があります。これが発生した場合、ユーザーが検索と検出のプロセスにすばやく戻るための経路を提供することが重要です。

Under Armourのサイトでは、このような状況が発生した場合、ユーザーには、元のクエリに関連する検索の推奨事項と特定の製品の推奨事項が表示されます。彼らの元のクエリは失敗したかもしれませんが、検索は彼らが興味を持っているかもしれない何か新しいものを発見するように微妙に彼らに指示します：

ユーザーをニーズにスムーズに導く検索UIをデザインしよう。

検索UIをデザインするときは、ユーザージャーニーと探索プロセスのすべてのステップを考慮する必要があります。ユーザーが期待するレベルのサービスを提供するには、柔軟でカスタマイズ可能な方法ですべての業界標準機能を提供できるサービスパートナーとして検索する必要があります。

私も色々勉強中なので、皆さまのご意見・ご感想をお聞かせください。
お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。主にデジタル・プロダクトの制作に携わっています。

[参考資料]

この記事が気に入ったらサポートをしてみませんか？