【翻訳】コンバージョン重視のEコマースUXデザインの作り方(Tim Robinson, UX Matters, 2023)

www.uxmatters.com

eコマースサイトのUXデザインは、顧客にとって快適な購買ジャーニーを実現するためのものです。UXデザインは、美観からインタラクティブな機能のデザインまですべてを網羅するため、ECサイトの各要素がコンバージョンにつながるようにデザインする必要があります。実際、図1が示すように、Webサイトの美観はユーザーからの信頼性に大きく影響します。

UXデザインは、テキストやビジュアル要素などの情報を使ってユーザーとコミュニケーションを図り、直接的なメッセージとサブリミナルなメッセージを伝えるために情報の見せ方を構成します。これらのメッセージは、訪問者の心にある種の感情や欲求を呼び起こし、Webサイトでの購買を促す。

図1-信頼性と美しさ/画像ソースはこちら Toptal「Know Your User: UX Statistics and Insights」

今回は、ECサイトでのコンバージョンの確率を高めるために、没入感のあるユーザー体験を実現するためのいくつかの方法について説明します。

UXデザインの問題がないか、ECサイトを点検する

ユーザーエクスペリエンスを向上させる前に、その現状を把握する必要があります。このジャーニーの最初のステップは、ウェブサイトの問題点を特定することです。eコマースサイトの分析(監査)は、手動で行うか、分析を代行するツールを使って行うことができます。組織のカスタマーサポート・ソリューションの現状を把握することも、ユーザーエクスペリエンスの現状を理解する上で重要な役割を果たします。

このような監査を行うには、Webサイトでのユーザーの行動を追跡する必要があります。直帰率、ページ滞在時間、平均ページビュー、コンバージョン率などの指標を通じて、ユーザーの行動を把握することができます。これらの指標はそれぞれ、Webサイトのユーザーエクスペリエンスについて、異なるストーリーを語っています。

このような分析により、コンバージョンを増やすために修正する必要のあるユーザーエクスペリエンスの問題をピンポイントで特定することができます。サイトの弱点を特定したら、ソリューションの作成に取りかかることができます。

仮想の購買ジャーニーを作成する

マーケティングチャネルから購入注文に至るまで、EコマースWebサイトのユーザーエクスペリエンスを概説する仮想の購買ジャーニーを作成します。このようなアウトラインを作成する際には、顧客がプロダクトを購入するために取るであろうすべてのステップを含めるようにしてください。

このステップをもとに、ジャーニーをページに分解し、各ページで最も効果的なユーザーインターフェース要素を決定し、それに従ってWebサイトの各ページをデザインします。各ページのユーザーエクスペリエンスは、訪問者が購買のジャーニーに進むことを促すものでなければなりません。

同時に、魅力的な機能や提供するプロダクト・サービスに関する情報を強調する必要があります。これらの情報は、顧客の反対意見に対抗するのに役立ちます。例えば、国際航空貨物による迅速な配送を提供する場合、商品詳細ページでそのことを強調する必要があります。これは、緊急にプロダクトを必要とする顧客を引きつけるのに役立ちます。

このようなジャーニーの各ステップを踏むことで、顧客はEコマースサイトでの購入に近づいていきます。UX監査で得た知見をもとに、顧客がジャーニーの途中で直面しそうな問題に対処し、問題を解決することで、該当するページのユーザーエクスペリエンスを向上させることができます。

ナビゲーションを簡素化する

すべての商品を一度に展示すると、顧客は混乱してしまい、目的の商品を見つけることが難しくなります。そこで、シンプルなナビゲーションシステムを導入することで、顧客がページ間を移動しやすいようにしました。図2のように、商品の種類や人気度、用途に応じたセグメントで構成することもできますし、eコマースサイトの重要なページを見つけるためのメニューもあります。その際、最も魅力的な商品が最もよく見えるように、ナビゲーション要素を配置する必要があります。

図2-アマゾンの商品カテゴリー

検索機能を提供することで、ナビゲーションが容易になります。さらに訪問者の負担を減らすために、検索候補の追加を検討しましょう。また、検索候補を表示することで、顧客の好みの商品へ誘導することができます。

パーソナライゼーションを実現する

人は選択肢があることを喜ぶが、選択肢が多すぎると選ぶことが難しくなることは、ヒックの法則が教えてくれている通りです。だからこそ、Eコマースサイトのユーザーエクスペリエンスをパーソナライズする必要があるのです。

パーソナライズすることで、ユーザーはより早く購買行動を完了することができます。商品のさまざまな側面に基づいて、さまざまなフィルターを提供することができます。例えば、ファッションサイトでは、性別、スタイル、サイズ、色、ブランドなどに基づいて商品を検索することができます。

また、マーケティングキャンペーンごとに異なるランディングページを作成することで、ユーザーエクスペリエンスをパーソナライズすることもできます。例えば、フォーマルな服装に関するブログからウェブサイトにアクセスした場合、ランディングページにはそのカテゴリーに属する商品のみを掲載するようにします。

ミニマルなビジュアルデザインを採用する

ミニマルなデザインは、ユーザーが最も重要な要素に集中できるようにします。ミニマルなビジュアルデザインの考え方は、ユーザーの購買行動を効果的に誘導するために、可能な限り邪魔なものを排除することです。

ページ上のすべての要素について、次のような簡単な質問を自分に投げかけてみてください。「この要素は、訪問者が購入までの道のりを完了させるのに役立つか?」 もし答えがノーであれば、その要素は削除する必要があります。要素の中の要素についても同じことが言えます。

訪問者に多くの情報を与えるのではなく、ミニマリズムによって重要な情報をより魅力的にすることができます。空白や配置を工夫して、プロダクトやセールスポイントに注目させることができます。

プロダクト情報のビジュアルを作成する

商品ページに文字情報を詰め込むと、役に立つどころか、かえって混乱することが多いのです。デザインを使って、テキストをビジュアルに変えることで、顧客の労力を軽減しましょう。例えば、プロダクトについて説明するために、スマートなインフォグラフィックスを作成することができます。また、画像やアニメーションGIF、動画を使って、プロダクトのさまざまな使用例を示すこともできます。図3は、プロダクトのメリットを視覚的に表現する例です。

図3-プロダクトの特徴を示す

このようなビジュアルは、ユーザーがプロダクト情報を咀嚼し、プロダクトの利点を理解しやすくすることができます。このようなセクションは、プロダクトの最も魅力的な側面を頂点とする逆ピラミッド型のセールストークとしてデザインすることができます。このビジュアルセクションに続いて、顧客の評価やレビューなどのサポート要素を提供することもできます。

ビジュアルで表現された情報は消費されやすいので、コンバージョンの可能性が高まります。

明確な行動喚起を行う

コール・トゥ・アクション(CTA)ボタンは、購入までのステップを次のステップにつなぐ架け橋です。基本的には、顧客に次に何をすればよいかを知らせるものです。

トップページでは、CTAはユーザーが希望するプロダクトを選択するよう促す必要があります。商品ページでは、その商品をカートに入れることを促すCTAが必要です。このように、CTAボタンはユーザーを購入に向かわせるものです。

CTAボタンは、ページの他の部分と区別して、はっきりと見えるようにする必要があります。最も重要なことは、ボタンのように見えることです。CTAボタンを作成する際には、コントラストのある色、太いフォント、明確なアウトラインを使用しましょう。

透明性のある価格計算を提供する

カート放棄の最大の理由は、追加費用と隠れた料金です。図4が示すように、これらを合計すると、購入放棄の64%に相当します。商品ページとチェックアウトページで異なる価格が表示されると、顧客は騙されたと感じるかもしれません。

図4-カート放棄の理由/画像ソースはこちら ベイマード・インスティテュート、「48カート放棄率統計2023

もちろん、eコマース事業者が、配送先住所や購入量、適用されるキャンペーンなど、顧客の詳細が判明する前に、すべての料金を前もって提示することは困難です。この問題を解決するために、商品ページにコスト計算機を設置し、顧客が関連するすべての情報を追加して、商品の総コストを知ることができるようにすることを検討します。その際、コスト算出に必要な関連情報のみを入力してもらうようにしましょう。この時点で購読申し込みやクレジットカード情報の提供を求めると、ユーザーはコスト計算を完了せず、購入手続きに進む可能性があります。

チェックアウトと決済を簡素化する

複雑すぎるチェックアウトや支払いプロセスは、カート放棄のもう一つの大きな理由です。実際、24%の買い物客が、Eコマースサイトでアカウントの作成を求められた場合、購入を断念しています。さらに、チェックアウトのプロセスが長すぎたり複雑だったりすると、17%の買い物客がカートを放棄する可能性があると言われています。

購入までの最後のステップであるチェックアウトのユーザーエクスペリエンスは、できるだけシンプルでわかりやすいものであるべきです。チェックアウトから最終決済までの間に邪魔なものを入れないこと。商品、支払い、配送に直接関係するオプションのみを含めるようにしましょう。

チェックアウトページのUXデザインは、シンプルで明確であるべきです。商品を購入するために必要なことを、顧客に正確に伝えなければなりません。これには、配送先住所、支払い方法、配送オプションの提供に関する明確な指示が含まれます。

もし、顧客にその後のアクションを求めるのであれば、そのオプションの提供は注文の確認ページに譲るべきです。

まとめ

この記事の提案は、eコマースのUXデザインにおけるベストプラクティスを強調したものです。しかし、各ブランドはこれらの提案を異なる形で解釈することができます。eコマースUXデザインの要素の適切な表現は、制作者の意図に依存します。

ユーザーに取ってもらいたい行動に基づいて、UXデザインを作成する必要があります。コンバージョン重視のECサイトを作るには、ユーザーに信頼を確立させ、商品への欲求を喚起させるUXデザインを作る必要があります。Webサイトの各ページのデザインがそのような体験を生み出すものであれば、ユーザーが訪れる各ページを通じて、コンバージョンの確率を高めることができます。