勝手にEFO比較分析【アート引越センター xサカイ引越センター】(引越サービス お見積りフォーム編)

季節は春。
冬寒さを乗り切った花々や草木が芽吹き、清々しい気分になりますね。
恒例のお花見にも力が入るのではないでしょうか。

社会人ともなるとお花見のイメージが強い季節ですが、卒業や入学、就職と新生活が始まるシーズンでもあります。

新生活を始めるにあたり、引越しが必要になる方も少なくありません。

今回は引越しサービスのお見積もりフォームを比較分析。
「アートコーポレーション株式会社」(http://www.the0123.com/)(以下本記事では「アート」)と「株式会社サカイ引越センター」(http://www.hikkoshi-sakai.co.jp/)(以下本記事では「サカイ」)の2サイトです。

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

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

いつも通り基本的項目の確認から

まず基本項目の確認からしていきます。

アート サカイ
ページ数 お客様情報のご入力、入力内容のご確認、お申し込み完了の3ページ お客様情報入力、登録内容確認、受付完了の3ページ
入力項目 12種 14種
必須項目入力欄の数 16項目 22項目
フロー あり なし
オファー なし なし
必須マーク あり(「必須」文字表示) あり(「必須」文字表示)
送信ボタンのサイズ 幅223px × 高さ53px 幅190px × 高さ41px
入力画面のレイアウト 専用フォーム 他ページと共通

入力項目種類はどちらともほぼ同じです。
また継続的にサービスを利用していく形態の業種ではないため、どちらもオプトイン項目はありませんでした。

文字間や入力欄の大きさ、余白の取り方などに大きく違いが出ています。

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

コンパクトさを取るか、見やすさを取るか

アートは専用レイアウトを用いて情報をぎゅっと収めています。
しかし、行間が少し詰まり過ぎていて圧迫感がありますね。
もう少し余白に余裕があるといいですね。

一方サカイでは他ページと共通のヘッダーを使用。
フォントと入力欄のサイズやマージンを大きく取り、一つ一つの項目を見やすくしています。

ok_blue アート ページレイアウト

ほとんどの項目が必須となっており、総項目数も少なくなっています。

また、項目を整理し小見出しをつけてあげることで「今どういった内容を入力しているのか」が分かりやすくなっています。

専用フォームを用い、配色をロゴに合わせた統一感のあるフォーム。

専用フォームを用い、配色をロゴに合わせた統一感のあるフォーム。

ok_blue サカイ ページレイアウト

フォントと余白を大きくとることで、読みやすさに重点を置いています。

本来フォームはできるだけファーストビューに収めるのがお手本です。

しかし、ファーストビューに収めることだけが必ずしも正解ではない、という良い例が今回のケースです。
ページ自体は4スクロール程度で縦に長くはありますが、見やすいくて使いやすいということに重きを置くことで、より幅広い世代に心地よく使われるような配慮があります。

いっぽうで、グローバルナビゲーションやサイドバーなどサイト共通のテンプレートのままとなっているので、余計なリンクをなくして専用のレイアウトにできるとさらにすっきりすると思います。

視認性、可読性を重視した見やすいフォーム。

視認性、可読性を重視した見やすいフォーム。

フォームタイトルの見やすさ

フォームタイトルの分かりやすさは、ユーザーの安心感につながる要素です。

フォントサイズや装飾で他項目見出しとの緩急を付け「自分が今何のフォームに入力しているのか」を明確にしてあげましょう。

ok_blue アート フォームタイトル

アートはかなり大きめのフォントでタイトルを表記し、ロゴカラーの帯を使ったシンプルなフォームタイトルを使っています。

シンプルですが大きくて分かりやすいです。

シンプルですが大きくて分かりやすいです。

ok_blue サカイ フォームタイトル

一方サカイは、アイコンなどの装飾を使いメリハリのある分かりやすいフォームタイトルになっています。

文字サイズも大きく、メリハリがあって見やすいです。

文字サイズも大きく、メリハリがあって見やすいです。

必須マークは両社ともあり

必須マークは両社ともありましたが、必須文字のみだけだったので、もったいないです。

「必須」文字を使い、色背景を敷くなどして四角にしたマークを先頭につけ、冒頭メッセージで必須マークに関する注記のある状態がベストです。

少しの工夫で見やすさは大きく変わります。

soso_black アート 必須マーク

アートでは(必須)という表示。
テキスト色を赤くしていますが少々印象が薄いので、背景を敷いたアイコンマークの形式にするとより良いでしょう。

文字のみなので印象が薄いです。

文字のみなので印象が薄いです。

soso_black サカイ 必須マーク

サカイでも同じく(必須)という表示。
こちらも文字だけでは印象が薄いので、お手本の様なマーク形式にしましょう。

文字のみなので印象が薄いです。

文字のみなので印象が薄いです。

フローの有無で差が

アートではイラストをあしらった大きめのフローを設置。
色分けもはっきりしていて、自分が今どのページにいるのか分かりやすいです。

一方、サカイではフローを設置していませんでした。

ユーザーが「この後どういう展開になるのだろう?」と疑問をもつ前に先に解決するのがフローの設置です。

フローに限った話ではありませんが、ユーザーが疑問を持ちそうなことは、すべて先にクリアにしてあげましょう。

efo_double_ring アート フロー

イラストを使って安心感を出しています。

イラストを使って安心感を出しています。

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

機能名 アート サカイ
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし

エラー時:なし

フォーカス時:なし

エラー時:なし

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

どちらも実装が無かった入力支援機能

どちらも住所自動入力以外に目立った入力支援機能は実装していませんでした。
入力支援機能はユーザーのモチベーションの向上や安心感につながる機能も多く、利便性も確実に上げてくれます。

ぜひ今すぐにでも入力支援機能の導入をご検討いただきたいですね。

エラー画面

両社とも少しずつ惜しいエラー表示となりました。

アートは冒頭にメッセージを表記していません。
冒頭になにも無いとエラーがあったのかすら、わからない時があるかもしれません。

サカイは冒頭で、すべてのエラー表記を一覧にしています。
エラー文言がズラーっと並んでいる姿は正直格好が悪く、これもまたあと一歩です。

上部には一言でメッセージを表記し、エラー箇所に分かりやすい注記を、さらに背景色を変えるなどするとエラー画面でも見やすいレイアウトを保つことができます。

soso_black アート エラー画面

少し残念なエラー表示。

少し残念なエラー表示。

soso_black サカイ エラー画面

冒頭のエラー表示箇条書きが圧迫感を出してしまいます。

冒頭のエラー表示箇条書きが圧迫感を出してしまいます。

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

今回は引越しサービスのお見積りフォームについて分析を行いました。
最後はいつも通りですが、勝手なアドバイスで締めくくりたいと思います。

アート

行間の調整と入力支援機能の導入でより使いやすいフォームへ

今のままでは若干の圧迫感があります。
行間の調整を行って、文字を読みやすくしてあげましょう。

また、入力支援機能の導入をお奨めします。
機能の導入でより親切で利便性の高い設計になると思います。

サカイ

フロー設置と入力支援機能の導入をお奨めします

フローの設置をすることはユーザーの安心感に必ずつながっていきますので、ぜひとも設置をお奨めします。

また、親切なフォームを考えていく上で入力支援機能は必要不可欠です。
入力支援機能を導入していくことでよりユーザーに優しいフォームになると思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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