勝手にEFO比較分析【エルセーヌ x ミス・パリ】（エステサロン 体験予約フォーム編）

そろそろ海や川、プールといったレジャーシーズンの到来ですね。
それにあわせ、魅せるための体づくりをしている方も少なくないのではないでしょうか。

ジムに通い筋肉トレーニング、整体・マッサージに通い体のゆがみの正常化、エステに通ってダイエットやスキンケア、脱毛で美容に力を入れるなど、人によってスタイルはそれぞれだと思います。

今回は全国100店舗以上を展開するエステティックサロンの「エルセーヌ」（http://www.elleseine.co.jp/）（以下本記事では「エルセーヌ」）と大阪発のエステティックサロンの「ミス・パリ」（http://www.miss-paris.co.jp/）（以下本記事では「ミスパリ」）の体験申込みフォームを比較分析していきます。

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

基本的項目の確認

それではいつも通り、基本項目から見ていきましょう。

入力項目の種類はどちらもほとんど変わりません。
どちらも「コースの選択」「体験店舗」「予約希望日」の優先度を高くしており、顧客情報入力項目は、優先度が低い状態となっています。

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

レイアウトの違い

入力項目をひとつの表にまとめ、情報を集約したエルセーヌ。

入力欄のサイズを大きめにし、マージンを広くとることで見やすさに重点を置いた、ミスパリ。さらに、入力項目をカテゴリ分けすることで、テンポの良い入力を可能とさせています。

エルセーヌ ページレイアウト

入力項目を表形式に統一することで、「今どういった内容を入力しているのか」が分かりやすくなっています。

しかし、フォントサイズや行間が若干小さく感じられます。マージンやフォントカラーを調整して視認性と可読性を上げていきたいですね。
また、サイト共通のナビゲーションが離脱を生む可能性が。こちらもできれば除いておきたい所。

ヘッダーフッターに配色を合わせた統一感のあるフォーム。

ミスパリ ページレイアウト

項目を種類ごとに分けることでユーザーに入力行程の進行感を持たせています。
余計なナビゲーションが削除された、シンプルなフォーム専用レイアウトを採用しています。

しっかりとマージンがとられていて、視認性・可読性が高く読みやすいフォーム。

必須マークは両社ともあり

お手本は「必須」文字を使い、色背景を敷くなどして四角にしたマークを先頭につけた状態です。

エルセーヌ 必須マーク

エルセーヌは文字のみの必須マークです。
文字だけでは印象が薄いので、お手本の様なマーク形式にしましょう。

文字だけでは少し印象が薄いです。

ミスパリ 必須マーク

一方ミスパリはお手本のような必須マークを使用しています。
ただ入力欄の背景色が任意項目と変わらないので、必須項目のみ目立つ色に変えてあげると、より入力しやすくなると思います。

お手本のような必須マークです。

どちらもフローあり

エルセーヌは、フォーム送信も含めた申込から予約完了までの全体の流れをフローで説明するものとなっています。

対して、ミスパリはフォーム内の情報入力ステップを表示する横型のフローになっています。

エルセーヌ フロー

もう少し凝ったフローでも良いかもしれません。

ミスパリ フロー

ステップ説明が簡潔で安心感が持てます。

WEBサイト以外の予約方法の提示

フォーム入力が苦手で電話での予約を望んでいるユーザーを想定し、電話への導線も併記しておくことでサービスの利便性を向上させることができます。

エルセーヌでは電話番号を表記したサイト共通のヘッダーが表示されているためというのもありますが、この点をクリアしています。
ミスパリでは表示はありませんでした。

エルセーヌ 電話予約用の番号表示

コース予約用だけでなく、お客様サポート用の電話番号も載せています。

安心感を醸成するバッジ表示

フォームはどちらもSSL環境ですが、バッジの表示があるのはエルセーヌのみでした。
セキュリティバッジを表示しておくだけで、ユーザーが感じる安心感はアップします。ぜひ取り入れておきたい所です。

エルセーヌ セキュリティバッジの表示

個人情報の安全性をバッジを表示することで強調している

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

入力支援機能の有無

今回いずれもリアルタイムアラート、住所自動入力を実装していました。

入力支援機能はユーザーのモチベーションの向上につながる機能も多く、利便性も確実に上がります。ぜひさらなる入力支援機能の導入・拡充をご検討いただきたいですね。

リアルタイムアラート

今回いずれもリアルタイムにエラー判定する「リアルタイムアラート機能」が導入されていました。
どちらも吹き出しでエラー内容を表示するようになっています。

エルセーヌ リアルタイムアラート

項目同時にエラーを吹き出しで表示。
一度表示されると☓マークを押すまで吹き出しが消えず、重なってしまう

ミスパリ リアルタイムアラート

こちらも、吹き出しが重なる現象が。さらにエラー判定されるタイミングがよくわからなかった。

ミスパリはフォーカス時、完了時の入力支援機能も

ミスパリは項目フォーカス時には背景色が黄色に変化。マウスオーバー時には緑色の吹き出しで入力例などの補足説明を表示。
さらにエラーない状態で入力を終えると該当の背景色が緑色に変化する入力成功サインのような機能もありました。
ややカラフルすぎるのが気にはなるものの、ユーザーがフォーム項目一つづつに達成感を持って入力を進めることができますね。

ミスパリ 必須マーク

入力完了時は緑色、入力中は黄色に背景色が変化。
また入力中にはふきだしを表示して補足を表示。

エラー画面

ユーザーにとって見やすいエラー画面の条件は下記の2点です。

・冒頭にエラーに関するメッセージがある
・各エラー箇所に分かりやすい配色で注記がある

今回いずれも、エラー注記を吹き出しにし、該当箇所に表示させつつ、背景色を変化させて強調する形をとっています。
しかし、冒頭に何もないのは少し残念ですね。上部には一言メッセージがほしいところです。

またいずれもピンク色を基調とするページデザインであるところに、さらにエラーもピンク系で強調しているため、結果としてあまり強調されにくいように思います。
エラーが引き立つように、もともとのページの色を抑えておくか、異なる色を用いるなどの工夫があると、よりわかりやすいエラー表示が実現できるのではと思います。

エルセーヌ エラー表示

吹き出しでエラーを表示。また該当箇所の背景色を強調。

必須項目の入力が抜けていると送信ボタンを押下できない仕組みになっています。

ミスパリ エラー画面

冒頭にひとこと、エラーに関するメッセージがほしいところです。

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

今回はエステティックサロンサイトの体験予約フォームについて分析を行いました。
最後は勝手にフォーム改善のアドバイスをして締めくくります。

エルセーヌ

強弱を付けるためのデザイン調整と入力支援機能の拡充が必要

現状のフォームタイトルやフォントサイズだと全体的にのっぺりとしていて、メリハリがありません。
そこで強弱を付けるためのサイズやマージン、配色調整を行うと今までより分かりやすいフォームになっていくと思います。

また、サイト共通のナビゲーションが表示されていると、ユーザーの離脱を引き起こしてしまう場合があります。できれば余計なリンクはすべて削除しておくと良いのではないでしょうか。

ミスパリ

エラー、必須、入力項目の工夫ででさらに快適なフォームに

ページレイアウトや項目の整理のされかた、フォーカス時や完了時の入力支援機能など、細やかに配慮がある良質なフォームだと思います。

しかしすべての必須項目にマーク表示がないことや、エラー表示のわかりやすさと配色が気になりました。とくに、リアルタイムアラートの判定のタイミングはわかりやすくしておきたいところです。これらの点に改善があると、さらにユーザーに優しいフォームになるのではと思います。