優れたWebストアフロントを設計するための10のヒント

オンラインショッピングへの進出を検討している起業家や実店舗の小売業者は、これまで以上に多くのオプションを利用できますが、ウェブサイトの考慮事項や解読する技術的なオプションも増えています。 効果的なWebストアフロントの構築には、Wixストアなどのターンキープロバイダーがまだあります。これにより、最初のプレゼンスをすばやく簡単にポップアップできます。 しかし、オンラインビジネスの成長に真剣に取り組んでいる人は、ニーズがこれらのターンキーサービスをかなり迅速に進化することに気付くでしょう。

サイバースペースに実際に何かが現れる前に最初に答えるべき多くの質問があり、ビジネスが成熟するにつれてさらに多くの質問があります。 顧客に関するデータ収集は素晴らしい例であり、今日、特に欧州市場へのアクセスを検討している店舗にとって大きな疑問です。 通貨換算と異なる電子商取引法は、これらの市場では依然として厄介な問題ですが、顧客データのより慎重な取り扱いプロセスを必要とする一般データ保護規則（GDPR）に対処する必要があります。

トランザクションセキュリティは、顧客の安全性の必要性と、購入前にジャンプする必要があるフープの数とのバランスをとることを意味するため、もう1つの重要な質問です。 また、標準のWebサイトに対してどのような決定を下しても、そのモバイルイテレーションについても同じ議論が必要になります。 モビリティは確かに昨年の最愛の流行語の1つでしたが、余分な12か月はその重要性を決して減らさなかったからです。

現在の考え方では、Webビルダーは最初にモバイルエクスペリエンスを設計し、次に必要に応じてデスクトップエクスペリエンスを調整する必要があるとしています。

3dcartの最高執行責任者（COO）であるジミーロドリゲスは、次のように述べています。 「ゼロから始める場合は、モバイル向けに設計します。レスポンシブデザインを使用すると、Webサイトを構築してモバイルで起動し、デスクトップに取り込むことができます。」

モバイルユーザーとデスクトップユーザーの両方のeコマースストアフロントの設計を支援するために、以下の10の重要なヒントをまとめました。 ただし、ロドリゲスは、企業がそれらをストアフロントに組み込む前に、特定の製品ページでこれらの機能をA / Bテストして、Webサイト全体に展開する前にその機能を確認することをお勧めします。

1.スティッキーヘッダーナビゲーション

私たちは皆そこにいました：ユーザーのレビューや製品の詳細を読むために製品ページの一番下までスクロールしました。これで、ショッピングの旅を続けるためにメニューに戻るためにページを離れる準備ができました。 残念ながら、メニューに戻るには、通常、デスクトップキーボードの[Page Up]ボタンをクリックするか、モバイルデバイスの画面上部をタップする必要がありました。

スティッキーヘッダーでは、下にスクロールすると、メニューのサイズが変更されて調整されます。 メニューは、ページをすばやくジャンプする必要がある場合に、画面上でナビゲーションを維持するために、移動に沿って表示されます。 これはBose.comで実際に見ることができます。 ページの途中でも、画面の上部に戻ることなく、ページのメインナビゲーションにアクセスできます。

2.ハンバーガーメニュー

ハンバーガーメニューは、ファーストフードレストランに最適な機能のように聞こえますが、モバイルデバイスで多くのビジネスを行う企業にとって、すぐに必需品になりつつあります。 ハンバーガーメニューは、モバイルナビゲーションとメニューの標準モバイルアイコンになっています。

3つの水平線があり、これらを押すと、Webサイトのナビゲーションのドロップダウンメニューが表示されます。 画面のスペースが限られているモバイルデバイスで特に役立ちます。 しかし、デスクトップWebサイトでも同様に表示されるようになっているため、消費者は、使用しているデバイスに関係なく、企業のWebサイトでも同様のエクスペリエンスを利用できます。

「多くの人がハンバーガーメニューを見て、その意味を知っていますが、それが基本的に新しい標準であることを知りません」とロドリゲスは言いました。 「モバイルの訪問者はこのシンボルの意味を学びました。ウェブサイトはモバイルナビゲーションの標準としてそれを採用すべきです。」

Target.comの右上隅とTargetのモバイルWebサイトにハンバーガーメニューが表示されます。 また、下の写真をご覧ください。

3.視差スクロール

Parallax Scrollingは、機能的な機能が少なく、ウェブサイトの美観を向上させる方法として、ウェブサイトに芸術的なセンスを追加するために、高解像度の画像でいっぱいの大きなバナーを利用します。 大きな全幅画像を活用することで、ウェブサイトの背景画像と消費者の目の前にある画像の間にディスプレイスメント効果を作成できます。

RimmelLondon.comの以下の画像でわかるように、ページを下にスクロールすると、Webサイトの背景画像が変わります。 ただし、背景画像と前景画像が互いに混ざり合うと、微妙に変化します。 以下のスクリーンショットは、背景画像が紫からピンクに変わった瞬間のウェブサイトを示しています。

4.無限スクロール

無限スクロールは、電子商取引機能よりも拷問技術に似ています。 ただし、この気の利いたツールを使用すると、ユーザーは新しいページをクリックしてロードしなくても、新しい製品を継続的に表示できます。 仕組みは次のとおりです。eコマースページの一番下までスクロールすると、ページの下部にさらに多くのアイテムが自動的に読み込まれます。 それらはまだバックエンドのページとしてカタログ化されていますが、訪問者はそれを知りません。

UnderArmour.comで同様の機能を見ることができます。 残念ながら、Under Armourでは、「さらに読み込む」ボタンをクリックして追加のコンテンツを表示する必要があります。 一部のWebサイトには、クリックを必要とせずにより多くのコンテンツを表示する自動オープンメカニズムが装備されています。

5.フローティング「カートに追加」ボタン

スティッキーナビゲーションツールと同様に、フローティング[カートに追加]ボタンを使用すると、消費者は製品ページのどこにいてもショッピングカートに製品を追加できます。 以前は、ユーザーはユーザーレビュー、製品の詳細、および他の下位ページ要素までスクロールし、カートに製品を追加するには、ページの上部に戻る必要がありました。 現在、Diesel.comなどの企業では、製品ページのどこにいても、製品の価格、数量、色のオプション、画像、および[カートに追加]ボタンを確認できます。

6.フィッツの法則を使用

フィッツの法則の背後にある数学に飽き飽きすることはありませんが、本質的には、オブジェクトがより大きく、より近くにあるほど、それとやり取りする可能性が高いという理論です。 同じ基本原則を電子商取引に適用できます。 ユーザーを製品ページ、ショッピングカート、プロモーションに誘導する場合は、これらのボタンを大きく、カラフルに、ページの中央付近にできるだけ近づける必要があります。

フィッツの法則を無視して、レールに沿って、またはページの下部に小さな白黒のボタンを配置すると、潜在的な購入者を失う可能性があります。 この間違いをしないでください。

7.顧客のレビューと声を表示する

顧客があなたのウェブサイトに来て、あなたの製品を見てから、ユーザーレビューをチェックするためにAmazon.comに向かうことを望まない。 結局のところ、Amazon.comは製品をより安く販売したり、顧客はあなたのウェブサイトよりもAmazon.comのショッピング体験を好むかもしれません。

顧客に製品を評価およびレビューする機能を与えると、購入する前に他の消費者の意見を保証する必要がある慎重な顧客をかわすことができます。 ほとんどの電子商取引ツールは、評価とレビューの実装を容易にするため、このプラクティスの実装をためらわないでください。

8.効果的なカスタマーサービスデスク

顧客とのエンゲージメントは小売業の成功に不可欠であり、カスタマーサービスデスクほど簡単でも効果的でもありません。 激怒した顧客、不満の顧客、または単に混乱した顧客を適切にケアすることは、ビジネスを繰り返すための最も確実な方法の1つです。 今日のサービスデスクとヘルプデスクアプリケーションにより、これまでになく簡単になりました。 これらのアプリのいずれかを使用すると、顧客のリクエストを整理するだけでなく、これらのエンカウンターが生成する顧客および応答データを取得し、顧客関係管理（CRM）、マーケティング、およびビジネス分析エンジンにパイプすることもできます。 これを行うことで、顧客があなたの店とその製品についてどう思うかをより注意深く見ることができます。

カスタマーサービスのアンカーとタッチポイントを配置する場所は、カスタマーエクスペリエンス全体にとって重要です。 そして、このインタラクションが単純な連絡先ページの形式をとるか、60秒以上ウェブサイトに残っている誰かとチャットウィンドウを開くことになるかどうかは、販売している製品の種類とあなたのストアの平均ウェブサイト訪問統計。

しかし、カスタマーサービスデスクを成功させるには、ソフトウェア以上のものが必要です。 専門家がこれらの要求に対処するためにそこにいることを確認しなければなりません。 「カスタマーサービスに連絡する」ボタンをクリックするという問題を抱えているお客様は、実際の人間からのライブヘルプを得ることができます。 これは、電話またはインスタントチャットを介して管理できます。これは、ヘルプデスクサービスプロバイダーで一般的になっている機能です。 また、スタッフが足りない場合は、人間の「響き」をするインテリジェントなチャットボットでカスタマーサービスの運用を開始することができます。サピエンス。

9.パンくずリスト

顧客があなたの店をチェックアウトするとき、彼らは彼らがどこにいるのか、彼らがどこまで終わっているのか、そして既に入力したすべてのデータを失うことなく簡単に戻る方法を知りたいです。 Breadcrumb Checkoutは、消費者がサインイン、支払いオプション、配送オプション、注文、ショッピングの継続から前後にクリックできる線形ナビゲーションボタン設計を利用することで、顧客がプロセスのどこにいるかを正確に示します。 このレイアウトがないと、消費者は[戻る]ボタンを押して、情報が記録されていないことを確認し、イライラしてWebサイトを離れる可能性があります。

10. 360度ビュー

見た目はささやかなジャケットをオンラインで購入しただけで、まばゆいばかりのラインストーンが戻ってきたことに気付いたことがありますか？ その製品を返品したとき、あなたは自分の時間とベンダーの時間を無駄にし、会社の費用がかかりました。 心配しないでください、それはあなたのせいではありません。 おそらく、ベンダーはジャケットの正面と側面の画像しか持っていませんでした。 ベンダーが360度のビュー画像を提供していた場合、それらのラインストーンを見つけて[注文のキャンセル]ボタンをクリックしたことになります。

あなた自身のウェブサイトでこれと同じ間違いをしないでください。 Kenneth Cole.comのように、顧客が画像を拡大できるようにするだけでなく、画像の複数の角度を回転または表示するオプションも提供します。 このように、彼らは配達ボックスを開いて、彼らが予期していなかった製品を引き出しても驚かない。