eコマースウェブサイトデザインの究極のガイド

公開: 2022-03-11

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

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

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

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

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

ASOS eコマースWebサイトのデザインは、優れたeコマースUXを提供します
ASOSは、ビジネスに関する適切な情報とフッターで利用可能な安全な支払いを共有することにより、優れたeコマースUXを提供します。

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

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

    • 一般的な情報を提供する
    • ビジネスの背後にいる人々の写真
    • 連絡先
    • ソーシャルメディアへのリンク
    • よくある質問(FAQ)ページ
  • ストアポリシーを公開し、見つけるのがそれほど難しくないことを確認します。

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

平易な言葉で書いて、法律または内部の専門用語を避けてください。

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

eコマーストラストシール
オンライン顧客の信頼のために表示する信頼シールのいくつかの例。

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

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

ウェブサイトのルックアンドフィールは、第一印象の主な推進力です。 調査によると、人々はわずか50ミリ秒でWebサイトが好きかどうかを判断します。

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

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

eコマースウェブサイトデザインガイド:美しいウェブデザイン
レスポンシブeコマースウェブサイトのデザイン。 (Giga Tamarashviliによる)

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

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

簡単なナビゲーションのためのeコマースウェブサイトデザインのいくつかの重要な側面は次のとおりです。

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

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

製品検索

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

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

eコマースWebサイトの設計:検索結果のフィルタリング
Sportsgirlでは、検索結果の並べ替えとフィルタリングが可能です。

製品のフィルタリング

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

製品クイックビュー

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

製品クイックビューを備えたeコマースデザイン
アーバンアウトフィッターズの「クイックビュー」モーダルウィンドウ。

特別オファー

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

米国を拠点とするフルタイムのフリーランスUXデザイナーが望んでいた

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

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

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

eコマースウェブデザイン製品詳細ページ
MR PORTERの製品画像には、ズーム機能やビデオも含まれています。

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

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

eコマースウェブサイトデザインガイド
ミニマリストUIの高品質な製品画像は、製品を顧客にとって魅力的に見せ、優れたeコマースUXに貢献します。 (Greg Dlubaczによる)

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

スムーズで摩擦のないeコマースUX
商品オプションを選択し、商品をカートに追加します。 (Dannnielによる)

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

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

eコマースウェブサイトデザインガイド製品詳細ページデザイン
HODINKEEは詳細な製品情報を表示します。

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

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

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

eコマース製品の詳細ページをデザインすることは、eコマースUXに大きく貢献します
THE ICONICは、通知オプションを備えたリアルタイムの在庫情報を提供し、優れたeコマースUXを作成します。

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

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

eコマース製品の推奨事項と関連製品
フレンチコネクションは、優れたeコマースUXのための補完的で推奨される製品を表示します。

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

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

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

最高のeコマースデザインの1つ
OVOThingsのショッピングカート。

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

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

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

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

eコマースUX:eコマースチェックアウトの設計
クランプラーには、ゲストとして買い物をするオプションを備えた単一ページのチェックアウトがあります。

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

eコマースチェックアウトUIデザイン
lululemonは、購入を完了するために必要なのは3ステップのプロセスだけであることを示しています。

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

概要

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

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

•••

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

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