Marketplace Discovery API パートナー向けの UX ガイドライン

このページには、パートナーがAzure Marketplaceエクスペリエンスを設計するためのベスト プラクティスが含まれています。 この情報は、Marketplace Catalog API を利用したフロントエンド統合とユーザー エクスペリエンスの両方を含む、Marketplace Catalog とのエンドツーエンドの統合の構築に取り組む開発者を対象としています。

一般的なギャラリー ページ レイアウトとプライマリ ユーザー アクション

検索機能

• Searchバーの配置: 検索バーをページの上部中央のフィルターと検索結果の横に目立つように配置します。 この配置により、検索入力と結果の間の視覚的および機能的な接続が維持されます。
• 対話型の検索エクスペリエンス:
  • クリック時: 過去のエントリをクリアするオプションを使用して、上位の検索語句、製品、ユーザー履歴などの候補を表示します。
  • 種類: オートコンプリート候補を提供します。
  • 入力/検索時: フィルター オプションを使用して検索結果を表示します。 検索プロセス中にアクティブなフィルターが保持される場合があります。
  • 可視性: ユーザーが検索語句をクリアするか、新しい検索を開始するまで、検索用語を表示したままにします。

フィルター

• 配置: 左側の垂直メニュー (展開可能または折りたたみ可能なセクションを含む) または上部の水平バーとして、ドロップダウンメニューまたはピル メニューとして、フィルターを目に見えて配置します。 フィルターは、ユーザーのナビゲーション全体を通じて常に表示され、固定されるように設計できます。
• 組織とカスタマイズ:
  • 関連性と人気度によってフィルターを並べ替えます。
  • 動的でパーソナライズされたフィルター候補を提供し、結果の数を表示し、関連性に基づいて順序を調整します。
  • グループ フィルターは、ナビゲーション要素とは異なり、まとまりのある方法で行われます。
• 推奨されるフィルター: 標準のフィルター オプションに加えて、最も一般的または関連するフィルターのキュレーションされた選択を表示すると便利です。 このサブセットは、各ユーザーに合わせて動的に調整し、閲覧エクスペリエンスのパーソナル化を強化する必要があります。 ユーザーが選択を行うと、個々のユーザーの好みやニーズの変化を反映して、これらのおすすめのフィルターを適応および進化させることができます。 このアプローチは、検索プロセスを効率化するだけでなく、ユーザーが最初に考慮しなかった可能性のある貴重なフィルターオプションをユーザーに導入します。

並べ替え

• 関連性、評価、人気度、更新頻度など、並べ替えオプションのドロップダウンを実装します。 その後の訪問に対するユーザー設定を覚えておいてください。

結果のSearchとフィルター処理

• 検索とフィルターの結果を継続的に絞り込むことができます。

• 効率的な改ページ調整を組み込み、ページ読み込み時間を最適化します。

• サンプルの検索結果を次に示します。

  

レーンとグループ タイルの表示

• "新機能" や "トレンド" など、タイトル セクションを明確にマークします。
• 3 から 8 個のタイルを表示し、カルーセルなどの対話型要素を使用して、より多くのコンテンツを表示します。
• グループ内のすべての結果を表示するその他のボタンまたはリンクを表示します。

  • スイム レーンの例を次に示します。

    

表示

• 製品ビューは、表示オプション (タイル、リスト、またはテーブル) によって異なる場合があります。 我々の研究は、より簡単な比較のための検索後のタイルビューの好みを示しています。 選択用のドロップダウンを実装し、後続の訪問のユーザー設定を記憶します。

  • タイル ビューを次に示します。

    

  • リスト ビューを次に示します。

    

  • テーブル ビューを次に示します。

    

タイル

• 情報階層:

  • 必須: 製品名、ロゴ、説明、価格、"無料試用版" バッジ。
  • セカンダリ: 発行元の名前、評価とレビュー、カテゴリ、サポートされている業界、互換性情報、サポートされている製品。
  • 追加: バージョン/プランの詳細、その他のバッジ ( Microsoft 優先ソリューション、持続可能性バッジ、多様性バッジなど)、バンドルの種類。

• 主なアクション:

  • タイルを選択すると、製品の詳細ページ (PDP) 全体が表示されます。
  • アクションの明確な呼び出し (CTA、たとえば、"購入"、"取得"、"詳細情報") と "お気に入り" オプションを含めます。
  • ホバーまたはクリック時に追加の情報レイヤーが表示された小さいタイルまたは中サイズのタイルを提供します。

• サンプル タイルを次に示します。

  

製品の詳細ページ (PDP)

• コンテンツ構造:
  • タイル情報形式と同様の包括的な製品情報を含めます。
  • 概要 (製品の説明とメディア)、プランと価格、評価とレビュー、詳細とサポートなどのセクションを組み込みます。
    • タブ付きセクションまたはページ スクロールを実装することを検討してください。この場合、タブは固定されたままで、CTA と共にページの上部にあるスティッキー要素として簡単にアクセスできます。
• 説明とメディア: リッチ メディアと詳細なテキストを表示して製品を説明します。 使用可能な場合は、説明と強調表示をセクションとして区切ります。
• プランと価格、プロモーション、割引: 価格情報を明確に示します。進行中のオファーや割引を強調表示します。
• 発行元情報: 発行元、サポート リンク、およびその他の製品に関する詳細を含めます。
• ユーザー操作:
  • CTA をクリアする: 各製品ページでは、購入や発行元への問い合わせなどの明確なアクションにユーザーを誘導する必要があります。
  • 購入、連絡、お気に入りへの追加、共有などのページ アクションを容易にします。
  • 迅速かつ簡単な購入プロセスを容易にするために、各プランに直接購入CTAを含めます。
  • 透過的でアクセス可能な法的およびサポート情報を表示します。

評価とレビュー

• 明確な形式を使用して、製品タイルと PDP で表示します。
• レビューのフィルター処理と並べ替えを許可します (例: 最新、最も役に立つ)。
• ソース別のレビューの明確な表示を提示します (Marketplace と G2 などの外部プロバイダー)。

潜在顧客の生成

• 翻訳不可能なリストの場合は、"Contact me" CTA を含めて、重要なユーザーの詳細と法的同意をキャプチャします。

アクション呼び出し (CTA) の種類

• オファーの種類と取引可能性オプション ("今すぐ入手する"、"無料試用版"、"お問い合わせ" など) に応じて CTA テキストを調整します。

  • [ 概要 ] タブは次のとおりです。

    

  • [ プランと価格 ] タブを次に示します。

    

  • [ 評価とレビュー ] タブを次に示します。

    

ユーザー エクスペリエンスを強化するための主な推奨事項

• ユーザー中心の設計: 直感的なナビゲーションと明確な情報アーキテクチャに重点を置きます。
• ビジュアル階層のクリア: デザイン要素を使用して、ユーザーの注意を効果的に導きます。
• 応答性とアダプティブ レイアウト: デバイスと画面サイズ間の互換性を確保します。
• 個人用設定: ユーザー データを活用して、カスタマイズされた提案とフィルターを提供します。
• パフォーマンスの最適化: 読み込み時間を短縮し、スムーズな対話を実現します。
• アクセシビリティ コンプライアンス: スクリーン リーダーやキーボード ナビゲーションなど、さまざまなユーザー機能を設計します。
• セキュリティとプライバシー: 特に支払いトランザクションの場合は、セキュリティ機能とプライバシー ポリシーを強調します。
• カスタマー サポート: カスタマー サポートと詳細な連絡先情報に簡単にアクセスできます。
• 定期的な更新とフィードバック ループ: ユーザー フィードバックを組み込んで、マーケットプレースエクスペリエンスを継続的に改善します。
• ユーザー行動の追跡: ユーザーがマーケットプレースとやり取りする方法を分析するツールを実装します。
• インクルーシブ言語: コンテンツでバイアスフリー言語を使用します。 ステレオタイプ、スラング、文化的に機密性の高い用語や比喩は避けてください。
• ローカリゼーション: ローカリゼーションは、特定の地域市場 (ロケール) の言語、文化的、政治的な期待と要件を満たすために、製品またはコンテンツ (テキストやその他の要素を含む) を適応させるプロセスです。 エクスペリエンスのコンテンツを作成するときは、この点に注意してください。

次の手順

• 質問またはサポートについては、 にお問い合わせください MKPL_Platform_API_DL@microsoft.com。