変換するオンラインストアのモバイルバージョンを作成する方法

モバイルデバイスを準備して日常生活を送る人はこれまでになく増えています。

Pew Research Centerによると、2002年のモバイルデバイスを使用する消費者の約62%から2016年11月の時点で95%になりました(スマートフォンとして分類されるデバイスを使用する場合は77%)。

モバイルの利用が大幅に増加し、オンラインショッピングが増加傾向にあるにもかかわらず、オンラインストアは依然としてモバイルユーザーのコンバージョンを獲得するのに苦労しています。

ecom1

しかし、より多くのモバイル接続があり、より多くの消費者がオンラインで買い物をしている場合、なぜモバイルコンバージョンはそれほど悪いのでしょうか。

答えはユーザーエクスペリエンスにあります。

最適化が不十分なデジタルエクスペリエンスは、平均デスクトップコンバージョン率(2016年第4四半期の4.14%)と平均スマートフォンコンバージョン率(2016年第4四半期の1.55%)の違いの根本的な原因です。

画面サイズが制限され、購入習慣が進化しているため、消費者は、困難なナビゲーションおよびチェックアウトプロセスを容認する可能性がはるかに低くなります。

モバイルエクスペリエンスの最適化に時間がかかるサイトでは、モバイルコンバージョンの2倍が見られます。

conv1

また、モバイル顧客からの売上が一貫して増加しています。

conv2

モバイル向けに最適化されたショッピング体験がなければ、お金をテーブルに残しているというこれ以上の証拠はありません。

特に、インターネットトラフィックの半分以上がモバイルデバイスからのものであると考えると。

ニール・パテルとの相談
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください

SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する

そのトラフィックをより多く獲得し、それらの顧客を変換するには、モバイルエクスペリエンスを改善する必要があります。

その方法は次のとおりです。

常に価値提案に焦点を当てる
訪問者は、オンラインストアに来たときに製品を測定しているだけではありません。

彼らはあなたのブランドのサイズを決めており、彼らの第一印象はほんの一瞬で起こります。

訪問者は、特定の問題の解決策を探したり、製品をチェックしたりするだけでなく、なぜ彼らがあなたと取引をする必要があるのか​​を深く知りたいと思っています。

それがあなたの価値提案です。

これは、競合他社との差別化を図り、訪問者にあなたから購入するよう説得するために使用されるステートメントです。

簡潔で、サイトに到着するとすぐにフックを設定できます。 Dropboxのランディングページと明確な価値提案を見てください。

dbvp

そして、これがeコマース側の例です。 Dollar Shave Clubは、製品の品質、競合他社との比較、および節約について、すべて1つの簡潔なバリュープロポジションで明確に述べています。

dscvp

モバイル訪問者が着陸したらすぐにそのフックを設定して、あなたが何を提供し、彼らがあなたに固執しない場合に何を見逃しているのかを彼らが知っているようにします。

ビジュアルでユーザーナビゲーションをリードする
視覚的には、訪問者がオンラインストアに到着したときに多くのことが起こっています。

画像、行動の呼びかけ、テキスト、信頼の合図、利益に関する声明、説明など、注目を集めています。

その上、彼らのモバイルデバイスは彼らの注意を妨げる可能性のある通知を定期的に受信しています。

サイトのビジュアルを活用して、ユーザーエクスペリエンスを向上させ、ユーザーエクスペリエンスを目標到達プロセスに引き込みます。

これは、フィッツの法則が役立つところです。

つまり、オブジェクトが大きいほど、目(および注意)がオブジェクトに引き付けられる可能性が高くなります。オンラインストアの場合、クリックして操作する可能性が高くなります。これは、設計原則の中で「視覚的重み」としても知られています。

そのことを念頭に置いて、モバイル向けにサイトを最適化することの一部は、次のステップ、重要な情報、行動の呼びかけを伝えるために、より大きなテキストとグラフィックを使用することです。

GameStopがどのように視覚的な重みを追加して訪問者の目をそのホームページに引き付けるかを見てください。

gsvw

召喚状には大胆で対照的な色を推奨するのが一般的なアドバイスですが、他の視覚要素にも同じアプローチを適用して、訪問者を導き、注意を集中させることができます。

ナビゲーションを理解しやすくする
タブレットを含む小さなモバイル画面のスペースが限られているため、レスポンシブデザインでは必ずしも十分ではありません。

顧客とのコミュニケーションでは、すべての言葉が重要です。

ナビゲーションメニューで使用するテキストが明確でない場合、混乱を招き、顧客が行動を起こすのが難しくなる可能性があります。


あなたの製品に対する彼らの意欲が非常に高くない限り、彼らがすぐに諦める可能性は十分にあります。

ナビゲーションを理解しやすくするために最も適切な言語を使用できるように、顧客を調査します。

クリックを最小限に抑えるためにナビゲーションを簡素化する
コンバージョン最適化の推奨事項の最上位は、オンラインストアがチェックアウトまでの時間を可能な限り短縮し、購入を完了するためのクリック数を減らすことです。

これはモバイルの最適化にも反映されており、タッチスクリーンでのナビゲーションが簡単で、第二の性質のように感じられるようになっています。

これは、次のようないくつかの方法で実行できます。

オプションをグループ化する
Organizin

 

g類似したページを1つのページに
重要なページを目立つように特集
ナビゲーションをサブカテゴリに分割する
プレーンテキストや単純なボタンではなく、ビジュアルナビゲーションを使用してナビゲーションを簡単にする別の優れた例として、GameStopを紹介します。

gsmn

そのことを念頭に置いて、回避したいことの1つは、目標到達プロセスを短縮するためだけにクリックを最小限に抑えることです。

タップを最小限に抑えることは、モバイルコンバージョンの賢いアプローチですが、顧客が購入したいものを決定した場合に限ります。

ショッピング体験を犠牲にしてモバイルサイトを最適化しようとしないでください。

ユーザーに購入を迅速に決定させたくはありません。

ConversionXLによると、購入者の旅を念頭に置いてモバイルの最適化を行うと、最良の結果が得られます。探索は簡単でシームレスでなければなりません。

次に、顧客が購入を開始する準備ができたら、チェックアウトへのパスは最小限に抑えられます。

顧客の検索エクスペリエンスのためにすべてを最適化する
簡単なナビゲーションは重要ですが、顧客が探しているものを正確に見つけるのも簡単になります。

オンラインストアには2種類の顧客がいます。

探しているものを知っている人
何かを探しているが、何がわからない人
検索バーはオンラインストアで目立つようにし、到着時に簡単にアクセスできるようにする必要があります。

Brookstoneは、ロゴとナビゲーションの近くの上部にラベル付きの検索バーを配置します。

ブルックサーチ

ただし、検索バーがあるだけでは不十分です。

あなたは注意を引く必要があります。目を引く視覚的な手がかりを使用して、検索バーにラベルを付けます。 「今日は何をお探しですか?」のようなフレーズ。うまく機能します。

覚えておくべきことの1つは、訪問者がどのように製品を検索しているかです。

モバイルeコマースを分析するBaymardInstituteによるユーザビリティ調査中に、被験者の50%以上が現在表示しているカテゴリ内で検索を試みていることが発見されました。

残念ながら、表示されているモバイルeコマースサイトの94%はこの機能をサポートしておらず、代わりにサイト全体の検索を返していました。

それは、顧客のフラストレーションにつながる圧倒的な数の結果を返す可能性があります。

カテゴリ内検索の良い例は、Amazonが訪問者の検索クエリを処理する方法です。

amazonsearch

それらに複数の支払いオプションを与える
オンライン支出の急増に伴い、詐欺の可能性が生じており、クレジットカードやデビットカードの詐欺による世界的な年間損失は毎年増加し続けています。

WalletHubが共有する2016NilsonReportのデータは、2000年(27億ドルの損失)と2015年(218億ドルの損失)の間に劇的な変化を示しています。

cf

この種の詐欺の増加は、消費者に支払い情報の共有についての優位性をもたらします。また、モバイルデバイスで購入することへの抵抗も高まります。

複数の安全な支払いオプションを提供すると、特にクレジットカードに依存しない支払い統合を追加する場合に、緊張を和らげることができます。

以下を含む、選択可能な多数の安全な支払い統合があります。

サムスンペイ
Apple Pay
Amazon Pay
PayPal
Googleウォレット
追加のボーナスとして、支払い方法を追加すると、eコマースのコンバージョン率が向上する可能性があります。

複数の支払いオプションにより、モバイルショッパーの利便性が大幅に向上します。

支払い

シンプルなフォルムで摩擦を軽減
モバイルデバイスの最小限の画面スペースは、フォームへの入力を深刻な雑用に変える可能性があります。

顧客は、オンラインショッピングの際にいくつかの情報(配送および請求情報)を入力する必要があることを期待していますが、チェックアウトを通過するために必要なフォームフィールドが多いほど、摩擦が大きくなります。

モバイルの最適化に関しては、少ないほど多くなります。不要なフィールドを削除します。

ImageScapeは、連絡先フォームのフィールド数を制限することで、コンバージョン率を120%向上させることができました。

フォームフィールド

これをeコマースで行うのは少し難しいですが、フォームフィールドプロセスを合理化するための簡単なトリックがいくつかあります。

ユーザーデータを自動入力します。
フィールドが完了すると、ユーザーは次のセグメントに自動進みます。
繰り返し入力を保存するためのポート情報(請求情報には配送情報を使用)。
キーエントリをカスタマイズします。名前フィールドの場合は、文字を使用します。数字スペースの場合は、テンキーを表示します。
粘着性のあるCTAボタンを使用する
顧客がモバイルで購入する準備ができたら、すぐにそこに行きたいと考えています。

スティッキーボタンを使用すると、「カートに追加」ボタンと「チェックアウト」ボタンをモバイルの前面と中央に配置できます。 AppleのWebサイトで動作しているスティッキーCTAの例を次に示します。

stickycta

ユーザーがどのようにナビゲートしてスクロールしても、召喚状(CTA)ボタンは表示されたままになり、目標到達プロセスの次のステップに進む準備が整います。

サイトの速度を優先する
訪問者がオンラインストアに来たときにフックを設定するのにほんの一瞬しかない場合、彼らはあなたのストアがロードされるのをどのくらい辛抱強く待っていると思いますか?

あまりありません。

delay1

平均的な顧客がバウンスして他の場所を検索するまでに、約3秒の読み込み時間があります。

自宅での強力なブロードバンド接続については、それほど心配する必要はありません。ただし、モバイルで信号が劣化する可能性がある場合、コンバージョンに大きな影響を与える可能性があります。

そして、あなたへのさらに大きな影響

 

収益。

この基本的な計算を考えてみてください。eコマースサイトの収益が1日あたり10万ドルの場合、読み込み時間が1秒遅れると、年間250万ドルもの売り上げが失われる可能性があります。

delay2

読み込み時間を確認してモバイルの読み込み速度を向上させる方法がわからない場合は、Googleの速度テストを使用してください。

pagespeed

このパフォーマンステストは、サイトのモバイル読み込み時間をチェックし、ストアが停止している場所を知らせるための洞察と提案された修正を提供します。

モバイルのランディングページを最適化する
消費者の75%以上が、他の媒体を介して電子メールで通知や許可ベースのプロモーションを受け取ることを好みます。

それはモバイルと何の関係がありますか?

多くの。

なぜなら、消費者の67%がスマートフォンを使ってメールをチェックしているからです。

mobileemail

これは、プロモーションを取得し、携帯電話で開いて、リンクをクリックしてオンラインストアにアクセスするオーディエンスのかなりの部分です。

ターゲットのランディングページはその準備ができていますか?

ランディングページの構築とA/Bテストに役立つOptimizelyのようなプラットフォームは多数ありますが、既存のページを最適化する場合に注意が必要な重要な要素のいくつかを次に示します。

簡単な見出し
ナビゲーションの削減、非表示、または排除
明確かつ即時に提示される行動の呼びかけ
ズームを必要としない魅力的な商品画像
信頼信号として機能するクリック可能な電話番号
横向きと縦向きの両方の位置とのモバイル互換性
これらは、すでに述べた他のモバイル最適化項目に追加されます。より詳細な内訳については、変換されるモバイルランディングページの構造に関する私の投稿を確認してください。

クロスデバイスショッピングのデザイン
モバイルコンバージョンの主な問題の1つは、必ずしも修正できるユーザビリティの問題ではありません。これは、ユーザーにとってより快適な問題です。

Baymard Instituteのモバイルコマースに関する調査によると、モバイルユーザーの61%は、購入を完了するために「時々」または「常に」デスクトップまたはラップトップコンピューターに移動します。

これは必ずしもそれらの顧客を失うことを意味するわけではありませんが、気を散らすもの、取引の買い物、ポイントAとポイントBの価格比較により、コンバージョンの損失が発生します。

これらの顧客を失うことを防ぐための優れた方法は、「お気に入り」とウィッシュリスト機能の使用を奨励することです。

お気に入り

これにより、顧客は、カートをリロードして製品オプションを何度も改ざんすることなく、モバイルで開始された購入からコンピューターに移動できます。

このための簡単な解決策は、製品リストを電子メールで送信するオプションを含む共有ボタンを追加することです。

amazonshare

Amazonは、ウィッシュリストとユーザーアカウントを持っているにもかかわらず、これらの機能を使用するために顧客がログインする必要がないため、このオプションを提供しています。

プログレスバーを含める
視覚的なインジケーターを使用して顧客の注意と焦点を向けることについては、すでに説明しました。チェックアウトプロセスにプログレスバーを追加すると、これにつながりますが、心理的な要素もあります。

プログレスバー

私たちの脳は小さなタスクを完了するのが大好きです。それは達成感を提供します。

その進行状況バーがチェックアウトを埋め尽くし、完了した各ステップで点灯するにつれて、手元のタスクを完了したいという顧客の欲求が高まります(自己効力感)。

これにより、チェックアウトを終了するモチベーションが高まり、完了する前に遠くまで行く必要がないことも通知されます。

親指に優しいゾーンのデザイン
eコマースストアを設計するときに、モバイルユーザーを考慮に入れていたかもしれませんが、電話のサイズと、消費者が通常どのように携帯しているのかについてはどうでしょうか。

スマートフォンユーザーには親指に優しいゾーンがあり、そのゾーンの外側をタップするには、位置を変更するか、指を変える必要があります。これにより、ショッピング体験に摩擦が加わります。

親指ゾーン

ナビゲーション要素が人間に優しいエクスペリエンスのために配置されるように、モバイルサイトを設計します。

Airbnbのように、訪問者が画面の上部に到達したり位置を変更したりするのではなく、画面の下部に粘着性のあるフローティングナビゲーションがあります。

サムゾーン2

一般的なモバイルジェスチャーをサポートする
タッチスクリーンデバイスのズームやナビゲートのための一般的な指のジェスチャーに慣れるのにそれほど時間はかかりませんでした。

私たちの多くにとって、それは第二の性質のようなものです。タッチスクリーンに対応しているが、スワイプやズームなどのジェスチャーをサポートしていない古い技術を扱っているときに、少しつまずいたことは認めます。

ズーム

私たちはこれらの一般的なジェスチャーに非常に慣れているため、それらが存在しない場合はイライラする可能性があります。

モバイルeコマースサイトのユーザビリティに関するある調査では、訪問者がズーム機能をアクティブにするために定期的にダブルタップしてピンチしようとしたことが文書化されました。

驚いたことに、モバイルeコマースサイトの40%は、これらの一般的に使用されるジェスチャーのサポートを欠いていることがわかりました。

カシオ

また、ズームやナビゲーションジェスチャ(写真をスワイプするなど)をサポートしているサイトのうち、訪問者に機能を通知しているのは50%にすぎません。

商品画像が、モバイルジェスチャでズームするオプションと、tをスワイプする機能をサポートしていることを確認してください

 

製品画像を介して。

結論
モバイルの最適化について考慮すべき要素は多数ありますが、完了後に残すことができる1回限りのミッションとして扱うべきではありません。

オンラインで製品を販売するために使用する技術と同様に、モバイル技術は絶えず変化しています。 モバイルの最適化を再検討し、モバイル分析を監視して、モバイルの顧客に常に最高のショッピング体験を提供できるようにする必要があります。

モバイルコンバージョンを改善するために、オンラインストアでどの要素を最適化しましたか?