フォームに入力例を表示すべき理由

入力例を表示するとユーザーが何を入力すべきかをイメージしやすいほか、直感的に入力を開始できるメリットがあります。また、入力フォームの余分なスペースを節約することにも繋がります。
入力フォームの不備でユーザーの新規登録や申し込みを逃してしまわないように、きちんと入力例を整備しておきましょう。

プレースホルダー機能を使おう

入力フォーム内のテキストボックス、またはテキストエリアの中に、予め表示しておくテキストのことをプレースホルダーと呼びます。
　

お問い合わせフォーム

お名前

ふりがな

電話番号

お問い合わせ内容

　

以下はプレースホルダーを含めたフォームの実装サンプルです。実装することで上記のようになります。

プレースホルダー機能を使う際の注意点！

入力フォームにとってのメリットは先ほど説明しましたが、ポイントをおさえて実装しなければユーザーの手間を増やすことにもなりかねません。
注意点を確認していきましょう。

重要な情報はプレースホルダーで表示しない

まず、入力形式、注意事項や警告といった、「入力を完了するために重要な情報」をプレースホルダーで表示すべきではありません。
プレースホルダーはユーザーが入力を開始すると消えてしまうので、入力内容を消さない限り情報を確認することができなくなってしまいます。
例えば入力形式が隠されてしまった場合、入力している間にどのような情報を入力していたか忘れてしまう可能性もあります。また、注意事項が隠されてしまった場合、ユーザーはエラーを修正することが出来なくなるかもしれません。
デザインをよくするためにプレースホルダー機能を使い、このような不便さを生んでしまうケースがありますが、プレースホルダーはあくまでもユーザーが情報を入力するための補助程度に考えておきましょう。

プレースホルダー機能の活用方法

では、どのようにプレースホルダー機能を活用すべきなのでしょうか。
上記の注意点を踏まえ、適切な方法を解説していきます。

入力例を表示する

プレースホルダー機能の一番の活用方法は、入力例の表示です。
入力例が入力フォームに表示されていることで、ユーザーの余計な視線移動を軽減し入力をサポートできます。

ラベルの代わりに表示する

上記では入力形式をプレースホルダーとして設定するべきではないと説明しましたが、例えば検索ボックスなどの項目が1つしかないフォームの場合には、入力欄の中に「サイト内から検索する」というようなラベルがあったとしても問題ないでしょう。

また、入力項目数が2～3個程度の場合でもユーザービリティを落とすことはありません。
例えば下記のようなケースです。

①ログインページの「ID（もしくはメールアドレス）」と「パスワード」
多くの会員登録サイトでは、ログインするときに必要なのはメールアドレス（もしくはID）とパスワードの組み合わせです。
多くのユーザーはログインページに必要となる情報をこれまでの経験から理解しています。そのため、ラベルが隠れてしまうことで大きなストレスに繋がることは少ないでしょう。

②入力すべき情報を文脈から判断できる
「名前」の姓と名や、「郵便番号」の上4桁＋下3桁の組み合わせをはじめとした、文脈から判断できるような入力欄の場合にも、ラベルが見えなくても何を入力すべきか推測できるので問題ないと考えられます。

住所の入力欄には注意しよう

住所欄においては、ラベル表示は極力しない方がよいでしょう。
住所欄を構成している入力内容は、郵便番号、都道府県、市区町村、番地、建物名・号室といった情報がオーソドックスですが、項目はフォームによって異なる場合が多いので、ラベル表示にしてしまうとユーザーはどこに何を入力すればいいか迷ってしまう可能性があります。

吹き出しなどで表示する

プレースホルダーとしてラベルを置く場合には、それとは別にPCの場合には「項目に対してマウスオーバーした時のみ表示される吹き出し」など、入力に必要な情報をユーザーが得られるような補助ダイアログを活用してもいいでしょう。

まとめ

今回はプレースホルダーを使用する際の注意点や活用方法をまとめました。

▽EFO CUBEならplaceholder（入力例の表示）機能があります
EFO CUBEなら、placeholder機能によってテキスト項目の中に入力例を表示することができます。
〇EFO CUBEの機能一覧ページはこちら

EFO CUBEには多彩なフォームに対応するために、業界最多数である26個の入力補助機能を搭載しています。どの機能を搭載するべきかは、過去の実績とヒアリングからご提案させていただきますので、お気軽にお問い合わせください。
〇お問い合わせはこちら