勝手にEFO比較分析【plala x AsahiNet】(インターネットプロバイダ 資料請求フォーム編)

皆さんはどのようにしてインターネットプロバイダを選んでいるのでしょうか。

昔は有線のみで選べる回線の種類も少なく、また速度も遅かったイメージがありましたが、今やWiFiルーターも普及し、幅広い選択が出来るようになってきました。
選択肢が増えてきたことで、インターネット上で広く情報を収集し、サービスを比較している方も多いことと思います。

今回は数あるインターネットプロバイダのなかから「plala」(http://www.plala.or.jp/)(以下本記事では「ぷらら」)と「AsahiNet」(http://asahi-net.jp/)(以下本記事では「Asahiネット」)の資料請求フォームを取り上げ、比較分析していきます。

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

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

基本項目の確認

それではまず、基本的な項目の確認からはじめていきましょう。

ぷらら Asahiネット
ページ数 お客様情報の入力、入力情報の確認、申し込み完了の3ページ お客様情報の入力、申し込み内容の確認、申し込み完了の3ページ
入力項目 9種 10種
必須項目入力欄の数 9項目 9項目
フロー なし なし
オファー あり なし
必須マーク あり(「必須」文字と矢印マーク) なし
送信ボタンのサイズ 幅190px × 高さ54px 幅226px × 高さ39px
入力画面のレイアウト フォーム専用 フォーム専用

どちらの項目もかなり絞ってあります。
また、どちらも非常にシンプルな作りとなっていて、ユーザーが何かに迷う心配が少なそうです。

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

ページレイアウト

資料の内容詳細に重点を置いたぷらら。
シンプルですがベーシックな形で入力項目に重点を置いた、Asahiネット。
双方ともにフォーム専用のページを使い、入力に専念できるようになっています

ok_blue ぷらら ページレイアウト

オファーに目が引き付けられるレイアウトデザインです。
配色にも工夫が見られ、ベースとなるフォントカラーをグレーにすることで、情報量の圧迫感を軽減しつつ、可読性を高めています。
また、ページ全体を通して清涼感のあるブルーを基調にしていますが、必須マークに補色に近いオレンジを起用することで効果的な配色になっています。

真面目な印象を受けるシンプルなフォーム。

真面目な印象を受けるシンプルなフォーム。

ok_blue Asahiネット ページレイアウト

Asahiネットでは入力部分をコンパクトにまとめた、スタンダードなフォームを採用しています。

すっきりとしていてベーシックなレイアウト。

すっきりとしていてベーシックなレイアウト。

必須マークで差が付いた誘導性

必須マークではぷららに軍配が。
入力欄はすべて必須項目ですが、必須マークを付けることで、ユーザーの視線を誘導し、入力しやすい環境を整えています。

Asahiネットでは、必須マークがありませんでしたが、なぜか最後の規約への同意部分にのみ、マークを表示していました。

ok_blue ぷらら 必須マーク

さらに冒頭でマークの説明があるとより効果的だったと思います。

補色を使用した効果的な必須マーク。

補色を使用した効果的な必須マーク。

soso_black Asahiネット 必須マーク

なぜか規約にのみ必須マークが。すべての必須項目に表示させたい。

なぜか規約にのみ必須マークが。すべての必須項目に表示させたい。

オファー表示の有無

オファー表示はぷららのみでした。

ぷららは分かりやすい説明と、WEBサイト以外の申込方法を提示しています。

ok_blue ぷらら オファー表示

送付資料の内容が明快です。
また電話でのお申し込みや入会の相談なども行っており、ユーザーの連絡手段別に2つの電話番号を表記しています。

明快なオファー内容。

明快なオファー内容。

送信ボタンについて

サイズは大きめに、配色をつけ、次の動作を明記する文言をいれましょう。
送信ボタンの制作コストは些細なモノなので、特別な理由がない限りはボタン画像を用意してください。

サイズは大きい方が良いですが、中に入れる文章とページ全体のレイアウトと相談しつつ調整していきましょう。
配色に関しては正解がないので、コーポレートカラーやベースカラーに合わせA/Bテストを繰り返す事を推奨します。
また、ボタン内の文言に関しては「ボタン送信後の動作」を明言してあげるとユーザーに優しいです。

ok_blue ぷらら 送信ボタン

フォームのポイントカラーを使用し、大きめに作られた送信ボタンです。
ボタン内文言も明確ですし、矢印アイコンを付けることで、「次に進む」感を演出しています。

サイズは大きめで、分かりやすい文言内容。

サイズは大きめで、分かりやすい文言内容。

ok_blue Asahiネット 送信ボタン

こちらも大きめのサイズを採用。青系統の配色で統一したフォームの最後でグリーンを使用し、目を引くボタンになっています。

明るいグリーンが目を引きますね。

明るいグリーンが目を引きますね。

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

機能名 ぷらら Asahiネット
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし

エラー時:なし

フォーカス時:なし

エラー時:あり

項目ごとに入力完了後の動作 なし 入力欄の白背景が青配色になる

Asahiネットは入力後のエラー判定機能を導入

今回はAsahiネットのみがエラーをリアルタイムに判定する機能を用いていました。
エラー時には吹き出し型のアラート表示し、入力完了した項目には薄いブルーへ背景色を変化させる仕様のようです。

ok_blue Asahiネット リアルタイムアラート

エラーをリアルタイムに判定。

エラーをリアルタイムに判定。

エラー画面

冒頭にメッセージがあり、さらにエラー箇所にも分かりやすい配色で注記というのがお手本です。

ぷららではエラーがある場合、最初に該当したエラー箇所をひとつずつ次の画面で指摘します。
エラーが複数あった場合には、最初のエラーを修正しない限り、2つめのエラー内容をアラートしてくれません。何度もその都度同じ画面に遷移するため、ユーザーもうんざりしてしまうことでしょう。

一方Asahiネットでは、エラー箇所のみに注記とあと一歩。できれば冒頭に一言メッセージがほしいところでした。

ng_bw ぷらら エラー画面

とても残念なエラー表示方法。

とても残念なエラー表示方法。

soso_black Asahiネット エラー画面

冒頭にメッセージがあれば満点でした。

冒頭にメッセージがあれば満点でした。

住所の自動入力機能は、ともに導入なし

資料請求フォームということで、当然ながら郵送先の住所入力が必須です。
住所入力のEFOといえば郵便番号からの自動入力機能がありますが、今回はどちらにも導入はありませんでした。

住所の自動入力はもはやユーザーにとって当たり前になりつつある機能ですから、ぜひ両社にも導入していただきたいところです。

soso_black ぷらら 住所入力

住所の自動入力機能は導入なし

住所の自動入力機能は導入なし

soso_black Asahiネット 住所入力

こちらも自動入力はなし。ただし上3桁と入力すると下4桁の入力欄に自動でフォーカスが移動するようにはなっていた

こちらも自動入力はなし。ただし上3桁と入力すると下4桁の入力欄に自動でフォーカスが移動するようにはなっていた

ともに全角/半角の条件あり

今回、どちらのフォームにも全角や半角の縛りが存在しました。
これらの制約はできるだけユーザーに負担させるのではなく、自動変換するなどフォーム側で吸収してしまいたい部分です。

soso_black ぷらら 全角エラー

全角の状態で進んだ所エラーとなった。

全角の状態で進んだ所エラーとなった。

soso_black Asahiネット 全角エラー

全角で入力するとアラートが表示された。

全角で入力するとアラートが表示された。

勝手にフォーム改善アドバイス

今回はインターネットプロバイダサイトの資料請求フォームについて分析を行いました。
最後にいつも通り「勝手にアドバイス」をして締めくくります。

ぷらら

エラー画面の改善、入力支援機能の導入を強く推奨

現状のフォームではユーザーにストレスを与える場面も少々あるかと思います。とくにエラー画面の導線は深刻です。
ぜひともエラー表示を入力画面内に表示させる改善から始めていただければと思います。
また、同時に入力支援機能の導入も強くお奨めします。

Asahiネット

必須表示の改善と入力支援機能の拡充をお奨めします

必須マークはすべての必須項目へ表示すると、さらにユーザーに優しい作りになると思います。

また親切なフォームを考えていく上では、さらなる入力支援機能の拡充が挙げられます。
とくに住所の自動入力や全角や半角の変換といった機能の拡充で、ユーザーの手間を削減することが可能です。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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