勝手にEFO比較分析【ドクターシーラボ x ドクターライン】(ドクターズコスメ 会員登録編)

やってきました「勝手にEFO比較分析」。

9月~10月初めにかけて暑い日が続きましたね。

例年、夏の疲れ肌から冬の乾燥肌に向け、皆様(特に女性)は肌の手入れをしっかりなさっていることと思います。

近年はドクターズコスメという皮膚科医や美容外科医の研究データを元に作られた化粧品が出まわり、肌トラブルに対し、以前より専門的なスキンケアができるようになっているそうですね。

今回は、化粧品・スキンケア業界の中でも『ドクターズコスメ』会社の会員登録フォームをテーマにします。

対象サイトは、株式会社ドクターシーラボ様「ドクターシーラボ」(http://www.ci-labo.com/)(以下、本記事ではドクターシーラボ)と、株式会社ドクターライン様「ドクターライン」(https://www.dr-line.com/)(以下、本記事ではドクターライン)を選ばせていただきました。

※以下、サイト名の敬称は省略させていただきます。

10年以上前に突如として現れた、日本初の皮膚専門家が作るコスメを販売したドクターシーラボ。一方、14年もクリニックを運営しつつ、ドクターコスメの研究開発をしたドクターライン。

両サイトの会員登録のフォームの内容やいかに。

いつもどおり「勝手に分析」していきましょう。今回も改善ポイントを「勝手に」指摘していきますので、どうぞお付き合いください。○✕△と、ユーザー視点での評価を行っていきます。

※本記事の内容は2013年11月8日時点の株式会社ドクターシーラボ様、株式会社ドクターライン様、両社のサイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません(2013年11月8日時点)。

入力ページ、基本的な部分は同じ。ただ、オファーやフローにそれぞれ工夫が。

ドクターシーラボ ドクターライン
ページ数 入力、確認、完了の3つ 入力、確認、完了の3つ
入力項目の種類 23種類 23種類
必須項目入力欄の数 15個 13個
フロー あり あり
オファー あり あり
必須マーク あり「必須」
わかりやすい
あり「必須」
わかりやすい
メルマガ購読 確認ページ下方にあり 入力ページ下方にあり
利用規約、
プライバシーポリシー
確認画面にリンクあり。別ページ表示 入力画面下方、インラインフレーム表示
送信ボタンのサイズ 幅273px x 高さ42px 幅182px x 高さ38px
入力画面のレイアウト 専用ページ。
ヘッダー、フッターあり
専用ページ。
ヘッダー、フッターなし
入力ページへの遷移 トップページ「ログイン」>「WEB会員登録」から トップページ「会員登録」から

以下、個別に説明しましょう。

とにかく巨大なドクターラインのオファー画像。ドクターシーラボは一風変わったオファー(的なもの)

毎度、毎度ですが、フォームを入力完了=送信することでユーザーが何を得られるのかについての説明をオファーと呼んでいます。

「幅700px×高さ805px」という、とにかく巨大な画像でオファーを提示しているのがドクターライン。

一方、ドクターシーラボは、ちょっと変わったオファーでした。

ドクターシーラボ
誕生日を入力するとメッセージが。まぁギリギリこれもオファーと言えるでしょう。
ドクターライン
これまでの事例では出てこなかった、巨大オファー!登録するメリットを大いにアピール。入力項目はこの画像の下から始まる。

ドクターシーラボのほうは、誕生日を入力すると「お誕生日月にはドクターシーラボからうれしいお知らせがあるかも?!」というメッセージがフォーム右脇に表示されるというもの。

厳密には項目入力後に表示されるのでオファーと呼べるか微妙ではあるものの、ちょっと珍しいタイプなので紹介させていただきました。

フローはともに「あり」。サポートセンターへのリンクを配置したドクターシーラボに軍配

一方、フローはそれぞれ「あり」。

こちらはドクターシーラボに一票。
フローの脇に「お困りの方はこちら」として、離脱要素にもなりかねない「サポート問い合わせ」フォームへのリンクを張っていました。フォーム自体の入力完了率を向上を考えると評価分かれるところですが、位置も表現も好感持てました。

ドクターシーラボ
ちょっとした気遣いが好感を持てました。離脱要素を敢えて入れる勇気。
ドクターライン
普通のフローでした。

確認/完了ボタンは少々差が。

大きさに差もありますが、反応も差がありました。

ドクターラインにマウスオーバーの反応があったのですが、なんだか控えめに機能します。大した反応ではないので、注意しなければわからないかも。

ドクターシーラボ
大きさは中くらい。マウスオーバー反応なし。
ドクターライン
こちらは少々小さめ。マウスオーバー反応ありだが上下反転の微妙なもの。

あと一歩、な入力項目。

ドクターシーラボは、リアルタイム入力補助機能がついてはいるものの、お名前、フリガナ、郵便番号は入力項目がそれぞれ1つにはなっていませんでした。

くどいようですが、1つにまとまっていたほうがよりシンプルで、入力もスムーズにできるはず。システム上の制約が大きく影響する部分なので、1度作るとなかなか変更が効かないので初期の設計が肝心かと。

ドクターラインは、入力項目がまとまっていて、入力しやすさはありますが、それぞれ入力項目毎に入力に関しての注文があります。せっかくのシンプルなフォーム、もう一息といったところ。

ドクターシーラボ
入力フォームは、お名前、フリガナと郵便番号が2つに別れ、電話番号は1つにまとまっていた。
ドクターライン
お名前、フリガナ、郵便番号と電話番号は1つのフォームにまとまっているが、入力に注文が。

入力補助機能に差

機能名 ドクターシーラボ ドクターライン
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:あり
エラー時:なし
フォーカス時:なし
エラー時:なし
項目ごとに入力完了後の動作 パスワードの入力内容をチェックしてくれる なし

ドクターシーラボのリアルタイムアラートは、項目毎にグレーの吹き出しが入力項目の上部に表示されました。

また、オファーのところで触れましたが、誕生日の欄の他にも、住所入力完了時も、メッセージが現れる仕組みになってます。EFOの機能というよりエンターテインメント。サイト自体は真面目なトーンなので、そのギャップが、ユーザーの気持ちをくすぐりますね。

ドクターシーラボ
特定の都道府県を入力すると白い吹き出しにメッセージが追加される。しかも、入力したエリアによって内容が変わる。10種以上あり。

エラー表示、王道のドクターシーラボと、技巧派のドクターライン

必須項目を入力しないまま、内容確認を押すと出てくるエラー。

ドクターシーラボは典型的な赤色で入力項目を囲み、画面上部に該当項目を並べていました。

一方、ドクターラインは該当の入力項目へ移動し、吹き出しで入力を促す仕組み。

表示としてはドクターシーラボのような王道もありですが、ドクターラインのように未入力箇所へわざわざ遷移してくれるというのもアリ。

この両方が組み合わさったエラーなら、ユーザーとしては目視でも確認できますし、何より移動する手間もなくて対処しやすいと考えます。

ドクターシーラボ
こちらが一般的に見るエラー。入力補助機能はあるにしても、ガイドがあれば未然に防げたかも。
ドクターライン
表示時間は数十秒だが、該当箇所に自動で遷移する。enterキーで反応するが、tabキーも反応すればなおよし!

郵便番号からの住所検索機能は共にあり。

両社とも郵便番号から住所自動入力があり、またページの更新をして該当住所を表示していました。

しかし、前回お話したとおり郵便番号を覚えていないユーザーも一定数いるのも確か。

今回は、ドクターシーラボが、住所から郵便番号を検索する機能をつけ、ドクターラインに差をつけました。

ドクターシーラボ
フォームの右隣の所定リンクから、オーバーレイにて住所から郵便番号検索できる。
ドクターライン
入力の際”-“が必須となる。

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

今回の比較分析は、以上となります。

前回と同じく分析に加え、こうすれば良くなるのではないかという改善案を、考えてみました。

ドクターシーラボ

1)入力エラーはフォーム近くに表示すべし

該当フォームの周囲が赤くなっていましたが、どうせならエラー文も一緒に表示できればいいですね。

上部にまとめて配置してしまうと、エラー文を読んでから下を見て探さなくてはならないので少々面倒です。

2)メルマガ購読チェックは、入力ページと一緒に表示すべし

今回ドクターシーラボでおや?と思ったのがメルマガ購読の有無。
入力が終わり、さて確認だけだと思ってボタンを押したら、確認画面下方に出現。どうせなら入力の際に、チェックを入れたい。

3)職業は「非必須」にすべし

誕生日はオファーが出たので解りますが、職業まで必須に…本当に必要な情報なのかなと思ってしまう人もいるかも。

ドクターライン

1)誕生日が必須な理由が欲しかった

オファーの画像がインパクト大なのですが、誕生日を必須にしている理由が見当たらなかったのが少々残念。

2)アンケート「必須」の意図は?

ドクターシーラボは職業でしたが、こちらはアンケートが必須でした。
アンケートといえばほぼ任意で行われるものなのですが、必須にした意味は一体何なのでしょうか。
どうせなら、メルマガを必須にしておくほうが良いのでは?

3)入力補助機能の導入を!

エラーの反応は素晴らしいのですが、やはり、リアルタイム入力補助機能は欲しいところ。

あとは、共通して、離脱ブロックを導入したり、ガイド機能で残り入力項目残数を表示するなどすると、もっと使いやすくなるのではないでしょうか。

まとめ
リアルタイム入力補助機能を導入して王道を進みつつ、意外なところで笑いをとるドクターシーラボ。一方、入力補助機能は無しでも、エラー表示ギミックや巨大オファーで好戦したドクターライン、でした。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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