eコマースUX–基本的な設計戦略と原則

公開: 2022-03-11

全体的な小売環境が進化し続け、実店舗チェーンが苦戦しているため、eコマース市場は成長の準備ができています。 2021年までに、世界のeコマースの売上高は4.48兆ドルを超えると予想されており、これは2017年の2倍以上になります。

ユーザーエクスペリエンスに細心の注意を払い、顧客のショッピングフローのためのeコマースUX設計原則の標準セットを順守するeコマース小売業者および設計者は、この市場の成長を利用して、具体的な経済的利益を得ることができます。

ショッピングフローは一般的なユーザージャーニーであり、適切に実装すると、衝動買いが増え、カートの放棄が減り、全体的なコンバージョンが増加します。

ユーザージャーニーには以下が含まれます：

ウェブサイトの発見
製品の検索と閲覧
製品ページ
カート
チェックアウト
確認

この記事では、ユーザージャーニーのこれらの重要なポイントと、eコマースデザイナーが顧客のエクスペリエンスを楽しく、わかりやすく、手間のかからないものにする方法について説明します。

eコマースUXカスタマージャーニーのフェーズ — eコマースウェブサイトデザインのユーザージャーニーフェーズ。

ウェブサイトの発見

ブランドを明確に位置付ける

訪問者は、わずか50ミリ秒でWebサイトの第一印象を形成します。 eコマースWebサイトは、販売内容と市場全体のどこに適合するかを明確かつ迅速に示すことにより、ユーザーの注意を引く必要があります。

たとえば、高級宝飾品小売店のWebサイトは、予算重視の大型スーパーセンターのサイトとは見た目も感じも非常に異なる可能性があります。高級家電量販店のBang＆Olufsenは、エレガントなフォント、洗練されたカラーパレット、洗練された製品画像を使用して、ブランドの品質を伝えています。

ランディングページのeコマースUXデザイン — Bang＆Olufsenによるフォント、写真、コピーを使用したブランドポジショニング。

SEOのためにランディングページを調整する

Googleなどの検索エンジンからのユーザーの検索用語を特定のランディングページに接続することにより、eコマース小売業者は特定の製品を見つける使命を帯びているユーザーを獲得できます。

ユーザーが何かを検索するとき、それを購入しようとしている可能性が高くなります。一般的な商品検索用語のカスタムランディングページを作成すると、小売業者が売り上げを獲得する可能性が高くなります（場合によっては新規顧客）。文房具会社のPapierは、Googleの検索結果に表示される結婚式の招待状用に特別に作成されたページでこれをうまく行っています。

モバイルeコマースのランディングページ — Papierによるウェディングステーショナリー専用のランディングページ。

製品の検索と参照

オンサイト検索を提供する

非常に基本的なように見えるかもしれませんが、多くのサイトはまだ一般的なサイト全体の検索を提供していないか、提供している場合は適切に最適化されていません。しかし、オンサイト検索は、堅実なeコマースショッピング体験の基本です。

Invespによると、オンライン購入の60％は衝動的ではありません。多くの場合、人々は自分が探しているものを知っており、eコマースWebサイトの検索バーに製品名やモデル番号などのクエリを入力する方が、メニューオプションを選択するよりもはるかに高速です。

予測検索やオートコンプリートなどの追加機能により、ユーザーはオプションをすばやく確認できます。 Appleはこの戦術を、製品へのクイックリンクや人気のある提案された検索で動的に更新する検索フィールドで使用しています。

ディスカバリーモードで訪問者を刺激する

多くの買い物客は特定の商品を購入することを念頭に置いていますが、すべての訪問者が確実に購入できるわけではありません。 Nielsen Normanによると、eコマースの買い物客には5つのタイプがあり、そのうちの1つが「ブラウザ」です。ブラウザは必ずしも特定のものを探しているわけではありません。むしろ、彼らはのんびりと周りを見回して、何か面白いものを見つけたかどうかを確認しています。

eコマースWebサイトは、新しい商品やベストセラー商品を表示し、商品カテゴリを簡単かつ迅速に確認できるようにすることで、買い物客を発見モードでサポートできます。

Etsyは、現在人気のあるものを表示するだけでなく、ナビゲーションとホームページコンテンツの両方で全体的な製品カテゴリを明確に表示することで、ブラウザーを引き付けます。

eコマースUX-製品の発見 — Etsyは、カテゴリーの表示に加えて、ユーザーが人気のあるものを見つけるのに役立ちます。

フィルタとファセット検索を使用する

ファセット検索はフィルタリングを使用し、ユーザーが一度に複数の属性を選択できるようにすることで、さらに一歩進んでいます。

フィルタを作成するときは、オプションをサイズ、色、価格などの一般的な基準に限定するのではなく、販売されている製品に固有のカテゴリに特定のフィルタを追加します。これらのフィルターは、衣服のフィット感や生地、フォント、招待状の機会、ガジェットの画面サイズやプロセッサーなどです。

ユーザーがフィルターを適用すると、どのフィルターが適用されたかがUIにすぐに表示されます。また、ユーザーは適用されたフィルターを簡単に削除できる必要があります。

ASOSは、カテゴリごとに詳細な範囲のフィルターを表示し、どのフィルターが適用されているかを明確に示します。

製品ページ

主なアクションを目立つように表示する

ユーザーは、ショッピングカートに商品を入れるなど、重要なことを行う方法を考えてはいけません。「カートに追加」や「今すぐ購入」などの主要なアクションをボタンとして表示し、残りのコンテンツと比較して画面上の目立つ場所に配置します。

ホームセンターの小売業者Lowe'sは、ページで最も目立つものの1つとして、大きな緑色のボタンを使用してカートに商品を追加する方法をユーザーに知らせます。

eコマースUXのベストプラクティスは、主要なアクションを目立つように表示しました — Lowe'sは、「カートに追加」の主要なアクションを大きな緑色のボタンとして示しています。

詳細な製品情報を提供する

購入者が製品を理解できるように、高品質でプロフェッショナルな写真と詳細な説明を表示します。

段階的開示と視覚的階層を使用して、ユーザーが必要に応じて適切な量の情報を提供します。最も重要な情報をすぐに提供してから、詳細を知りたいユーザーのためにページのさらに下に詳細を追加します。

長い説明をセクションに分割します。たとえば、概要、サイズ/寸法、詳細な機能、配送情報などです。 Myproteinのように、追加のセクションに展開/折りたたみナビゲーションを使用すると、ユーザーが圧倒されるのを防ぐことができます。

モバイルeコマースUX-製品の説明 — 製品の説明は、Myproteinの拡張可能なセクションのセットで構成されています。

顧客の信頼を築く

配送オプション、製品の入手可能性、返品ポリシーについて顧客に推測させないでください。このすべての情報がすぐに利用できることを確認してください。これにより、顧客の信頼と信頼が構築され、不確実な顧客を購入に向かわせることができます。彼らが何かを返すことができるかどうか、そしてどのようにできるかを知ることは、彼らがより多くの情報に基づいた決定をするのに役立ちます。

ASOSは、各製品名の下のリンクからアクセスされるモーダルを使用して、各製品ページに重要な出荷および返品情報を明確に表示します。

eコマースUX-配送と返品のポリシー — ASOSは、商品の詳細ページからリンクされたモーダルで配送と返品の情報を表示します。

社会的証明を追加する

社会的証明は、人々が他人の行動に影響されることを意味する概念です。この概念は、ロバート・チャルディーニ博士（影響力の科学の第一人者）の説得の原則の一部であり、機能することが証明されています。

eコマースの小売業者は、顧客の評価、レビュー、コメントを追加することで、社会的証明で購入者の信頼を高めることができます。アマゾンの商品には何千ものレビューがあり、ユーザーはそれらを星評価レベルで並べ替えることができます。

ショッピングカート

明確な注文の概要を表示する

購入者が購入を完了する前に、購入したアイテム、各アイテムの数量と価格、および注文の合計を含む、明確で簡潔な注文の概要を提示します。ユーザーが更新または削除したいアイテムを編集できるようにし、配送料の概要を含めることで配送料の予想外の事態を回避します。

Modistは、明確な注文の概要と領収書の両方を表示します。ユーザーは、選択したアイテムを簡単に管理し（ウィッシュリストへの移動、削除、数量の変更）、送料と税金の概要と詳細な内訳の両方を確認できます。

モバイルeコマースUXショッピングバッグ — モディストの注文概要と詳細な内訳。

チェックアウト

ユーザーがゲストとしてチェックアウトできるようにする

衝動買いは、eコマースに費やされるすべてのお金のほぼ40％を占めています。購入者がゲストとしてチェックアウトできるようにすることで、アカウントの作成やログインの余分なハードルを排除します。ゲストとしてのチェックアウトプロセス中に、アカウントを作成するための単純な統合により、一部のゲストがアカウントユーザーに変換される場合があります。

Aesopを使用すると、ユーザーはゲストとして簡単にチェックアウトできると同時に、サインインまたは登録することもできます。 1つのフォームで複数のオプションを提供することで、すばやくチェックアウトしたいユーザーの潜在的な購入ブロッカーを排除できますが、サインアップしたいユーザーにもそうする機会が与えられます。

eコマースUXサインイン — 「ゲストとして続行」オプションを備えたAesopサインイン画面。

チェックアウトプロセス中に視覚的なフィードバックを提供する

プログレスバーを含めると、顧客はチェックアウトプロセスのどこにいて、どれだけ完了できるかを理解するのに役立ちます。

Appleは、プロセスの各ステップをユーザーに表示し、進行状況リンクを使用してステップ間を移動できるようにします。進行状況が保存されるため、ユーザーはステップ間を移動するときに何も失うことはありません。

eコマースUXチェックアウトプログレスバー — Appleには、段階的なチェックアウトプログレスバーがあります。

一般的な支払い方法を使用する

主要なクレジットカードによる支払いを許可することに加えて、PayPalのような他の一般的な支払い方法を追加すると、クレジットカード情報を渡したくない購入者のコンバージョンが増える可能性があります。

オランダでは、iDEALはeコマーストランザクションによく使用され、オランダの消費者の60％が最近の購入で使用しています。衣料品小売業者のScotch＆Sodaでは、購入者はiDEALとPayPalでチェックアウトできます。

eコマースの支払いオプション — Scotch＆Sodaのチェックアウトプロセスにおけるさまざまな支払い方法。

注文確認

購入後に詳細な注文確認を表示する

顧客が購入を完了したら、支払い処理の成功と、住所、配送方法、配送予定日などの配送の詳細を含む確認を顧客に提供します。

このAmazonの確認メールの概念は、注文番号を示し、購入した商品の概要を示し、出荷日と将来の購入に関するいくつかの推奨事項を提供します。

eコマースのUX注文確認 — DrewChristianoによる注文確認メールのコンセプト。

注文と配送の最新情報をメールで送信する

確認画面に加えて、確認メールを送信すると、購入のステータスをユーザーに通知するのに役立ちます。すべての顧客は確認メールを受け取る必要がありますが、これは、ユーザーがゲストとしてチェックアウトしていて、過去の注文を確認するためのアカウントをWebサイトに持っていない場合に特に役立ちます。

配達の遅れなど、注文によって何かが変わった場合は、更新を送信します。商品が発送されたら、追跡番号を記載した最新のメールを送信します。

概要

この記事の原則は、すべてのeコマースデザイナーが従うべきユーザージャーニータッチポイントのベースラインを提供しますが、それはほんの始まりにすぎません。モバイルeコマースUXの詳細については、eコマースにアクセスしてモバイルエクスペリエンスを確認するか、ランディングページのデザインの詳細をご覧ください。効果的なランディングページをデザインする方法。

成長するeコマース市場は小売業者にとって多くの機会を表しています。 UXの重要性を認識し、eコマースのユーザージャーニーのベストプラクティスに従う人は、競争力を維持し、収益にプラスの影響を与えることができます。

•••

Toptal Designブログでさらに読む：

著名なeコマースのトレンドとそのデザインへの影響（インフォグラフィック付き）
モバイルエクスペリエンスのためのeコマースUX
eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
eコマースウェブサイトデザインの究極のガイド
eコマースの再設計：マイナーな変更によってUXが大幅に改善された方法