勝手にEFO比較分析【チケットぴあ×イープラス】(プレイガイド 会員登録フォーム編)

芸術の秋。過ごしやすい気候となり、音楽・スポーツ・演劇・映画などを楽しみやすい季節ですね。
本日は秋のエンタテイメントに欠かせない、プレイガイド(チケットの予約・発券業務)2社の会員登録フォームを比較です。

題材とするのは、日本で最初に本格的事業を開始し、チケットの取扱枚数は不動のトップクラスを誇るぴあ株式会社の「チケットぴあ」、販売チャネルがインターネットと電話(一部)のみの通信販売専業が特徴の株式会社エンタテインメントプラス様運営「e+(イープラス)」の2社の会員登録フォームです。

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

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

まずは基本項目の確認です。

いつも通り、EFOの基本項目からチェックしていきます。

チケットぴあ イープラス
ページ数 入力、確認、仮登録完了、認証、完了の5ページ 規約確認、入力、確認、完了の4ページ
入力項目 17 21
必須項目入力欄の数 19 17
フロー あり なし
オファー なし なし
必須マーク あり(「※」で控えめ) あり(「※」で控えめ)
送信ボタンのサイズ 幅169px × 高さ48px 幅150px × 高さ25px
入力画面のレイアウト フォーム専用 フォーム専用

ともに専用レイアウト

2社ともフォーム用のページテンプレートを採用しているようでした。
余計なリンクは一切排除されているイープラスに対し、ぴあのテンプレートではページ共通のフッターがついていたためにリンクが並んだままでした。
フォームにおいては、ユーザーに入力に集中してもらい、操作ミスなどによる不要な離脱を防ぐためにも、極力リンクは設置しないほうが良いですね。

ただしイープラスはサイトロゴさえも排除されているため、ユーザーが入力途中で不安を感じる可能性はありそうです。余計なコンテンツは排除しつつも、サイト名ぁサイトロゴ等の表記はページ内のどこかに残してあると良いですね。

soso_black チケットぴあ ページレイアウト

フォーム専用の1カラムのレイアウト。ヘッダーにはロゴのみでシンプルな構成。

フォーム専用の1カラムのレイアウト。ヘッダーにはロゴのみでシンプルな構成。

soso_black イープラス ページレイアウト

対してイープラスはヘッダーにもフッターにもリンクは一切なし。サイトロゴすら排除した徹底ぶり。

対してイープラスはヘッダーにもフッターにもリンクは一切なし。サイトロゴすら排除した徹底ぶり。

チケットぴあにはフロー表示が

今回はチケットぴあのみにフローが配置されていました。今回のように4画面以上遷移するフォームでは、フロー表示があると安心できますね。

ok_blue チケットぴあ フロー

フロー表示で現在地が明確に。

フロー表示で現在地が明確に。

盲点!?ラベルタグは2社ともなし

ラジオボタンやチェックスのラベル部分をクリック可能にする「label」のマークアップが、今回2社とも実装されていませんでした。
ほんの少しの手間でユーザビリティを大きく改善できるので、ぜひマークアップしておいてほしいところです。

参考:ラベル要素の重要性と、効果的なカスタマイズ方法

チケットぴあにはキャンセルボタンあり!

チケットぴあの入力内容確認画面に、「やめる」ボタンが。いわゆる「キャンセルボタン」ですね。
このようなボタンを用意しておくと、内容を修正しようとあしたユーザーが間違えて押下してしまう危険性があります。送信をキャンセルさせる導線は百害あって一利なし。すぐに排除したいところ。

ng_bw チケットぴあ ボタン

「やめる」というボタンがある

「やめる」というボタンがある

エラー表示に差が

チケットぴあがフォーム上部と該当項目にエラー文言を表示し、項目の枠線色を変えてエラー箇所を強調しているのに対し、イープラスのエラー表示はフォーム上部にまとめて表示されているのみでした。

フォーム上部へのエラー表示は、エラーの内容を俯瞰できる点では良いですが、それだけでは該当箇所との照らし合わせる作業が必要となり面倒です。できればエラーのあった項目そのものを目立たせたり、項目のそばにエラー内容を表示すると良いですね。

ok_blue チケットぴあ エラー表示

フォーム上部と該当項目にエラー内容。さらに枠線を赤色にして強調している

フォーム上部と該当項目にエラー内容。さらに枠線を赤色にして強調している

ng_bw イープラス エラー表示

フォーム上部にエラー内容が表示されるのみ。

フォーム上部にエラー内容が表示されるのみ。

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

チケットぴあ イープラス
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

チケットぴあは入力支援機能が充実

チケットぴあのフォームには入力支援機能が充実していました。
必須や入力形式などのエラーを入力したそばから判定するリアルタイムアラート機能、半角入力を送信時に自動で全角へ変換する機能、項目フォーカス時に自動的にIMEモードを変換する機能、郵便番号から住所を自動入力する機能などが搭載されていました。

efo_double_ring チケットぴあ リアルタイムアラート

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

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

一方、イープラスの入力支援機能は少なめ

イープラスには郵便番号からの住所の自動入力機能がついていました。

ok_blue イープラス エラー表示

郵便番号から住所を自動入力

郵便番号から住所を自動入力

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

以上、EFO観点から2社のフォームを比較分析しました。いつもの勝手なアドバイスで今日も終わりたいと思います。

チケットぴあ

入力支援機能の充実やエラー表示の工夫など、ユーザーに対する配慮が感じられました。細かい部分ではありますが、ページ内の余計なリンクを削除したり、ラベルタグでのマークアップを行うなどの工夫でさらに使いやすいフォームになるのではと感じました。
また、キャンセルボタンの配置は禁物。できればすぐにでも「やめる」ボタンは削除したほうが良いのではと思います。

イープラス

入力項目が多いので、会員登録時点で必要ない項目は極力後回しにできると理想的です。
また、いずれか必須の項目がフォーム内に何度か登場しますが、少しわかりにくいので表現を工夫すると良いと思います。さらに「支払い方法」が縦に長いので、レイアウトにも改善の余地はありそうです。

エラー表示や入力支援機能を充実させることで、ぐんとユーザーに優しいフォームになるのではと思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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