2021年にeコマースウェブサイトを再設計するために知っておくべきこと

eコマースウェブサイトを再設計するのは今年ですか? あなたがそれから数年が経過している場合、あなたは多くが変わったことを知る必要があります。

言うまでもなく、現代のeコマースサイトは最初にモバイル用に設計する必要があります。私が扱うほとんどのサイトでは、モバイルデバイスからトラフィックの70%以上を獲得しているからです。 ただし、これは単なる出発点にすぎません。サイトをユーザーに変えて顧客にしたい場合、考慮すべき微妙な点がたくさんあります。

私は相談しました 使いやすさ 過去XNUMX年間の幅広いeコマースサイトで、最高のサイトが従う原則を理解してきました。 私の本のガイドラインに触発されて、今日のユーザーがサイトをスクラッチできるようにするためのXNUMXつの方法を紹介します eコマースWebサイトの設計.

ホームページで長い動画を避ける

ホームページは感動するところです。 多くのウェブサイトがハイエンドの写真にお金をかけていますが、ここでビデオを使用して製品を自慢したり、ブランドストーリーを伝えたりすることを検討してください。 結局のところ、ビデオは今やどこにでもあり、特にソーシャルメディアではそうです。

ビデオを正しく使用すれば、ユーザーに刺激を与えるだけでなく、ユーザーに情報を提供するのに役立ちます。 しかし、ビデオがどれほど派手であっても、ユーザーが再生をクリックする必要がある場合は、 ほとんどの人はそれを無視します。 私が見てきた多くのユーザーテストでは、これがランディングページの動画で最も一般的な動作です。

どうして? ユーザージャーニーのこの段階では、彼らの注意のスパンは短いです。 ユーザーは、サイトを離れて立ち直ってバウンスする可能性が高く、未知のものを見るために時間を費やすことはありません。

最初は、ユーザーがすばやく移動できるように、短くて静かな自動再生のループ動画に固執する必要があります。 このようにして、彼らは深く関与する必要なく、情報を取得できます。 長い動画は、ユーザーが興味を持っているときに、製品の機能などを説明するための旅の後半で非常に役立ちます。

Pryntのサイトでは、短い自動再生ビデオを使用して、実際の製品を紹介しています。 音ですべてを見るオプションもあります。

ホームページに過剰なコンテンツを入れないでください

ユーザーをホームページに誘導するというハードマーケティングの仕事をしていて、あなたの店に説得力のある売り込みを作成した場合、次は何をしますか? あなたの会社についてあなたに彼らに話すことができる多くがあるので、今チャンスですか?

注意してください。 ランディングページを長くすると、ユーザーがスイッチを切ったり混乱したりするリスクが高まります。 ユーザーは快適にスクロールできますが、コンテンツが自分のタスクに直接関連していない場合はすぐに停止します。

デザインするときはいつでも、XNUMXページ、XNUMXつの目的'。 このページの目的は、販売する商品を紹介し、ユーザーにそれらの製品を探してもらうことです。

最新のXNUMXつのブログ投稿、最新のツイート、Instagram画像の壁を本当に見る必要がありますか? ソーシャル投稿は、ユーザーをサイトに追加したばかりであり、クリックすると再び表示されなくなるため、特に役に立ちません。

ページに載せるものが多ければ多いほど、 ユーザーに与える気晴らし あなたの主な行動とあなたが彼らにしてほしい重要なことから。 モバイルユーザーはセッションが短く、タスクの達成に専念する傾向があります。余分なコンテンツはそれには役立ちません。

フィルターに簡単にアクセスできるようにする

多くの製品がある場合、ユーザーが必要なものを見つけられるようにするには、フィルターが不可欠です。 eコマースサイトの大部分(約 私が勉強した人の90%)モバイルのオーバーレイにフィルターを設定します。 これは、利用可能なスペースが少ない場合に意味がありますが、ユーザーが実際にそれらを見る可能性が低いことを意味します。

原則として ユーザーの95%がデフォルトを変更しない これは、特定のオプションを選択するためにフィルターメニューを開く場合にも当てはまります。 これは、私が見てきたeコマースのユーザーテストでも実証されています。 リストページで商品を検索することは、eコマースのブラウジングエクスペリエンスがデスクトップで優れている領域のXNUMXつです。

ユーザーがフィルターをかけると、ユーザーは実際に必要な製品を見つける可能性が高くなります。 モバイルでのあなたの課題は、スペースを節約する方法を見つけることです。 XNUMXつの方法は、オプションのボタンを備えたページに最も関連性の高いフィルターカテゴリを表示することです(下記のMacyを参照)。 XNUMXつをタップすると、そのフィルターが適用されたリストが読み込まれ、その時点で次に関連性の高いフィルターが表示されます。

eコマースの再設計-メイシーズのフィルターオプション
メイシーズのサイトはいくつかのフィルターオプションをボタンとしてページに取り入れています。 バーバリーは、フィルターカテゴリをページに表示します。

 

少なくとも、フルフィルターメニューにアクセスするためのボタンが明確であることを確認してください。 また、フィルターがいつ適用されるかを明確に示す必要があるため、ユーザーは限られた結果セットをいつ表示するかを知ることができます。

大きな画像用にリスティングを再設計する

ほとんどのeコマースリスティングページは、一度に多くの商品を画面に表示しようとします。 その結果、製品 画像はかなり小さい傾向があります (それがサムネイル画像として伝統的に知られている理由です)。

しかし、画像は、ユーザーがどの製品を選択するかについて決定を下すのに役立つ重要な部分です。 多くの場合、それはどのテキストよりもはるかに多くのことを教えてくれます。 衣類や家具などの製品は、ユーザーが提供するさまざまなものを主観的に区別することに依存しています。

モバイルでも大きな画像を使用できます。 Instagramなどのアプリは、ユーザーがどこにいても高品質を期待するようにしており、私はユーザーがこれを高く評価するのをよく見ました。 彼らがサイトのどこにいるかは関係ありません。優れた写真は常に愛されています。

Airbnbには、スクロールできる大きな画像があります(左)。 Zara(右)のリストには全画面幅の画像があります。

もちろん、いくつかの画像で何かをよりよく売れると思うなら、そうしてください。 旅行サイトでは、リストのサムネイルに複数の写真があり、それらをスクロールするための微妙な矢印が付いています。 多くの衣料品サイトでは、製品を単独で表示し、モデルが着用するオプションを提供しています。

製品オプションをボタンとして表示する

多くの製品は、色、サイズ、素材など、さまざまなバリエーションで入手できることに注意してください。 製品の詳細ページは、ユーザーが最終的に選択する場所です。 選択を簡単にするために、これらのオプションをドロップダウンメニューにダンプしないようにする必要があります。

彼らはする必要があります 視覚的なボタン ユーザーがすべてのオプションを確認できるようにするため、バリエーションが価格の変化を意味する場合はそれらを明確にする必要があります。 バリアントが製品の外観(色など)を変更する場合、それを選択すると、メインの製品イメージが更新されます。 これにより、何が注文されるかについてユーザーに疑いの余地はありません。

eコマースの再設計-ナイキのサイズオプション
John Lewis(左)には、視覚的なインジケーターが付いたボタンとして製品の色があります。 Nike(右)はすべてのサイズオプションを公開し、利用できないサイズを無効にします。

別の利点は、特定のボタンを無効にすることにより、ユーザーは在庫切れのバリエーションを一目で確認できることです。 この場合も、オプションのドロップダウンリストをスクロールする手間が省けます。

サイズの選択に関しては、デフォルトのサイズを設定しないことをお勧めします。 ユーザーがいる場合、必要なデフォルトではなくデフォルトを追加してしまう可能性があります。 これにより、多くの返品や不満を抱く顧客を獲得することができます。

共有ボタンを省く

Facebookは、 Twitter、Pinterest、Instagram、LinkedIn、Snapchat。 ユーザーはおそらくこれらのXNUMXつ以上でたむろします ソーシャルネットワーク。 それで、あなたは彼らにあなたの製品詳細ページの共有ボタンを与えるべきですか?

多くのeコマースサイトは、人々がウェブ上で自分の商品を宣伝することを奨励することを期待して、これらの小さなアイコンをまだ表示しています。 残念ながら、それらはほぼ間違いなく時間の無駄です。

誰もそれらをクリックしません。 実際に0.2%の人が ある調査によると。 また、コードのスニペットのように見えるかもしれませんが、ページの速度を遅くする追加のものがたくさん付いています。

有償の「インフルエンサー」の台頭は、現代のユーザーがブランドのために何かを持たずに放送することをもはや望まないことを意味します。 より多くの人々が友人や家族とプライベートに共有することをいとわないでしょう。 電子メールまたはWhatsAppなどのインスタントメッセージングサービスを介した共有を可能にするリンクは、より適切に機能する可能性があります。

支払いウォレットを統合する

などの決済財布サービス PayPal、Apple PayとAndroid Payが増加しています。 それらをeコマースの決済フローのオプションと見なすことがますます一般的になっています。 実際、彼らは標準のチェックアウトを中止し、おそらく クレジットカードと現金の使用 全部。

eコマースの再設計-Amazon Payの統合
Tamara Mellon(左)のバスケットとチェックアウトには、Apple Pay、PayPal、Amazon Payのオプションがあります。 グッチは、「バッグに追加」の通知からPayPalにジャンプする機能を提供します。

パスワード、指紋、または顔スキャンを入力して、すぐにチェックアウトを完了することができることは、フォームに記入するよりもはるかに便利です。 eコマースがモバイルに支配されているため、手間のかかるフォーム入力を伴わない簡単な支払いを提供することが不可欠です。

非常に使いやすいので、より多くのユーザーがあなたと一緒にチェックアウトを完了することができます。 ユーザーが以前にブランドについて聞いたことがない場合は、仲介者としてのウォレットを使用する方が安全だと感じる可能性が高いため、セキュリティ上の利点もあります。

私がチェックアウトフローで実行したユーザーテスト全体で、「PayPalを使用するオプションを非常に好む」、「セキュリティに非常に配慮しており、PayPalを使用してのみ支払います」などのコメントを定期的に聞きます。 PayPalは現在よく知られていますが、どちらを使用するかを決定するときは、サイトで最も人気のある国とデバイスで行ってください。

ユーザーに収集を許可する

eコマースWebサイトの数が増えているため、ユーザーは注文を配達するのではなく収集することができます。 これは、頻繁に家にいないユーザーや、自分の職場に配達できないユーザーに適しています。 このオプションを指定すると、あなたから購入できるユーザーの数が増えるだけです。

最も簡単な(そしてしばしば最良の)アプローチは、チェックアウトでの配達の代わりにコレクションを追加することです。 ユーザーに現在地を入力してもらい、注文を受け取る場所のオプションを表示するよう依頼します。 集荷場所の営業時間を示すことも重要です。このデータは、多くの場合、配送会社との統合から取得されます。

ASOSチェックアウトからのクリックアンドコレクトウィンドウ。ユーザーは、配達先のコンビニを選択できます。

より複雑なアプローチは、サイト上のすべての製品詳細ページに収集するオプションを統合することです。 あなたが持っている場合、これは理にかなっています レンガとモルタル店 特定のお店での在庫確認ができるので。

ただし、ユーザーが複数の製品を注文すると、問題が発生する可能性があります。 彼らが注意しなければ、彼らは配達のためのいくつかの製品と収集のためのいくつかで終わるかもしれません(「混合」バスケット)。 これを回避するには、注文全体に適用されるように、ユーザーに集荷または配達をバスケット段階で指定させることをお勧めします。

eコマースに関するその他のアドバイス

これは、eコマースサイトを2020年以降に適合するように再設計するための66つの方法でした。 もちろん、完全なeコマースWebサイトを再設計する場合、それ以上の考慮事項があります。 実際、私は10年間のUXデザインの経験に基づいて、コンバージョンをもたらすオンラインストアを設計するためのXNUMXのガイドラインを含む本を書いています。

この本はDesigning ecommerce Websitesと呼ばれています。 Amazonで入手可能 ペーパーバックやKindleを含むさまざまな形式で。 または、あなたは 私のサイトのデジタルPDFバージョン、印刷された本のすべてのイラストが含まれています。 あなたも得ることができます 15%オフ プロモーションコードPLATFORMS付きの期間限定のデジタルバージョン。