勝手にEFO比較分析【ドミノ・ピザ x ピザーラ】(ピザ配達サービス 会員登録フォーム編)

パーティーやイベントで人気の料理のひとつ、ピザ。

年末に近づくにつれ、クリスマスや忘年会などのパーティー・イベントが増えてくる中、便利な宅配ピザを注文する方も多いのではないでしょうか。

今回はピザ配達サービスを行っている「ドミノ・ピザ」(http://www.dominos.jp/)(以下本記事では「ドミノ」)と「ピザーラ」(https://www.pizza-la.co.jp/)(以下本記事では「ピザーラ」)を比較分析していきます。

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

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

基本的な項目を確認していきます。

いつも通り、まずは基本項目の確認から。

ドミノ ピザーラ
ページ数 ご利用規約の確認、お客様情報の入力、メール受信確認、登録完了、ご注文方法の選択、お客様情報の入力、商品の選択、お支払い方法の選択、注文完了の9ページ 規約確認とメール送信、メール内URLからアクセス、住所選択、会員情報入力、会員情報確認、登録完了の6ページ
入力項目 10項目 15項目
必須項目入力欄の数 10項目 11項目
フロー あり あり
オファー あり あり
必須マーク あり(「必須」文字でわかりやすい) あり(「必須」文字でわかりやすい)
送信ボタンのサイズ 幅357px × 高さ46px 幅205px × 高さ33px
入力画面のレイアウト フォーム専用 他ページと共通

ドミノでは新規会員登録は名前とメールのみで済ませ、住所などの情報は注文する過程で登録が完了します。一方ピザーラではすべての情報を新規会員登録として扱っています。
(ドミノはお客様情報のフローまでを比較しています)

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

入力項目数

両社とも最低限必要な情報の入力のみにとどめ、ストレスを感じさせない項目数に収まっています。
また、どちらも住所入力をエリアから選択できる形式をとっており、わかりやすいです。

ok_blue ドミノ ページレイアウト

フォームの内容を分けることで各ページの入力項目がファーストビューに収まるようなつくりになっています。
ページ遷移は多くなりますが、1つ1つのボリュームが軽いということとフローのあるおかげでユーザーのモチベーションを下げることなく遷移させています。

ページを細かくまとめ、ユーザーに「長い」と思わせないような工夫をしているフォーム。

ページを細かくまとめ、ユーザーに「長い」と思わせないような工夫をしているフォーム。

soso_black ピザーラ ページレイアウト

必須項目数が全体にちらばっているのが難点です。必須項目はできるだけファーストビューにまとめられると親切ですね。

フォントサイズは少し小さめですが、マージンを程よくとっていて見やすいです。

フォントサイズは少し小さめですが、マージンを程よくとっていて見やすいです。

必須マークはともにあり

必須マークはそれぞれ「必須」文字を使用しています。
お手本はドミノの様に「必須」文字を使い、色背景を敷くなどして四角のマークにした状態です。
また、必須項目の入力欄背景色を変更するのもわかりやすくて良いでしょう。

ok_blue ドミノ 必須マーク

冒頭での説明はありませんが、必須文字と背景色の変更でお手本のような必須マークです。

冒頭での説明はありませんが、必須文字と背景色の変更でお手本のような必須マークです。

ok_blue ピザーラ 必須マーク

色背景を敷いたり、入力欄の背景色を変えることでよりわかりやすくなると思います。

色背景を敷いたり、入力欄の背景色を変えることでよりわかりやすくなると思います。

フローの有無

どちらもすべてのページでフローを設置しています。

ドミノは番号とページ名のみのシンプルなものを使用しています。
一方ピザーラはメールイラストなどを入れよりわかり易いデザインになっています。

ok_blue ドミノ フロー

シンプルでメインの入力項目を邪魔しないデザインとなっています。


05_2
シンプルでメインの入力項目を邪魔しないデザインとなっています。

efo_double_ring ピザーラ フロー

イラストなどを使いわかり易いデザインになっていますね。

イラストなどを使いわかり易いデザインになっていますね。

オファー文の表示の有無/h3>

どちらもオファーはあり。
ドミノの様に大きくスペースを使用してイラストなどをうまく使っていきたいですね。
スペースを取りたくない場合には、ピザーラのように文言を1行でシンプルにまとめましょう。

efo_double_ring ドミノ オファー

にぎやかな配色でイラストもわかりやすく、理想的なオファーです。

にぎやかな配色でイラストもわかりやすく、理想的なオファーです。

ok_blue ピザーラ オファー

少ない文字数でシンプルにまとめています。

少ない文字数でシンプルにまとめています。

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

ドミノ ピザーラ
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし

エラー時:あり

フォーカス時:なし

エラー時:なし

項目ごとに入力完了後の動作 必須項目背景がピンクから白に なし

入力支援機能はともにほぼ無し

ドミノでは、必須項目や項目フォーカス時の背景色変化、リアルタイムアラートが導入されていました。

ok_blue ドミノ リアルタイムアラート

ドミノのリアルタイムアラートは三角の「!」アイコンとともに、注意文言を項目の下に表示するものでした。

リアルタイムアラート。必須や入力形式をその場でチェックしてくれる

リアルタイムアラート。必須や入力形式をその場でチェックしてくれる

あと一歩なエラー画面

どちらもエラー画面は惜しい印象をうけました。

お手本は上部にメッセージを一言記載し、各エラー箇所に注記を載せ、入力欄の背景色を変更するか、色枠をつけた状態です。

soso_black ドミノ エラー画面

エラー箇所の注記のみになっています。冒頭にメッセージがあるとなお良いですね

エラー箇所の注記のみになっています。冒頭にメッセージがあるとなお良いですね

soso_black ピザーラ エラー画面

注記がすべて冒頭に表記されているのにエラー箇所には何もない状態です。
エラー箇所に各注記を表示し、冒頭にはメッセージのみを表示させると親切ですね。

エラー箇所に注記がないとわかりにくいです。

エラー箇所に注記がないとわかりにくいです。

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

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

ドミノ

フローの工夫と入力支援機能の拡充でより親切に。

入力項目に関しては各ページ、ファーストビューに収まっていて良いと思います。
しかしフローに関しては簡素すぎてもったいないです。

遷移が多くなればなるほどユーザーのモチベーションは下がってゆきます。それを補うのが親切なフローです。イラストなどを使ったわかりやすいフローを使用することでユーザーの不安を軽減させましょう。

ピザーラ

エラー画面の改善と入力支援機能の導入を。

フロー設置や入力項目数、必須マークなどといった基本的な入力項目への配慮はできています。あとは必須項目を出来る限りファーストビューに収めることとエラー画面の改善で一層親切なフォームになると思います。

また、今後はぜひ入力支援機能の導入をご検討ください。
ガイドやリアルタイムアラート、離脱ブロックなどの支援機能の導入で、コンバージョンさせやすいフォームを目指しましょう。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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