完璧なUXデザインを備えた18のeコマースサイト(&3つのビッグネームでサック)

今月初めにUXの記事に参加していただければ、あなたのWebサイトに不可欠な25のUXデザイン要素について話し合ったことをご存知でしょう。.


基本的な考え方は次のとおりです。UXデザインとは、ビジターの頭の中に入るということです。それは、ユーザーにとってシンプルでシームレスで楽しいエクスペリエンスを作成することです。情報を迅速に提供し、さらには笑顔にすることを目的としています.

優れたUXデザインは、訪問者にドーパミンと幸福をもたらします。そして、それは彼らがあなたを信頼する可能性を高めます。重要なことに、それは彼らがあなたから購入する可能性を高めます.

前回のUXデザインの記事で25の基本を確認した後、実際の動作を見てみましょう。具体的には、eコマースウェブサイトのUXデザインを検討しています.

これらのWebサイトが巧妙なUXデザイントリックを使用して、訪問者に購入を促す方法?

1.アソス

私はアソスの例をよく使いますが、それには十分な理由があります。彼らのUXデザインは素晴らしいです.

すべては、ノックアウトの価値提案から始まります。素晴らしい画像、簡単な説明、「無料配達」の保証、そして男性または女性のセクションにあなたを導く明白な行動の呼びかけ.

asos2

優れたUX機能の1つはビデオキャットウォークです。そのため、訪問者は実際に服装がどのように見えるかを確認できます。それは顧客にアイテムの可能な限り最高の見解を与え、そして彼らに購入する自信を与えます.

また、「クイックビュー」と呼ばれる優れた新機能も備えています。彼らの製品ページで「クイックビュー」をクリックすると、小さなポップアップが表示され、追加の画像と必要なすべての情報が表示されます。これにより、顧客が別のページに行ったり来たりする必要がなくなります。シンプルで直感的なデザイン.

アソス

2.ザラ

ザラのウェブサイトはシンプルさのマスタークラスです。クリーンで直感的で制限があります。それは賛成です ヒックの法則:ナビゲーションの選択を制限し、ユーザーに明確だが制限されたオプションを提供する設計原則.

あまりにも多くのオプションがあなたの訪問者を圧倒するという考えです。選択肢を減らすことで、彼らはより自信を持ちます。この投稿では、より優れたナビゲーションについて見ていきますが、Zaraは最高のナビゲーションの1つです.

ザラ

3. Abof

Abof(All About Fashion)は、自社のWebサイトで巧妙なUXトリックを使用しています。ホームページにアクセスすると、従来のeコマースサイトのようには見えません。代わりに、ブログのように見えます。視聴者を刺激するジューシーなコンテンツが満載.

わからない

次に、彼らはストーリーと記事の中で、「ショップストーリー」と呼ばれる目立つセクションで服を強調します。前回のUX記事では、視聴者との関係を構築することの重要性について説明しました。 Abofはこれを関連性のあるストーリーとコンテンツで完璧に行います.

abof 2

顧客が刺激を受けて初めて、何かを売り込もうとします.

彼らの製品ページには、有用な「スタイルのヒント」のメモがあり、これは「マイクロインタラクション」(視聴者に手を差し伸べて引き付ける小さなナゲット)の完璧な例です。.

abof 3

また、お客様が正確な測定を行うための「サイズガイド」も備えていることに注意してください(衣服が合わないという恐れが、ショッピングカートを放棄する最大の理由の1つです)。また、「推定配送」セクションを使用して、顧客にさらに多くの情報を提供します.

4.ベルクハウス

Berghausはアウトドアウェアのブランドですが、着陸してから1秒以内に、.

ベルクハウス

これは、対象となる視聴者を深く理解し、できるだけ早く彼らとつながることを保証するブランドです。最初のヒーローショットは、刺激的な招待状です。コミュニティとつながり、あなたを誘惑します.

唯一の欠点は?より強力な行動を促すフレーズは、本当にここで取引を封じるでしょう.

5.アップル

あなたは、UXデザインで卓越する設計と革新を中心に据えた企業に期待します。開始のために彼らの製品ページをチェックしてください.

彼らは使う 視差スクロール 画像を動的にし、ユーザーを引き込み、出口点を排除します。あなたはアップルの世界に没頭しています.

スクリーンショット2016-07-28 at 8.43.00 AM

巧妙なアニメーションは、新しい3Dタッチのように、製品の動作を正確に示します。スクロールするギャラリーはあなたを相互作用させ、探検するようにあなたを誘い、そして巧妙なコピーは新しいiPhoneがあなたの人生をどのように改善するかを正確に伝えます(機能の長いスペックリストではなく).

彼らのナビゲーションはシンプルでクリーンで、オプションをさらに差別化するために画像を使用するのが好きです(私たちはウェブをスキャンするので、言葉は互いに混じり合う傾向があります)

りんご2

チェックアウトプロセス中に、購入時に専門家とチャットするオプションが提供されます。シンプルですが便利なトリックです。初心者はある程度の助けを得ることができますが、自信を持って購入者がクレジットカードを手に入れるのを妨げることはありません.

6.ベルロイ

比較的新しいeコマース販売者としての最初のタスクは、他の人との違いを顧客に示すことです。 Bellroyは、スリムでコンパクトなウォレットのシリーズでこれを完璧に実現します.

ベルロイ3

さらに良いことに、製品ページでは、すべてのウォレットに独自のビデオがあり、独自の機能をすべて紹介しています.

ベルロイ4

7.滑走路を借りる

Rent The Runwayにはかなりユニークなコンセプトがあります。ドレスや衣装を購入するのではなく、数日間借りることです。これは、二度と身に着けることのできない服装を求めて出かけたくない結婚式やイベントに最適です。.

ウェブサイトはコンセプトを簡単に紹介し、次にユーザーとの対話を促して、機会を選択するように促します.

滑走路賃料

配送カレンダーの追加マークもあり、服がいつ到着し、いつ返品する必要があるかを顧客に正確に知らせる.

滑走路賃料2

とてもシンプルですが、とても安心できます.

8.アマゾン

Amazonは世界最大のeコマースウェブサイトであり、率直に言って最高の1つです。あなたが選ぶことができます UXデザインの例としての機能のいずれか.

巧妙なバンドルから顧客の推奨まで、ユーザーのニーズを予測して提供します。しかし、今日私たちが強調しているのは、ワンクリック注文システムです。.

アマゾン

これは、依然としてWebでのチェックアウト効率の最良の例です。 eコマースのUXデザインの中核は、カートとチェックアウトプロセスです。滑らかなほど良い。そして、ワンクリックの注文よりもスムーズにはなりません!

9.かすめる

あなたが知る必要があるすべてを伝える画像。個性的な表現とデザイン。新規ユーザー向けの即時割引と、行動を促す大胆な行動計画.

こする

これはUXデザインのシンプルなマスタークラスです.

10.トップショップ

UXデザインに関しては、多くの製品を販売しているショップの方がずっと大変です。どのようにジーンズのすべての異なるペアを整理し、それらを提示しますか?

幸い、TopShopには素晴らしい計画があります。ページ上に浮かぶ大きくて分厚いフィルターダイヤルを使用すると、製品のスタイル、色、フィット感、価格を常に調整して変更できます.

トップショップ2

さらに涼しいことに、マウスをホバーすると、すべての製品がモデルの写真に切り替わります。それは相互作用を促進し、顧客にアイテムをよく見てもらいます.

11.抗議

抗議行動は、ウェブ上で最大かつ最も太いナビゲーションを持っているだけかもしれない.

P

明確で簡潔で、整然としています。また、顧客が立ち去る可能性も低くなります。青い色は、顧客の注意を必要な場所に正しく保ちます.

抗議活動では、サイト全体で多数の小さなアニメーションを使用しています。スクロールするとトリガーします。それは顧客の注意を保持し、相互作用を促進し、サイト全体をダイナミックに感じさせます.

12.新しい外観

New Lookは、革新的なバスケットのリストに載っています。ナビゲーションバーに常に表示されており、大胆なインジケーターが表示されます。.

新しい外観2

クリックしても、別のページに移動することはありません。代わりに、側面からスライドパネルが動き、バッグの中身が表示されます。つまり、顧客が迷うことはなく、いつでも簡単にチェックアウトできます。.

新しい外観

13.鉛筆、53

60ドル近くでスタイラスペンを販売する場合は、本当に販売する必要があります。幸運なことに、53歳の「鉛筆」は、UXデザインのいくつかのトリックを使用して素晴らしい仕事をします.

長い視差スクロールページを使用してすべての機能を説明し、それで何ができるかを正確に示します。.

鉛筆2

また、優れたレビューを活用して、他の選択肢よりもはるかに優れている理由を説明しています。 「Wired」からの引用を使用することは、製品に信頼性を与え、その利点を概説する素晴らしいトリックです.

鉛筆

14.ファームドロップ

UXデザインに関する前回の記事では、ターゲットオーディエンスに共感し、彼らとつながることがいかに重要であるかを説明しました。 Farmdropは、ミッションステートメントを前面および中央に配置することによってこれを行います.

ファーム

彼らは「何マイルも離れた場所からの食料を見るのにうんざりしている」。これは、ほとんどのお客様が利用できるものです。彼らがあなたに何かを売ろうとする前に、彼らはあなたとつながり、あなたに買う理由を与えます.

15.シド・マッシュバーン

小さなアイコンが付いた、もう1つの優れたドロップダウンメニュー。これは、豊富なメニューを理解するのに役立つ簡単なトリックです。さらに、それはウェブサイトにもう少し個性を与えます.

アイコン

16.スローウォッチ

これは片手だけの時計です。これはかなりユニークなコンセプトなので、説明が必要です!スローウォッチは、フルスクリーンの説明ビデオでこれを非常にうまく行っています.

遅い時計

コンセプトを説明するだけでなく、作成の背後にある哲学(顧客とのつながりに優れている)についても話し、理想的なオーディエンスを強調してターゲットとする美しい画像を使用します.

17. Firebox

アイテムが通常のカテゴリに収まらない場合は、クリエイティブにしましょう。 Fireboxは、珍しい贈り物や無礼なアイテムを専門としています。上位50のチャートは、最も人気のある製品を探索するのに最適な方法です.

画像

ボックスのレイアウトは製品をすばやく閲覧するのに最適であり、多くの画像は動的で動きがあり、顧客と対話します.

彼らはギフトを専門としているため、ナビゲーションバーに「ギフトファインダー」もあり、選択肢を絞り込むための素晴らしい方法です.

18.レイジーオーフ

多くの場合、オンラインショッピングはまったく同じように感じられ、多くの人は雑誌やカタログをめくる古いプロセスを見逃します.

Lazy Oafは、クールな「ルックブック」セクションでこれを復活させました。服を一枚ずつ並べるのではなく、さまざまな組み合わせで一気に衣装を見せてくれます。結局のところ、それが彼らがカタログを見ていた方法です.

レイジーオーフ

画像をクリックすると、「購入」ボックスが表示され、3つのアイテムをそれぞれ選択できます。これは、昔ながらの没入型の買い物方法です.

してはいけないこと!

他のウェブサイトをばらばらにするのは好きではありませんが、いくつかの有名人が誤解しているようです…ここで最悪の犯罪者の1つまたは2つを紹介します.

1.ハウスオブフレーザー

彼らは世界最大のデパートの1つですが、ウェブサイトをロードするとすぐに大きな間違いを犯します。.

すぐに、ニュースレターの購読を求めるフルページのポップアップが表示されます。.

フレーザーの時間

有名店であるにもかかわらず、ほとんどの買い物客を後押しする非常に強引な戦術です。これが第一印象です。メールアドレスを尋ねる前に、訪問者を教育し刺激するユーザージャーニーを作成することをお勧めします.

それだけでなく、彼らのニュースレターにサインアップする本当の動機はありません。バウチャーコードの割引はここでの素晴らしいオプションであり、顧客が侵略的なポップアップを許すのを助けるかもしれません.

2.ウォルマート

ウォルマートは厳しい挑戦をしています。彼らはほとんどすべてを販売しているので、どのように分類してシンプルにするのですか?ええと、よくわかりません…でも、こんな風には…

ウォールマート

残念ながら、これはごちゃごちゃしたカテゴリーであり、探しているものを見つけるのはほとんど不可能です。.

ここで行われている情報が多すぎます。ユーザーにあまりにも多くのオプションを提示すると、パニックになって去ってしまうことがよくあります.

3.レイバン

レイバンのほとんどのWebサイトは非常にユーザーフレンドリーであるため、これは少し意味のある選択です。実際、それはたくさんのクールな機能を持っています.

しかし、彼らは多くの電子商取引サイトが顧客を本当に困らせるようなことをしています。この:

レイバン

おそらく、このようなページを100回目にしたことでしょう。それほど悪くはないように見えますが、実際には販売の障壁がもう1つ作成されています.

リピーターの場合は、作成したパスワードを考えて忙しいでしょう。それを思い出せない場合は、「パスワードを忘れた」プロセス全体を実行する必要があります。あなたはいつでもその顧客を失う可能性があります…

新規顧客の場合は、ゲストの購入手続きがありますが、クリックする別のボタンを提供するだけです。クリックする別の機会.

この時点で、顧客はカートと購入プロセスから完全に切り離されています。ドラッグせず、セールをロック!

優れたUXデザインとは、顧客が物事を簡単にできるようにするための小さな調整のすべてです。これらの18のWebサイトはそれを完全に行います.

自分のWebサイトでどの機能を使用するか?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map