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

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

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

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

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

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

基本的項目の確認

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

エルセーヌ ミスパリ
ページ数 申し込み、申し込み内容確認、ご予約完了の3ページ 申し込み、申し込み内容確認、お申込完了の3ページ
入力項目 14種 15種
必須項目入力欄の数 17項目 13項目
フロー あり あり
オファー なし あり
必須マーク あり(「必須」文字表示) あり(「必須」マーク表示)
送信ボタンのサイズ 幅156px × 高さ32px 幅351px × 高さ41px
入力画面のレイアウト 他ページと共通 フォーム専用

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

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

レイアウトの違い

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

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

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

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

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

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

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

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

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

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

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

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

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

soso_black エルセーヌ 必須マーク

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

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

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

efo_double_ring ミスパリ 必須マーク

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

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

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

どちらもフローあり

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

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

soso_black エルセーヌ フロー

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

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

ok_blue ミスパリ フロー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

機能名 エルセーヌ ミスパリ
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし

エラー時:あり

フォーカス時:あり

エラー時:あり

項目ごとに入力完了後の動作 なし 完了時に入力欄がグリーンの配色に変化

入力支援機能の有無

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

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

リアルタイムアラート

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

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

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

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

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

こちらも、吹き出しが重なる現象が。

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

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

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

efo_double_ring ミスパリ 必須マーク

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

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

エラー画面

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

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

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

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

ok_blue エルセーヌ エラー表示

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

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

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

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

soso_black ミスパリ エラー画面

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

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

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

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

エルセーヌ

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

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

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

ミスパリ

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

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

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

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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