eコマースのフィルタリングを改善してショッピング体験を向上させる Amazonを越える

買い物客がフィルターを使用して特定の商品を見つけた場合、多くのコンバージョンにつながることが証明されています。

調査によると、買い物客に優れたフィルタリング エクスペリエンスを提供している e コマースブランド はわずか16%です。

このコラムでは、オンライン ストアが商品フィルタリングの UX を改善して買い物を容易にする方法をご一緒に考えていきましょう。

eコマースフィルターが重要な4つの理由

選択肢が多すぎると人々はうんざりします、それは圧迫感を感じていることでもあります、買い物客が商品の選択肢を減らしやすくなり、コンバージョンの増加につながるようにします。
フィルタリングは、商品の発見を買い物客の意図に合わせてすることです。
e コマース Web サイトのナビゲーションが快適かつシームレスになります。
フィルターを使用すると、買い物客が商品を検索するのにかかる時間が短縮され、迅速なチェックアウトにつながります。

フィルタリングと並べ替えはどう違うのか

フィルタリングと並べ替えを混同することがよくあります。どちらも買い物客の購入意思決定をより迅速にしますが異なります。

フィルタリングは、
買い物客が任意のカテゴリに表示されるアイテムの数を管理しやすいリストに絞り込むのに役立ちます。
多数の商品を含む Web サイトでのナビゲーションを合理化するのに役立ちます。

フィルタリングにより、フィルタ属性に基づいて結果の数が減ります。

並べ替え（ソート）は、
買い物客が選択した基準に基づいて商品範囲を並べ替えるのに役立ちます。
ユーザーは、アルファベット順、ブランド、価格帯、または最新の順に製品を並べ替えることができます。

並べ替えると、商品の数を減らすことなくリストが再ランク付けされます。並べ替え属性に基づいて、関連する商品を上位にランク付けします。

買い物客が「1000円から 1500円」でフィルタリングすると、その範囲外の価格の商品がフィルタリングによって削除されます。しかし、その属性で並べ替えると、Web サイトは価格帯内の商品を結果の最上位にランク付けし、残りの商品を下に押し出します。

その他の違いとしては

• 買い物客はファセットを使用してフィルターをさらに絞り込むことができます。
  ファセットは並べ替え機能では機能しません。
• 並べ替え機能は商品グリッドの上にドロップダウン メニューとして表示されることが多く、フィルターは通常、左側の列に表示されます。
• デフォルトでは、e コマース Web サイトは商品リストをフィルター処理しません、多くの場合では、デフォルトの並べ替えオプションが適用されます。
• フィルターはリストをパーソナライズします。並べ替えると関連性が高まります。‍

売上に大きな影響を与えるフィルタリング UX

これらのフィルタリング UX の小さな変更を実装して、チェックアウトの高速化と売上の増加を促進します。

1. 基本的な商品カテゴリーをカバーする

すべての商品カテゴリに商品フィルタを実装します。

まず最も重要な、または基本的な商品カテゴリから始めて、買い物客の最大のセグメントに対して、パーソナライズされた商品検索エクスペリエンスを提供することができます。

Google Analytics のすべてのページ レポートを詳しく調べると、買い物客が最もよくアクセスしている商品カテゴリを明らかにするのに役立ちます。
このレポートは、[サイト コンテンツ] の [行動レポート] タブで確認できます。

Google アナリティクスの行動レポート -

この洞察を得るためにページレベルのデータに依存することは、特に大規模な e コマース Web サイトの場合には、恐ろしい場合があります。Google Analytics でコンテンツのグループ化を設定することで、これを効率化できます。

これは、Web サイトのセクションがどのように実行されるかを理解するのに役立ち、重要な指標をドリルダウンできるようになります。

2. 商品の説明に基づいてフィルターを構築します

商品の説明を調べて、カテゴリ固有のフィルターに関するアイデアをいくつかあります。

経験則としては、フィルタとして使用できる商品説明または商品タイトルを作成するのに十分な重要な商品仕様に準拠することです。
Amazon は後者についてもこのルールに従います。

たとえば、商品タイトルにはラップトップの画面表示サイズ、プロセッサーの種類、RAM、ハードディスクのサイズが記載されており、Amazon はそれぞれのフィルターを提供しています。

ここでも、顧客が簡単に連想できる言葉を使用してフィルターを説明して案内します。

たとえば、アパレルビジネスでは、コマースサイトやオムニチャネルリテールではリアル店舗に十分な商品在庫数量がある場合、「ハイウエスト パンツ」や「サマーウェア」などの用語が適切なフィルターとして機能します。

この原則が解決に役立つユーザビリティのポイントには、次のようなものがあります。

• フィルタリングが直感的に行えます。
• 顧客の日常言語を使用することで、フィルターを関連付けやすくなります。
• 商品説明の仕様をフィルターとして使用すると、買い物客は適用するフィルターを簡単に決定できます。

3. 切断を解除する

適用されたフィルターのビューを鮮明にします。

e コマース サイトには、いくつかのフィルターがアクティブであることが明らかなフィルター チェックボックス UI があることです。
しかし、これは通常、フィルターの使いやすさを向上させるのに十分ではありません。

買い物客は、おそらくフィルタリングされた商品の位置が原因​​で、Web サイトが選択したフィルタを適用しているかどうか疑問に思うことがよくあります。

適用されたフィルターを個別に表示することで、訪問者のナビゲーションとチェックアウト率が向上することを証明されています。したがって、適用されているすべてのフィルターを概要に表示します。
残念ながら、Amazon を含むトップ e コマース Web サイトの 32% では表示されていません。

こうした小さなことが大きな違いを生みます。

適用されたフィルターが有効であるかどうかの明白かつ即時的な確認ができないことは、大手ブランドの間でも大きなポイントです。

それが引き起こす可能性のあるユーザビリティの問題には、次のようなものがあります。

• デスクトップ ユーザーは、適用されているフィルターを確認するためにフィルター サイドバーに依存する必要があります。
  つまり、適用されている他のフィルターを確認するには深くスクロールする必要があり、不必要に時間を無駄にすることになります。
• 適用されたフィルターの概要が欠如しているため、不要なフィルターを削除するのは非常に困難です。
• モバイル ユーザーにとって、フィルタの検索と削除は非常に面倒です。
• 買い物客が誤ってフィルターを適用した場合、これはよくあることですが、適用されたフィルターの概要が欠如しているため、これを見つけることが困難になり、意図を超えた商品の範囲が狭まってしまいます。
• 適用されたフィルターを一目見ると、商品リストのコンテキストがわかります。

ヒント: 適用されたフィルターを元の位置と概要の両方に表示します。

4. インタラクティブなバッチフィルタリング

インタラクティブなフィルタリングを使用して、買い物客に即座に満足を提供することです。

インタラクティブ フィルタリングでは、買い物客がフィルタを選択または選択解除すると、リアルタイムでフィルタが適用されます。バッチ フィルタリングでは、ユーザーが適用ボタンをクリックしたときにのみフィルタが適用されます。NewEgg eCommerce ストアはバッチ フィルタリングを使用します。

Amazon とほとんどの e コマース ブランドはインタラクティブなフィルタリングを使用していますが、これは読み込みの遅い Web サイトにとっては悪影響を与える可能性があります。

買い物客が Web サイトの読み込みが遅いことを許すことはほとんどありません。モバイルの読み込み時間に数秒の遅れが生じると、モバイル コンバージョンに最大 20% 影響する可能性があります。

読み込みの速い Web サイトでインタラクティブなフィルタリングを使用すると、買い物客のフィルタリング エクスペリエンスがよりシームレスになります。これにより解決されるユーザビリティの問題には次のようなものがあります。

• インタラクティブなフィルタリングにより買い物客の時間を大幅に節約
• フィルタリングを迅速かつ魅力的にします
• Null フィルターの結果はひどいユーザー エクスペリエンスを提供します。
  買い物客は対話型フィルタリングを使用してこれを回避できます。
• 買い物客は、商品カタログがフィルターにどのように迅速に反応するかを即座に確認できるため、商品検索を簡単に微調整できます。

ヒント: インタラクティブ フィルタリングは超高速な Web サイトに最適ですが、バッチ フィルタリングは速度に問題がある Web サイトに適しています。読み込みが遅い Web サイトでこれを使用すると、ユーザーはリクエスト間の時間を節約できます。

ロード時間は 4 秒が目安です。それより長い場合はバッチ フィルタリングを使用し、それより短い場合はインタラクティブ フィルタリングを使用します。

5. フィルターの変更を非常に簡単にします

買い物客は商品を調べるときにさまざまなフィルターを試すことがよくあります。e コマース Web サイトでフィルターの選択解除が直感的でなかったり、難しかったりすると、イライラする可能性があります。

買い物客が 1 回のクリックで適用されているすべてのフィルターの選択を解除できる「すべてのフィルターをクリア」ボタンを提供します。チェックボックス UI を使用して、個々のフィルターのチェックを簡単に解除できるようにすることもできます。

適用された各フィルターの横にあるシンプルな十字マーク「❌」も、フィルター オプションを簡単に解除するのに役立ちます。

この原則によって解決されるユーザビリティの問題には、次のようなものがあります。

• フィルターの選択解除を非常に簡単にすることで、買い物客の時間とフラストレーションを節約します。
• 適用されているすべてのフィルターを一度にクリアすると、ユーザーはすぐに最初からやり直すことができます。
• フィルターの選択を解除すると、買い物客は商品検索を微調整できるようになります。

6. 複数の条件でフィルタリングする

前に説明したように、複数のフィルターを使用すると、買い物客は商品検索を自分の意図にシームレスに一致させることができます。したがって、一度に複数の条件でフィルタリングできるように e コマース ストアを設計します。

買い物客が 1 つのパラメータのみをフィルタリングできるようにすると、別のパラメータを適用する前に結果のオプションを記憶することになり、買い物客が圧倒されてイライラしてサイトを放棄する可能性があります。

この原則が解決に役立つフィルタのユーザビリティの問題には、次のようなものがあります。

• 複数のフィルターを使用すると、買い物客の特定のニーズに合わせて商品検索を調整できます。
• 複数のフィルターを同時に使用すると、買い物客は時間を節約できます。
• これにより、フィルタリングが簡単になり、煩わしさが軽減されます。
• 商品リストが細かくなります。

7. フィルタオプションのリストを短くする

フィルターのオプションが多いと便利ですが、不必要に長くならないように注意してください。

フィルター列の拡張オプションは他のフィルター属性を表示の外に押し出します。つまり、買い物客はそれらにアクセスするために長いリストをスクロールする必要があり、ユーザー エクスペリエンスが低下します。

フィルター オプションが 10 を超える場合、リストは切り捨てられます。

展開可能なアコーディオンまたはドロップダウン メニューを使用して、切り詰められたリストを管理します。

Amazon はこのユーザビリティ テストに不合格です。e コマース Web サイトは、 10 オプションを超えるフィルター リストを切り捨てず、一部のオプションが多くて煩雑になっています。
ドロップダウン メニューでブランド (HP、Acer、Qotom)、オペレーティング システム (Windows および Chrome OS)、プロセッサの種類 (Intel Core i5、i7、i9、Intel Celeron、AMD Ryzen 5) をきちんと非表示にする方が合理的です。

Macy's は、ドロップダウン メニューを使用して、この種の問題をうまく解決しています。
Macy's では、すべてのオプションが表示されるように、10 を超えるフィルター オプションは表示されません。

ここでは、短いフィルター オプション リストによって解決される使いやすさの問題の一部を簡単に説明します。

• フィルターが見える範囲にあり、簡単にアクセスできます。
• フィルタ オプション リストが短いと時間が節約され、フィルタリングのイライラが軽減されます。

8. フィルターでゼロ結果を削除する

Null 検索結果はユーザー エクスペリエンスに悪影響を及ぼします。したがって、結果がゼロのフィルターを削除します。

Web サイトにアクセスして商品を検索し、フィルターを適用して検索を合理化しても、「結果が見つかりません」というメッセージが表示されるだけの買い物客はいないでしょうし、また戻ってこない可能性があることが調査でわかっています。

消費者は、ユーザー エクスペリエンスが劣悪な場合、その Web サイトに戻る可能性が低くなります。

ゼロ フィルター結果を排除することが重要な理由は次のとおりです。

• 買い物客が不満を感じることを防ぎます。
• 顧客満足度の維持に役立ちます。
• 顧客の期待とのずれが防止されます。買い物客はフィルタリングによって関連性のある結果が返されることを期待しています。

9. フィルタの変更をブラウザ履歴のイベントごとに分ける

買い物客は通常、フィルタを適用した後にブラウザの「戻る」ボタンをクリックすると前のページに戻ると考えています。これはほとんどの e コマース Web サイトに常に当てはまるわけではないことに注意してください。

フィルタはブラウザ履歴内の個別のイベントではありませんが、1 つにすることができます。

買い物客は多くの場合、ブラウザーの「戻る」ボタンを利用しており、最近のフィルターの変更が以前のフィルターに戻ることを多くの人が期待しています。「戻る」ボタンの動作をこの期待に合わせて調整することで、商品のフィルタリング エクスペリエンスをスムーズにします。

原則が重要となる理由には次のようなものがあります。

• ユーザーはフィルターをすぐにクリアできます。
• それは買い物客の期待と一致します。
• この期待と乖離すると、顧客の不満につながる可能性があります。

10. 顧客の話をする

あなたは顧客のためにフィルターを作成しています。彼らに助けを求めるのが最善です。

顧客の検索用語に基づいてフィルターを作成します。GA レポートとサイト検索データを参照して、使用する用語を決定してください。アクティブな顧客のサンプルを調査して、彼らが何を望んでいるのかを知ることができます。

顧客の声に耳を傾けるのは次のような素晴らしいアイデアです。

• アンケートと GA レポートは、データに基づいた意思決定を行うのに役立ちます。
• 顧客に関連したフィルターを作成できます。
• 推測を排除します

11. テーマフィルターを適用する

テーマフィルターは、買い物客が特定のテーマに一致する商品を見つけるのに役立ちます。

Amazon の買い物客は、カジュアル、夜の外出、仕事などの機会や、冬や夏などの季節に基づいてドレスをフィルタリングできます。

Amazon でアパレルを探している買い物客は、膨大な商品リストをくまなく調べる必要はありません。テーマ フィルターを使用して適切な商品を簡単に絞り込むことができます。
トップ e コマース Web サイトの約 20 パーセントには、この属性が欠けています。

12. 買い物客が顧客評価によってフィルタリングできるようにします

ベストセラー商品には4.2 ～ 4.7 の評価が付けられているため、Amazon では買い物客が顧客の評価によって商品を簡単にフィルタリングできるようにしています。

買い物客の約70%は、悪質なビジネスを排除するために評価フィルターを使用しています。もちろん、評価の低い商品にお金を使いたい顧客はいないでしょう。Amazon は評価フィルターを使用して、買い物客が検索を簡素化できるようにします。

13. フィルタを視覚的に表示する

商品リスト ページが再度読み込まれる間、買い物客は正しいフィルターが適用されていることを知る必要があることが重要です。

まず、フィルターをページの残りの部分より目立つようにします。これを実現するには、見出しまたはフィルター テキストの別の色を使用して強調表示します。選択するときに、チェック ボックスも別の色にします。

次に、左側の元の場所に適用されたフィルターが表示され、Web ページのヘッダーのすぐ下に概要が表示されます。

14. フィルターを重要度順に並べる

並べ替える際、ストアは通常、あいうえお・アルファベット順に移動します。ただし、フィルタリング システムを設定するには、特定の基準に従ってそれらを表示することが最善です。

買い物客が検索バーで何を検索しているのか、そして最も適用されているフィルターを見てみましょう。オンライン ストアがシームレスなショッピング エクスペリエンスに役立つフィルタリング システムを作成するのに役立ちます。

15. モバイルデバイスとタッチスクリーンデバイスに異なるフィルターの使用を検討する

世界の e コマース トラフィックの半分以上はモバイルから来ており、モバイル デバイスではより多くの商品フィルタリングが発生する可能性が高くなります。したがって、モバイルで快適にすることは簡単です。

フルスクリーンとスライドオーバーは、モバイル フィルタリングにアプローチする 2 つの一般的な方法ですが、どちらが適切でしょうか。 早速調べてみましょう。

全画面モバイル フィルタリングは画面全体を占有し、モバイル買い物客に集中したエクスペリエンスを提供します。その最大の欠点は、買い物客が閲覧のコンテキストから外されてしまうことです。

全画面フィルタリングとスライドオーバー フィルタリングの両方により、買い物客のモバイル フィルタリング エクスペリエンスが魅力的で直感的になります。しかし、それらを使用するのに最適な時期はいつでしょうか? 私たちが見つけたものは次のとおりです。

• スライドオーバー フィルタリングは、フィルタ オプションが少なく、コンテキストを保持したい場合に最適です。
• サイトに複数のフィルタ オプションがあり、顧客が完全に集中できるようにしたい場合は、全画面フィルタリングを使用します。

どちらを選択する場合でも、フィルターの設計がさまざまなクリック パターンや指のサイズに適合することを確認してください

これらのモバイル フィルター UX デザインのベスト プラクティスを実装すると、常に優位に立つことができます。

• 関連するフィルターのみを表示します。
• 最も重要なフィルターを表示内に配置し、重要性の低いフィルターを非表示にします。
• ドロップダウン メニューを使用してフィルタを整理します。
• フィルターを簡単に交換できるようにします。
• 適切な UI コントロール (チェックボックス、トグル、スライダーなど) を使用してフィルタリングを直感的に行います。
• 買い物客が最もよく使用するフィルターを見つけて、それに応じて並べ替えます。
• 並べ替えを使用してフィルター結果をよりカスタマイズする

16. さまざまな画面サイズでの配置を決定する

垂直のサイドバーまたはスライドイン バーがフィルターの伝統的な配置でしたが、現在では水平のツールバーがますます人気が高まっています。

2 つのフィルタリング UI を簡単に比較してみましょう。

• 買い物客はサイドバーのフィルターを無視または見逃していることが多く、並べ替えツールとフィルター ツールを混同する場合があることがわかりました。
  このユーザビリティの問題はデスクトップにも当てはまりますが、デスクトップの方が表示が大きいため、被害は少なくなります。
• 水平ツールバーの中央位置は、画面スペースをとらずに訪問者の注意を引きます。
• 水平フィルターは占有画面スペースが小さいため、アパレルや室内装飾など、もともとフィルターの数が少ない業界では便利です。
• 垂直サイドバー フィルターは列内に配置されるため、含めることができるフィルターの数は無限になります。そのため、より大きなフィルター オプションや仕様重視の製品を使用する業界で実用的な用途が見つかります。

まとめ

優れたフィルタリング ユーザー エクスペリエンスを提供し、成功を収めているグローバル e コマース ブランドの 16 パーセントにならって、 e コマース フィルタ UX 変更を実行してください。

ほとんどの買い物客はモバイルでフィルタリングする可能性が高いため、買い物客にとってシームレスなエクスペリエンスを実現します。