EFOで大切な<入力例>の存在と、<プレースホルダー>活用のススメ【前編】

EFOに取り組む際、以外と大切なのが項目の入力例
今日、明日と2回にわたって、そんな入力例(入力サンプル、例示、example)に関するエントリーをお届けしていきたいと思います。

入力例があるとないとでは大違い

今回サンプルとするのは免許合宿のポータルサイト「免許番長」の資料請求フォーム。
百聞は一件に如かず、ということで、さっそく下記の2種類のフォームサンプルをご覧いただきたいと思います。

1枚目はこちら。
サンプルフォーム改善前

続いて2枚目。
サンプルフォーム

いかがでしょうか?
もうおわかりだと思いますが、1枚目には項目の入力例がありません。

直感的に、2枚目のほうが入力を開始しやすいと感じた方が多いのではないでしょうか。

このように、入力例がある場合とない場合でぱっと見の印象だけでもだいぶ変わってきます

ラベルや注意書きだけで伝えるのには限界が

さらにもっと細かくみていきましょう。

ラベルや注意書きであれこれ言うよりも「百聞は一見にしかず」

このフォームサンプルでは、フリガナは全角カナで、さらに郵便番号と電話番号は半角数字と半角ハイフンで入力しなければならないという制約があります。

(※当然、このような制約を設けないことや、半角・全角自動変換機能のような機能で対応してしまうことが理想ですが、簡単には改善できないと仮定して紹介しています。)

この制約をただ文言で表示しておくと、
入力形式の制約を文言で説明
もちろんこの形でもわかりにくいことはないのですが、わざわざユーザーは細かい注意書き文字を読まなければなりません。

ここに入力例を用意しておけば、
入力形式の制約を入力例を用いて説明
例示の存在によって、制約の内容は理解しつつも、より直感的にどのように入力すればいいのかが理解できるようになったのではと思います。

フリー入力欄でも

フリー入力の備考欄に例がない場合
この資料請求フォームには要望などを書き込めるフリー入力欄がありますが、「ご意見・ご要望」のラベルだけではユーザーは何を書き込んでいいかわかりません。

入力例を入れてみました。
フリー入力欄に例示を表示
配達時間の指定をしたいと思っているユーザーであれば、これを見て「なるほど」と思い、入力するでしょう。
せっかくフリー入力欄があっても、ユーザーに活用方法を理解してもらえなければ意味がありません。(ただのスペースの無駄になってしまいます。)
このように入力例という「一手間」を加える事で、ユーザーにとって使いやすいフォーム、サービスに生まれ変わります。

明日は「プレースホルダー」の活用法をお届けします。

入力例の大切さ、おわかりいただけたでしょうか?

明日のエントリでは、この入力例を表示する際に重宝する「プレースホルダー」についてご紹介していきます。

プレースホルダーって何?と思った方はぜひ。すでに知ってるよ、という方もあらためて!明日の記事もどうぞご覧ください。

※続きはコチラ:EFOで大切な<入力例>の存在と、<プレースホルダー>活用のススメ【後編】

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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