勝手にEFO比較分析【ロート x Santen】(目薬の製造販売企業 お問い合わせフォーム編)

パソコンやスマートフォンは私達の生活に欠かせないツールになっており、仕事とプライベートを合わせると、一日8~12時間程度、目を酷使しているという方も多いのではないでしょうか。
最近では瞳に刺激を与えるブルーライトをカットしてくれるPC用メガネたるものが普及し始めてはいるものの、瞬間的に眼精疲労を癒してくれるモノといえば、やはり「目薬」です。

今回は目薬をはじめとする医薬品の製造販売を行う「ロート製薬株式会社」(http://www.nintendo.co.jp/)(以下本記事では「ロート」)と目薬、眼科薬、点眼薬などを製造販売している「参天製薬株式会社」(http://www.santen.co.jp/ja/)(以下本記事では「Santen」)のお問い合わせフォームを比較分析していきます。

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

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

まずは基本的項目の確認からです。

いつも通り、基本項目の確認からしていきましょう。

ロート Santen
ページ数 入力画面、確認画面、完了画面の3ページ 情報入力、お問合せ内容確認、お問い合わせ完了の3ページ
入力項目 12種 16種
必須項目入力欄の数 8項目 8項目
フロー あり なし
オファー なし なし
必須マーク あり(「必須」マーク表示) あり(「※」文字表示)
送信ボタンのサイズ 幅300px × 高さ64px 幅136px × 高さ26px
入力画面のレイアウト 他ページと共通 他ページと共通

どちらもフォームの配色はコーポレートカラーで統一されています。
フォントサイズや行間、入力欄の大きさとマージンの取り方などにそれぞれ違いが出ていました。

それでは以下個別に説明していきます。

ページレイアウト

ロートは全体的にパーツが大きく視認性、入力性が高い印象です。
一方、Santenはコンパクトにまとめてきています。

ok_blue ロート ページレイアウト

一目見てまず感じるのは「見やすい」という印象。全体的にパーツを大きくし、余白を大きく使うことで、文字の圧迫感がありません。
フォントサイズとマージンの取り方も優秀で、視認性が高いです。

フォントと入力欄が大きく、操作しやすいフォームとなっています。

フォントと入力欄が大きく、操作しやすいフォームとなっています。

ok_blue Santen ページレイアウト

フォントサイズと余白を抑えコンパクトなフォームに設計しています。
入力項目をできるだけファーストビューに収めるのはフォームの基本ですから、理にかなっている作りだと思います。

若干文字の圧迫感を感じるので配色で改善したい。

若干文字の圧迫感を感じるので配色で改善したい。

印象に差が出た必須マーク

どちらも必須マークを表示。必須マークでユーザーの視線を誘導し、入力しやすい環境を作っていきたいですね。

efo_double_ring ロート 必須マーク

大きい必須マークがラベルの先頭についているので見落としが無く、とても分かりやすいです。

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

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

soso_black Santen 必須マーク

一方こちらの必須マークは「※」を使っており、少し印象が薄いと感じます。「※」や「*」は定番ではありますが、四角い背景に白抜きの「必須」文字の方が確実に目を引きますね。

四角い必須マークを使用していれば満点でした。

四角い必須マークを使用していれば満点でした。

フローやバッジ表示で与えられる安心感

ロートにはフローとセキュリティのバッジ表示がありました。入力、確認、完了のシンプルな作りになっている場合にフローを設置しない場合も少なくありませんが、やはりフローがあるだけで安心感は高まりますね。

efo_double_ring ロート フロー

とてもシンプルですが分かりやすいです。

とてもシンプルですが分かりやすいです。

また、バッジ表示や個人情報の取り扱いに対する提言がなされていると、セキュリティという表面上は目に見えにくいサービスが伝わりやすくなり、ユーザーの安心につながります。

efo_double_ring ロート バッジの表示

バッジ表示があるのとないのではかなり安心感に差が生まれます。

バッジ表示があるのとないのではかなり安心感に差が生まれます。

クリアボタンに注意!

Santenのフォームにはクリアボタンが用意されていました。ユーザーが誤って入力内容を消去してしまう可能性が高いため、いますぐにでも削除したいところです。

ng_bw Santen クリアボタン

クリアボタンはユーザビリティを著しく損なう可能性が!

クリアボタンはユーザビリティを著しく損なう可能性が!

作りに差が出たエラー画面

ロートのエラー画面は、冒頭と該当箇所にメッセージを表示する形。また、該当箇所は赤色で強調され、どこを修正しなくてはならないかが明確です。

ok_blue ロート エラー画面

エラーの一覧が圧迫感を出していますね。

エラーの一覧が圧迫感を出していますね。

いっぽうSantenはエラー画面を設けておらず、エラーに対し、その都度ダイアログを表示し指摘していく、というものです。
これでは複数エラーがあった場合に同じ工程を何度も繰り返さなければならず、ユーザーにストレスを与えてしまいます。

ng_bw Santen エラー画面なし

一つ一つダイアログで表示します。

一つ一つダイアログで表示します。

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

機能名 ロート Santen
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

入力支援機能は、住所の自動入力のみ

今回目立った入力支援機能はロートの住所自動入力機能のみとなりました。

なぜか住所欄のほかに「都道府県」の欄があり、この欄には郵便番号から自動入力されないようでした。
そのため少し「惜しい」と感じてしまったものの、自動入力することでユーザーの手間を解消してくれていることに違いはありません。

soso_black ロート

住所自動入力。「都道府県」には情報が入力されない

住所自動入力。「都道府県」には情報が入力されない

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

今回は目薬の製造販売を行う企業2サイトの問い合わせフォームについて、分析を行いました。
いつも通り最後に勝手にアドバイスをして締めくくります。

ロート

専用レイアウトの使用と入力支援機能の導入で集中できるフォームへ

現在は他ページと共有のページレイアウトを使用していますが、専用レイアウトを使用することで、より集中して入力が出来ると思います。
また、エラー時のアラートやかな自動入力、半角全角の自動変換といった入力支援機能を導入することで、さらに万人に心地よく使ってもらえるフォームになっていくと思います。

Santen

まずは必須マークやフローといった基本的項目の改善から

※印の必須マーク変更、フローの設置、オファー表示(問い合わせをするとどうなるのかを明記したモノ)などといった基本的項目の改善が望ましいです。
また、エラー表示やクリアボタンの存在はユーザーに不便な思いをさせてしまいかねません。今すぐにでも改善されることをおすすめいたします。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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