モバイルWebサイトの3つの落とし穴と解決策

Nick Babich

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。

この記事はNick Babichからの翻訳転載です。配信元または著者の許可を得て配信しています。

Mobile Web: When Speed Matters

2016年、世界で初めてモバイルによるインターネットの使用率が、デスクトップによる使用率を上回りました。Google UKの調査では以下のように記述されています。

現在、英国の成人の65%がスマートフォンをインターネット利用の主要デバイスとして使用しています。

人々は情報を検索したり、購入したり、サービスに契約するためにモバイルデバイスを使用します。ユーザーの好みの変化は、ユーザーの期待に拍車をかけています。今日、ほとんどのユーザーは、ひどいパフォーマンスに耐えることはできなくなっています。ユーザーは必要な情報がすぐに手に入らないと、(文字通りワンタップして)別のオプションに切り替えてしまいます。

この記事では、ページ読み込みの遅さやサインインの壁、長い購入プロセスなど、モバイルアプリのよくある落とし穴を回避する方法を紹介します。

ページ読み込みの遅さ

テクノロジーがより高速な体験を可能にしたせいで、ユーザーの待つ意思は薄れてきています。

モバイルWebユーザーの2/3は、ページ読み込みの速さが全体的な体験にもっとも大きな影響を与えると言います。

Googleは世界中の900,000のモバイルサイトをテストし、モバイルページを完全に読み込むのにかかる平均時間が22秒であることを発見しました。それと同時に、以下のように述べています。

読み込み完了までに3秒以上かかると、ユーザーの53%がモバイルサイトから離脱してしまいます。

解決策

1. 原因を探る

Webサイトで長いページ読み込みが頻発する場合は、問題の原因を突き止めて解決しましょう。一般的に、ページの読み込み時間は次のようなものから影響を受けます。

  • ビジュアル要素(画像やアニメーション)。HD画像やスムーズなアニメーションは、読み込み時間に影響しない場合にのみ良いUXを生み出せると言えます。画像最適化の記事を読んでみてください。
  • カスタムフォント。カスタムフォントをダウンロードするには時間がかかります(フォントが第三者によるサービスにある場合は、さらに時間がかかります)。
  • ビジネスロジック。コードの品質。
  • インフラ。Webサイトに使用するハードウェア。

2. Webサイトをテストする

Webサイトのパフォーマンスをテストできるツールはいくつかあります。そのうち1つがGoogleのTest My Siteです。サイトのスピードアップと改善方法に関する実用的なレポートを提供してくれます。

ほかにもWebPage Testという便利なツールがあります。このツールは無料のWebサイト速度テストで、実際の顧客の接続速度で実際のブラウザ(Internet ExplorerとChrome)を使用して、世界中の複数の場所でテストを実施してくれます。

3. スケルトン画面を使用する

実際のパフォーマンスを向上させることができれば、スピードの認識を作り出す必要があるでしょう。速さの感じ方は、実際のスピードよりも重要な場合が多いです。

スケルトンレイアウトは、コンテンツの読み込み中に表示されるコンテンツの枠で、ユーザーに実際よりも速く読み込まれている印象を与えます。

Codepenから、純粋なCSSにおけるスケルトン効果の例を確認してみましょう。Webサイトが作動してコンテンツが読み込まれているとユーザーに感じさせます。

Owen氏によるCampbell Mooreの例

サインインの壁

サインインの壁とは、アプリを使用する前に必ず登録しなければならないことを指します。サインインの壁は、新規ユーザーがアプリから離脱してしまうよくある理由です。ブランド認知度の低いアプリや価値提案が不明瞭なアプリにおいて、離脱したユーザーの数は特に重要です。したがって、登録をあとに延ばすことをおすすめします。ユーザーがサービスを試用できるようにしてください。そうすればユーザーはサービスを試し、喜んで登録のステップを完了するでしょう。

解決策

1. メールアドレスまたは電話番号をユーザーIDとして使用する

ユーザーに独自のユーザー名を作成するように頼む場合、ほとんどのユーザーは次のような困難を抱えている可能性があります。

  • ユーザー名は独自のものでなければならないため、ユーザーが固有名を決めるまでに数分かかることがあります。なぜなら使用したいユーザー名が、既にほかのユーザに使われていることがあるからです。
  • ユーザーは、しばらく経ったらほとんど思い出せなくなるようなユーザー名で登録してしまう可能性があります。Janrain + Blue Researchによると、92%のユーザーが自分のユーザー名を忘れた場合ログインを諦めるそうです。

メールアドレスや電話番号をログインとして登録することで、ユーザーの作業を楽にしましょう。

2. パスワード認証をストレスのない体験にする

ユーザーは頻繁にパスワードを忘れますが、パスワードリセットのプロセスにおいてもイライラしてしまいます。

Amazonのパスワードを忘れてしまった場合のフロー。イメージクレジット:Quora

認証における体験を簡略化することで、離脱のリスクを軽減しましょう。さらに、FacebookやTwitterログインなどサードパーティのログイン機能を使用しましょう。

Flipboardを使用すると、ユーザーはソーシャルネットワークのアカウントを使用してログインできます。

あるいは、指紋認証/顔認証を使用したログインもあります。

iPhone用のChase bankアプリは、ワンタッチログオンのオプションを提供しています。

3. サインインの代替方法を提供する

あなたが持っている顧客に関する情報を使用して、サインインの代わりとなる方法を提供しましょう。たとえば、ユーザーの携帯電話番号がわかっている場合は、電話でワンタイムパスワードを送信できます。

eBayは携帯電話にワンタイムパスワードを送信します

長い購入プロセス

モバイルユーザーはモバイルデバイスを使用して製品を検索するだけでなく、実際に購入するようになりました。つまり、小さな画面上のショッピング体験をできるだけ快適なものにする必要があるのです。言うだけなら簡単ですが、モバイルデバイスで購入フォームを記入するのは大変でしょう。そのため、長い購入フォームが離脱の主要な原因の1つになってしまうのは当然のことです。 Google Dataによると、以下の通りです。

ユーザーの50%は、粗末な体験が理由でモバイルでのトランザクションから離脱しています。

解決策

1. ユーザーにアカウント作成を強要しない

Baymard Instituteによると、ユーザーにアカウント作成を強要することは、ユーザーが購入を断念してしまう最大の理由の1つでした。なので、登録なしでも購入できるようにしましょう。「ゲストとして購入する」というオプションを提供するだけでなく、それをはっきりとわかるようにすることも重要です。(Baymard Instituteは、モバイルからの購入の88%に、ユーザーが見落としてしまいやすいゲスト購入のオプションがあるということも発見しました)。

Ebayは「サインイン」と「ゲストとして購入を進める」という2つのオプションを提供しています。

2. ユーザーの情報を記憶する

ユーザーが以前に提供したことがある情報について、再度入力を要求しないようにしましょう。一度データを受け取ったら、新しいトランザクションでそのデータを再利用します。配送先の情報や支払いの詳細などで利用するかもしれません。必要に応じてユーザーが情報を変更できることを確認してください。

3. 位置情報データを利用する

ユーザーに配送先の住所を尋ねる代わりに、配送のデフォルトオプションとして現在の位置情報を使用することもできます。変更が必要な場合は、変更しやすいようにしておきましょう。

ユーザーが「自分の位置情報を共有する」ボタンをタップすると、フォームの情報に現在のアドレスが入力されます。

4. Apple PayまたはGoogle Payを使用した支払いを可能にする

支払いに関しては、できる限り多くのオプションを提示してユーザーが好みの方法を選べるようにする必要があります。Apple PayやAndroid Payなどの支払いオプションを提供するアプリは、購入時に追加でフォームに記入するというユーザーのペインポイントを軽減します。また、安全感を高めることもできます。

5. 「Quick buy」オプションの設計

このオプションは、常連客にとって役立ちます。ユーザーが「Quick buy」ボタンをタップすると、Webサイトは自動的に確認のための購入概要へリダイレクトします。すべての支払い情報や配送の希望などは、過去の注文から入手されます。

6. 別のデバイスで購入を続けるオプションを含める

モバイルを使用して購入を完了する人の数が増えている一方で、モバイルは閲覧のみで、デスクトップからの購入を好むユーザーも多数います。「あとで購入する」や「あなたのメールにカートの内容を送信する」というオプションを加えることで、デスクトップからでも購入することができるでしょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて