勝手にEFO比較分析【武田薬品 x 小林製薬】(製薬会社ECサービス 会員登録フォーム編)

全国的に冷え込みが増し、冬が近づいてくるのが肌で実感できる今日この頃。

この時期はいくら用心していても体調や生活リズムの乱れなどによってうっかり風邪を引いてしまう、なんて経験がある方も多いのではないでしょうか。

今回は食品やサプリメントなどの情報をいち早くお届けし、日々の健康をサポートする製薬会社の通販サービス「タケダ通販ショップ」(武田薬品工業株式会社 以下武田薬品)と、「小林製薬の通信販売オンラインショップ」(小林製薬株式会社 以下小林製薬)の2サイトを比較していきます。

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

※本記事の内容は2014年11月18日時点の武田薬品、小林製薬、両サイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラEFOの入力補助機能は導入されていません(2014年11月18日時点)。

基本的な項目の確認。

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

武田薬品 小林製薬
ページ数 入力、確認、完了の3ページ 入力、確認、完了の3ページ
入力項目 22項目 14項目
必須項目入力欄の数 18項目 12項目
フロー なし あり
オファー なし なし
必須マーク あり(「必須」マークでわかりやすい) あり(「必須」マークでわかりやすい)
送信ボタンのサイズ 幅224px × 高さ49px 幅380px × 高さ107px
入力画面のレイアウト 他ページと共通 フォーム専用

入力項目の内容の違いはほぼ見られませんでしたが、ともに任意項目のアンケート部分でフォームが長くなっている印象があります。

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

両者とも多めの項目数

両社とも10項目以上となっており多めの項目数となりました。メールアドレスなどのログイン情報のみフォームを分けて2段構成するとスッキリすると思います。

ok_blue 武田薬品 ページレイアウト

入力項目が多い印象です。姓名欄や電話番号欄などを1つに統一し、さらに必須項目を抑えるとよりユーザーに負担のないフォームになると思います。
せっかくのフォームだからと、任意項目でアンケートを設問してしまいがちですが、フォームが長くなっていくのは逆効果です。見た目が長くなれば第一印象で少なからずストレスはたまっていきます。出来うる限り項目を厳選してファーストビューに収まるようなフォームにしていきたいですね。

ヘッダーに合わせた配色で統一されたフォーム。

さらにヘッダーにあるグローバルナビも排除できると離脱防止に。

efo_double_ring 小林製薬 ページレイアウト

ご本人情報とログイン情報を分けるなど、項目の内容によって区域を分ける工夫がなされています。また、フォントとマージンも程よく調整され、大変見やすいレイアウトになっていますね。

フォーム専用で、ロゴとキャラクターの配色にあわせて作られたフォーム。

フォーム専用で、ロゴとキャラクターの配色にあわせて作られたフォーム。

必須マークはともに優秀

どちらも「必須」文字を使い、色背景を敷いた四角のマークにしたお手本のような必須マークです。

efo_double_ring 武田薬品 必須マーク

お手本のような必須マーク。冒頭で説明があればなおよいですね。

お手本のような必須マーク。冒頭で説明があればなおよいですね。

efo_double_ring 小林製薬 必須マーク

こちらもお手本のような必須マークです。冒頭で説明もきっちりとされていますね。

こちらもお手本のような必須マークです。冒頭で説明もきっちりとされていますね。

フローの有無

ページ遷移の少ないフォームにフローが無いのはありがちなことですが、比べてみると設置されていたほうが、どういう状態にあるのかすぐにわかるので、ユーザーの安心感につながりますね。

efo_double_ring 小林製薬 フロー

番号と矢印を併用することで、ちゃんと順番に進んでいっている感じが伝わってきます。一見単純なことですが、こういう単純なことが一つ一つユーザーの安心感につながっていくのです。

キャラクターイメージを使った見やすいフローになっています。

キャラクターイメージを使った見やすいフローになっています。

どちらもいまひとつなメルマガ配信選択

武田薬品はメルマガ配信についてのオファー部分はチェックボックスのみ、小林製薬は項目自体がありませんでした。

武田薬品のメルマガ選択場面ではどういったメールが届くのかまったく書かれていません。
これではユーザーも進んで配信を希望したいと思えないのではないでしょうか。配信内容が明確になれば安心して受信できますし、興味を引くこともできますね。

小林製薬はとくに項目を設けていませんでした。
もしメール配信があるのであれば、ユーザーがそれを選択できないことは高い確率で不満につながります。メール配信がある場合には必ず表示するようにしたいですね。

ng_bw 武田薬品 メルマガ配信

メール、郵便の内容が書かれていません。

メール、郵便の具体的内容が書かれていません。

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

武田薬品 小林製薬
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

入力支援機能には差が

武田薬品には住所自動入力機能とフォーカス中の項目に背景色を付ける機能、サブミットブロックといった入力支援機能が導入されていました。
入力数が多いフォームなので、さらにガイドの実装やリアルタイムアラートなどのほかの入力支援機能の導入でユーザーのストレスを軽減できるかもしれません。

小林製薬の入力支援機能は住所自動入力のみでしたが、Yahoo!IDでログインする機能が搭載されていました。

ok_blue 武田薬品 サブミットブロック

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

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

ok_blue 小林製薬 オープンIDログイン機能

Yahoo!アカウントがあると簡単にログインできる

Yahoo!アカウントがあると簡単にログインできる

どちらも整ったエラー画面

両社ともレイアウトが整った良いエラー画面です。
どちらも冒頭にメッセージを表示させ、各エラー箇所に注記を記載、背景色を変えるなど、とてもわかりやすくなっていますね。

とくに真似したいのは小林製薬のエラー画面。
エラーのあった項目のみ再表示しているため、フォーム内からエラー該当箇所を探すという行為をまったく行う必要がありません。

ok_blue 武田薬品 エラー画面

お手本に近いエラー画面です。

お手本に近いエラー画面です。

efo_double_ring 小林製薬 エラー画面

冒頭の大きなメッセージイメージが特徴的です。

冒頭の大きなメッセージイメージが特徴的です。「ご入力ありがとうございます」といった文言からは誠意を感じます。さらに、エラーのあった項目のみが表示されており親切

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

今回は製薬通販サービスの会員登録フォームについて分析を行いました。
いつもの通り、最後は勝手なアドバイスで締めくくりたいと思います。

武田薬品

フローの設置と入力支援機能の拡充を。

入力項目については数が多い印象を受けますので、ぜひ項目を見直しと精査を行なってください。

フロー設置もご検討ください。ユーザーにより安心感を与えることが出来ると思います。

また、ガイドやリアルタイムアラート、離脱ブロックといった他の入力支援機能を拡充することで、よりユーザーに優しい設計になると思います。

小林製薬

入力支援機能の充実でより親切なフォームに。

フロー設置、入力項目数、必須マーク、エラー表示といった基本的な入力項目への配慮からフォントサイズ、マージンなどのレイアウト調整、必須項目と通常項目との区域分けなどといった工夫はどれをとってもお手本といえます。

ただ現在、入力支援機能がほとんど導入されていません。今後ぜひともガイドや離脱ブロック、リアルタイムアラートといった支援機能を導入させていくと、さらに親切なフォームになると思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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