勝手にEFO比較分析【モスバーガー x マクドナルド】(会員登録フォーム編)

ハンバーガーをメインに展開する様々なファストフード店。誰もが一度は利用したことがあるのではないでしょうか。
今ではインターネット上で簡単に注文でき、配達サービスまであるのですから驚きです。

今回は日本発祥のハンバーガーチェーン「モスバーガー」(http://mos.jp/)(以下本記事では「モス」)と世界的に展開するファーストフードチェーンであり、日本のハンバーガーブームの火付け役となった「マクドナルド」(http://www.mcdonalds.co.jp/)(以下本記事では「マクドナルド」)の注文フォームを比較分析していきます。

フォームは子供から大人まで、幅広い年齢層のユーザーが利用すると予測されます、どのような工夫が散りばめられているのか楽しみですね。

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

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

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

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

モス マクドナルド
ページ数 メール送信、メールのURLアクセス、住所検索、会員情報登録、会員情報確認、会員情報登録完了の6ページ 住所登録、会員情報登録の2ページ
入力項目 14種 17種
必須項目入力欄の数 10項目 12項目
フロー あり なし
オファー あり(別ページ) あり
必須マーク あり(「必須」マーク表示) あり(「*」文字表示)
送信ボタンのサイズ 幅250px × 高さ42px 幅154px × 高さ54px
入力画面のレイアウト 他ページと共通 他ページと共通

入力種類、必須項目ではどちらもかなり厳選しています。

また、どちらも配色にこだわっており、サイト全体の雰囲気を保っています。
行間や入力欄の大きさ、マージンの取り方にも工夫があり、両社とも幅広い年齢層の利用を想定しているのだと伝わってきます。

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

 

ページレイアウト

どちらも他ページと共通のナビゲーション付きレイアウトを採用しています。
全体的にパーツが大きく視認性が高いのが印象的でした。

ok_blue モス ページレイアウト

全体的な配色をブランドカラーで統一し、ポイントカラーがうまく機能しています。
入力欄は基本表形式を採用し、ラベルは配色と階層を変えることで、関連付けがわかりやすいです。

配色の工夫で視認性の高いフォームになっています。

配色の工夫で視認性の高いフォームになっています。

ok_blue マクドナルド ページレイアウト

一方こちらは表形式は用いず、ラベルと入力項目をセットにし設置しています。
紐づきが分かりやすいだけでなく、全体がすっきりとした印象になりますね。

また、ページの背景色を薄いグレーにすることで目に刺激の少ない設計になっています。

細やかな配慮のある設計。

細やかな配慮のある設計。

ページ遷移で差を付けたマクドナルド

スタートから登録完了までが6工程のモスに対し、マクドナルドではわずか2工程と少ないページ数で登録が完了します。

遷移数を多くするメリットとしては1ページずつがコンパクトに収まり、見栄えが良いことと、「入力が進んでいる感」がユーザーに伝わることです。
しかし、その一方でメールを参照させたり、ページが細かく遷移するとユーザーのモチベーションを下げ、離脱につながる可能性がある、というデメリットも存在します。

マクドナルドでは入力工程を2つに分割し、メール登録画面、受信メールからの遷移、登録内容確認画面を省くことで、よりスピーディな登録を可能にしています。
少数の入力項目をテンポよく入力をさせることで、離脱率が下がるような設計になっているのがわかります。

soso_black モス ページ遷移数

メール登録画面やメールからの遷移を入れると完了まで少し長い印象を受けます。

efo_double_ring マクドナルド ページ遷移数

住所登録とユーザー情報の登録、わずか2ページに収めているのは素晴らしいです。

 

デザインの違いがでた必須マーク

マクドナルドの必須マークは少し残念でした。

efo_double_ring モス 必須マーク

ポイントカラーと白抜きの「必須」文字を使ってマーキングできています。
ページ冒頭に必須マークの説明があれば尚よかったと思います。

お手本のようなマーキングです。

お手本のようなマーキングです。

ng_bw マクドナルド 必須マーク

一方こちらの必須マークはグレーの配色で「*」文字を用いています。
かなり地味な印象を受けるので、ポイントカラーを使用してしっかりとマーキングすることが必要です。

冒頭の説明も薄いグレーで印象が薄いです。

冒頭の説明も薄いグレーで印象が薄いです。

 

フローやオファー表示

モスはフローを設置。
マクドナルドは2ページ構成だからなのか、フローはありませんでした。

入力、確認、完了といったシンプルな作りになっている場合フローを設置しないケースも少なくありません。
しかし、フローの設置は必ずユーザーの安心感につながりますので設置をお奨めします。

ok_blue モス フロー

シンプル且つ目を引くデザイン。

シンプル且つ目を引くデザイン。

次に注目したいのはオファー表示です。

登録をするとどういった特典が手に入るのか、商品注文まで登録後はどのような流れになるのか、などといった情報登録による付加価値や関連情報を説明するのが、オファー表示の役割です。

efo_double_ring モス オファー表示

モスではオファー表示を別ページでかなり詳しく説明しています。
様々なイラストを使い、配色も豊かでとても分かりやすいですね。

イラストなどで理解がしやすい。

イラストなどで理解がしやすい。

ok_blue マクドナルド オファー表示

マクドナルドではサイドエリアを使い、登録後のサービスを大まかに説明しています。

分かりやすくはありますが、簡素すぎて地味です。

分かりやすくはありますが、簡素すぎて地味です。

 

どちらもわかりやすかったエラー画面

どちらも冒頭にメッセージを載せ、エラー箇所にも分かりやすい配色で注記していました。

ok_blue モス エラー画面

モスでは冒頭にメッセージとリンク付きの注記をリスト上にまとめています。
アイコン付きの注記はとてもわかりやすいと思いました。

しかし、リンク付きの冒頭注記はとても便利ですが、赤い文字がリスト上に並ぶと圧迫感がでてユーザーのストレスになる恐れがあります。

リンク付きのリスト一覧は便利さと圧迫感があり判断が難しいところ。

リンク付きのリスト一覧は便利さと圧迫感があり判断が難しいところ。

efo_double_ring マクドナルド エラー画面

対してマクドナルドではお手本のようなエラー表示を用意しています。

冒頭で一言メッセージを表記、エラー各所に注記というお手本を見せてくれました。

冒頭で一言メッセージを表記、エラー各所に注記というお手本を見せてくれました。

 

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

機能名 モス マクドナルド
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし

エラー時:なし

フォーカス時:なし

エラー時:あり

項目ごとに入力完了後の動作 なし なし

 

入力支援機能の有無

入力支援機能はマクドナルドのリアルタイムアラート機能のみとなりました。

入力支援機能はユーザーのストレス減少と、利便性の向上につながります。
ぜひ導入をご検討していただきたいです。

 

リアルタイムアラートの有無

今回はマクドナルドのみの実装となっています。

ok_blue マクドナルド リアルタイムアラート

フォーカス、入力中の表示はないものの、エラーが確定するとアラートが出るような設計になっています。

フォーカス中にもリアルタイムで指示がでるとより親切ですね。

フォーカス中にもリアルタイムで指示がでるとより親切ですね。

 

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

今回はハンバーガーチェーン2サイトの会員登録フォームについて分析を行いました。
いつも通り、最後は勝手なアドバイスで締めくくります。

モス

ページ数の削減と、入力支援機能の導入でよりスムーズに

ページ全体を通してやはり気になったのはその遷移の長さです。
メールを仮登録してからの本登録という流れでは手間が多いですし、離脱率も高まります。
長くなっても3~5ページ程にとどめ、ユーザーのストレスを減らしていきましょう。

また、入力支援機能を導入することでより使いやすいフォームになっていくと思います。

マクドナルド

必須マークのデザイン変更と入力支援機能の拡充が必要

必須マークの印象の薄さが気になりました。
他の要素が高いレベルで仕上がっているぶん、非常にもったいないと思います。
きちんとマーキングして、ユーザーの視線を誘導してあげましょう。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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