マイクロコピーによるより良い検索UX

公開: 2022-03-10
クイックサマリー↬大規模なeコマースサイトでは、検索エクスペリエンスがますます重要なツールになっています。 思慮深いマイクロコピーと適切なコンテキスト化により、ユーザーのエクスペリエンスを大幅に向上させることができます。

ウェブ検索の重要性を誇張するのは難しいです。 検索はインターネット自体と同じくらい古く、ある意味ではさらに古くなります。 適切に設計された検索は、あなたとあなたのユーザーの両方に利益をもたらします。 コンバージョンが増加し、バウンス率が低下し、ユーザーエクスペリエンスが向上します。

検索は、収益の大部分が検索主導のセッションから得られる大規模なサイトやeコマースエクスペリエンスで特に重要です。 調査によると、ユーザーの最大50%がウェブサイトの内部検索バーに直接アクセスし、15%が階層メニューの閲覧よりも検索機能の使用を完全に好んでいます。 これは、サイトの情報アーキテクチャを決定するために必要なすべての愛情と配慮のために、検索エクスペリエンスの設計にも同様に多くのことを行う必要があることを意味します。

問題を複雑にしているのは、ユーザーの検索スキルがせいぜい薄っぺらで、最悪の場合は無能であるという事実です。 検索エンジンから良い結果を得るには、多くの場合、ユーザーがめったに行わない複数の試行と再定式化が必要です。 また、検索テクノロジーが時間の経過とともに向上するにつれて、ユーザーは、クエリに欠陥があったとしても、検索結果を質問への回答として受け入れる可能性が高くなります。 検索を好むユーザーは、すばやく移動し、見慣れた長方形のページをスキャンし、探しているものが見つからない場合はすばやくバウンスする傾向があります。

これらのユーザーと「迅速に」通信することは、特殊なツールであるマイクロコピーを必要とするトリッキーな作業です。 「マイクロコピー」という名前は、それ自体の重要性を裏切っています。 それは小さいかもしれませんが、大きな成功はしばしばそれにかかっています。 声が輝き、良い印象を与え、実用性とブランディングが交差する場所です。 そのことを念頭に置いて、マイクロコピーとコンテキスト化によって検索エクスペリエンスを大幅に向上させることができる多くの方法を詳しく見ていきましょう。

ジャンプした後もっと! 以下を読み続けてください↓

検索の配置とラベル付け

ヤコブの法則に従って、検索バーを設計するときの最初の本能は、右上隅または左上隅に長方形のボックスを配置することです。 ラベルまたはA11yに適したプレースホルダーテキストを追加し、「検索」という送信ボタンを含める必要があります。

リンクの後ろに検索バーを非表示にしたり、プレースホルダーテキストを省略したり、プレーンテキストの代わりに虫眼鏡アイコンCTAを選択したりすることは、すべて適切なコンテキストでの有効な設計上の決定です。 検索はブラウジングよりもインタラクションコストが高いため、検索バーの機能を不必要に抽象化していないことを確認してください。

すべての障壁は、デザイナーとして取るに足らないものであっても、UXと収益に悪影響を与えるリスクがあります。 ユーザーが虫眼鏡アイコンを「ズーム」ボタンと混同するリスクがある場合は、それを軽減する必要があります。

プレースホルダーテキスト

プレースホルダーテキストは、エクスペリエンスを向上させるのに最適な場所です。 それは情報提供であり、ブランド表現の場であり、揺らいでいるユーザーを正しい方向に導くことができます。 「検索」とだけ表示される検索バーを見ると、機会を逃していることがわかります。

では、より良いアプローチは何ですか? サイトによって異なります。 まず、ビジネスの目標、ブランド、およびユーザーの既存の習慣をよく理解してください。 次に、あなたが最も役立つ方法を検討します。

ユーザーを微調整する

示唆に富むアプローチは、ユーザーの不安を軽減することができます。 ユーザーが複数の方法で検索できるという事実をユーザーに知らせます。特に、ユーザーがすべての製品やサービスに精通していない場合はそうです。 ASOSは、製品やブランドに加えて、インスピレーションを探すことを提案しています。

ASOSWebサイトの検索バー
(画像ソース:ASOS)(大プレビュー)

情報を提供する

送信を押したときに何が得られるかをユーザーに正確に伝えます。 大規模な写真アーカイブの検索に完全に専念しているサイトであるShutterstockでは、このプレースホルダーテキストは、ロゴと組み合わせるとタグラインとして巧妙に機能します。

ShutterstockWebサイトの検索バー
(画像ソース:Shutterstock)(大プレビュー)

ブランドを強化する

Home Depotの検索バーはユーザーを導きませんが、代わりに、ブランドの声のガイドラインに沿っていると確信している、役立つ個人的なトーンを示します。 これは、製品カタログのサイズを考慮すると、おそらく最良のアプローチです。

ホームデポの検索バー
(画像ソース:ホームデポ)(大プレビュー)

検索ログを活用する

プレースホルダーテキストを最適化する最善の方法がわからない場合は、検索ログデータベースから始めることをお勧めします。 これらの結果を分析する方法を学ぶことは、役立つコンテンツデザインを策定するときに非常に価値があります。 人々があなたのサイトを検索するために使用する語彙を直接見ることができ、さらに重要なことに、あなたが提供するものとあなたのユーザーが探しているものとの間のギャップを見ることができます。

提案された、関連した、および最近の検索

検索プロセス中、あなたのコピーは、圧倒されることなく、途中で可能な限り多くの助けを提供する必要があります。 これには、明らかな「キャンセル」または「クリア」ボタンから、後で表示するために各ユーザーの最近の検索をログに記録するまでのすべてが含まれます。 これらの機能に付随する適切なマイクロコピーを選択するときは、ブラウンソースを少し加えます。

自動提案

検索バーを使用するユーザーは、特定の何かを探しているためにそうしています。これにより、自動提案は価値のある(そしてますます期待される)ツールになります。 この場合の特異性は、「女性の灰色の靴のサイズ9M」のように焦点を当てるか、「私の近くのサンドイッチ店」のように制限のないものにすることができます。

自動提案はまた、悪い結果を返すリスクを減らし、ユーザーの精神的な努力を軽減し、最も人気のある製品を表面化する機会を提供します。

歯ごたえ
(画像ソース:Chewy)(大きなプレビュー)

多くの場合、これらは追加のコンテキストやコピーをまったく必要としませんが、上記の例に示すように、ユーザーが入力するときに検索バーの下にリストすることができます。

関連検索

結果ページに関連する検索を表示することは、邪魔にならずにユーザーをガイドするのに役立つもう1つの方法です。 一般的なパターンは、結果の上にある元のクエリに関連するいくつかのクリック可能なキーワードを提供することです。 「他のユーザーが検索した」と書かれた小さなコピーは、社会的証明を検索エクスペリエンスに組み込むための良い方法です。

最近の検索

テクノロジーで許可されている場合は、最近の検索を保存して再表示することも、ユーザーのメモリ負荷を軽減するためのもう1つの方法です。 必ずコピーを使用してコンテキストを追加してください。ただし、これは次のように簡単です。

メイシーズのウェブサイトの検索バー
(画像ソース:メイシーズ)(大プレビュー)

結果の処理

検索結果を表示するときに必要と思われるコピーが2つあります。

  1. クエリ自体。
    検索バーが目立つ場合は、ここに表示できます。 「{{terms}}の結果」を示すH1を作成することもできます。
  2. 結果の数。
    結果がページ付けされている場合は、ページ数も含めることができます。
REI Co-opWebサイトの検索バー
(画像ソース:REI Co-op)(大プレビュー)

結果がありません

自分のエラーによるものであるかどうかにかかわらず、ユーザーは必然的にある時点で「結果なし」ページに遭遇します。 幸いなことに、これを適切に処理する方法があります。 実際、適切なアプローチがあれば、この行き止まりは実際にコンテンツ発見の絶好の機会になる可能性があります。

まず第一に、結果が得られない場合にユーザーが検索を絞り込むことを期待しないでください。少なくとも、それを促進するUIがない場合はそうではありません。 ユーザーはクエリを再定式化することに消極的であり、そうしようとすると問題が発生します。 彼らは、提示された情報に関与してそこからそれを取得するか、タスクを完全に放棄する可能性が高くなります。 (最後にクリックしてGoogle検索結果の2ページ目に移動したのはいつですか?)

とは言うものの、少しのコピーライティングとコンテキスト化によってエクスペリエンスがどのように向上するかは簡単にわかります。 Nielsen Norman Groupには、結果なしのSERPを処理する方法に関する包括的なガイドがあります。要点は次のとおりです。

  • 結果がないことを明確にします。
    かわいくなり、誤ってリードを埋めてしまうのは簡単です。 また、「結果なし」のメッセージを意図的に非表示にして、エラーを完全に難読化することも魅力的です。 いずれにせよ、ユーザーをだまさないでください。
  • 前方へのパスを提供します。
    検索クエリを絞り込む方法(スペルのチェックなど)を提案し、ユーザーとつながる可能性が最も高い人気のあるコンテンツや製品へのリンクも提供します。
  • 正しいトーンを打ちます。
    ブランドの声を使用しますが、イライラしたユーザーに受け入れられない可能性のあるユーモアで状況を悪化させるリスクを冒さないでください。

また、ユーザーがクエリをまったく入力せずに誤って送信したために、空のSERPが発生する可能性があることに注意してください。 たとえば、データベース内のすべてのアイテムを返すのではなく、このシナリオのコンテンツプランも用意する必要があります。

まとめ

優れた検索エクスペリエンスを作成するには、思いやりが必要です。 デザイナーとして、私たちはおそらく何百もの異なるWeb検索エクスペリエンスを使用および作成してきたので、プロセスを簡単に実行できます。 しかし、プロセスのすべての小さなステップ(すべてのマイクロインタラクションとすべてのエッジケース)を検討する場合、私たちが行う小さな変更は、エクスペリエンスに大きな影響を与える可能性があります。 次回、検索問題の視覚的な解決策にたどり着いたときは、代わりに単語を使用することを検討してください。

SmashingMagの詳細

  • コンテンツプランニングワークショップを実行する方法
  • コピーライティングがユーザー調査からどのように利益を得ることができるか
  • 言葉のデザイン:コピーがデザインの問題である理由
  • 冗長で古くて些細なコンテンツのROTに対処する方法