スマホ版!勝手にEFO比較分析【イーオンx Gaba】(英会話スクール無料体験申し込み編)

やってきました「勝手にEFO比較分析」。

今回は、「優良PCフォームのスマホフォームはどうなのか?」と題して、スマホサイトの比較を行いたいと思います。
このシリーズの中で、特に優良だったサイトの勝手にEFO比較分析【イーオン x Gaba】(英会話スクール無料体験申し込み編)を元に、両社のスマホサイトを見ていきたいと思います。
お手本のようにすばらしいPCフォームは、スマホサイトになるとどうなるのか気になったので確認していきたいと思います。

題材は、英会話教室「英会話のイーオン」を日本に約326校展開している企業である株式会社イーオン様(http://www.aeonet.co.jp/)(以下、本記事ではイーオン)と、
首都圏でマンツーマン英会話の語学学校を展開する企業の株式会社GABA(ガバ)様(http://www.komeri.bit.or.jp/)(以下、本記事ではGaba)の、無料体験レッスン申し込みフォームを題材に、iPhone5で比較しています。(iOS7.0、Safariにて検証)

以下、サイト名の敬称は省略させていただきます。

ここからはいつもどおり「勝手に分析」していきましょう。
今回も改善ポイントを「勝手に」指摘していきますので、どうぞお付き合い下さい。
○△×と、ユーザー視点での評価を行っていきます。

※本記事の内容は2014年3月27日時点のイーオン様、GABA様、両社のサイトのフォームを分析した内容を記載しています。
なお今回ご紹介したどちらのフォームにも当社エフトラ EFOの入力補助機能は導入されていません。(2014年3月27日時点)

PCフォームは、下記の点が特に優れていました。

1、オファー表示 (ぜひ体験してみたい!と思わせるものでした。)
2、フォーム作り (シンプルでわかりやすかったです。)
3、フロー表示  (ヨコレイアウトが多いなか、両社ともタテレイアウトでした。)

まずはこれらを比べていきましょう。

PCと比べるとスマホは画面のサイズが圧倒的に小さいので、表現できる情報も変わってきます。
同じようにオファー内容は伝えたいところですが、小さい画面で見え辛くなってしまうと逆効果です。
イーオンは、スマホサイトでも最大限のオファー表示をしていました。
簡単にテキストでまとめてすっきりした印象にしながら、フォームに対してかなりの分量を取り、アピールしています。

イーオン
限られたスペースの中で最大限アピール出来ていると思います。

Gabaは、思い切ってオファー全てをカットしていました。スマホサイト内でオファー内容を確認出来るので、入力フォームではカットし、シンプルなフォームにしていました。
「シンプルなオファー表示に変更する」「思い切ってカットする」
どちらも、スマホフォームに適していると思います。それぞれのフォームの特徴によって、どちらの方法を選択するかの検証が必要になりますね。

Gaba
とにかく入力してほしい!という思いが伝わります。

両社ともPCフォームは項目数を絞り、極力シンプルなレイアウトで構成されていました。
スマホフォームでも基本的なコンセプトは変わっていないようです。
イーオンは、変わらずシンプルなレイアウトですが、全体的に文章の量が多いので、ユーザーによっては負担に感じてしまうかもしれません。

イーオン
文章が集約されると、より見やすくなると思います。

Gabaは、かわらずシンプルで見やすいレイアウトでした。PCフォームは、項目数を絞り込んでいる印象でしたが、スマホフォームでは逆に項目数が増えていました。(PCは7項目、スマホは12項目)

両社ともPCフォームにはタテレイアウトのフロー表示がありました。
イーオンでは、ヨコレイアウトに変え、ページトップ部分にありました。
オファー表示とともに、ユーザーサポートになっていると思います。

イーオン
スマホフォームで一般的にあるフロー表示になっていると思います。

Gabaは、フロー表示もカットしていました。
Gabaのフォームは確認ページがなく、即送信・シンプルなページレイアウトなので、フロー表示がなくても問題ないと感じました。必要最低限におさえ、入力に集中できるようになっていました。

Gaba
送信もボタンもシンプルで、行動がわかりやすかったです。

最後に、勝手にフォーム改善アドバイス!

今回の比較分析は、以上となります。
かなり限られた状況での比較分析になっていますので、他のOSやブラウザではまた違った結果かもしれませんが、上記をもとに、勝手にアドバイス、とさせていただきます。

入力枠にこだわる

両社に共通している部分として、入力枠が小さめでした。
画面サイズが小さくなるスマホでは、ユーザーが入力しやすい工夫をしておく必要があります。
サイズやレイアウトなど、こだわりたいところです。
対策として、以下の方法が考えられます。

  • 入力枠をヨコ幅いっぱいに広げる

  • 以前の記事でも取り上げたスーモの入力枠は、ヨコ幅いっぱいに広がっていますので、入力しやすかったです。

  • タップするとズームインして入力枠を拡大させる

  • 今回の比較と同業になるノバは、タップするとズームインするタイプでした。
    元の入力枠は小さめですが、ズームインして拡大されるため、入力文字サイズも見やすくなります。

    ズームインの場合、拡大された時に回りの文字が見えなくなってしまい、かえってユーザーにストレスを与えてしまうこともあるので、検証が必要だと思います。
    過去記事すぐ対策したい!スマートフォン向けフォームでありがちなストレスを生む5つの要因でも様々な方法や対策をお伝えしていますので、ぜひ参考にしてみて下さい。

    まとめ

    「優良PCフォームのスマホフォームはどうなのか?」ということでお伝えしてきました。
    ここまで比較してみて、「PCフォームにこだわっているところは、比較的スマホフォームもこだわっている」と感じました。
    ただスマホフォームに関してはもっとこだわることで、よりユーザーに優しいフォームになるのでは、と思います。
    今後、ますますスマホでの入力が多くなる時代がやってくることでしょう。
    すでに万全の策で待ち受けている企業も出てきています。
    新年度に変わるこの機会に一度自社のフォームを見直してみてはいかがでしょうか?

    今後も不定期で、スマホフォームのEFO比較を取り入れていきたいと思っています。
    お楽しみに!

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

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

    エフトラEFO機能アイコン

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

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

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

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

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

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

    メールアドレスを入力

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