スマホ版!勝手にEFO比較分析【ホームズ x スーモ】(不動産ポータル 物件問い合わせ編)

やってきました「勝手にEFO比較分析」。

少しずつですが、好評をいただいていますこのシリーズ。
今回は、少し目線を変えてみたいと思います。

スマートフォンの普及が進み、スマホ用サイトを準備している企業が増えています。
これまで、PCサイトのエントリーフォームについていろいろとお話してきましたが、スマホ用サイトについても少しお話していきたいと思います。
このシリーズの第1回目勝手にエントリーフォーム分析【ホームズ x スーモ】(不動産ポータル 物件問い合わせ編)、で取り上げさせていただきました、株式会社ネクスト様「home’s」(http://www.homes.co.jp)(※以下本記事内では「ホームズ」)と、
株式会社リクルートホールディングス様「SUUMO」(http://suumo.jp)(※以下本記事内では「スーモ」)を題材に、iPhone5で見た、スマホ用サイトの比較をしていきたいと思います。
(iOS7.0、Safariにて検証)

以下、サイト名の敬称は省略させていただきます。

いつもどおり「勝手に分析」していきましょう。
今回も改善ポイントを「勝手に」指摘していきますので、どうぞお付き合いください。
○△×と、ユーザー視点での評価を行っていきます。

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

比較するのは、物件問い合わせフォームです。

入力ページへの導線に違いが!

両社の大きな違いは、この部分でした。
ホームズは、問い合わせの際に、希望物件の詳細ページの下に問い合わせフォームがついています。
入力中に、詳細を確認したい時など、スクロールで上に戻れば確認が出来ます。
スーモは、問い合わせページが別タブ表示でした。

以前の記事すぐ対策したい!スマートフォン向けフォームでありがちなストレスを生む5つの要因、にもありますが、別タブ表示は、多くのユーザーを迷子にさせてしまう要因です。
慣れている人には気になりませんが、迷子になり離脱してしまう人もいるかもと感じました。

ホームズ
スマホでのスクロールはそこまで負担に感じないので、この方法は良いと思います。
スーモ
別タブ表示ですよ、という案内があると良いかもしれませんね。

両社とも、物件詳細部分確認中でも、ページ下部に常に「問い合わせ」のボタンが表示されており、ユーザーのタイミングで問い合わせに進むことができるので、取り逃がしを減らせるだろうな、と感じました。

ホームズ
ボタンサイズも大きく、とにかく認識しやすかったです。
スーモ
「問い合わせ」以外にも、ユーザーが必要とするボタンが常に表示されていて親切です。

適切な文字サイズを!

ホームズは、シンプルなレイアウト・大きな入力枠・文字サイズも枠に合った適切なサイズで認識しやすかったです。
スーモは、空白を多くとったレイアウトになっているので、ホームズと比べると入力枠が小さめでした。
また入力文字も小さいので、ストレスを感じてしまうユーザーもいるかもしれません。
色使いやシンプルなレイアウトはわかりやすくて良いと思うので、文字サイズにまでこだわると、より良いフォームになると思います。

ホームズ
項目名をもう少し小さくし、項目枠を広げても良いかもしれませんね。
スーモ
スマホでは、空間をあけるより、文字を大きくした方が見やすいかもしれません。

わかりやすいエラー表記を!

ホームズは、エラーの表示方法が上部にまとめて表示されるタイプでした。
項目数が少ないのでこれでも認識できますが、修正の度に上まで戻り、どの部分が修正かを確認しないといけないので、少し不便かもしれません。

スーモは、項目ごとにエラー内容が表示されるので、どこを修正するのかが一目でわかりました。
両社とも、入力中に適切な入力方法を知らせるアラート表記があると、エラーを減らせると思います。

ホームズ
エラー表示の文字も大きめで認識しやすいですね。
スーモ
全体的にフォームの文字が小さいので、大きくすることでさらに見やすくなると思います。

送信ボタンにこだわる!

確認画面内の送信ボタンにも違いがありました。
ホームズは、「送信」と「修正」のサイズと色を変えて認識しやすくしていました。
また、ページトップに、「まだ完了していません」との表記を出し、この部分での離脱防止につなげているのが良いと思います。

スーモは、「送信」と「訂正」を上下に配置し、また色も変えることでわかりやすくなっています。
ボタン内の文字サイズも変えて、送信を促しているので離脱防止につながると思います。

ホームズ
ユーザーにわかりやすい確認画面ですね。
スーモ
まだ完了していない、という案内があると離脱防止に役立つと思います。

入力モードの最適化!

入力形式にあった入力モードに設定することは、ユーザーの手間を減らすことができるので、ぜひ取り入れたいところです。
電話番号入力は最適なものになっていましたが、個人的には、メールアドレス入力もアルファベット表記のタイプになると入力しやすいのにな、と感じました。

左が現状のホームズのモード。右は希望のモード。このモードになっていれば、即入力可能ですよね。

勝手にフォーム改善アドバイス

今回の比較分析は、以上となります。
かなり限られた状況での比較分析になっていますので、他のOSやブラウザではまた違った結果かもしれませんが、
上記をもとに、勝手にアドバイス、とさせていただきます。

ホームズ

PCフォームともに、とてもこだわって作られていることがわかります。
PCフォーム同様、必須項目枠に色を付け、入力が完了したものから色が消える、というものにすると、どの項目を入力するのかが一目でわかり、よりユーザーにやさしいフォームになるのでは、と思いました。

スーモ

上記の分析内でも記載しましたが、全体的に文字サイズを変更することで、よりわかりやすいフォームになると思います。
全てを大きくする必要はないですが、ユーザーの入力文字などは、認識し難いことが離脱につながる要因になりかねません。
完了率を上げるためにも、文字サイズにこだわってみてほしいです。

まとめ

両社とも、PCフォーム・スマホフォームどちらもこだわりをもって作られていることがわかりました。
より細かい部分に目を向けて、ユーザーにやさしいフォーム作りが出来ると良いですね。

スマホサイトに関しては、まだまだ改善の余地あり、という企業の皆様も多いと思います。
すぐ対策したい!スマートフォン向けフォームでありがちなストレスを生む5つの要因
必ず押さえておきたい!iPhone、Androidのフォーム標準UIまとめ
なども合わせてお読みいただき、何かの役に立てていただければ、と思います。

このシリーズでも不定期で、スマホフォームの比較を取り入れていきたいと思っています。
お楽しみに!

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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