【スマートフォンEFO】購入フォームをより良くするための10のこと

本日はsmashingmagazineに「より良いモバイルチェックアウトプロセスの設計」というタイトルで投稿された記事をご紹介いたします。

スマートフォンが普及し、ユーザーにとってモバイルデバイスで商品を購入するということに、もはや抵抗はなくなってきているでしょう。
商品の選択から送付先、配送方法、決済方法…と一連の流れを持つ購入プロセスを、制約の多いモバイル環境で用意する場合には一体何に気をつけたら良いのでしょうか。

今回紹介の記事では、モバイルの購入プロセス特有の下記の10つの点が挙げられていました。

  1. 必要最低限の項目に留める
  2. ゲスト購入を認める
  3. タッチデバイスの利点を活用する
  4. 余計なものを削除する
  5. 進行状況の表示
  6. 軽量に設計する
  7. セキュリティの安全性を明記する
  8. Googleウォレット、ペイパル、アマゾンなどを使用
  9. 位置情報や電話プロトコルを活用
  10. さまざまな環境でテストする

順番にみていきます。

必要最低限の項目に留める

例えば「どのように私達を知りましたか」というような質問は、運営者側にとっては役立ちますが、ユーザーには何の役にも立たないでしょう。
そういった質問の存在は、PC以上にモバイル上では致命的になりうる、と筆者は説明しています。

この章では下記の2サイトのキャプチャが良い例/悪い例として紹介されていました。非常にわかりやすい例でしたのでそのまま引用させていただきます。

左の例では無駄な項目が一切省かれており、購入のための必要最低限の項目だけが1ページに収められています。
いっぽうで右の例では対照的に長いフォームとなっています。
よく見てみると、郵便番号に3つの項目を用意していたり、連絡先では通常の電話番号のほかに「夕方の電話番号」「携帯の電話番号」なども尋ねています。

少し極端な例ではありますが、不要な情報がいかにフォームを使いにくくしているかが顕著に現れた例だと思います。

ゲスト購入を認める

商品の購入にあたって会員登録をしなくても「ゲストとして」購入できる仕組みを用意するべきという意見です。

少しでも余計な入力項目を減らしたいスマートフォンのフォームで、アカウント登録のプロセスをはさむかどうかは大きな差を生むでしょう。

会員登録のフローを省くとかなりステップが少なくなる

会員登録のフローを省くとかなりステップが少なくなる

タッチデバイスの利点を活用する

スマートフォンが指で操作するタッチデバイスであることは、さまざまな操作上の制約を生んでいますが、逆にその利点を利用するという考え方を筆者は提示しています。

例として挙げられていたのは、数量入力のフォーム。
通常購入フォームの数量入力欄ではセレクトボックスやテキストボックスが使われることが多いです。

いっぽうで下図右側の例のように、これらが項目にフォーカスしたあとに数量選択(入力)を行う必要があるのに対し、左右のボタンをタップするだけで数量を増減できるコントローラはより直感的です。

タッチデバイスでは左右に数量増減のためのインクリメントセレクタを用意

タッチデバイスでは左右に数量増減のためのインクリメントセレクタを用意

余計なものを削除する

購入フローにいるユーザーをフォームに集中させるためには、気を引くコンテンツは極力配置するべきでないと筆者は述べています。
これはPC向けフォームにも同様に言えることですが、モバイルの場合は表示領域が狭いことからも、より気をつけて対応しておきたいところです。

サイト共通のレイアウトとフォーム専用レイアウト

サイト共通のレイアウトとフォーム専用レイアウト

上記のようにヘッダー、フッター、ナビゲーション等、フォーム専用のレイアウトを用意するのはもちろんですが、
ECの場合は、配送のオプションやクーポンコード、ポイントカードの登録、有料会員の案内など、レイアウト面以外でもPCとのコンテンツの出し分けを考慮する必要があります。

お届け先住所の選択画面では、コンビニの住所登録のメニューが一切なく、住所を登録することのみに充填がおかれたページ構成となる。

Amazonのお届け先住所の選択画面では、コンビニの住所登録のメニューが一切なく、住所を登録することのみに充填がおかれたページ構成となる。

進行状況の表示

ECフォームの場合、入力内容が多いために画面が複数にまたがることがほとんどです。
ページが複数ある場合はユーザーが自分の現在地をひと目で確認できるフロー画像を用意すると安心です。

フロー表示の例

フロー表示の例

軽量に設計する

筆者はモバイルの訪問者の74%が 、ロードに時間が5秒以上かかる場合は、ウェブサイトを離れるというデータを示しながら、フォームを軽量に設計すべきと述べています。
具体的にはロード時間を最適化するテストツールなどの活用を薦めています。

当ブログでも下記の記事でフォームの軽量化について触れています。

スマートフォンEFO:フォームの快適性と密接に関わる通信環境を考える
https://f-tra.jp/blog/smartphone/4131

セキュリティの安全性を明記する

モバイル・Eコマースをためらうユーザーの理由のひとつはセキュリティであり、安全性をアピールするためにはコピー、図版、SSL証明書やセキュリティパッチなどの表示が有効と筆者は述べています。

ただでさえ気になる個人情報の安全性に加え、ECサイトでは決済情報を入力することが多くさらにセキュリティ面が気になるユーザーは多いでしょう。

フォームでの安全性の表示については下記の記事も参考になります。

ユーザーを不安にさせない!安心感を与えるフォームをつくる5つのEFOテクニック
https://f-tra.jp/blog/column/2458

Googleウォレット、ペイパル、アマゾンなどを使用

特に海外ではGoogleウォレット、ペイパル、アマゾンなどの決済サービスを利用するユーザーが多いようで、これらを利用することで安心感や手間両面から決済のハードルを下げることができるようです。

ただし日本ではまだPaypalなどのカード決済代行サービスがあまり普及しておらず、ECサービスでは代引やクレジットカード、コンビニ決済、銀行振込による支払いが多いようです。

位置情報や発信機能を活用

スマートフォンでは位置情報を取得したり、タップひとつで電話をかけるというようなPCにはない操作が可能です。
これらの機能をフォームでも活用しない手はないでしょう。

さまざまな環境でテストする

最後に挙げられていたのは、これまでと少し毛色が変わりますがテストに関する注意点です。
特定のOSやブラウザに依ってテストを実施していると、それい以外での環境での使い勝手を見落としがちですので、firefoxやChromeのプラグイン等を活用して様々な環境でテストを実施するべきという旨を述べていました。

最後に

いかがだったでしょうか。
本日は海外記事より、とくにEコマースに特化した、スマートフォンフォームで考慮するべきポイント10つをお届けしました。
ぜひ参考に改善を進めてみてください。

参考記事:Designing A Better Mobile Checkout Process – Smashing Magazine

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です