勝手にEFO比較分析【ヒューマンアカデミー×ユーキャン】(資格・教育サービス資料請求フォーム編)

就職や転職、キャリアアップにと様々な場面で役に立つ生涯学習や資格習得。

最近では「あの有名人も取得できた!」などと忙しい人でも仕事の合間に資格を習得できる事で注目を集めています。

ボールペン字やメイク、パソコンや食育といった生活に役立つ生涯学習から、公務員や気象予報士、医療事務や行政書士といった資格習得まで、幅広い分野を自宅で学ぶことが出来ます。

今回は教育・人材・介護に力を入れている「ヒューマンアカデミー」(http://haa.athuman.com/)(以下本記事では「ヒューマンアカデミー」)と生涯学習をメインに据えている「ユーキャン」(http://www.u-can.co.jp/)(以下本記事では「ユーキャン」)の資料請求フォームを比較分析していきます。

教育サービス業界での資料請求フォームは顧客を増やす上でかなり重要な役割を担っています。両社ともかなり力を入れていることが予想され、比較のしがいもありますね。

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

※本記事の内容は2014年10月27日時点のヒューマンアカデミー、ユーキャン、両サイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラEFOの入力補助機能は導入されていません(2014年10月27日時点)。

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

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

ヒューマンアカデミー ユーキャン
ページ数 情報入力、確認、完了の3ページ 講座選択、情報入力、確認、完了の4ページ
入力項目 16項目 14項目
必須項目入力欄の数 10項目 11項目
フロー あり あり
オファー なし あり
必須マーク あり(「必須」「任意」マーク表示) あり(「必須」「任意」マーク表示)
送信ボタンのサイズ 幅254px × 高さ34px 幅300px × 高さ44px
入力画面のレイアウト フォーム専用 フォーム専用

入力項目の内容の違いはほぼ見られませんでした。
以下個別に説明していきます。

文字間、行間の見せ方で差が出たページレイアウト

ヒューマンアカデミーは行間をつめ、横に短いコンパクトな設計になっています。
対してユーキャンは横幅を広く使い、適切な文字間・行間の設定で可読性の高いフォームになっています。

また、いずれのフォームもヘッダーやフッター等に余計なリンクは一切設けていませんでした。離脱防止のための対策がしっかり施されていますね。

soso_black ヒューマンアカデミー ページレイアウト
文字間、行間が少し詰まっている印象を受けます。適切なマージンをとり、余裕のあるフォームにするとよいでしょう。

全体配色をグリーンに統一した、コンパクトなフォーム。

全体配色をグリーンに統一した、コンパクトなフォーム。

ok_blue ユーキャン ページレイアウト
かなり項目数が絞られいて、項目はほぼ必須。ユーザーにとってフラストレーションの少ない優しい設計になっています。

適切なマージンでとても見やすいフォーム。

適切なマージンでとても見やすいフォーム。

必須マークは両社ともあり

どちらも「必須」文字を使い、色背景を敷くなどして四角にしたマークを先頭につけたお手本のような状態になっています。
さらにヒューマンアカデミーでは入力完了後に「必須」マークが「OK」マークへと切り替わったり、エラー時に「NG」マークになったりと、大変わかりやすいマーキングになっています。

efo_double_ring ヒューマンアカデミー 必須マーク

 バリエーションも多くリアルタイムで切り替わるため、とてもわかりやすいです。

バリエーションも多くリアルタイムで切り替わるため、とてもわかりやすいです。

ok_blue ユーキャン 必須マーク

お手本のような必須マーク。

お手本のような必須マーク。

どちらもフロー有り

両社とも上部にフローを設置。

特にユーキャンのフローではキャラクターのアイコンを表示させ、入力工程が進んでいる様子を演出しています。
このようなデザインの工夫は、ユーザーのモチベーション向上に役立ちます。

ok_blue ヒューマンアカデミー フロー

ポイントカラーを使い、簡潔にユーザーがどこにいるのかを表しています。

ポイントカラーを使い、簡潔にユーザーがどこにいるのかを表しています。

efo_double_ring ユーキャン フロー

デザインの工夫がユーザーのモチベーションを向上させます。

デザインの工夫がユーザーのモチベーションを向上させます。

講座選択方法に差が

ユーキャンはフォームの前に講座の選択画面を設けているのに対し、ヒューマンアカデミーはセレクトボックスで選択する形。
ただし、セレクトボックスがカスタマイズされており、選択肢が多くても選びやすく、一覧性が担保されていました。

efo_double_ring ヒューマンアカデミー セレクトボックス

セレクトボックスを押下すると、選択肢が並べられたパネルを表示。

セレクトボックスを押下すると、選択肢が並べられたパネルを表示。

ユーザーに安心感を与える工夫が

いずれも、送信ボタンの前後で個人情報の取扱いやセキュリティについて明記しています。
この様な記載があることで、ユーザーが安心してフォーム送信を行えるというメリットがありますね。

ok_blue ヒューマンアカデミー 個人情報の取扱い

文章の記載で信頼性は上がります。

文章の記載で信頼性は上がります。

ok_blue ユーキャン 個人情報の取扱い

送信の安全性や個人情報の取り扱いに関する記述がある

送信の安全性や個人情報の取り扱いに関する記述がある

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

ヒューマンアカデミー ユーキャン
ガイド

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

なし あり
離脱ブロック

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

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

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

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

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

フォーカス時:あり
エラー時:あり
フォーカス時:あり
エラー時:なし
項目ごとに入力完了後の動作 背景色が赤から白へ/必須・任意マークがOKマークに切替 背景色が赤から白へ

両社共に充実した入力支援機能

共に導入していたのはサブミットブロック、住所自動入力、入力完了後の動作など。
他にもガイドやリアルタイムアラートなどそれぞれに機能を導入していて、資料請求に力を入れていることが伺えます。

efo_double_ring ヒューマンアカデミー 入力支援機能

リアルタイムアラートの導入でどうしてNGとなっているのかが瞬時にはっきりとわかります。
また、ご希望講座から講座を選択すると、サムネイルが切り替わります。とてもわかりやすいですね。

リアルタイムアラート表示の注記もわかりやすい。

リアルタイムアラート表示の注記もわかりやすい。

講座の選択でサムネイルが切り替わる。

講座の選択でサムネイルが切り替わる。

講座選択時の表示。カテゴリーごとに配色されておりわかりやすい。

講座選択時の表示。カテゴリーごとに配色されておりわかりやすい。

ok_blue ユーキャン 入力支援機能

こちらのリアルタイムアラートはフォーカス時のみ。
また、ガイドを使うことで残り項目数が明快となり、ユーザーのモチベーションを向上させることができます。

フォーカス時に注記を吹き出しで表示。

フォーカス時に注記を吹き出しで表示。

ガイド表示もあり

ガイド表示もあり。

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

今回は教育サービスの資料請求フォームについて分析を行いました。
それではいつも通り、最後は勝手なアドバイスで締めくくります。

ヒューマンアカデミー

入力項目の見直しとマージン調整で見やすいフォームへ

任意項目が全体の4割ほどを占めています。ぜひ今一度、項目の見直しをしてみてください。

また、文字が詰まりすぎて見えてしまう印象については、適切なマージン調整を行うことで改善されると思います。

ユーキャン

入力箇所の統一化でストレスの少ないフォームへ

お名前の姓名、郵便番号、電話番号など複数項目に分けている箇所を1項目に統一できれば、ユーザーの負担が軽減され、よりストレスの少ないフォームになるかと思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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