勝手にEFO比較分析【schoo x ストリートアカデミー】(スキル学習サービス 会員登録フォーム編)

じめじめした天気が続いている今日このごろ。レジャーなどの外出が億劫になる梅雨には、室内で真面目に勉強やスキルアップに励んでみるのも良いでしょう。
昨今ではインターネットを通してさまざまなスキルアップ・学習のためのサービスが用意されていますので、ぜひ活用してみてはいかがでしょうか。

今回はそんなスキルアップや学習に関するウェブサービス2社の会員登録フォームを比較していきます。取り上げるのは、オンラインでスキルアップのための講座やセミナーを受講可能な「schoo WEB-campus(以下schoo、
https://schoo.jp、株式会社スクー様)」、近所で講座を探すだけでなく、個人が講師となり講座を開催可能なスキル共有のマーケットプレイス「ストリートアカデミー(https://www.street-academy.com/、ストリートアカデミー株式会社様)」の2種類です。

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

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

基本的項目の確認

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

schoo ストリートアカデミー
ページ数 会員情報入力、完了の2ページ メールアドレス入力、入力1、入力2、完了の4ページ
入力項目 9種 9種
必須項目入力欄の数 6項目 9項目
フロー なし あり
オファー なし なし
必須マーク あり なし
送信ボタンのサイズ 幅236px × 高さ61px 幅330px × 高さ48px
入力画面のレイアウト 他ページと共通 フォーム専用

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

ともに確認画面なし

今回どちらのフォームも入力確認画面はなく、確認のステップを1画面分省くことに成功しています。
いずれも登録した内容は、後からサイト上で修正できるようですのでこの形でもとくに問題はなさそうです。

ok_blue schoo 確認画面なし

入力画面のボタンを押下すると、そのまま登録が完了する

入力画面のボタンを押下すると、そのまま登録が完了する

ok_blue ストリートアカデミー 確認画面なし

同様に、確認画面なくそのまま登録が完了する

同様に、確認画面なくそのまま登録が完了する

ページ数に大きな差が

項目数と必須項目数ともに双方に大きな差はありませんでしたが、入力ページを1画面にまとめているschooに対して、ストリートアカデミーは3つに分かれており、ページ数に差が。

入力ページ数は単純に少ない/多いほうが良いということはありません。

しかし今回気になったのは、ストリートアカデミーがメール認証を経て確実にユーザー情報を取得しているのに対し、schooがメールアドレスが間違っていても登録できてしまう点です。(登録後にメール認証があります)
手間の少なさでは1ページで完結するschooが上回るものの、この点でユーザビリティを落としてしまっていないかは気になるところです。

soso_black schoo メールアドレス入力

メールアドレス入力欄

メールアドレス入力欄。2回入力させるなどの確認もなく、誤って入力した内容でそのまま送信されてしまう可能性が

パスワード入力に注意

ストリートアカデミーはパスワードを2回入力させているのに対し、schooは入力欄ひとつのみ。また、マスキングを解除する方法も用意されていないため、ユーザーが誤ったパスワードで登録してしまう場合がありそうです。

soso_black schoo パスワード入力

パスワード入力欄はひとつのみ。マスキングの解除機能もないため、間違いに気づきにくいか

パスワード入力欄はひとつのみ。マスキングの解除機能もないため、間違いに気づきにくいか

ok_blue ストリートアカデミー パスワード入力

ストリートアカデミーにはパスワードの繰り返し入力が。手間ではあるものの、間違えて登録するリスクは下がる

ストリートアカデミーにはパスワードの繰り返し入力が。手間ではあるものの、間違えて登録するリスクは下がる

フローに差が

今回フローを設けていたのはストリートアカデミーのみ。schooにはフローはありませんでしたが、入力ページ数が少ないため当然といえば当然です。

ok_blue ストリートアカデミー フロー

フォームタイトルの右手にシンプルなフローが。

フォームタイトルの右手にシンプルなフローが。

レイアウトにも差が

schooのレイアウトは、フッターの余計なリンクは排除されているものの、ヘッターが他ページと共通のものとなっています。
ストリートアカデミーは、メール認証まではサイト共通のレイアウトですが、メール認証後の入力画面ではフォーム専用のレイアウトを採用していました。

soso_black schoo レイアウト

フォーム全体図。フッターはシンプルになっているが、ヘッダーは他ページと今日と共通。

フォーム全体図。フッターはシンプルになっているが、ヘッダーは他ページと今日と共通。

ok_blue ストリートアカデミー レイアウト

ストリートアカデミーの情報入力画面。余計なリンク等のコンテンツが一切なく、入力に集中できる

ストリートアカデミーの情報入力画面。余計なリンク等のコンテンツが一切なく、入力に集中できる

必須マークはschooのみ

schooのフォームの必須項目には「必須」と文字でわかりやすいマーキングが。いっぽうでストリートアカデミーのフォームには一切記載がありませんでした。

ok_blue schoo 必須マーク

文字で「必須」を書かれており、色も赤色で強調されている

文字で「必須」を書かれており、色も赤色で強調されている

ng_bw ストリートアカデミー 必須マーク

必須か任意かの記載は一切ない

必須か任意かの記載は一切ない

次に、入力支援機能を見ていきます

機能名 schoo ストリートアカデミー
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:あり エラー時:あり フォーカス時:なし エラー時:なし
項目ごとに入力完了後の動作 なし なし

ともにFacebookでの登録を推奨

どちらのサービスも、実名での登録を推奨しており、facebookアカウントを使用したログイン機能も用意していました。
facebookログインを利用すればより簡単に登録を開始でき手間が省ける、ユーザーに優しい設計です。

ok_blue schoo facebookログイン機能

sh08

ok_blue ストリートアカデミー facebookログイン機能

sa07

いずれも、フォーカス中の項目を強調

どちらも背景色や枠線などで、フォーカス中の入力欄を強調するようにデザインされていました。現在入力を進めているのがどこかが一目瞭然です。

ok_blue schoo フォーカス中

schooでは黄色の背景色で強調。

schooでは黄色の背景色で強調。

ok_blue ストリートアカデミー フォーカス中

こちらは青色の影がつく

こちらは青色の影がつく

ジャンル選択部分には工夫が

ともにフォーム内に興味のある学習分野を選択する箇所があったのですが、いずれも選択肢を選びやすくする工夫が感じられました。

まずschooでは、各ジャンルの簡単な説明とアイコンを併記させて内容をイメージさせやすくし、さらにマウスオーバーの表現とクリック領域の拡大によって選択肢を選びやすくしています。

ストリートアカデミーではシンプルなチェックボックスでありながら、クリックエリアを拡大し選択しやすくしています。

efo_double_ring schoo ジャンル選択

各ジャンルの名称、簡単な説明、アイコンと、アイコンに合わせたカラーに変化するマウスオーバーで選びやすいラジオボタンとなっている

各ジャンルの名称、簡単な説明、アイコンと、アイコンに合わせたカラーに変化するマウスオーバーで選びやすいラジオボタンとなっている

efo_double_ring ストリートアカデミー ジャンル選択

チェックボックスが拡大されており、クリックしやすくなっている

チェックボックスが拡大されており、クリックしやすくなっている

エラーには差が

shooのエラー表示は、該当箇所にエラー文言を出し、なおかつその位置までスクロールするというものでした。
いっぽうでストリートアカデミーにはサブミットブロックが搭載されており、エラー画面はありません。

soso_black schoo エラー

該当箇所へスクロールするが、動きが早いのとスクロール位置が微妙に下にずれていて、わかりやすくはなかった印象

該当箇所へスクロールするが、動きが早いのとスクロール位置が微妙に下にずれていて、わかりやすくはなかった印象


soso_black ストリートアカデミー エラー

すべての必須項目に入力すると、グレーだったボタンが緑色に変化しアクティブとなる

すべての必須項目に入力すると、グレーだったボタンが緑色に変化しアクティブとなる。ただ、サブミットブロックを入れるならなおさら必須項目がどれかをを明確にしておきたい

いずれもリアルタイムのエラーチェック機能を導入

どちらにも項目入力中にリアルタイムにエラーをチェックする機能が搭載されていました。

efo_double_ring schoo リアルタイムのエラーチェック

エラーを入力のたびに判定する

エラーを入力のたびに判定する

efo_double_ring ストリートアカデミー リアルタイムのエラーチェック

入力を終え、フォーカスを外したときにエラーチェックされる

入力を終え、フォーカスを外したときにエラーチェックされる

送信時の表現ではschooに軍配

今回送信した環境からは、いずれのフォームも送信時に完了画面を表示するまでに数秒のタイムラグがありました。
ここで差をつけたのはschoo。ボタン押下直後に画面をホワイトアウトし、ローディング画像を表示することで、今送信中なのだということがはっきりわかるデザインとなっています。

efo_double_ring schoo 送信時の表現

読み込み中だということが一目でわかり、ユーザーにストレスを与えない

読み込み中だということが一目でわかり、ユーザーにストレスを与えない

最後に、勝手にアドバイス

今回はスキルアップ/学習のためのウェブサービス2社の会員登録フォームを比較分析しました。最後はいつも通り、勝手なアドバイスをして締めくくりたいと思います。

schoo

メールアドレスやパスワード間違いには注意したいところ。マスキング解除機能や、確認画面を導入するというのもひとつの方法です。

また、リアルタイムアラートは素晴らしいのですが、入力ごとにエラーチェックしていると、ストレスを感じるユーザーもいるかもしれません。

ストリートアカデミー

必須項目の表示は必ず行いたいところ。
また、セレクトボックスにデフォルト値がありますが、登録後に変更はできるものの、気付かずにデフォルト値のまま登録してしまうユーザーは多そうです。
いっそのこと、思い切ってこれらの項目を削除してしまうというのもひとつの手なのではと思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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