勝手にEFO比較分析【YAHOO!BB x BIGLOBE】(インターネットプロバイダ 申込フォーム編)

いまや多くの人が日頃からお世話になっているインターネット。
総務省の「インターネットの利用状況」調べによると平成26年初頭には人口普及率は82.8%になったそうです。

また、端末別利用状況では「自宅のパソコン」が58.4%と最も多く、次いで「スマートフォン」(42.4%)、「自宅以外のパソコン」(27.9%)という数値が出ています。

普及し始めた当初は少なかったインターネットサービスプロバイダも今では50数社を超えていますし、各社で様々な料金プランやオプションサービスが用意されているため、回線やプロバイダ選びは迷った方、迷っている方も多いのではないでしょうか。

今日はそんなインターネットサービスプロバイダの中から「YAHOO!BB」(http://bbpromo.yahoo.co.jp/)(以下本記事では「YAHOO!BB」)と「BIGLOBE」(http://join.biglobe.ne.jp/)(以下本記事では「BIGLOBE」)に注目し比較分析していきたいと思います。

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

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

基本的な項目を確認していきます。

いつも通り、まずは基本項目の確認から。

YAHOO!BB BIGLOBE
ページ数 申し込み情報入力、確認、完了の3ページ 申込者情報入力、確認、完了の3ページ
入力項目 13種 15種
必須項目入力欄の数 9項目 14項目
フロー あり あり
オファー なし あり
必須マーク あり(「必須」文字でわかりやすい) あり(「必須」文字でわかりやすい)
送信ボタンのサイズ 幅242px × 高さ62px 幅360px × 高さ62px
入力画面のレイアウト フォーム専用 フォーム専用

入力項目の内容の違いはほぼ見られませんでしたが、必須項目の数に差が出ました。

以下個別に説明していきます。

両者ともストレスの少ない項目数

どちらとも必要な項目をしっかりと厳選し、ストレスの少ない項目数となっています。

ok_blue YAHOO!BB ページレイアウト

入力項目を抑えることですっきりとしています。
名前項目も漢字とカナの項目がまとめてありますし、フォントサイズも大きめで見やすいです。

余計なあしらいを一切排除。配色をロゴに合わせた統一感のあるフォーム。

余計なあしらいを一切排除。配色をロゴに合わせた統一感のあるフォーム。

soso_black BIGLOBE ページレイアウト

ファーストビューがほぼ文字情報になり、少しごちゃっとしている印象を受けますね。
上部にある手続きに関する情報は入力ページと分け、前ページで規約と一緒に表示することで、入力ページをスッキリさせることができると思います。

また、文字間やマージンをうまく調整すると入力項目もスッキリすると思います。

申し込みに必要な情報を優先的に見せているフォーム。

申し込みに必要な情報を優先的に見せているフォーム。

必須マークはともにあり

どちらもお手本の様な必須マークになっています。
入力欄に色背景を敷くとよりわかりやすくなるでしょう。

ok_blue YAHOO!BB 必須マーク

冒頭でも説明がされていてとても親切ですね。

冒頭でも説明がされていてとても親切ですね。

ok_blue BIGLOBE 必須マーク

目立つ配色と矢印を意識したマーキングにより、わかりやすくなっています。

目立つ配色と矢印を意識したマーキングにより、わかりやすくなっています。

フローの有無

シンプルなデザインのフローを設置したYAHOO!BBに対し、BIGLOBEでは少し凝ったあしらいのフローを設置しています。

ok_blue YAHOO!BB フロー

とてもシンプルですが、大きくてわかり易いフロー表示です。

とてもシンプルですが、大きくてわかり易いフロー表示です。

efo_double_ring BIGLOBE フロー

接続サービスとオプションサービスの登録の流れが分かれていることが一目でわかるフローになっています。

接続サービスとオプションサービスの登録の流れが分かれていることが一目でわかるフローになっています。

オファー表示の有無

オファーをなにも記載しなかったYAHOO!BBに対し、BIGLOBEでは申し込み特典に対するオファー表示を記載しています。

ok_blue BIGLOBE オファー

申し込み特典に対するオファー表示

申し込み特典に対するオファー表示

次に入力支援機能の比較です

YAHOO!BB BIGLOBE
ガイド

未入力の残り必須項目数などをリアルタイムで表示する機能

なし なし
離脱ブロック

ページを閉じようとするとアラートを出してOKしないと閉じることができない機能

あり なし
サブミットブロック

送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能

なし あり
項目ごとのアラート表示

入力についての説明をリアルタイム表示する機能

フォーカス時:なし

エラー時:なし

フォーカス時:なし

エラー時:あり

項目ごとに入力完了後の動作 なし 入力チェックマークの表示

導入数に差が出た入力支援機能

離脱ブロックのみの導入となったYAHOO!BBに対し、BIGLOBEはリアルタイムアラートとサブミットブロック、入力後のマーク表示の3つを導入しています。

efo_double_ring BIGLOBE リアルタイムアラート 入力後のマーク表示

注意文言の表示と背景色の変更でわかりやすくなっています。
また、チェックマークが表示されることで、正しく入力が完了していることが一目でわかります。

リアルタイムアラート。必須や入力形式をその場でチェックしてくれる

リアルタイムアラート。必須や入力形式をその場でチェックしてくれる

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

今回はインターネットサービスプロバイダの申し込みフォームについて分析を行いました。それではいつも通り、最後に勝手なアドバイスで締めくくりたいと思います。

YAHOO!BB

入力支援機能の追加でよりよいフォームへ。

入力項目については厳選されていますし、フォントサイズやマージンも見やすく設定されています。

必須項目に関しては目立つ色を用いて背景色を変更してあげると、よりわかりやすくなると思います。

また、入力支援機能の追加を行えばユーザーにより優しい設計になるのは間違いないです。

BIGLOBE

ページを分ける事でよりスッキリとした表示に。

基本的な入力項目への配慮はお手本といえます。
しかし、ファーストビューに一切入力項目が入っていないのはもったいないですね。上部の注記部分を規約とあわせ、入力ページと分けることで、入力ページをスッキリさせてあげましょう。

また、ガイド機能や吹き出し機能などといった入力支援機能の拡充でさらに親切なフォームになると思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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