勝手にEFO比較分析【東京ビッグサイト×インテックス大阪】国際展示場お問い合わせフォーム編

2020年に開催が決定した東京オリンピックに向け、各所の国際展示場や競技場で改修や増設工事が進められていることから、現在関東ではコンサート等のイベント会場不足が心配されているのだとか。

本日は、コンサートや展示、セール、試験、入社式…等など、さまざまなイベントの会場として幅広く利用されている国際展示場の施設利用お問い合わせフォームに注目し、比較分析していきます。

取り上げるのは、関東の代表、株式会社東京ビッグサイトが運営する「東京ビッグサイト」(http://www.bigsight.jp/ 以下「ビッグサイト)。
そして関西の代表、一般財団法人大阪国際経済振興センターが運営する「インテックス大阪」(http://www.intex-osaka.com/ 以下「インテックス」)の2施設です。

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

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

基本的項目の確認

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

ビッグサイト インテックス
入力項目 23種 17種
必須項目入力欄の数 12項目 47項目
フロー なし なし
オファー なし なし
必須マーク あり(*マーク) あり(※マーク)
入力画面のレイアウト フォーム専用 他ページと共通

レイアウト

ビッグサイトはヘッダーやフッターにはリンクが残っていますが、フォームの周辺にはリンクが少ないのが特徴です。

インテックスは右サイドに共通のサイドバーがついたままになっており、離脱の要因になる可能性があります。

△ ビッグサイト  レイアウト

1)layout-bigsite

しかし、カーソルがヘッダーのメニューにさわってしまうと、フォームにかかってしまうことも。

2)layout-bigsite

△ インテックス  レイアウト

縦に長め。

縦に長め。

必須マーク

どちらもいまひとつな印象です。

ビッグサイトは「*」印。項目名の右側についています。
ただしすべての必須項目にこの印が付いているわけではないようで、ユーザーが戸惑ってしまう可能性があります。

インテックスは「※」印。
こちらもビッグサイト同様に項目名の右側についていますが、文字よりも小さく、薄い灰色の背景色に同化してしまっていて認識しにくい印象を受けました。

☓ ビッグサイト  必須マーク

この後のエラー画面で説明しますが、この後、必須であるという事実が明らかに。

この後のエラー画面で説明しますが、この後、必須であるという事実が明らかに。

☓ インテックス  必須マーク

文字よりも色が薄く強調する効果がない

文字よりも色が薄く強調する効果がない

エラー画面

ビッグサイトも、インテックスも、入力が不足している各項目の下に赤文字でアラートが出てきます。
エラー箇所の指示はわかりやすいと思います。

○ ビッグサイト  エラー

6)error-bigsite

エラー表示そのものはわかりやすいのですが、利用を希望する施設(ホール)や、利用希望日が必須項目であることが、ここで初めて明らかになります。
同じ赤文字でも、第2希望、第3希望は必須ではないようです。

○ インテックス  エラー

入力項目との位置が近く、シンプル

入力項目との位置が近く、シンプル

 

日付の入力方法に違い

希望日、利用日、利用期間とたくさん日付を入力しなけらばならないのは、会場利用の特性のようです。

◎ ビッグサイト  日付入力

8)days-bigsite

項目をクリックするとカレンダーが出てくるので、カレンダーをクリックすると年月日が入力されます。
カレンダーになっていることでご入力の防止にもなると思われます。

☓ インテックス  日付入力

9)days-intexOsaka

大量のセレクトボックスで、年月日を入力する必要があります。
年月日をバラバラに入力するため、入力項目数も多くなっています。
「日」は、下旬の日程の選択が続くと大変そうです。

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

機能名 ビッグサイト インテックス
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

どちらのフォームにも、入力支援機能はありませんでした。
フォームのユーザビリティを向上し、入力完了率を高めるためには入力支援機能の導入をおすすめいたします。

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

今回は国際展示場のお問い合わせフォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

ビッグサイト

必要な項目のみ入力するシンプルでわかりやすい内容です。
必須項目に関しては、入力が必要な個所にはすべてつける、もしくは項目名の色を統一し、「赤色で記載された項目は必須です」などのようにする方がよいのではないでしょうか。
紹介者と利用者が同じ場合は入力を省略できるようにしている点や、カレンダーで日付を選択できる点、レスポンシブに対応している点が良いと思われます。

また、インテックスのようにホールと会議室の利用問い合わせが一括でできるようにするのもひとつかと存じます。
住所自動入力や、フリガナ自動入力などの機能を利用すると、ユーザーにとって使いやすくなるのではないでしょうか。

インテックス

お問い合わせとお申し込みは同じフォームに遷移するようになっています。別の専用フォームにすると、お問い合わせに関する入力項目を削減できると思います。
ビッグサイトとは異なり、ホールと会議室を、同時に利用希望として連絡できる点は良いのではないでしょうか。

なお、送信ボタンの横にあるリセットボタンは離脱の要因になりますので、設置しないことをおすすめします。
また、住所自動入力や、フリガナ自動入力などの機能を実装し、ユーザーの負担を軽くするといいのではないでしょうか。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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