勝手にEFO比較分析【avex x ユニバーサル】(オーディション応募フォーム編)

インターネット上で簡単に動画や音楽を配信できる時代となりましたが、まだまだアーティスト達が掲げる目標のひとつに「メジャーデビュー」は君臨しつづけていることでしょう。
そんな夢を叶えるための手段のひとつが「オーディション」。本日の勝手にEFO比較分析は、レコード会社2社のオーディションサイトの応募フォームを題材にお届けします。

取り上げるのは、J-POPの代名詞とも言える「avex trax」などの有名レーベルを持つavexグループ様が運営するオーディション情報サイト「エイベックス・オーディション」(https://avex-audition.jp/、以下avex)、もうひとつは日本に拠点を置く外資系レコード会社の中では最大手、ユニバーサルミュージックジャパン様運営のオーディションサイト「Great Hunting」(http://www.great-hunting.com/、以下ユニバーサルとする)の2サイトです。

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

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

基本的項目の確認

それでは今回も基本項目の確認から行っていきましょう。

avex ユニバーサル
ページ数 3ページ 4ページ
入力項目 33種類、40項目 23種類、26項目
必須項目入力欄の数 18種類、23項目 12種類、15項目
フロー あり なし
オファー なし あり(テキストのみ)
必須マーク あり(*マーク) あり(※マーク)
入力画面のレイアウト 他ページと共通 フォーム専用

レイアウト、デザイン

今回、レイアウトやデザインにはそれぞれ特徴がわかれました。
avexは余白やフォントサイズを大きくしたデザインで見やすくなっているものの、ヘッダーやフッターなどがサイト共通であったり、補足とフォーム箇所の境界がわかりにくいなど課題が見られます。
いっぽうでユニバーサルは、どこかなつかしいテーブルを用いたデザインで、文字は小さく見づらいものの、オーソドックスなレイアウトでわかりやすくまとめられていると感じました。

△ avex レイアウト、デザイン

レイアウト。ヘッダーとフッターはサイト共通のまま。

レイアウト。ヘッダーとフッターはサイト共通のまま。


補足とフォームの境界がわかりにくいと感じた

デザインにメリハリがなく、補足とフォームの境界がわかりにくいと感じた

○ ユニバーサル レイアウト、デザイン

ヘッダー

ヘッダー。最低限の表記のみ


フッター

フッター。余計なリンクはない。


デザインにもメリハリが

オーソドックスばテーブル型のデザインでわかりやすい。しいて言うならば文字サイズが大きいとなおよしか。

必須マーク

今回、どちらも必須マークは色付きのアスタリスクマークの表示のみとなっていました。できれば、「必須」と文字入のアイコンにできるとよりわかりやすくなりますね。

△ avex 必須マーク
 アスタリスク表示のみ。

必須マーク

必須マーク

△ ユニバーサル 必須マーク
 アスタリスク表示のみ。

必須マーク

必須マーク

フロー

今回フリー画像を用意していたのはavexのみでした。
○ avex フロー

フロー

流れがわかりやすいフローです。

△ ユニバーサル フロー

フローはなし

フローはなし。ただし入力画面がひとつのみなのでああり問題ないか。

項目数、順番

どちらのフォームもかなり項目数が多いようでした。応募フォームということもあり、数が多くなるのはやむを得ないことでしょう。
項目数が多い場合は、できるだけ項目を分割しない、入力しやすい順番に整理するなどの工夫が重要となります。

また、どちらのフォームにも言える特徴として、応募対象によって必要な入力内容が変化するという点が上げられます。
そのため、フォームが少し複雑ですが、ユニバーサルがこの点をわかりやすく配置しているように思います。

理想は、選ばれた応募対象に応じて必要な入力項目だけが表示されている形です。

△ avex 項目数

名前

名前の姓名や住所など、統合できる箇所は統合したい。


△ avex 項目の順番
応募対象により、必須条件が異なる

応募対象により、必須条件が異なる。まず最初に応募対象を選択し、それに応じて表示する項目が変化すると良いか。

○ ユニバーサル 項目数

統合

名前の姓名や住所が統合され項目数が少なくなっている


○ ユニバーサル 項目の順番
条件に応じた説明

必要に応じて入力するべき項目が変わるが、フォームの上部に都度補足があったり、ラベル部分の背景色が変化していたりするため迷わない。

アップロード

オーディションフォームということで、どちらにも顔写真をアップロードするフォームが入力必須となっています。
こういったフォームで、画像をアップロードしてもサムネイルが表示されないと、正しくアップロードされているかユーザーは不安になっていしまいます。
どの写真をアップロードしているか、ユーザーが確認できると便利です。

△ avex アップロード

画像をアップロードしてもサムネイルが表示されない

画像をアップロードしてもサムネイルが表示されない。確認画面でのファイル名のみの表示だった。

○ ユニバーサル アップロード

写真確認可能

ユニバーサルでは、確認画面で写真が確認できた

エラー

次はエラー画面です。理想は、ファーストビューにひとこと+該当箇所への具体的なメラーメッセージの表示、という形です。
さらに、今回はいずれも項目数が多くページが縦長になっているため、エラー箇所を発見しやすくするための配慮もほしいところです。

△ avex エラー

冒頭のエラーメッセージ

冒頭+該当箇所に具体的内容を表示している理想的な形。ただし冒頭メッセージの内容は「不備」などのネガティブワードを使わないようにしたい

該当箇所へのエラー内容表示。見落としやすいか

該当箇所へのエラー内容表示。赤字で書かれているが、目立たない印象。ユーザーが見落としやすいかもしれない。

△ ユニバーサル エラー

エラーメッセージ

ユニバーサルのエラーメッセージは目立つものの、冒頭には何のメッセージもないのが惜しい。

ボタン

今回、どちらも「余計なボタン」を配置してしまっていました。
avexはフォーム入力を中止するキャンセルボタン、ユニバーサルは入力内容を白紙に戻すリセットボタンです。
どちらもEFOの観点では不必要ですので、削除することをおすすめします。

☓ avex ボタン

キャンセルボタン

キャンセルボタン

☓ ユニバーサル ボタン

リセットボタン

リセットボタン

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

機能名 avex ユニバーサル
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

住所入力

今回、どちらのフォームにも住所の入力が必須でしたが、郵便番号から自動入力する機能は備わっていませんでした。
できれば最低限の入力支援機能として用意しておきたい機能です。

△ avex 住所入力

住所

最低でも、住所の自動入力はほしい

△ ユニバーサル 住所入力

住所

最低でも、住所の自動入力はほしい

ラベル

ラベルをわかりやすく補足する入力例は、ユーザーの迷いを減らしてくれます。今回とくに気になったのはavexの住所部分のラベル。
迷ってしまうユーザーがいるかもしれませんので、入力例などの補足を用意したいですね。

△ avex ラベル

住所

住所のラベルがわかりにくい可能性あり。入力例はほしい

入力条件

どちらも、電話番号など一部の項目に入力形式の条件を設定していました。
管理上やむを得ないケースもありますが、できるだけこういった縛りは無くせると良いですね。

△ avex 入力条件

a入力条件

ハイフンありなしや全角半角の縛りはなくしたい

△ ユニバーサル 入力条件

u入力条件

半角の縛りは無くしたい

サブミットブロック

その他入力支援機能としては、ユニバーサルに実装されていたサブミットブロックが挙げられます。
個人情報保護方針に対するチェックボックスに入力しないと、ボタンを押下できないようになっています。

○ ユニバーサル サブミットブロック

サブミットブロック

サブミットブロックがあり(同意箇所のみ対応)

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

今回は大手レコード会社のオーディション応募フォームについて比較分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

avex

情報を整理し、ユーザーに配慮を

ぱっと見た印象では洗練されたデザインですが、入力をしやすくするためには、情報をそぎ落とし、項目の配置の最適化やデザイン上メリハリをつけることなどが必要です。
特に、ユーザーがどの情報を入力する必要があるかをわかりやすくするような工夫があると良いと思います。

ユニバーサル

入力支援機能とデザインの刷新でさらに使いやすいフォームに。

オーソドックスなデザインながら、比較的使いやすいと感じるフォームでした。
最近の解像度の大きなディスプレイでは、文字が小さいと感じるユーザーが多いかもしれませんので、余白や文字サイズ、色使いなどを変えてみるとさらにユーザーに優しいでしょう。
またできれば住所自動入力などの入力支援機能も取り入れてみてください。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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