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

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

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

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

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

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

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

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

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

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

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

 

ページレイアウト

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

モス ページレイアウト

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

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

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

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

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

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

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

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

モス ページ遷移数

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

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

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

 

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

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

モス 必須マーク

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

マクドナルド 必須マーク

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

 

フローやオファー表示

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

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

モス フロー

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

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

モス オファー表示

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

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

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

 

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

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

モス エラー画面

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

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

マクドナルド エラー画面

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

 

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

機能名	モス	マクドナルド
ガイド 未入力の残り必須項目数などをリアルタイムで表示する機能	なし	なし
離脱ブロック ページを閉じようとするとアラートを出してOKしないと閉じることができない機能	なし	なし
サブミットブロック 送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能	なし	なし
項目ごとのアラート表示 入力についての説明をリアルタイム表示する機能	フォーカス時：なし エラー時：なし	フォーカス時：なし エラー時：あり
項目ごとに入力完了後の動作	なし	なし

 

入力支援機能の有無

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

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

 

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

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

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

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

 

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

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

モス

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

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

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

マクドナルド

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

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