スマホ用EFO改善方法|最大離脱率が45%下がったノウハウ

Pocket

efo_img01あなたは今、スマホ独自のEFO(入力フォーム最適化)を設定しなければと焦っているのではないだろうか?

スマホからのアクセスが日に日に増加する中、スマホ用のEFOは必然のものになってきている。

しかしながら現状は、ユーザーの使いやすさがおろそかになっていたり、最も良くないパターンだとPCと全く同じで入力しにくかったりする。

私の経験では、ユーザーの使いやすさを追求したスマホの入力フォームを改善したら45%離脱率が減少した。

今回はそのノウハウをすべて公開する。もちろんPCにも共通する部分もあるので、しっかりと確認をして、最高の入力フォームを制作して、ユーザーの使いやすさを追求してほしい。

<目次>
1:離脱を減らすEFO20項目のチェックリスト
2:スマホとPCのEFOの違い
3:  具体的なサイトに見るスマホEFOの良い点と悪い点
4:【発展編】スマホEFOをより発展させるための施策

1:離脱を減らすEFO20項目のチェックリスト

以下の20項目が出来ていれば、多くのユーザーは不便を感じることはないだろう。

まずはこの20項目を1項目ずつ確認して欲しい。

1 不要な情報は入力させていない

ユーザーが入力フォームを通じて行いたいことを実現する最低限の情報を取得することが最重要だ。
efo_01003

あなたは“任意”という形で自社がマーケティングのためにほしい情報を取得しようとしたことはないだろうか?これは最もやってはいけない考え方の1つである。

エントリーフォームは、ユーザーが求める目的を達成するのに最低限必要な情報のみを入力する場所だ。

入力項目が多ければそれだけ面倒になるし、そもそも不信感が募れば、そのサービスを受けようと思わないだろう。

たとえば、ECサイトの場合「生年月日」が必須になっている。この情報がなくても商品を届けることができる。企業向けセミナーなどの開催会社の場合「従業員数」「業界」「役職」は必要なのだろうか?

ユーザーの信頼や安心感に目を向けていないエントリーフォームでは、多くのお問い合わせを得ることはできないだろう。

2 入力している瞬間にエラーメッセージを表示している

正しくない情報を入力したら、その瞬間にエラーであることをユーザーに伝えることが重要だ。

なぜならば、ページ最下部の「確認する」ボタンを押した時にエラーが出るとユーザーの期待は下がってしまうためだ。

efo_00401例えば「メールアドレス」欄に「あ」と入力したタイミングで瞬時に「不正な値です」と表示され、その瞬間に間違った入力をしていることにユーザーは気付くことが出来る。

3 必須入力が不足している状態では確認画面へ進めない

未入力項目がある状態では確認画面へ進めないようにし、入力を促す表示にする必要がある。

未入力項目がありながら確認画面へ進めてしまうとユーザーのテンションを下げることに繋がり、当然それは離脱に繋がりやすくなるためだ。
efo_00501「未入力の必須項目があります!」ボタンをタップすると未入力項目の数を表示しているサイトもあります。

「OK」を押すと、エラーが出ている箇所まで自動的にジャンプする構成でユーザビリティを工夫している。

4 どこがエラー項目なのか分かり易い

エラーが発生したタイミングはユーザーのテンションが下がる瞬間であるため、一目でどの項目でエラーが発生したのかを分かり易く伝えることが必要だ。
efo_01005

よくあるのは入力ページ最下部の確認ボタンでエラー判定を行い、エラーがあるとページ最上部に「住所にエラーがあります」という表示だが、これは使いやすいと言えないだろう。

使いやすいのはエラーが発生している項目へ自動的に移動させ、その項目の上でエラー理由を表示させるやりかただ。

エラーが発生したら背景や罫線を真っ赤にするなど視認性高く工夫するなどのデザイン面の実装も考えたい。

5 なぜエラーが発生したか分かり易い

ユーザーが早く解決したいのはエラーであり、早く正しい情報を入力して確認画面へ進むためには「どこがエラーなのか?」だけでは不十分で、「なぜエラーなのか?」の理由を伝えることが必要になる。

つまり、エラー中のユーザーが知りたいのは何をすれば正しく入力できるのかという点だ。
efo_01006

6 ラジオボタン/プルダウンなどを適切に利用している

「生年月日」や「都道府県」はプルダウンがよく、択一式の選択肢を選んでもらう場合はラジオボタンを使う。
efo_01007

7 入力欄は大きく表示している

表示エリアが小さいと誤操作が起きやすいため入力欄は大きくする。
efo_00701
「ドモホルンリンクル」や「しまのや」はターゲットが一般的なスマホユーザーより年齢が上になることを考え、スマホの操作に不慣れなユーザーがスマホサイトから情報入力がしにくくないように縦幅、文字サイズを大きくしている。

8 入力例を表記している

瞬時に入力内容をイメージできるように入力例を記述するのは鉄則であるがスマホサイトでは入力エリアの「中」に記述をするのが正しい。

入力エリアの「下」に記述するとページ全体が長くなってしまう。「横」に記述をすると文字列が長い場合に見にくくなってしまう。
efo_img07

9 ハイフンは要らない

キーボード入力を切り替えるのは一手間かかるため電話番号、郵便番号などではハイフンはなしにする。
efo_01008

特に「入力」が苦手なスマホではそれが顕著だ。

電話番号入力時に「-」(ハイフン)が必須で入力させてしまうと、「03」を入力してから記号入力に切り替えて「‐」、また数字入力に戻して「3700」と続くことになる。

「03-3700-5259」を入力させようとすると、「03」の後ろの「‐」を入力するために1回、「3700」を入力するために1回、「3700」の後ろの「‐」を入力するために1回、「5259」を入力するために1回と合計して4回も切り替えることになる。

正しいのは「0337005259」と続けて入力させることだ。

10 パスワードやメールアドレスは1回入力になっている

パスワードやメールアドレスは2回入力よりも1回のほうがよい。

会社ごとのセキュリティの考え方次第ではあるがコピー&ペーストできるようであれば意味はない。

大手通販サイトのパスワード入力回数を調べたところ下記の通りだった。

1回入力(再確認無し)
※パスワードが1回入力
1.楽天
2.NISSEN
3.セシール
4.QVC
5.ビックカメラ
6.ジュピターショップチャンネル
7.Joshin web

2回入力(再確認有り)
※パスワードが2回入力
1.Amazon
2.ディノス
3.スクロール
4.ZOZOTOWN
5.マルイ
6.ケンコーコム
7.爽快ドラッグ
8.muji.net
9.ユニクロ
10.ヨドバシ
11.ベルーナ
12.DHC
13.ショップジャパン

11 今どこにいるか理解できるようにする

ユーザーがどこのページを見ているかを伝えるため、ナビゲーションを入れる。

全体の流れをまずユーザーに見せて、居場所を認識させ、完了をイメージさせることが必要だ。
efo_00801

12 入力ボックスは分割しない

電話番号のボックスは一つの入力エリアにする。

例えば「03-3700-5259」(弊社)という番号の場合、「03」、「3700」、「5259」というように3つの項目で表示するのは正しくなく、ひとつのボックスで「0337005259」と入れるようにする。

13 成約に関係のないリンクはすべて外す

入力フローに進んだユーザーは何がなんでも逃さないようにサイト運営側は工夫しなければいけないが、その一環として、利用規約やお問い合わせ、お気に入り、カートなどの成約に関係のないリンクは一切外すようにする。

あえてユーザーが離脱しやすいような導線をわざわざ置く必要はない。
efo_01009

14 必須であることが視認できる

必須項目は【必須】とラベル化して表示する。

「※」で必須を表し、ページの上部に「※は必須です」と書いただけではユーザーには伝わらないと理解しましょう。
efo_01010

15 任意は任意であることが分かる

ユーザーの目的を実現するための項目だけを用意すればよいので本来「任意」の項目は必要ない。

しかし、何かしらの事情により、任意項目を入れなければいけなければ必須と同様に【任意】とラベル化して表示する。

例えば入力フォーム自体には必要ないが、取得できたほうがいい項目としてアンケートがある。

アンケートは当然任意になるが答えてくれるユーザーが意思を持ってメニューを開くようにすることが正しい。
efo_01001

16 選択中のボックスは色を変える

どの項目をユーザーが選択しているか分かり易くするため選択中では「色」を付ける。

17 住所の自動入力機能を実装する

住所入力は特に面倒であるため少しでも軽減させるために基本的な機能として自動入力機能は実装する必要がある。
efo_01011

これは郵便番号を入力すると自動的に都道府県以下、町村名までを表示できる機能だ。

楽天市場、Yahoo!シッピング、ZOZOTOWNなどの大手総合ネットショッピングサイトは実装されているし、ランダムに見てもメガネ通販「Zoff」や無印良品オンラインショッピングサイトでも実装されており、ユーザーが使いこなすことが出来ると考えるのが自然だ。

18 次のページでどうなるかが分かる

「次へ」とボタン内の文言を表示するのではなく、次のページでユーザーにして欲しいことをボタン内に書くとユーザーはイメージがしやすい。

入力画面の後は確認画面であることは、ほぼ全てのユーザーは分かっているかもしれないが、「内容を次のページで確認する」と書いたほうが安心感に繋がるだろう。
efo_01004

19 修正するを押したら消えてしまわないにする

確認ページで修正に気付いたユーザーが「修正する」をタップした際にせっかく苦労して入力した情報が消えてしまっていては離脱してしまう。

問題ないサイトも多いと思うが、入力フォームでは細かい設定が離脱に繋がるのでもう一度サイトを見て、わざと「修正する」ボタンをタップしてみるのもよいだろう。

20 初期設定はボリュームゾーン

タップ数を極力減らす工夫の一つとして「性別」や「都道府県」、「生年月日」はユーザーの割合が多い選択肢をデフォルト(初期設定)で指定する。
efo_01013

例えば女性向けのサイトであれば「性別」は「女性」を選択しておき、「性別を選択してください」と男女いずれであっても必ずタップが必要になる構成にはしないことだ。

「生年月日」も同様だ。もしあなたのサイトが30歳をターゲットにしたサイトであれば「1984年」をデフォルトで指定するのが正しい設定だ。

ネットスーパー「オイシックス」では「1970年」と「東京」がデフォルトで指定されており、ユーザーのタップ数を減らすための工夫をしている。

あなたのサイトでは20項目のうちどれぐらい実装できているだろうか?

もし15項目以上出来ていれば、おおよそ使いやすいサイトになっていると思う。

既にお気づきかもしれないがEFOはスマホサイトに限ったものではなくパソコンサイトと共通することが大半だが、それとは別にスマホサイト独自の工夫も当然ある。
あなたのスマホサイトをより使いやすくするためにはスマホ独自のEFOも実装してみよう。

2:スマホとPCのEFOの違い

1) 電話がかけられるようになっている

スマホの特徴を活かしクリック一つで電話をかけられるようにしよう。スマホは情報登録が面倒なため、電話で申し込みをしたいユーザーはとても多い。

電話の場合は営業時間をわかりやすく明記しておこう。

*正確なwebでのcv計測を行う場合、電話番号ボタンにCVタグを入れておくなど対応をしておくとさらに効果的だ。

2) タップ要素を大きく表示

スマホ画面上のプルダウンやラジオボタン、またテキストボックスなどの要素すべては最大限大きくしよう。

3) キーボードを変えさせない

スマホは「ひらがな」や「半角英数」などの種類を変えるのが一手間かかるので、項目を選択した時点で入力するべきキーボード設定にする。

例えば、住所入力欄を選択したらキーボードは「ひらがな」になっていたり、メールアドレスでは「半角英数」になっているということだ。

パソコンとスマホに共通する20項目とスマホ独自の3項目を全て実装するのは大変かもしれないが、確実にコンバージョンアップに繋がる施策になるので改善に挑戦して欲しい。

次はいくつか実際のスマホサイトを見ながらユーザビリティー上の良い点や悪い点を見ていきたい。

3:具体的なサイトに見るスマホEFOの良い点と悪い点

1) 楽天市場スマホサイト「会員登録フォーム」

「会員登録」メニューを見てみると最上部にページごとのナビゲーションがあり、どのページにいるか分かる点は評価できます。

一目で「確認」、「完了」の手順が必要なことが分かるのでゴールが伝わりやすいですね。
efo_img11

ただし、メールアドレス入力欄を選択してもひらがな選択ままであった点(Android端末で検証)や選択中もボックスが選択中の表示にならないのは改善できる箇所だと思います。

他のいい点は「ユーザーID」欄のラジオボタンはテキストエリアをタップしても選択ができるので便利ですね。
efo_img12

会員登録を目的としているフォームにおいて「誕生日」や「性別」を取得する必要はあるのか疑問です。

任意項目なので選択しないでもよいのですが、それでも『任意』という表現がないので、ややサイト側の都合寄りという印象を受けます。
efo_img13
エラー表示についてはページ最下部のボタンをクリックした時点で判定しているため、必須入力項目が空であったり、入力形式に誤りがあっても、入力した瞬間はエラーかどうかは分かりません。

アドレス入力欄ではひらがな入力をされた瞬間に「誤りがあります。半角英数でご入力ください」と表示が出たほうが親切です。

2) 野村不動産スマホサイト PROUD「物件資料請求フォーム」

入力したタイミングで即時にエラー判定を行っている点がまず評価できます。
efo_img14
パスワード入力欄において記号を入力するとポップアップ式に「半角の英数字でご入力ください」と出るのでユーザーは瞬時にエラーに気付くことが出来ます。

細かいユーザービリティーも工夫しており必須項目で未入力があった場合にはテキストエリア全体が赤く表示されており、正しく表示されると赤は消えます。

生年月日のプルダウンは「昭和40年(1965年)」からスタートしており、おそらく物件の資料請求をするユーザーのボリュームゾーンなのかもしれません。気づかいのあるフォームですね。
efo_img15
資料請求をするだけには関係のない項目はすべてにおいて任意になっており、その任意項目のすべてを「よろしければこちらの項目もお答えください」という表示で情報を隠しています。

入力したくないユーザーは早く確認ページへ進み、情報を入力したいユーザーが自分の意志で項目を表示させるというのはユーザビリティを考えています。

任意の項目は「職業」、「勤務先名称」、「希望間取り」などですが、確かにこれらはサイト運営側としては欲しい情報ではあるものの、資料を請求することが目的のユーザーには不要な情報であるので隠しているのでしょう。

この点はスマホユーザーの心理をユーザービリティー上よく考えられていると思います。

基本的によくできたフォームですが、最下部の「次へ」が悪い見本です。

ここは「次」ではなく、ユーザーが次の画面で何をするかをボタン上で表現することが正しい。

「入力した情報を確認ページでチェックする」という書き方がよいでしょう。

3) 健康食品やずやスマホサイト 「購入フロー」

スマホサイトらしい工夫として「電話ボタン」を設置しています。

電話ボタンはスマホとの相性がよく売上アップに繋がる具体的な施策でしょう。

ボタンをタップしてすぐに電話が掛けることができる構成にするのがポイントです。
efo_img16

やずやの電話ボタンの素晴らしい点は電話受付時間中には「現在、お電話受付中です」という表示があり、タップしてコールできるのですが、受付時間外の場合はタップできず、メールのお問い合わせメニューが自動的に表示される点です。

時間ごとにメニューを切り替えている訳ですね。これはユーザーの操作感をしっかりと考えた好例です。

4:【発展編】スマホEFOをより発展させるための施策

1) データベースに格納する時に全角半角を自動処理する

全角半角はサイトの制作者にとってはデータベースの仕様上重要かもしれないが、ユーザーにとっては大して意味はないのではないだろうか。

たまに見るが住所の番地などは全角で入力させ、電話番号は半角数字という場合は、やはり使いづらいだろう。

従って全角半角どちらをユーザーが入力しても、それを理由にエラーにせず、データベース仕様に合わせて格納できるように自動処理をする。

2) 末尾のスペースは自動的に削除

コピー&ペーストや自動入力機能でメールアドレスなどを入力する場合に末尾にスペースが付いてしまう場合がある。

スペースに気付かず確認画面へ進もうとした場合にスペースがあることを理由にエラーが発生するとなぜエラーになっているのか分からないため離脱に繋がる可能性がある。従って末尾のスペースは自動的に削除する。

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*