パーツ別・勝手にEFO比較分析【フロー表示】を集めてみました編

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

今回は少し視点を変え、入力フォームのパーツに注目してみることにしました。

ユーザーがフォーム入力中イライラする原因の一つが、
「入力完了したつもりが次の画面がある」というもの。
このイライラを解消するために有効なEFO施策のひとつが、「フロー表示」です。

フロー表示があることで、ユーザーはフォームの全体像と現在位置を一度に認識することが出来ます。
今回は、様々なフォームのフロー表示を集め、EFOの観点から「勝手に」分析してみました。

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

※フロー表示に関してはフォームデザインとのバランスが重要になります。
今回は、フォーム全体のバランス、筆者の個人的主観が評価の基準になっていますので、ご了承下さい。

選んだフォーム

(順不同、敬称略)

では、さっそく見ていきましょう。


デザイナーさんのこだわりを感じます。

文字だけでフロー表示をするフォームが大多数ですが、具体的なイラストが入っており、とてもわかりやすかったです。

フォーム全体を見ても、フロー表示の存在感が大きく、入力の流れはわかりやすかったです。
ただ、今いる場所との区別がないので、現在位置は色を変える、などの差別化があっても良いな、と思いました。

とても控えめなフロー表示ですね。


現在位置を示すオレンジのドットは目立っていて良いと思います。

ユーザーの現在位置はわかりやすいですが、全体的に文字も小さくフロー表示としての認識は難しいな、と感じました。

フォーム自体はシンプルな作りで良いと思います。
ただ、フロー表示位置が入力欄と離れているのが気になりました。入力欄に近い位置にある方が、ユーザーとしては認識しやすく、フロー表示の役割が際立つと思います。

多くのフォームで見かけるタイプのフロー表示だと思います。


シンプルイズベスト!

現在位置に強い色を用いて視認性を上げています。
また、進んでいく向きを示すデザインになっており、シンプルですが、とてもわかりやすいフロー表示だと思います。

フォーム自体に色が少ないのと、フォーム内でのフロー表示の占める割合が大きいので、正確にフォームの全体像とユーザーの現在位置を指し示せていると思います。

完了までに、何段階の工程があるのかが一目でわかるフロー表示でした。


パッと見が大切です!

ユーザー目線で考えると、フロー表示自体をじっくりと眺める、というよりは、入力前や入力中に、瞬時に確認するこが多いと思います。なので、一目で認識出来る、ということはとても大切なことですね。

フロー表示、ボタン、必須表示など、色分けがされており、それぞれを際立たせていました。
フロー表示をページの上下に配置させるなど、強くアピールしているので、かなりユーザーに配慮したフォーム作りになっているな、と感じました。

各段階の内容が細かく表記されていて親切だな、と感じました。


文字が小さいですね。。。

ただ、上記でもお伝えしましたが、読ませるフロー表示より認識させるフロー表示であることが必要だと思います。

フォーム全体も細かくデザインされ凝った作りになっています。
そのため、全体的に情報量が多く、ユーザーがプレッシャーを感じるのでは、と思いました。
フロー表示は、その心理的ストレスを少しでも軽減させるためのサポート機能だと思うので、この場合の表示はシンプルである方がユーザーに優しいのでは、と思います。

とてもシンプルなフロー表示ですね。


フォントも繊細です。

フォーム自体もシンプルなので、統一感があって良いと思います。
特に枠などを設けず、ナンバリングと文字だけですが、フォームにマッチしているので、わかりやすかったです。

空間を十分にとり、ゆったりとしたフォームレイアウトなので、このフロー表示が活きていると思います。
ユーザーのため、と思ってアピールを強めることも大切ですが、フォームデザインに合っていないと違和感の対象にもなってしまいます。フォームの違和感は入力の違和感にもつながってしまうので、気を付けたいところです。

まとめ

いかがだったでしょうか。
フロー表示一つとっても、サイトによってかなりの違いが見られました。
デザインの要素が強いので、正解はありませんが、参考になるものは多いのではと思います。

個人的には、
こだわりアイコンタイプ!(キリングループ web会員サービス登録フォーム)
のフロー表示が気に入っています。
そもそもフロー表示自体を導入していないフォームも多いので、かなり凝ったデザインはユーザーの目を引くことでしょう。

今後も不定期で、「~集めてみました編」をご紹介していこうと思います。
どうぞお付き合いください!

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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