サイト内検索におけるベストプラクティス

Bogdan Sandu

Design Your Wayのデザイナーで編集者。デザインの本をよく読み、トレンド、ベストプラクティス、デザインに対する信念を語っている。

この記事はDesignmodoからの翻訳転載です。配信元または著者の許可を得て配信しています。

UX Best Practices for Using Search on Your Website

Webサイトに膨大なコンテンツがある場合、ユーザーはどうすれば自分が見つけたい情報を手に入れられるかわからなくなることがあります。Webサイトに膨大なコンテンツがある場合、ユーザーは自分が見つけたい情報にたどり着かない恐れがあります。そうしたとき、ユーザーは検索をして、特定の事実や質問を探します。

Webサイトがうまく整理されていない場合、検索バーは重要なナビゲーションの役割を果たします。苛立つユーザーをガイドし、答えを見つける手助けをします。良いWebサイトでは、簡潔で見た目のスッキリとした検索バーがトップページ上に置かれています

最初はわかりやすく効果的だったとしても、Webサイトは常に変化し続けるものです。Webサイト制作者は絶えず新しいコンテンツを追加し、ときには新しいナビゲーションのツールも導入します。これによって整理されたサイトの構造が変わり、コンテンツが見つけにくくなる可能性があります。

その結果がごちゃごちゃした整理されていないものだとユーザーは混乱し、いらいらしてしまいます。コンテンツがサイト内に散らばっていて、探しにくいかもしれません。

検索バーは、執事のようにゲストを落ち着かせ必要なものを与える優れたアシスタントです。よくデザインされたものでなければなりません。検索バーは、ユーザーをあなたのサイトに留まらせる理由になり得ます。うまくいけば、いらいらしながら電源を切るのではなく、検索ワードを入力してくれることでしょう。

検索バーがよくデザインされ、かつ簡単に見つけられるようになっていないと、苛立ったユーザーはすぐにWeb サイトから離れてしまいます。そうなると、競争相手にユーザーを取られて見込みユーザーを失ってしまうリスクがあります。

検索バーが必要なタイミング

Webサイトの規模が大きくなりすぎてユーザーに情報を素早く簡単に提供できないときや、コンテンツがすっきりと整理される以前のサイトには検索バーが必要です。

検索エンジンを使って質問したりキーワードを調べることに慣れているユーザーにとって、検索バーを使うことは簡単です。

ユーザーが探しているものをなかなか見つけられないときに、検索バーは助けになります。

多数のブランドにまたがるECサイトのような、膨大なコンテンツを含むサイトを目指すのであれば、早い段階から検索バーを作成しておくことにメリットがあります。ユーザーが探しているものを見つけることができるようになるのです。

馴染みのある虫眼鏡のアイコンを使用する

検索バーをデザインするときは、誰もが馴染みのある虫眼鏡のアイコンを使うようにしましょう。ユーザーに親しみを沸かせることができます。

欲しい情報が見つからずに苛立っているときに、検索ボタンを探すことでもいらいらさせたくないでしょう。

検索バーを目立たせる

検索バーを置くときは目立つデザインにし、簡単に見つけられるようにしましょう。サイト内で求めている答えが見つけにくいときに、検索バーは素早く簡単に情報を探す解決法となります。アイコンとともにテキストフィールドを表示し、ユーザーがどこで情報を検索すればよいか簡単に見つけられるようにします。

デザイナーは時折、検索バーをどこに置くべきかを議論します。もっとも良い場所はユーザーがここにあるだろうと予測する場所で、ページ上部の右側か、上部の中央がよいでしょう。

ユーザーの直感に近いのは、ページ上部の中央です。YouTubeなどの有名なサイトもこの方法を取っています。

送信ボタンの提供

Googleの検索エンジンと同じように、検索バーは答えを探すためにあります。その範囲があなたのWebサイトになっただけです。そのためユーザーは、質問をタイプした後「Enter」ボタンを押して検索を実行するものだと考えています。

とはいえ、ユーザーがなにをすべきか示す大きな送信ボタンがあると便利です。送信ボタンのエリアを広くとり、ユーザーが狭いエリアをタップせずに済むようにします。

多くのユーザーが、送信ボタンの代わりに「Enter」キーを使います。サイトをデザインするとき、「Enter」キーを押して検索バーを実行することができ、正確な情報を提供できるようになっているかどうかテストしましょう。

検索ボックスをすべてのページに配置する

Webサイトを効率のよいものとするために、すべてのページに検索バーを置きましょう。サイト内がナビゲーションしやすくなります。ユーザーは、検索バーが見つからなければ探している情報も見つけられず、ページから離脱してしまうかもしれません。

ユーザーは探しているものを見つけると喜ぶでしょうが、より多くの情報を欲しいと思うかもしれません。404ページのデッドエンドリンクに検索バーを含めることで、ユーザーが探している情報を見つけ出し、必要に応じてサイトに戻ることができるようになります。

検索バーを十分な長さにする

ユーザーが入力するのに十分な長さの検索エリアが必要です。ほとんどの質問で十分なスペースを確保できるため、27文字かそれよりも長いテキストエリアが理想的です。
cssのemを使って幅を指定するか、一字につき「m」の一文字を使って測りましょう。検索バーのスペースを効果的に使えるような判断に繋がります。

検索エリアを節約したいのであれば、ユーザーが検索を始めてから検索バーが広がるようにしましょう。ユーザーが質問を入力する範囲を確保しつつ、Webサイトをシンプルにする方法です。

オートサジェスト機能の追加も検討する

オートサジェストは、ユーザーが質問内容を入力するのを助けることで検索を手伝う機能です。

ユーザーは質問内容をどう言葉にすればよいかわからないものです。最初の検索で情報を見つけられないとき、質問内容をどう言い換えたり検索結果を絞るのかがわからないことがよくあります。オートサジェスト機能を使えば、ユーザーは効果的にコンテンツを探すことができます。

アドバイス

オートサジェスト機能を作成するときには、ユーザーに役立つキーワードを使用する必要があります。

ユーザーによく使われるようなキーワード、予測可能な文章、そしてよく聞かれる質問を設定しましょう。また、入力内容の自動修正機能も使うことで、ユーザーが本当に探したい単語を調べられるようになります。

オートサジェスト機能による提案ではさまざまなオプションを提示して、ユーザーが望んだ選択肢をみつけられるようにします。これには、特定のキーワードやトピックに関する幅広い質問を含んでください。

キーボードやスクロールキーを使ってオプションを選べるようにしましょう。ユーザーがページの一番下までスクロールしたときに、自動的にトップに戻れる選択肢を与えてください。パソコンのキーボードを使って、ページから離れられるようにもしましょう。

魅力的なフォントを使用してユーザーに情報を示しましょう。ユーザーの注意を引きつけるのに役立ちます。

またユーザーの検索を助けるようなアイコンも作成するとよいでしょう。

まとめ

ユーザーは検索バーがあることによって、コンテンツを探しやすくなり、サイトを素早く効率的に見ることができるようになります。

検索バーはユーザーがコントロール感を持つことをサポートします。検索バーが目立つデザインになっていて簡単に見つけることができれば、ユーザーは情報を探すのに困惑することはないでしょう。

見つけやすくシンプルで使いやすい検索バーを作成すれば、より多くのユーザーがサイトに戻ってくるでしょう。簡単なメッセージや魅力的なアイコンを使って検索バーの機能を補完し、ユーザーがサイトの中で迷う心配がないようにしましょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集

イベント