モバイルにおいて、「検索」は最も基本的なアクションであり、利益のあがるアプリやサイトを作るのに重要な要素です。当たり前ですが、ユーザーが商品を見つけられない限り、その商品は売ることはできません。ユーザーは商品を探し出し、その商品の情報を見る際、アプリをスムーズに操作できることを期待し、出てきた検索結果の質に基づいて即時にアプリの価値を判断をします。
優れた検索というのは、ユーザーが欲しいものを素早く簡単に見つけることを促します。この記事では、それをどのように可能にするかを紹介していきます。
1. 検索の配置を目立たせる
ユーザーは検索機能を探すとき、せわしなく、雑に画面内を見回します。大抵の場合「文字を入力できる四角い枠」を探しながらページにざっと目を通します。
ここでの目的：明確で素早く認識できる検索バーをデサインする
目立つ検索フィールドの表示
検索は、ECのアプリやサイトで基本の機能であり、ユーザーが最速で見つけられる様に、目立つ様に表示しましょう。検索ボックスが目立たない場所にあるアプリでは、ユーザーのフラストレーションになるし、動作の速度が遅くなります。
左図：検索機能が、メニューの後ろに隠れてしまっています。参照：thinkwithgoogle
ECのアプリは、ホーム画面の一番上に検索フィールドを設置します。（もしホーム画面が長い場合は一番下にもう一つ設置します。）たくさんの項目があるアプリは、デフォルトで検索フィールドを表示すると、分かりやすく、迅速に使えます。
スクリーンの一番上に、文字が入っていない検索ボックスがあると見つけやすいです。
検索ボックスに虫眼鏡アイコンを添える
ユーザーから世界中に認知されているアイコンはそんなにないですが、虫眼鏡アイコンは、そのようなアイコンのひとつです。ユーザーは、文字でのラベルがなくても、虫眼鏡アイコンを「検索」の意味だと認識します。
複雑でない図の方が認識の速度を上げるので、図のアイコンでも、最もシンプルな虫眼鏡アイコンを使うのが良いでしょう。
虫眼鏡アイコン
スコープバー (Apple iOS のみ)
iOSでは、検索機能をスコープバーに加えることができ、それによりユーザーは、明確な定義された条件やカテゴリーで、検索機能を即時に選ぶことができます。
スコープバーに検索機能を加えることができ、そうすることで検索の適用範囲を良くします。
しかし、ユーザーが検索の適用範囲を細かく見る必要のないように、検索結果の精度を高めるほうが良いです。
2. 検索語句を予測する
検索では、ユーザーに検索語句を考えさせなければいけないだけではなく、文字入力もさせるので、たくさん作業をさせてしまいます。文字入力は間違えやすく、特にモバイルの画面では、時間を使う動作です。
ここでの目的：ユーザーのデータの入力の手間を減らし、瞬時に結果を与える
自動予測をさせる
最初の検索で良い結果が得られなければ、次の検索もあまり成功しません。実際、多くのユーザーが諦めます。
自動予測は、入力した文字に基づき予測することにより、適切な検索語を見つける様に促します。自動予測がうまく働くと、ユーザーはより良い検索語を明確に見つけることができます。自動予測は、検索の速度を早めるものというよりは、むしろユーザーをガイドし検索語句を見つけるのを助けると言えるでしょう。
自動予測はユーザーのエラーの可能性を減らすことができます。
自動予測は便利です。うまく機能しない自動予測では、ユーザーが困ってしまったり、他に気が向いてしまったりします。自動予測を改良する為に、スペルの自動修正機能、本質的な単語の認識、文章の予測を使います。
過去の検索結果を表示する
過去の検索履歴から検索をする時に、過去のデータをユーザーに与えるため、アプリに過去の検索結果と購入履歴を含む全ての関連する情報を蓄えると良いでしょう。そうすることで、そのユーザーの時間や同じアイテムを検索する手間を抑える利点をもたらし、より良い体験をもたらします。
「最近の検索結果」は特にユーザーが検索と購入を繰り返すECのアプリでは重要です。参照 : thinkwithgoogle
3. 検索の進行状況を可視化する
検索結果がすぐに表示されるのが理想的ですが、もしそうできなくても、適切なビジュアルのフィードバックを表示すべきです。しかし検索にかかる時間が長いと、ユーザーはストレスを感じ、気を逸らしてしまうリスクがあります。
ここでの目的：ユーザーに、検索にかかる時間を実際より短く感じさせる
検索のプレースホルダを表示する
通常、0.1秒以上1.0秒未満の遅れでは、特別なフィードバックは必要がありません。しかしもし検索にもっと長く時間がかかるのであれば、最低でも待っている間に何らかの工夫をする必要があります。待っている時間は、一時的な情報を表示するのにちょうど良い長さです。
ユーザーの注意を引くために、テキストやイメージのプレースホルダとしてダミーのコンテンツを使う。
遅延読み込みをする
遅延読み込みは、いくつかの検索結果を先に表示させ、ユーザーの注意を引いている間に残りを読み込むテクニックです。はじめは少しだけしか商品は読み込まれないので、ページを早く読み込むことができます。
モバイルのアプリの遅延読み込み
商品の遅延読み込みに関しては、まず先にテキストを表示させる方が良いでしょう。そうすることで、せっかちなユーザーが、全てのイメージが読み込まれるのを待たずに、目的の商品を見ることができます。
4. 検索結果の表示にこだわる
ここでの目的：検索結果が信頼でき、有用であることを印象づける。検索プロセスの速度を上げ、ユーザーの一つ一つの行動がコンバージョンに向いているようにする
最初の検索結果は、関連性が高いものにする
検索結果の表示の数が限られるモバイルの画面では、スクロールする必要がなく表示できる範囲で（例えば３個から５個の）関連性の高い結果を確実に見せることが大切です。これを踏まえた上で、はじめてスクロールさせる必要があります。
フィルターと分類ができるようにする
Baymard Instituteによるモバイル ECのユーザビリティ研究において、ユーザーの50パーセント以上が、画面上で検索語句を使って商品のリストにフィルターをかけようとするとき、現在ナビゲートされたカテゴリー内の絞込み検索を試みることが、観察されました。しかし、94パーセントのモバイルECのアプリやサイトで、そのような動作はサポートされていません。
ユーザーは、検索結果が一見何の関係のないものに見えたり、また多すぎたりすると圧倒されます。フィルターと分類の機能は、検索結果の数を絞り込み、良い検索結果を得られるように機能します。そして、その機能がないと小さな画面上で広範囲にわたる（膨大な数の）スクロールとページをめくることが必要になってしまいます。
左図: フィルタや分類がされていない状態。ユーザーには、過大な量のアイテムをレビューすることが求められる。参照 : thinkwithgoogle
「他の語句と併せて検索」フィールド
このオプションは、通常使われているフィルターを適用する代わりに、「他の語句を含む検索」を使う様に促す点で有益です。そして、商品リストの制御を信じられないくらい簡単にします。下図は、専用の「他の語句と合わせて検索」フィールドの例です：
NewEggでは、ユーザーは、現在ナビゲートされたカテゴリー内で検索することが認められており、またそう促されています。
「検索結果なし」のページを用意する
検索をするとき、当然いくつかのケースでは、「検索結果なし」になってしまいます。「検索結果なし」のページがうまくデザインされていないと、ユーザーにとっては、そこで終わりとなってしまいます。
HPの例に見られる様に「検索結果なし」はユーザーにとってはそこで終わりです。
検索した商品にあった検索結果がなかったとしても、ユーザーがそこで終わりという状態にしてしまうのは避けるべきです。マッチする検索結果がなかったとしても、同じカテゴリーからの商品の様に、何か価値のあるものをユーザーに提供しましょう。ユーザーをより助ける為に、単語の単数形、複数形やスペルミス等を扱える「インテリジェント」検索を導入しても良いかもしれません。
Amazonでは「検索結果なし」のページで、他の検索語句の提案をしています。
5. 商品のカテゴリはわかりやすくする
ユーザーフレンドリーなカテゴリにする
ユーザーは、自分の予想どおりのメニューが出てこないと戸惑ってしまいます。メニューカテゴリは、重複した部分がない様にMECEで明確にすべきです。メニューは、検索に疲れたあとのユーザーが最後の手段として使う場合があるので、特に重要です。
商品のカテゴリーは、混乱を防ぐため、きちんと区分けされているべきです。参照 : thinkwithgoogle
まとめ
現在、オンラインショッピングでの購入の30パーセントがモバイルから行われていることを考えると、ECのアプリやサイトに対する期待度は未だかつてないほど高いでしょう。
あなたのアプリやサイトでは、全てのタイプの検索を備え、カテゴリー、商品、商品の特徴によって関連する結果が得られる様にしなければなりません。モバイルでのオンラインショッピングでは、それほど動作に手間がかからなければ、ユーザーはただ検索するだけでなく、きちんと購入してくれるでしょう。
