会話型の商品フィルタリングを適切に実装するには、ユーザー エクスペリエンスの設計を十分に検討する必要があります。
視覚表示要素
会話型フィルタの配置と外観は、その有効性に大きな影響を与えます。
縦型レイアウトと横型レイアウト
縦向きレイアウトと横向きレイアウトのどちらを設計するかを検討する際の考慮事項は次のとおりです。
推奨事項: 横向きで縦にコンパクトなデザインを優先します。これにより、商品検索結果がスクロールしなければ見えない範囲に表示されるリスクを最小限に抑えることができます。
理由: フィルタが上部に横向きに表示されると、商品結果がページの下に押し下げられ、商品の即時的な視認性が低下するため、機能の費用が増加します。また、要素間の空白スペースを最小限に抑えることで、ウェブページに商品タイルを追加表示するためのスペースを確保できます。
長い属性を処理する
複数選択肢のオプションが長い場合（ブランド名など）、要素の高さが増すため、改行しないでください。代わりに、ページの外に水平方向に拡張して、横スクロールを有効にします。
水平スクロールの実装例を次に示します。
最適な配置
会話型フィルタは、商品が 3 ～ 5 行表示された後に配置することを検討してください。このアプローチにより、会話要素が最初のプロダクト リストを置き換えるのを防ぐことができます。
この配置の重要なポイントは、会話フィルタリング バーをできるだけ縦方向にコンパクトにすることです。会話型の商品フィルタリング機能が目立つ位置に配置されていると、商品表示がページの下部に移動し、すぐに表示されなくなる可能性があります。買い物客に表示される商品が少なくなるため、デメリットになる可能性があります。そのため、表示される商品はできるだけ関連性の高いものである必要があります。
サイド（縦）と上部（横）: 会話型フィルタを 3 ～ 5 行の商品リストの後に配置することを検討してください。このアプローチにより、会話要素が最初のプロダクト リストを置き換えるのを防ぐことができます。
強い検討: 会話型の商品フィルタリングが商品選択を絞り込む主な方法になった場合は、手動フィルタバーを完全に最小化するか、置き換えることを検討してください。これにより、商品アイテムの別の列を追加できます。
パソコンとモバイル
デスクトップでの実装は成功を収めていますが、モバイルでの結果は一貫性が低く、全体的なパフォーマンスの向上も低いことがわかっています。モバイルでは画面サイズが限られているため、プレースメントをよりクリエイティブかつ慎重に検討する必要があります。
推奨事項: まずはモバイルよりもパソコンでの実装を優先します。デスクトップでは画面サイズが大きいため、クリエイティブなデザインの柔軟性が高まります。モバイルの画面が小さいため、デベロッパーは特定の要素を優先する必要があります。
避けるべきこと: チャット ウィンドウのインターフェース。会話型フィルタをチャット ウィンドウとして実装しないでください。これにより、ユーザーはメインのウェブ インターフェースから離れることになり、デベロッパーが通常多くの時間を費やして最適化するウェブ購入手続きのフローの設計が中断される可能性があります。
モバイルに関するその他の考慮事項
モバイルウェブとアプリも、テストの際は別々に扱う必要があります。モバイルアプリのテストは本質的に実施が難しいですが、柔軟性が高くなります。モバイルウェブはテストが速いことが多いですが、さまざまなモバイルウェブ ブラウザで異なるトレードオフが発生します。
フィルタに対するユーザーの操作
このセクションでは、会話型の商品フィルタリングを構成する方法について説明します。静的でハードコードされたフィルタ要素を動的な会話型フィルタリングに置き換えて、よりターゲットを絞った商品用の画面スペースを確保することが推奨されます。適用されたフィルタは、その元に関係なく、商品グリッドをグローバルに更新できます。
後続の会話型質問は、適用されたフィルタの完全なセットに適応し、多肢選択式のオプションを提供します。
統合グローバル フィルタ
買い物客は、会話型フィルタと、適用されている残りのフィルタ要素の両方を操作できます。フロントエンドの実装では、このシナリオを処理できる必要があります。
統合グローバル フィルタには次の特徴があります。
- グローバルな適用: ユーザーがページ上の任意のフィルタ要素（会話型の商品フィルタまたは静的フィルタ要素）から選択を行うと、商品グリッドが更新され、すべてのグローバル フィルタが適用された結果が表示される必要があります。
- インテリジェントなフォローアップ: ユーザーが選択した要素に関係なく、適用されたフィルタの完全なセットに基づいて、ユーザーに表示される次の会話の質問が関連性のあるものになるようにします。たとえば、買い物客が会話要素から
colorフィルタを選択し、従来のフィルタ要素からsizeフィルタを選択した場合、その後の会話の質問で買い物客に希望のサイズを尋ねるべきではありません。
フィルタタイプ
会話型の商品フィルタリングでは、サイトで多肢選択式を使用するオプションが有効になります。
多肢選択式
AI Commerce Search では、商品カタログの値名に基づいて、最大 20 個の選択肢を表示できます。オプションは、最も関連性の高い選択肢の並べ替えられたリストに表示されます。長いブランド名などの長いオプションを使用すると、ユーザーが新しい行に折り返すのではなく横にスクロールできるようになり、縦方向のコンパクトさが維持されます。
ハードコードされた要素を置き換える
多くのコマース検索サイトのデベロッパーは、収益性の高いクエリを対象とした手動のカテゴリ フィルタ コンポーネントをウェブ インターフェースに組み込んでいます。これらのフィルタ コンポーネントは、通常、高価で、製造に時間がかかり、ユーザーとのインタラクティブ性が高くありません。
図 2. ハードコードされた要素の表示の例。
- 推奨事項: 会話型フィルタリングの基本的な考え方は、ビジュアル要素が設計された上位のクエリだけでなく、すべてのプロダクトでこのような動的なエクスペリエンスをすばやくデプロイできるようにすることです。そのため、会話型フィルタリングで置き換えるように設計された要素を特定して削除します。同様の機能を実行するフィルタ要素の競合する 2 つのセットを設けることは避けてください。これにより、画面上のスペースが解放され、よりターゲットを絞った商品を表示できるようになります。
テストのアイデア
テストのアイデアをいくつかご紹介します。
- 商品行の間に配置: ページの中間あたり、3 ～ 5 行の商品行の後にコンポーネントを挿入します。このアプローチにより、会話要素によって最初の商品の表示が大幅に置き換えられるのを防ぐことができます。
- フライアウトまたはポップアップ: フィルタの質問を含むダイアログまたはフライアウト メニューをトリガーするボタンを使用します。これは既存のフィルタ ポップアップと統合することも、フライアウトを別の要素にすることもできます。
- スティッキー バー: 画面に表示される固定バーに質問と選択肢が表示されます。これにより、商品が押し下げられるのではなく、商品の前に表示されます。
- テストに関する考慮事項: モバイルとパソコンのテストを行う際は、これらのテストが独立して実施されるようにしてください。デバイスごとにショッピング行動は大きく異なるため、あるデバイスで効果的なビジュアル コンポーネントが、別のデバイスでは効果を発揮しない可能性があります。
データの取り込みと品質
Vertex AI モデルのインテリジェンスは、ユーザー インタラクション データに基づいて構築されています。オンボーディング プロセスでは、データの取り込みに 2 段階のアプローチを使用します。
フェーズ 1: 過去のイベントで初期開始
モデルは過去のイベントデータでトレーニングできます。過去のイベントデータは最初に Google 環境に取り込まれるため、モデルはライブ インタラクション データのない新しいプロジェクトでも認識できます。
フェーズ 2: ライブクエリ データへの移行
この機能が有効になり、過去にキャプチャされたデータの収集が開始されると、Vertex AI はライブクエリ データ ストリームを使用してサービング モデルを調整します。ライブクエリのデータは、一般的に過去にキャプチャされたイベントデータよりも品質が高くなります。過去のイベントでは、重要な情報が欠落していることがあるためです。これにより、継続的な最適化にライブクエリのデータをより効果的に活用できます。