勝手にEFO比較分析【cookpad x nanapi】(レシピ投稿サイト 会員登録フォーム編)

さわやかな5月の陽気に包まれる今日このごろ、春から新生活を始めた皆様はそろそろ落ち着いてきた頃でしょうか。
こんな時には、ちょっとした生活の知恵やアイデアなどをインターネット上で収集し取り入れてみると、さらに生活を豊かにしてくれそうですね。

本日「勝手に比較」で取り上げるのは、ユーザーは料理のレシピを投稿・閲覧できる「cookpad(http://cookpad.com/)」、料理に限らず生活全般の便利な「ライフレシピ」を投稿・閲覧できる「nanapi(https://nanapi.jp/)」の2サイト(ともに新規会員登録フォーム)です。

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

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

基本的項目の確認

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

cookpad nanapi
ページ数 入力、確認、メール認証を経て完了の3ページ 入力、確認、完了の3ページ
入力項目 7種 7種
必須項目入力欄の数 6項目 6項目
フロー なし あり
オファー なし あり
必須マーク なし なし
送信ボタンのサイズ 幅244px × 高さ52px 幅228px × 高さ43px
入力画面のレイアウト フォーム専用(ヘッダーやフッターは共通) フォーム専用(ヘッダーやフッターは共通)

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

レイアウトはどちらも◎

両社とも他のページにはあるナビゲーション類(サイドバー)ははずしており、フォーム入力に集中できるような作りとなっています。
ただしヘッダーやフッターなどは元々シンプルな作りということもあり共通のままです。できればここにも手を加えてシンプルにできるとさらによいでしょう。

ok_blue cookpad レイアウト

フォームではページ共通のサイドバーがなくなっている。フッター部分のリンクが多いのが少し気になる。

フォームではページ共通のサイドバーがなくなっている。フッター部分のリンクが多いのが少し気になる。

ok_blue nanapi レイアウト

nanapiはもともとのヘッダーとフッターがシンプルなため、フォームページもスッキリ

nanapiはもともとのヘッダーとフッターがシンプルなため、フォームページもスッキリおさめている

デザインで差をつけたのはnanapi!?

フロー、オファーのないcookpadに対し、nanapiはどちらもしっかりと設けています。
入力、確認、完了のシンプルな作りであったとしても、やはりフローがあると安心ですね。

efo_double_ring nanapi フロー

シンプルかつわかりやすいフロー

シンプルかつわかりやすいフロー

また参考になるのはオファーをフォームの横側に配置している点、この形なら、ファーストビュー領域を侵食することもありませんね。

efo_double_ring nanapi オファー

フォームの右側に、テキストとイラストで構成されたオファーを配置。 非常に効率的なレイアウトです。

フォームの右側に、テキストとイラストで構成されたオファーを配置。
非常に効率的なレイアウトです。

cookpadには安心感を醸成する工夫が

いっぽうでcookpadのフォームには、ユーザーを安心させるための工夫がいくつかありました。

まずはセキュリティに関する表示
SSLのバッジ表示や個人情報に関する言及があると、それだけでユーザーの安心につながります。

efo_double_ring cookpad セキュリティバッジ

フォーム下部に配置されたSSLのセキュリティバッジ

フォーム下部に配置されたSSLのセキュリティバッジ

また、入力項目に関する補足文でも、ユーザーの不安を解消しています。

何のために取得する情報なのかを記載することで、情報の用途を明確にしたり、
facebookログイン機能の下には、それを利用することでどうなるかが補足されています。

efo_double_ring cookpad 用途を示す文言

「ログインに使用する情報」「ご本人様確認のために使用する情報」など、取得する情報の用途が明確に記されている。

「ログインに使用する情報」「ご本人様確認のために使用する情報」など、取得する情報の用途が明確に記されている。

efo_double_ring cookpad facebookログイン

補足分の存在により入力作業の省略のためにfacebookのログイン機能を使うということがわかる

補足分の存在により入力作業の省略のためにfacebookのログイン機能を使うということがわかる

facebookログインは便利ですが、唐突にボタンがあることで「押下すると勝手に投稿されるのではないか?」などの邪推を産んでしまいます。
このように用途が文章で補足されているとユーザーは安心して機能を利用できますね。

いずれも、必須マークなし

今回どちらのフォームも、メルマガ選択以外のすべての項目を必須とし、とくに必須に関する表示を行っていません。
比較的フォーム全体の項目が少ないこととで、マークを表示させなくても良いような気もしてしまうのですが、やはりどこにどれだけ入力しなくてはならないかを俯瞰させる必須マークの存在は重要です。

soso_black cookpad 必須マーク

必須マークなし。

必須マークなし。

soso_black nanapi 必須マーク

nanapiも必須マークなし。

nanapiも必須マークなし。

「戻る」ボタンに差あり

どちらのフォームも、クリックしやすい充分な大きさをもち、色も目立ち、文言も具体的な理想的なボタンデザインでした。
しかし、確認画面の「戻るボタン」で明暗が。cookpadはテキストリンク風に、進むボタンと差別化する形で控えめな「戻る」リンクを用意していたのに対し、nanapiでは戻るボタンそのものが用意されていませんでした。
もし訂正が必要な場合はブラウザの戻る機能を利用する必要があります。この場合入力内容が保持されるのかは懸念です。

efo_double_ring cookpad ボタン

控えめな見た目の戻るボタンを実装。

控えめな見た目の戻るボタンを実装。押し間違えることはほぼなさそうです。

soso_black nanapi ボタン

nanapiには戻るためのリンクが見当たらず。

nanapiには戻るためのリンクが見当たらず。


firefoxで試した限りでは、パスワードのみ保持されず再入力する必要があった

firefoxで試した限りでは、パスワードのみ保持されず再入力する必要があった

次に、入力支援機能を見ていきます

機能名 cookpad nanapi
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

デフォルトの選択肢は論点

いずれのフォームも、生年月日と性別にあらかじめ初期値が選択されています。
適切な初期値の設定を行うことは、ユーザーの入力の手間を軽減してくれるのですが、
この場合、まったく入力をしなくてもバリデートを通過し送信完了できてしまうため、誤った情報が登録されてしまうことになります。ここでの初期値の設定はできるだけ避けたいところです。

soso_black cookpad 初期値

あらかじめ生年月日の日付けと性別が選択されている。 cookpadの場合女性ユーザーが多そうですので、性別については良いかもしれません。

あらかじめ生年月日の日付けと性別が選択されている。
cookpadの場合女性ユーザーが多そうですので、性別については良いかもしれません。

soso_black nanapi 初期値

nanapiも同様に初期値が設けられていました。

nanapiも同様に初期値が設けられていました。

エラーではcookpadに軍配が

cookpadはリアルタイムアラートを用意しているほか、エラー時もその内容が該当箇所に見やすく表示されます。

efo_double_ring cookpad エラー

エラーは該当箇所を赤い枠線で囲み、エラー内容をその上に表示する。どこをどう直せばよいかが明確。

エラーは該当箇所を赤い枠線で囲み、エラー内容をその上に表示する。どこをどう直せばよいかが明確。

リアルタイムアラートもあり、入力形式を満たさない場合はアラートしてくれます

リアルタイムアラートもあり、入力形式を満たさない場合はその場でアラートしてくれます

いっぽうnanapiはリアルタイムアラートを使っていないほか、エラー時には内容が冒頭にまとめて表示されるため少し不便に感じました。
さらに、表示されるエラーの内容と実際の項目の並びがずれているために、照合するのが大変です。

soso_black nanapi エラー

エラーはまとめてフォーム上部に表示される。 項目との順番も揃っていない

エラーはまとめてフォーム上部に表示される。
項目との順番も揃っていない

また、バリデート機能で表示されるメッセージに齟齬があったり、文言が平易でない場合があるようです。エラーの内容が正しくないと、ユーザーが戸惑ってしまう可能性があります。
さらに、エラー時に入力内容がすべて消えてしまう現象も確認しています。これらはユーザビリティを著しく低下させてしまう可能性があります。

ng_bw nanapi エラー

メールアドレス欄が空欄の場合にも「すでに登録されている」というエラーが出てしまっている。 また、「Password confirmation」などの文言が使われている

メールアドレス欄が空欄の場合にも「すでに登録されている」というエラーが出てしまっている。
また、「Password confirmation」などの文言が使われている

パスワードの文字数が足りなずにエラーとなるも、他の入力内容までクリアされた

パスワードの文字数が足りなずにエラーとなるも、他の入力内容までクリアされた

いずれもソーシャルログイン機能を装備

cookpadはfacebbok、nanapiにはtwitter、facebook、Google+と3種類のソーシャルログインを準備していました。

ok_blue cookpad ソーシャルログイン

補足分の存在により入力作業の省略のためにfacebookのログイン機能を使うということがわかる

facebookのログイン機能

ok_blue nanapi ソーシャルログイン

ソーシャルログインを3種類用意している

ソーシャルログインを3種類用意している

cookpadは入力成功サインも搭載

また、cookpadではリアルタイムアラートとあわせて入力成功サインも導入されていました。
ユーザーが入力に達成感を感じることができますね。

ok_blue cookpad 入力成功サイン

入力が問題なく完了すると右横にチェックマークを表示する

入力が問題なく完了すると右横にチェックマークを表示する

最後に、勝手にアドバイス

今回はレシピ投稿サイト2社の会員登録フォームについて比較分析を行いました。
それではいつも通り、最後に勝手なアドバイスをして締めくくりたいと思います。

cookpad

全体としてユーザビリティへの配慮があり、かなり使いやすいフォームだと感じました。
「ログイン情報を忘れた場合にご本人様確認のために使用する情報」として生年月日の初期値があるのは少し危険な気がしました。ここにはデフォルト値を用意しない方向で検討されると良いかもしれません。
また、フローやオファーなどのコンテンツがあると、フォームがより華やかになるでしょう。とくに、魅力的なメルマガが3種類もありますので、それぞれアイコンを入れるなどで目立たせても良いかもしれません。

nanapi

エラーのバリデートは早急に対処したいところです。
ユーザビリティの観点では性別、生年月日のデフォルト値は解除することをおすすめします。
また、いきなりニックネームの入力を求められるとユーザーは迷ってしまうかもしれません。入力例や用途を表示する、またはフォームの一番最初の項目は入力のハードルの低いものに変えてみるのも手ですね。
戻るボタンはぜひ設置してください。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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