eコマースUXの良い点、悪い点、醜い点

公開: 2022-11-02

ユーザー エクスペリエンス (UX) は、あらゆるオンライン ショッピング ジャーニーの中核です。 個々の店舗ごとに異なるように見えるため、自分の店舗にアプローチする方法を知るのが難しい場合があります. 幸いなことに、e コマース ストアを設計して顧客に最高の UX を提供する際に考慮できる重要な側面がいくつかあります。

優れたUXの重要性

ユーザー エクスペリエンス (UX) は、顧客がブランドとやり取りしている間に提供する全体的な旅です。 これには、以下を含むがこれらに限定されない多数のものが含まれます。

  • あなたのサイトをナビゲートすることがどれほど理解しやすいか

  • グラフィックデザインの魅力

  • チェックアウトプロセスの簡単さ

e コマース UX は、カスタマー エクスペリエンスに不可欠であるだけでなく、ブランドの一貫性においても重要な要素です。 訪問者は常に、サイトとの質の高いやり取りを期待しています。 それを一度でも提供しないと、組織に対する彼らの見方が変わる可能性があります。 顧客は、優れたレビューを受け取ったビジネスに対して最大 31% 高い金額を支払うことをいとわないことを考えると、ブランド アイデンティティの UX を維持することは、組織の成功に直接影響を与える可能性があります。

UX を改善するための 3 つのヒントと例

あなたの e コマース UX が確実に「良い」カテゴリに収まるようにするためのいくつかの方法を次に示します。

1. ページを忙しくしすぎない

画像は、製品を宣伝し、Web サイト全体の雰囲気を作り出す上で大きな役割を果たします。 非常に大きな役割を果たしているため、できるだけ多くのビジュアル デザインの側面を含めたいと思うかもしれません。 ただし、これにより深刻な混乱が生じる可能性があります。 あまりにも多くのことが行われていると、顧客はサイトをナビゲートするのが難しくなり、商品を見る前に気を散らして圧倒される可能性があります。

この悪い e コマース UX の選択がどのように見えるかの例として、Shein を考えてみましょう。

shein.com
複数の鮮やかな色のバナー、派手なグラフィック、大量のテキストを備えた Shein のホームページ。

あまりにも多くのことが起こっている場合、ユーザーはあなたが販売しているものに集中するのが難しくなる可能性があります.

注目を集めようとする多くの派手なグラフィック、2 つの異なるナビゲーション メニュー、サイド メニューのポップアップがあります。 あまりにも多くのことが起こっている中で、買い物客は最初にどこをクリックすればよいのでしょうか?

幸いなことに、ユーザーを圧倒することなく、いくつかの視覚要素を含めることができます。 チャボを例に取ります。

chabobags.com
4 つの大きく詳細な画像と上部にシンプルなナビゲーション メニューがある Chabo のホームページ。

e コマース UX のグラフィック部分に関しては、少ない方が良い場合があります。

Chabo は、高品質のビジュアルを使用して効果的に宣伝されているコレクションへの直接リンクを提供します。 すっきりと整理された上部のナビゲーション メニューは 1 つだけです。 これにより、過度に忙しくない視覚的に魅力的なページが作成され、ブランドのより洗練された専門的な紹介になります.

追加のボーナスとして、単純化された設計は、より単純なコードにつながる可能性があります。 これにより、開発者にとって負担が軽減されるだけでなく、負荷をかける不要な余分なものがないため、パフォーマンスが向上する可能性もあります。

2. グラフィックを厳選する

ビジュアルは、聴衆と即座にコミュニケーションをとる効果的な方法です。 彼らは簡単に注目を集めることができるので、彼らの旅を導くこともはるかに簡単です. とはいえ、空いたスペースに写真を配置するだけでは簡単ではありません。 グラフィックを慎重に配置して、最大の影響を与えることが重要です。

例として、Xlash Web サイトを取り上げることができます。 もともと、それは画像のモザイクを特徴としており、製品を使用できるさまざまな方法をうまく伝えていました。

人や製品の小さな写真が多数掲載された白い Web ページ。

Xlash のオリジナルのホームページは、1 つのストーリーを伝えるために複数の画像を使用していました。

それにもかかわらず、Xlash は、1 つの大きな画像で Storyblok に切り替えた後、別の方向に進むことにしました。

マスカラをつけた女性の大きな写真。

1 つの大きな画像は、複数の小さな画像よりも大きな印象を与えることができます。

どちらも高品質のページでしたが、2 番目のページの方が注目を集めています。 サイズだけでも、使用中の製品を取り上げながら、ページ上で権威を確立します。 画像自体と、画像に埋め込まれた「今すぐ購入」ボタンの両方に、より意図的に焦点を合わせています。 多数の画像を 1 つに単純化することで、Xlash は e コマースの UX を巧妙かつ効果的な方法で改善しました。

3. ローカライズ、ローカライズ、ローカライズ

ローカリゼーションは、特定の場所に合わせてコンテンツをカスタマイズするプロセスです。 簡単に言えば、聴衆が異なれば好みも異なります。 フリーサイズの Web サイトでは、多様な顧客ベースに十分な対応ができず、多くの潜在的なビジネスが提供されない可能性があります。 特定のコンテンツを提供することで、より関連性の高い製品やオファーを提供することで、顧客とのつながりを強化できます。

たとえば、スウェーデンのライフスタイル ブランドである Stronger は、世界中で利用できます。120 を超える国、8 つの言語、7 つの通貨で利用できます。 この e コマース UX の選択は、潜在的なリーチを大幅に拡大し、顧客がどこから来てもシームレスなエクスペリエンスを提供します。

stronglabel.com
中央に女性の写真があり、右側に引き出し式のメニューがあり、国と通貨を選択できる Web ページ。

ローカリゼーション設定を変更するオプションを提供することは、より多くの視聴者に対応する簡単な方法です。

確固たるローカリゼーション戦略は一朝一夕にできるものではないことに注意してください。 組織が新しい市場に参入する準備ができていることを確認するために、最初から計画の一部にする必要があります。 これには、市場調査の実施や、拡張可能なテクノロジーの選択などの手順が含まれます。

避けるべき 3 つの e コマース UX の間違い

正しい手順を知るだけでなく、間違った手順を回避する準備も必要です。 ここでは、UX のために避けるべき、より醜い選択をいくつか紹介します。

1.オーディオの自動再生

複数の画像がいかに気を散らすかについて話してきました。 その選択をさらに一歩進めると、オーディオの自動再生が可能になります。 突然の騒音は、宣伝されている製品が何であれ、ユーザーを遠ざける、驚くべき望ましくない出来事です。 裏目に出て、サイトから完全に離れてしまうことさえあります.

オーディオを自動再生する代わりに、サイレント ビデオを自動再生することを検討してください。 これにより、邪魔にならずに動きを使ってユーザーの注意を引くことができます。 さらに、詳細を知りたい場合は、音声をオンにするオプションをいつでも追加できます。

たとえば、TimeMoto はページに人目を引くビデオを適用します。このビデオはスペースを占有しますが、サウンドは使用しません。 ブランドへの印象的な紹介として機能しますが、すべてのユーザーの注意を即座に要求するものではありません. それにもかかわらず、ビデオをクリックすると、サウンドがオプションの新しいウィンドウでビデオを表示するオプションが提供されます.

これは、ポップアップを扱う場合に特に避けるべき e コマース UX の間違いです。 多くのユーザーはすでにこれらが少し煩わしいと感じているため、サウンド要素を追加するとさらに悪化するだけです.

2. 商品情報の省略

ここ数年、ミニマリズムが流行しています。 ただし、伝達する情報を制限する時間と場所があります。製品ページはその 1 つではありません。 できるだけ多くの関連情報を伝える必要があります。

とはいえ、単語数だけがすべてではありません。 不必要な情報を追加すると、訪問者の目を眩ませる威圧的なテキストの壁が提供されるため、不利になる可能性があります。 ここでバランスを見つけるのは確かに難しいですが、それも重要です。 レビューを探して、どの製品要素が最も注目されているかを確認することを検討してください. 次に、説明内でそれに関する質問に答えることに優先順位を付けることができます。

これは、ビジュアルについても考慮する必要がある別の場所です。 写真は、あなたが提供しなければならないものを宣伝するための重要な部分です. しかし、今日のユーザーは静止画像以上のものを期待しています。 少なくとも複数の角度からの写真が必要です。 360 度ビューを表示できる製品ビデオを使用して、さらに一歩進めることもできます。

最後に、画像に社会的証明を使用することを検討してください。 買い物客の 62% は、他の顧客の写真やビデオを見た後に商品を購入する可能性が高くなります。 それらを製品に直接含めることで、情報を提供するより直接的な方法になり、その人気を宣伝することもできます.

3. サイトにアクセスできないようにする

可能な限り多くのユーザーにリーチしようとしている場合、アクセス可能なサイトは必須です。 これにより、不必要な障壁を気にすることなく、誰もがコンテンツを利用できるようになります。 これには、次のようないくつかの重要なタスクを完了していることを確認することが含まれます。

  • 各画像に、それが何であるかを明確に説明する代替テキストがあることを確認してください

  • スクリーン リーダーが理解しやすいように、よく整理されたコンテンツの見出しを使用する

  • 正しい色のコントラストを選択する

さまざまな色の背景とテキストを対比させた 6 つの例: アクセシビリティのベスト プラクティスに従っているものもあれば、そうでないものもあります。

適切なコントラスト比を選択することは、Web サイトを使いやすくする簡単な方法です。

アクセシビリティは、e コマース UX 以外にも別の役割を果たします: SEO! アクセシビリティは、Google Lighthouse スコアの重要な考慮事項です。 そのスコアを上げることは、検索エンジンで見つけられる可能性が高くなることを意味します。 さらに、相対キーワードを含む代替テキストもページ上の SEO を高めることができます。 ランキングを上げるためだけにキーワードを不必要に含めることは避けてください。

ローカリゼーション、スケーリング、アクセシビリティのために構築されたシステムを体験する準備はできましたか?

無料デモで Storyblok を今すぐお試しください!

私たちのチームに連絡してください

重要ポイント

e コマース UX は、サイトのあらゆる部分を含む複雑な概念です。 このような大規模なコンセプトに取り組むことは、威圧的な場合があります。 ただし、これらのアドバイスに従い、正しいサイトと間違ったサイトから学ぶことで、カスタマー ジャーニーを成功させる戦略を立てることができます。