すべてのeコマーストラフィックの55%がモバイルデバイス上にあることをご存知ですか?

そうです、ショッピングサイトを見ている人の半数以上がスマートフォンやタブレットを使用しています.

しかし、ここに問題があります。上位50社の小売業者の46%は、レスポンシブモバイルサイトをまだ持っていません。そのため、すべてのショッピングトラフィックの半分はモバイルで発生しますが、小売業者の半分はモバイルに対応していません。つまり、買い物客の半分は、スマートフォンをつまんだり、ズームしたり、ねじったりして、ウェブサイトを正しく表示しています。.

そのため、応答性が高く魅力的なモバイルサイトが不可欠であることに同意します。しかし、それはほんの始まりにすぎません。デスクトップサイトと同様に、モバイルサイトを調整して最適化することで、売上をさらに伸ばすことができます。方法は次のとおりです。

1.シンプルさ

このような小さな画面での作業は常に注意が必要です。そのため、シンプルさが一番の目標です。 eコマースサイトの場合、圧迫するコンテンツが非常に多いため、特に困難です。小さな画面スペースを乱雑にせずにすべての製品を宣伝するにはどうすればよいですか?

「シンプルさ」

ETQがモバイルサイトで靴の範囲をどのように表示しているかを見てください。シンプルで美しい。彼らは、製品を中心的なステージにするために、画面スペースの大部分を完全に解放しました。カラーパレットでさえ、その製品範囲に合わせて選択されています。サイト全体にシンプルでまとまりのある印象を与えます。画面が小さいのにゆったりとした感じ.

2.親指について考える!

今すぐスマートフォンを持ってみてください。画面上で親指を動かして、最も快適で自然な場所を感じてください。親指のサイズは人によって異なりますが、通常、以下の画像はほとんどの人に当てはまります。

親指追跡

これを念頭に置いて、上部のセクションにボタンや重要なコンポーネントを配置する必要はありません。ヘッダーのみに残します。スクロール可能なコンテンツとボタンをすべて中央に配置して、簡単にアクセスできるようにします。 (左利きのことを考えるのを忘れないでください。左の人のために物事がどのように機能するかを確認するには、上の画像を反転してください).

3.…特に大きな親指

親指の「リーチ」に加えて、「大親指」も考慮する必要があります。私たちは皆、最も小さなリンクをクリックしなければならないモバイルWebサイトを使用しました。難しくてイライラしますよね?一般的なルールは、必要だと思うよりも大きな要素を選ぶことです.

Hobbycraftのモバイルサイトが良い例です。まず第一に、それらの大きな画像リンクは、大きな親指にとって非常に簡単にします。しかし、上部にあるアイコン(「店舗、アカウント、バスケット」)を見てください。彼らはあなたが通常予想するよりもはるかに大きいです。ホビークラフトは大きな親指を考えているので、.

4.ハンバーガーナビゲーションメニュー

過去12か月の最も人気のあるデザイントレンドの1つは、「ハンバーガー」メニューです。上記のホビークラフトのサイトで例を見ることができます。ハンバーガーのように見えるのは3本の線です–それをクリックすると、完全なナビゲーションメニューが展開されます.

従来のヘッダーナビゲーションの余地はなく、画面が乱雑になるだけです。代わりに、拡張ナビゲーションを選択してください。ここには微妙なバランスがあります。きちんとしていて邪魔にならないはずです。しかし、同時に、それは明白でタップしやすいはずです.

提供する商品やカテゴリがたくさんある場合は、拡張メニューを使用して簡単にできます。画面スペース全体を使用することを恐れないでください。 Argosが以下の拡張メニューを表示する方法をご覧ください.

IMG_3663

5.大きなフォントを選択します

小さなモバイル画面は、私たちが使用するフォントについてじっくりと考えさせられます。小さくて複雑なフォントを入れる余地はありません。代わりに、シンプルで大胆で大規模なものを考えてください。通常、sans-serifフォントはより簡潔でシンプルです(つまり、ArielはTimes New Romanより優れています)。.

71950dee059b803c4a7caa30dce8f5bf

覚えておいてください、この決定はあなたにあなたのコピーと言葉遣いをより注意深く選ぶことを強制するでしょう。この機会を利用して、コピーを簡素化および最適化してください。メッセージをできるだけ明確かつ簡単に伝えるようにしてください。短くしてください。それはてきぱき作ります。これにより、モバイルデザインが改善されるだけでなく、ビジネス全体が改善されます.

6.「スマート検索」を使用する

人々は、モバイルデバイスで小さな検索フォームを使用することを嫌います。ズームインして検索ボックスをクリックし、手間のかかるキーボードで入力します。間違いは簡単で、不満につながる可能性があります.

ユーザーエクスペリエンスを向上させるには、「スマート検索」ボックスを使用します。ボックスをクリックすると、デザインが自動的に再フォーカスされ、検索ボックスが画面全体に表示されます。次に、予測検索があることを確認します。これにより、ユーザーは最初の数文字だけを入力する必要があります.

これはEuropcarのWebサイトで実際に見ることができます。顧客は「Norw」と入力し始め、サイトは自動的にさまざまなNorwichブランチを提案します。シンプルな.

IMG_4331

7.サインアップと購入フォームを簡素化する

サインアップとフォームの購入をできるだけ簡単かつ迅速に行うことについて、多くのことを話します。これは、UXデザイン戦略の重要な部分です。また、eコマースサイトでは、複雑すぎてコンバージョンが最大60%失われます。プロセスを開始した場合、お客様はすでに納得しています。セールや申し込みを失う唯一の方法は、物事を難しくしすぎることです.

繰り返しになりますが、必要なタイピングの量を制限してください。予測型ボックスを使用して、自動入力オプションを有効にします。たとえば、ユーザーがスクロールツールを使用して生年月日のオプションを選択します。多くの場合、購入フォームにはかなりの情報が必要です。ただし、このプロセスを簡単にする方法があります.

Fireboxが数値システムをどのように使用して、プロセスのどの段階が残っているかをユーザーに示す方法を見てください。 UXデザインの重要な秘訣は、ユーザーに現在地を知らせることです。お客様として、私たちは何が期待できるかを知りたいのですが、Fireboxはこれを専門的に行います.

img_1292-blog-half

8. 3つの層の最大

モバイルウェブサイトで「迷子になる」のははるかに簡単です。理想的には、モバイルサイトの深さが3層のみであることを確認する必要があります。これがファッションeコマースサイトでどのように機能するかの例は次のとおりです。

  1. ホームページ:お客様が「カテゴリ:女の子」を選択
  2. お客様が「サブカテゴリ:靴」を選択した
  3. 顧客が製品ページをクリックした.

それが発見の3つの単純な層です。唯一の追加オプションは、購入ページまたはサインアップでなければなりません。サブカテゴリのウサギの穴やその他のオプションを回避するようにしてください。いつものように、シンプルにして、常にどこにいるかをユーザーに知らせる.

9.簡単にホームページに戻る

顧客が3層になったら、ホームページに戻る大胆でシンプルな方法を常に提供してください。モバイルサイトでは迷子になりやすいので、「リセット」して最初に戻る簡単な方法をユーザーに提供してください。.

Lushの製品ページをご覧ください。顧客が何らかの方法でここに移動した場合は、最初からやり直したい場合があります。上部にある大きな「LUSH」ロゴは、家に帰るための簡単で明白な識別子です。あなたがウェブサイトのどこにいても、あなたはいつもあなたを最初に戻すアンカーを持っています.

img_1304-blog-half

10.ピンチズームなし!

長い間、モバイルサイトは単にデスクトップデザインのコピーでした。つまり、画面をピンチしてズームインする必要がありました。これは危険で時代遅れの設計傾向であり、回避する必要があります。理想的には、すべてが画面に比例する必要があります。すべてのフォントはズームインせずに読みやすくする必要があります。すべてのリンクはピンチなしでクリック可能にする必要があります.

アップルピンチツーズーム

ピンチが役立つのは、製品の写真という1つの例外だけです。顧客が製品の写真をピンチして拡大することは依然として非常に便利です。彼らは購入する前に細部をすべて見られるようにしたい.

11.「セキュリティ」の懸念に対処する

モバイルeコマースサイトへの大量のトラフィックにもかかわらず、モバイルサイトから何かを購入することがデスクトップほど「安全」ではないという一般的な懸念が依然としてあります。もちろん、モバイル、タブレット、デスクトップのセキュリティに違いはありません。しかし、2013年の調査では、スマートフォンで何かを購入するとき、オンライン買い物客のほぼ半分が安全性が低いと感じています。この恐怖はあなたのコンバージョンを殺す可能性があります.

単純な信頼の問題です。サイトで顧客に安心感を与えるのはあなたの仕事です。 eコマースサイトには、理想的にはSSLセキュリティ証明書が既にあるはずです。ない場合は購入してください。ツールバーに小さな黄色の錠前アイコンが表示されます。モバイルサイトで、SSL南京錠をできるだけ目立つように表示してください.

画像18

もう1つのオプションは、顧客が製品を後で使用できるように保存したり、電子メールで自分に送信したりできるようにすることです。場合によっては、後でデスクトップ上にいても安心して購入できます.

12.コンテンツのスタッキング

多くの人にとって、モバイルサイトの作成とは、WordPressやShopify、または使用しているプラ​​ットフォームで「レスポンシブ」テーマを選択することを意味します。それは良いスタートですが、テーマがコンテンツを自動的にシャッフルする方法に細心の注意を払う必要があります。意味がわからない?以下の図をご覧ください。

15_contentStacking

これは、レスポンシブテーマがタブレット(左の画像)またはスマートフォン(右の画像)のコンテンツを自動的にスタックする方法です。コンテンツの最も重要な部分を慎重に検討し、それらが正しく積み重ねられるようにします。たとえば、右側では、製品(ボックス5 –バスのタイプ)が画面の真下に押し出されます。それらは「折り目」の下に押し込まれることさえあります.

レイアウトとコンテンツのスタッキングを試して、最も重要なコンテンツが適切な場所に表示されることを確認します.

13. Flashコンテンツを失う

Flashは、どのデバイスでも比較的古いフォーマットです。 (実際、デザイナーは一生懸命それを殺すために戦っています!リソースを飲み込み、速度が遅く、ハッカーの遊び場です)。これはデスクトップサイトでは悪いニュースですが、スマートフォンやタブレットではさらに悪いことです.

ほとんどのモバイルデバイスはフラッシュメディアをまったく再生しません。そのため、ビデオや製品のデモンストレーションを頼りにしている場合は、それを排除してください。顧客はモバイルでそれを見ることができません。 Appleは数年前にそれをブロックし、Androidもその直後に追随しました.

もう1つの方法は、ウェブサイトがHTML5互換であることを確認し(詳細はこちら)、YouTubeを使用して動画をホストすることです.

14.制限を受け入れる!

私が話をした多くの人々は、モバイルサイトの制限に不満を表明しています。簡単な事実はこれです。それについてあなたができることは何もありません!代わりに、これらの制限を受け入れる.

それはあなたのビジネス全体を助ける重要な決定をすることをあなたに強います。 Webサイトを簡略化するにはどうすればよいですか?どうすればポイントを少ない言葉で伝えることができますか?どうすれば、より小さなスペースでより正確かつ魅力的になりますか?どの製品を優先すべきですか?

私はこれらの質問に答えることがあなたのビジネスをより強くすると確信しています。あなたがあなたの提案を蒸留することができる時はいつでも、あなたはそれをより強力にします。これは優れたモバイルサイトに不可欠です.

15. Google Analyticsを使用して設計上の決定を行う

モバイル向けの設計の問題は、考慮すべきデバイスが非常に多いことです。 iPadまたはAndroidタブレット用にレイアウトとデザインを最適化しますか? iPhone 5またはiPhone 6向けに最適化しますか?またはサムスンギャラクシー?

レスポンシブデザインとは、それぞれ異なる方法で成形されることを意味します。ここでGoogle Analyticsが役立ちます。 Analyticsの最新バージョンでは、どのモバイルデバイスがサイトに最も頻繁にアクセスしているかを確認できます。

モバイルデバイス分析の追跡

この場合、長い目で見れば、iPhoneが主要なデバイスです。したがって、iPhoneですべてのテストを行うことは理にかなっています。モバイルサイトを最適化する場合は、上位のデバイスを優先します.

今やモバイルデバイスがオンラインショッピング市場を支配しているにもかかわらず、モバイルウェブサイトはまだ長い道のりです。大手小売業者の半数が後付けとして扱っている.

これらの微調整と変更を行うことで、この膨大なトラフィックの流れを利用して、競合他社よりも一歩先を行くことができます.

モバイルサイトを最適化するために行ったことをお聞かせください。どのような微調整がうまくいったか?

Kim Martin
Kim Martin Administrator
Sorry! The Author has not filled his profile.
follow me