【入力成功サイン】で、ユーザーがどんどん入力したくなるフォームを作ろう

本日はフォーム入力に達成感を与えてくれるEFO機能のひとつ「入力成功サイン」のメリット・デメリットや、効果的な活用方法などについてご紹介したいと思います。

入力成功サインとは

入力成功サインとは、フォームの入力項目ひとつひとつに対して、入力形式などの誤りがない(=エラーのない)状態に入力できたタイミングで、その旨を知らせる機能です。

入力成功サインの表示例。

通常は「OK」「完了」「成功」などの意味を表すアイコン画像やテキストを、入力欄の右横や下位置などに表示することが多いようです。

※エフトラEFOの入力成功サインは、アイコン画像とテキストの2種類で表現することが可能です。

リアルタイムアラートがエラー時に現れるのに対し、入力成功サインは成功時に表示されますから、これらは丁度対の関係となっていますね。

リアルタイムアラートはエラー時に表示される

入力成功サインのメリット

エラーの有無をチェックするという役割においてはリアルタイムアラートと同じなのですが、入力成功サインはいわば「褒めて伸ばす」タイプ。
表現上も、エラーのように悪いところを指摘されているようなネガティブな印象を与えません。むしろ「成功」ですからポジティブです。

また冒頭でも述べましたが、ひとつひとつ成功サインが出てくることで、ユーザーにフォーム入力に対する達成感を感じてもらいやすいというメリットもありますね。

入力成功サインのデメリット

デメリットは特にないのですが、リアルタイムアラートの代わりに使う場合には注意が必要です。
単純な必須チェックを行うだけであれば問題ありませんが、入力成功サインそのものにエラーの具体的な内容をユーザーに伝える効果はありませんので、入力形式が複雑な項目などでは、なぜ入力成功しないのかユーザーが理解できずフラストレーションを溜めてしまう可能性も…。

リアルタイムアラートとセットで導入すると、このような事態を回避できるでしょう。

入力成功サインの優れた導入例

最後に、効果的な入力成功サインの導入例を2社、紹介したいと思います。

Twitter アカウント作成

まずご紹介するのはTwitterの新規登録フォームです。

Twitter入力成功サイン

入力欄の右横に各種メッセージが現れ、入力成功サインだけでなく、入力形式や注意点、エラー内容などが入力の段階に応じて切り替わって表示されます。
メッセージが具体的なのも良いですね。

Apple idの作成フォーム

次にご紹介するのはApple社の「Apple ID」登録フォームです。

Apple ID作成画面。

Apple ID作成画面。

こちらは複数存在する入力条件それぞれに対して入力成功サインを出し、エラーの場合はエラーが赤文字で表示されるようになっています。
条件が複雑な場合でも混乱すること無く、かつ達成感も感じられる入力欄となっていますね。

まとめ

いかがだったでしょうか。今回はEFOの入力支援機能のひとつ「入力成功サイン」のメリット・デメリットおよび優れた導入例を紹介しました。

ご担当のフォームにもぜひ、入力成功サインを取り入れてみてはいかがでしょうか。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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