米国のeコマースの売上高は2018年に新たな高みに達し続けています。世界中で、eコマースは2.3兆ドルの堅実な利益を記録し続けます。しかし、あるeコマースサイトが別のサイトに勝つ理由は何でしょうか。

製品の品質、ブランド認知度、送料、返品ポリシー、信頼性、カスタマーサービスなど、いくつかの要因がeコマースWebサイトの全体的な成功を決定します。しかし、思慮深い ユーザーエクスペリエンスデザイン また、お客様に満足のいく摩擦のない体験を提供するための鍵でもあります。それは潜在的なクリックを実際のeコマーストランザクションに変換するだけでなく、顧客を何度​​も何度も訪れさせます。

これは、優れたeコマースWebサイトを作成するための包括的なeコマースUXデザインガイドであり、例が含まれています。

信頼とセキュリティのためのeコマースの設計

何よりもまず、買い物客が信頼できると感じるウェブサイトをデザインすることが重要です。ほとんどの買い物客は、プライバシーと、サイトが安全なトランザクションを提供することによって個人データを保護するかどうかについて懸念しています。ウェブサイトが信頼できると感じない場合、彼らは単に他の場所で買い物をすることを選択します。

信頼性を伝えるいくつかの方法は次のとおりです。

• ビジネスの概要を含めます。

  • 一般的な情報を提供する
  • ビジネスの背後にいる人々の写真
  • 連絡先
  • ソーシャルメディアへのリンク
  • よくある質問（FAQ）ページ

• ストアポリシーを公開し、見つけるのがそれほど難しくないことを確認します。

  phpmysql出力を個別の配列に

  • 配送と返品のポリシー
  • 返品プロセスと返品できる製品の概要
  • 買い物客の個人情報と財務情報をカバーするプライバシーポリシーへの簡単なアクセスを提供します（これは非常に重要です）

わかりやすい言葉で書いて、法的または内部のポリシー用語を避けてください。

• 製品レビューを共有します。 買い物客が商品についてもっと理解できるように商品レビューを提供します。これは、彼らが抱える懸念を軽減し、優れたeコマースUXを提供するのに役立ちます。レビュー担当者に関する追加情報とともに製品レビューを提供するか、レビューを要約することにより、さらに一歩進んでください。この手順により、買い物客が他の人の意見を最大限に活用しやすくなります。
• 安全なサーバーを使用してください。 買い物客は、オンラインで購入する間、個人情報が安全に保たれることを期待しています。 SSL （Secure Sockets Layer）証明書は、WebサイトのIDを認証し、安全を維持するために必要な情報を暗号化します。これは、チェックアウトが安全であることを示す重要なサインです。 SSLを実装し、SSL証明書バッジを表示することで、買い物客にデータが保護されていることを確認します。

• 認識された追加 トラストシール 。 トラストシールは、Webサイトの正当性とセキュリティを検証します。一部の信託会社は、取引が不正であることが判明した場合に保険を提供することにより、保護の層を追加することさえあります。認められたトラストシールを使用することで、潜在的な買い物客に安全な取引プロセスを保証します。 売上増加 より優れたeコマースUXを提供します。
• 細部に注意を払ってください。 タイプミス、画像の欠落、リンク切れ、404エラー（ページが見つかりません）、またはその他のeコマースUXを殺す間違いを回避することにより、Webサイトを合法かつプロフェッショナルに見せます。

eコマースUIデザインの考慮事項

Webサイトのルックアンドフィールは、第一印象の主な推進力です。 研究 人々はわずか50ミリ秒でウェブサイトが好きかどうかを判断すると結論付けています。

ここにいくつかの重要なユーザーインターフェース設計のヒントがあります：

• ブランドアイデンティティに従ってください。 ブランディングは、Webサイト全体で明らかにする必要があります。ブランドを反映した色を選び、どのような商品が売られているかを明確にするためにスタイルを設定します。オンライン、店舗、モバイルデバイスを問わず、すべてのチャネルでブランドエクスペリエンスの一貫性を確保します。これは、強力なブランドと顧客の関係を構築するのに役立ちます。
• 視覚的な階層を採用します。 最も重要なコンテンツは、スクロールせずに見える範囲に表示する必要があります。場合によっては、空白を少なくしてアイテムを近づける方が、重要なコンテンツをスクロールせずに見える範囲に押し込むよりも優れています。
• 設計しすぎないでください。 フォントフェース、サイズ、色などのフォント形式を制限します。テキストがグラフィックに非常に似ていると、広告と間違えられます。コントラストの高いテキストと背景色を使用して、コンテンツをできるだけ明確にします。
• 既知の記号に固執します。 識別しやすいアイコンまたは記号を使用してください。なじみのないアイコンは買い物客を混乱させるだけです。起こりうる混乱を避ける良い方法は、アイコンにラベルを付けることです。
• ポップアップウィンドウは避けてください。 ポップアップウィンドウは気を散らすものです。貴重な情報が含まれている場合でも、買い物客はすぐにそれらを却下する可能性が高くなります。一度消えると、たとえ必要であっても、買い物客が再び情報を見つけるのは困難です。

摩擦のないeコマースサイトナビゲーションの重要性

摩擦のない方法があります。ナビゲーションとは、人々がWebサイト内を移動し、探しているものを見つけて、最終的に行動を起こすのがいかに簡単かということです。 eコマースのショッピングエクスペリエンスはシームレスである必要があります。そうすれば、買い物客はプロセスの途中で立ち寄ることがありません。

のいくつかの重要な側面 eコマースのウェブサイトのデザイン 簡単なナビゲーションには次のものが含まれます。

明確に定義された製品カテゴリ

ナビゲーションのトップレベルには、サイトが提供する一連のカテゴリが表示されます。製品を意味のあるカテゴリとサブカテゴリにグループ化します。カテゴリラベルは、製品の範囲を説明する1つの単語として最適に機能するため、買い物客はそれらをスキャンして、それらが何を表しているのかを即座に理解できます。優れたeコマースUXは、サイトの主要なメイクまたはブレイク機能であるため、可能な限りユーザーテストを行うことをお勧めします。

商品検索

簡単に言えば、買い物客が商品を見つけられない場合、商品を購入することはできません。探しているものを簡単に見つけるのに役立つ検索機能を構築します。

• 検索を遍在させます。 すべてのページと見慣れた場所に検索ボックスを配置します。ボックスは、表示され、すぐに認識でき、使いやすいものでなければなりません。検索ボックスを実装するための標準的な位置は、ページの右上または上部中央、あるいはメインメニューです。
• あらゆる種類のクエリをサポートします。 検索では、製品名、カテゴリ、製品属性などのすべてのタイプのクエリと、カスタマーサービス関連の情報をサポートする必要があります。買い物客にさまざまな機能の使用を提案するために、入力フィールドにサンプルの検索クエリを含めることをお勧めします。
• 検索のオートコンプリート機能があります。 オートコンプリート機能により、買い物客は探しているものを簡単に見つけることができ、すでに検索しているエリア内の商品を提案することで販売の可能性を高めることができます。
• 結果の並べ替えとフィルタリングを許可します。 買い物客がさまざまな基準（ベストセラー、最高価格または最低価格、製品評価、最新アイテムなど）に基づいて検索結果を並べ替えたり、特定のカテゴリに当てはまらないアイテムを削除したりできるようにします。

製品のフィルタリング

与えられる選択肢が多ければ多いほど、選択するのは難しくなります。フィルタを実装して、買い物客が適切な商品を見つけられるようにします。それは彼らが彼らの選択を狭めそして彼らの望ましい製品範囲に直接ジャンプするのを助けるでしょう。

製品クイックビュー

「クイックビュー」は、不要なページの読み込みを排除することで、買い物客が適切な商品を見つけるのにかかる時間を短縮します。通常、製品の詳細は、表示されたページの上のモーダルウィンドウに表示されます。すべての製品の詳細を表示しようとしないでください。代わりに、完全な詳細を表示するための完全な製品ページへのリンクを含めてください。また、目立つように配置された「カートに追加」ボタンと「ウィッシュリストに保存」機能を必ず含めてください。

特別オファー

買い物客は常に特別オファー、割引、または最良の取引を探します。買い物客がそれらについて知っているように、排他的なオファーを表示します。価格差がそれほど大きくなくても、 心理的感覚 いくらかのお金を節約することは、優位に立つという幻想を生み出します。

eコマース製品ページのデザイン

買い物客が成功したときの優れたeコマースUX 見つける 彼らが望む製品、彼らに任せなさい 探し出す 製品について。たくさんの画像、詳細な説明、および製品に関するその他の有用な関連情報を含めることにより、対面でのショッピング体験にできるだけ似た体験を作成する製品ページを設計します。これが何を意味するのかを詳しく見てみましょう。

優れた製品画像を提供する

eコマースでは、買い物客は製品に触れたり、感じたり、試したりすることはできません。代わりに、すべては彼らがオンラインで見るものに依存します。これが、商品のすべての側面を明確に示す商品画像を提供することが重要である理由です。完璧な製品画像のチェックリストは次のとおりです。

• 白い背景を使用してください。 商品画像の背景は、商品自体の邪魔になったり、競合したりしてはなりません。白い背景は、製品を目立たせることができ、ほとんどすべてのスタイルや配色で機能するため、最も効果的です。
• 高品質で大きな画像を使用します。 良い画像が商品を売っています。高品質の画像は買い物客の興味を引き、彼らが何を買っているかを正確に示します。大きな画像があると、買い物客はズームアップして商品を詳細に調べることができます。

• さまざまな画像を使用してください。 製品のより完全な感覚を提供するために、さまざまな角度から製品を表示し、クローズアップを含めます。製品を動かすことができる360度のビューは、実際に店に入ってそれに従事することに近い体験を提供するための良い方法です。 VR eコマースは、この体験の次の波です。
• ビデオを使用します。 ビデオには、短時間で多くの情報を配信する機能があります。ビデオを使用して、使用中の製品を示し、可能な限り多くの機能情報を提供します。
• 一貫性を保つ。 複数のページで一貫性があり、Webサイトの他の部分のルックアンドフィールとも一致する画像を使用します。これにより、すべてがすっきりと整頓された状態に保たれます。主な商品画像は、商品のハイライトや注目アイテムのセクションなど、サイトのすべての領域で同じである必要があります。

適切な量​​の製品情報を提供する

買い物客に製品に関する詳細情報を提供して、情報に基づいた購入決定を下せるようにします。在庫状況、さまざまなサイズまたは色のオプション、寸法、サイズチャート、使用されている材料、総コスト、保証などを表示します。製品についての残りの質問が少ないほど、購入する可能性が高くなります。

説得力のあるデザインを採用する

による 不足の原則 、人間は、不足しているオブジェクトに高い値を置き、豊富なオブジェクトに低い値を置きます。不足している商品の数を表示したり、在庫がないサイズをグレー表示したり、販売期限を表示したりして、販売プロセスに緊急性を感じさせます。希少性は潜在的な買い手に行動を起こす動機を与えるでしょう。

企業はますます高度な心理学研究を使用しており、より多くのエンゲージメントと購入を促進するために、以前は芸術であったものを科学に変えています。 説得力のあるデザイン eコマースでは、より多くの購入を獲得するための非常に効果的な方法です。

関連商品とおすすめ商品を表示

買い物客が好むかもしれない類似の商品を表示します。これは、他の人が購入した現在の商品とうまく機能します。これは、商品の詳細ページまたはショッピングカートに表示でき、買い物客をニーズに合った商品に案内するのに役立ち、関連商品をクロスセルするための優れた方法である買い物を続けるように促す可能性があります。

ショッピングカートのデザイン

ショッピングカートは、買い物客が選択した商品を確認し、最終決定を下し、チェックアウトに進む場所であるため、不可欠です。ショッピングカートの主な目的は、買い物客をチェックアウトに導くことです。以下は、ユーザーフレンドリーで買い物客がさらに購入することを奨励するショッピングカートを設計するためのヒントです。

• 明確な行動を促すフレーズ（CTA）を使用します。 ショッピングカートページでの主な行動を促すフレーズは、チェックアウトボタンです。明るい色、たくさんのクリック可能な領域、シンプルな言葉を使用して、チェックアウトボタンを表示し、わかりやすく、使いやすくします。
• 適切なフィードバックを提供します。 商品がショッピングカートに追加されたら、すぐに明確に確認されていることを確認してください。買い物客は、目立たない確認テキストを表示するなど、不適切なフィードバックに混乱します。動きは人間の目を引き付けるので、アニメーションを使用することをお勧めします。
• ミニカートウィジェットを使用します。 ミニカートを使用して、買い物客が現在のページを離れることなくカートに商品を追加できるようにします。また、製品をナビゲート、発見、追加することもできます。ミニカートウィジェットは、常にフルページのショッピングカートにリンクする必要があります。

• 製品の詳細を表示します。 ショッピングカートに商品名、画像、サイズ、色、価格などの詳細を表示すると、買い物客は各商品を覚えたり、商品を比較したりするのに役立ちます。カート内の商品を商品ページ全体にリンクして、買い物客が必要に応じて詳細を確認できるようにします。
• カートを簡単に編集できるようにします。 サイズ、色、数量などの詳細を削除、後で保存、または変更する機能は、簡単にアクセスできる必要があります。
• 予期しない送料と税金の驚きを避けてください。 予期しない送料が主な理由の1つです 買い物客はショッピングカートを放棄します 。コストを正確に計算し、配送予定日を事前に計算して、配送オプションと税金を設定します。

eコマースチェックアウトデザイン

スタイリッシュでトレンディなデザインは、成功するeコマースWebサイトを決定するものではなく、必ずしも優れたeコマースUXを提供するものでもありません。 eコマースの成功は、完了した購入の数によってのみ測定されます。適切に設計されたチェックアウトページを作成するいくつかの方法を次に示します。これは、変換の成功に貢献します。

• さまざまな支払いオプションを提供します。 支払いに関しては、買い物客が異なれば好みも異なります。可能な限り多くの支払いオプション（ターゲットオーディエンスに応じて）に対応して、顧客ベースを拡大し、買い物客が注文を簡単に完了できるようにします。
• 複雑にしないでおく。 購入を完了するためのフィールドとステップの数を最小限に抑えます。デフォルトで請求先住所として配送先住所を使用することは、フィールドの数を最小限に抑えるための良い方法です。理想的には、買い物客がカートを表示して配達と支払いの情報を入力できる単一ページのチェックアウトを設計します。

• 登録をオプションにします。 買い物客に最初の購入前にアカウントを作成するように強制すると、 買い物客を追い払う 。購入が完了した後に登録するオプションを提供し、登録を依頼するときに登録の利点を強調します。保存された配送先住所や支払い情報などの個人情報によるチェックアウトの高速化や、登録メンバーのみが利用できる限定オファーへのアクセスなどのメリットがあります。
• 明確なエラー表示を使用してください。 購入したり、理由を理解したりできないことほどイライラすることはありません。フォームの送信後にエラーを表示する代わりに、エラー通知をリアルタイムで表示します。明確で簡潔なエラーメッセージを、修正が必要なアイテムの真上または横に配置して、買い物客がそれらに気づき、理解できるようにします。

• 人々を軌道に乗せます。 複数ページのチェックアウトを使用する場合は、購入を完了するために残っているステップ数を示す進行状況バーを含めます。これにより、あいまいさがなくなり、買い物客が正しい方向に進んでいることが保証されます。購入が完了したら、注文確認と注文ステータスを出荷追跡とともに表示します。
• サポートを提供します。 チェックアウトプロセス全体にライブチャットまたは連絡先番号を含めると、買い物客が質問をしたときに、サイトを離れて他の場所に行く必要がなく、すぐに回答を得ることができます。

概要

オンライン買い物客は、何があっても摩擦のない体験を期待しています。 eコマースサイトを設計する場合、それはWebサイトを構築するだけでなく、受動的な買い物客を有料の顧客に変えるオンラインショッピング体験を作成することです。

うまくいけば、これ eコマースのウェブサイトのデザイン ガイドは、プロフェッショナルで魅力的でユーザーフレンドリーな優れたeコマースUXを構築し、買い物客が何度も何度も戻ってくるようにするために、重要な設計上の決定を下すのに役立ちます。急速な成長と比較的低い市場シェアは、新しいプレーヤーが従来の業界リーダーを凌駕する大きな機会がまだあることを意味します。

•••

ApeeScapeデザインブログの詳細：

• eコマースUX–基本的な設計戦略と原則
• モバイルエクスペリエンスのためのeコマースUX
• UXデザインを通じてeコマースの買い物客を引き付ける方法
• eコマースの再設計：マイナーな変更によってUXが大幅に改善された方法

基本を理解する

eコマースオンラインショッピングとは何ですか？

eコマース（別名オンラインショッピング）は、消費者がWebブラウザを使用してインターネット経由で販売者から直接商品やサービスを購入できるようにする電子商取引の形式です。

ウェブサイトの「行動を促すフレーズ」とは何ですか？

「行動を促すフレーズ」とは、ウェブサイトまたはアプリ内で、ニュースレターの登録、詳細情報の取得、販売資料のダウンロード、または完了などのアクション（通常はビジネスにとって有益）を実行するように顧客を誘導するものを表します。 eコマースの購入など

eコマースとその利点は何ですか？

eコマース（別名オンラインショッピング）は、インターネットを介したサービスや商品の販売と購入です。便利で、24時間年中無休で利用でき、検索可能で、グローバル（幅広い顧客リーチ）で、売り手と顧客にとって費用効果が高く、物理的なスペースをあまり必要としません。

ウェブサイトのナビゲーション構造は何ですか？

Webサイトのナビゲーション構造とは、Webサイトの設定方法、つまり、個々のサブページが相互にリンクされている方法を指します。 Webサイトに多数のサブページがある場合、訪問者がサイトのナビゲーションを使用してWebサイトのコンテンツを閲覧できるように、それらをホームページにリンクする必要があります。

eコマースサイトの適切なコンバージョン率はどれくらいですか？

顧客のコンバージョン率は業界によって異なります。ある人にとって良いことは、別の人にとっては良くないかもしれません。ただし、2016年第4四半期現在の世界中の買い物客の現在の平均コンバージョン率は2.95％です。