勝手にEFO比較分析 【BIG ECHO × JOYSOUND】（業務用カラオケサービス 予約フォーム）

新生活が始まる4月も終わり、環境が変わった方もだんだんと生活に慣れてきた頃かと思います。
新しく出会った方々とさらに親睦を深めるためには、カラオケで盛り上がるのも良いかもしれません。
曲の好みが似ていれば親近感が持てますし、初めて聞く曲で趣味が広がることもあります。なにより歌うことは楽しいですね。

本日は業務用カラオケサービスの予約フォームに注目し、「勝手に比較分析」していきます。
取り上げるのは、業務用通信カラオケシステムの「DAM」で有名な、業務用通信カラオケでは業界最大手である株式会社第一興商様の「BIG ECHO」（http://big-echo.jp/、以下本記事では「BIG ECHO」）と、
マイナーソング、アマチュア・同人楽曲などが他社よりも多数配信されているという特徴を持つ業務用通信カラオケシステムの「JOYSOUND」でお馴染みの株式会社スタンダード様が提供している「JOYSOUND直営店」（http://shop.joysound.com/、以下本記事では「JOYSOUND」）の2サービスです。

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

基本的項目の確認

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

どちらのフォームも概ねフローは同じで、フォームの入力後の電話確認によって予約が確定します。
さらに予約にあたって人数などの制限があるため、注意事項の文言が多めのフォームとなっています。
入力項目の数を比較すると、BIG ECHOは項目数、必須項目ともに絞られていることがわかります。

レイアウト

BIG ECHOはサイドバーを非表示にしたフォーム専用レイアウトが用意されています。
EFOの観点では、余計なリンクやコンテンツはなるべく配置しないことが望ましいので、専用のレイアウトを用意していることは評価できます。
ただ、グローバルナビゲーションやフッターが目立つ作りのフォームですので、併せて非表示とすれば入力中の離脱をさらに防ぐことができると思います。

JOYSOUNDはサイト共通のレイアウトを使用しています。
特にサイドバーのコラボキャンペーンのバナーなどは目を引き魅力的なため、フォームからの離脱の要因となりやすいと考えられます。
余計なコンテンツは配置しないことで、入力に集中してもらうことができ、見た目がすっきりとした印象も与えることができると思います。

BIG ECHOレイアウト

フォーム専用レイアウト。サイドバーが非表示となっていてすっきりとした印象。

JOYSOUNDレイアウト

サイト共通のレイアウト。離脱の要因になる箇所が多い。

入力項目、必須マーク

入力項目の数については、BIG ECHOは12種、JOYSOUNDは19種となっています。
フォームを見ると、BIG ECHOは必要な項目を厳選しています。
比べてJOYSOUNDには利用するコースや機種、会員番号、法人・団体名、ご利用目的の入力欄が設置されています。
その分項目が増えているため、入力後に電話確認を行うのであれば、省略できる項目もあるのではないかという印象を受けます。

必須マークについては、目立つ色で四角いマークを作り、「必須」文字を白で抜いた画像を使用することがお手本です。
JOYSOUNDは必須項目に「※」マークを明記していますが、印象が薄いためマーク形式で表示することをおすすめします。
また、BIG ECHOには必須マークの表示はありませんでした。最低限どの項目が必須か作業量を伝えることで、入力完了へのモチベーションとフォーム完了率が上がることが期待されます。

BIG ECHO必須マーク

全体の半分ほどは任意入力項目であるが、必須マークはなし。

JOYSOUND必須マーク

必須マークはあるが、「※」マークは目立ちにくい。

フローと補足の表示

どちらもWebからの予約後、電話確認が必要である特殊なフローとなっています。
そのため、どちらもフォームの上部にWeb上では予約は完了しない旨の注意書きがありますが、
JOYSOUNDは文言とフロー図で2重にフローを示していて流れがわかりやすくなっています。
フロー図だけでなく文言でも、Web予約が可能な条件など重要な事は赤字で記載し注意を促しています。

BIG ECHOはフォームの上部、下部の2箇所に電話確認を行う旨を記載していますが、特に目立たせる工夫はありませんでした。
料金についての補足が赤字となっていますが、年末年始特別料金の記載を対象期間外に赤字で表示する必要はないと思われます。
また、文言が多いと読むのが面倒という印象を与えてしまいますので、それよりはフロー図を設置したほうがユーザーに親切な設計と言えるでしょう。

BIG ECHOフローと補足の表示

文言が多くぱっと見ただけでは要点が伝わりにくい。

JOYSOUNDフローと補足の表示

フロー図があり、補足も見やすく工夫されている。

エラー

どちらのフォームも該当項目の右または下にエラーメッセージを表示する形式でした。
JOYSOUNDはエラーがある項目までスクロールする形式のため、エラーに気付きやすい工夫をしていますが、
スクロールした際にエラー箇所がグローバルナビゲーションに隠れてしまい、逆にエラーに気づけないことがあるようです。
BIG ECHOは、エラーページであることに一瞬で気づいてもらうため、冒頭にエラーがあることを表示するとより親切な設計となるでしょう。

該当項目のそばにエラー内容を表示する形式はよいのですが、文字が小さいため、エラー項目の背景色を変更するとより修正すベき項目がわかりやすくなります。
また、BIG ECHOのエラー内容の文言として「※入力値エラー」「※数値項目」が使用されていますが、ユーザーにとってはやや馴染みのない表現かと感じました。

BIG ECHOエラー

項目のそばにエラー内容があるが、エラー画面であることが一目ではわかりにくい。

JOYSOUNDエラー

必須項目のふりがなを空白にして送信ボタンを押した状態。エラー項目がグローバルナビゲーションに隠れている。

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

リアルタイムアラート

JOYSOUNDにはエラーをその場で判定するリアルタイムアラート機能が実装されていました。
送信ボタンを押す前に入力の誤りを知らせることができるため、ユーザーの手間を減らす有効な機能です。
ただし、この機能ではふりがなをひらがなで入力しているかは判定できていないようです。
また、現在フォーカスが当たっている項目以外のエラー内容が薄い色になりますが、すでにあるエラーに気づきにくくなるという懸念があります。

JOYSOUNDリアルタイムアラート

リアルタイムアラートの実装はされているが機能が不十分な印象を受ける。

日付の自動入力

どちらのフォームも予約日を入力する欄がありますが、JOYSOUNDは予約日はカレンダーからのみ入力できるようになっています。
Webからは3日後以降の予約のみを受け付けていて、条件に合わない日付は選択できないようにしています。
曜日を確認できることも親切ですし、誤入力をなくすために有効な機能ですが、テキストボックスからの入力は一切できません。
補足説明がありますが、テキストボックスの背景色をグレーアウトすると入力できないことがよりわかりやすくなるでしょう。

JOYSOUND日付自動入力

不正な日付の入力を防ぐことができる。

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

今回は業務用カラオケサービス2社の予約フォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

BIG ECHO

入力項目を絞っている点、入力フォーム専用のレイアウトを用意している点はよいのですが、全体としてユーザーに入力しやすくさせるための工夫は少ないと感じました。
まず入力項目の半分は任意項目ですので、必須マークは用意したいところです。
補足説明が冗長な点も気になります。フロー図を用意し文言を整理することで解消できると思います。
入力支援機能は特に見られませんでした。ユーザーの利便性の向上のために導入することを検討していただきたいです。

JOYSOUND

項目は多めですが、フロー図があり、入力支援機能を導入している点など入力しやすさに配慮する姿勢が感じられました。
ただ、機能的に惜しいと感じる点もありましたので、さらに質の高い入力支援機能の導入を検討してはいかがでしょうか。
また、エラー項目にスクロールする機能も気になるところです。グローバルナビゲーションを非表示にすることで解消すると思われますので、
入力に不要なコンテンツを極力なくしたフォーム専用レイアウトを用意すべきでしょう。フォームからの離脱を防ぐ効果も期待できます。