テキストボックスやテキストエリアの中にあらかじめ表示しておくテキストをプレースホルダー（初期表示文言）と呼びます。
このプレースホルダーに入力例などを表示することで、ユーザーが直感的に入力開始できるというほか、
スペースの節約にもなりフォームページ内の要素を美しくスッキリと見せてくれるという効果から、すでにご担当のフォームで活用しているという方も多いのではないでしょうか。
※プレースホルダー活用のメリットについては、以前の記事で詳しくお伝えしています。
EFOで大切な＜入力例＞の存在と、＜プレースホルダー＞活用のススメ【後編】
https://f-tra.jp/blog/column/2719
しかしこのプレースホルダー、使い方を誤るとフォームのユーザビリティを著しく損なう危険性があります。
上記の記事内でも軽く触れていますが、本日はプレースホルダーを誤った活用方法で用いないための方法を考えてみたいと思います。
NG例
便利なプレースホルダーですが、入力欄の内側にあるため、当然ながら入力を開始すると内容が消え、入力したテキストに置き換わります。
つまり、入力途中でラベルが見えなくなってしまいます。
このことがユーザーの利便性を大きく損なう可能性があります。例えば、下記のような例です。
重要な情報をプレースホルダーで表示
ラベルや入力形式、注意事項などの、フォームを送信完了するために重要な情報をプレースホルダーで表示するべきではありません。
ユーザーがいったん入力を開始してしまうと、その入力内容を消さない限りそれらの情報を得ることができなくなってしまいます。
ラベルが隠されてしまえば、少し目を離した拍子に何を入力していたか忘れてしまう可能性もありますし、
入力形式が隠されてしまえば、ユーザーはエラーを修正することが困難となります。
facebook
path
とくにデザインを美しくレイアウトするために、ラベルをプレースホルダーに表示する例が増えています。
確かに、上記2サイトは見た目としては大変美しいのですが、プレースホルダーとして表示するのはあくまで補助的な情報に留めるべきです。
入力形式の例示を兼ねている場合の入力例
例えば電話番号の入力欄においてハイフン（「-」）が必須の場合、入力例の表示を以ての入力形式を表示しているような場合があります。
そもそも、そのようなフォームは親切とはいえないのですが、こういったケースでプレースホルダーに入力例を表示してしまうと、
ひとたび入力を開始すれば、ユーザーは入力形式のヒントを得ることができなくなってしまいます。
結果、エラーの表示につながりユーザーにストレスを与えてしまう可能性があります。
OK例
では、どのような場合にプレースホルダーを使うことができるのでしょうか。
下記の4点にまとめてみました。
目次
順番に解説していきます。
入力例に用いる場合
入力例を表示するオーソドックスな使い方です。
プレースホルダーで入力例を表示した例
入力例が入力欄内表示されていることにより、ユーザーが直感的かつ余計な視線移動を経ずにスムーズに入力開始でき、プレースホルダーのメリットを充分に享受できる使い方と言えます。
ただし、上記で触れたように入力形式に縛りがあるケースではこの限りではありません。
単一の入力欄
例えば検索ボックスなどの一つの項目しか存在しないフォームにおいては、内側にラベルがあることでさほど不自由を感じないのではと思います。
検索ボックス
2～3項目程度で、よくある形式の場合
よくある形で、2～3個程度の入力項目数のフォームであれば、プレースホルダーをラベル代わりにしてもさほどユーザービリティを落とすことはありません。
例えば、以下のような場合です。
ログインの「E-mail/ID」と「パスワード」
多くの会員登録サイトでは、ログインするときに必要なのはメールアドレス（もしくはID）とパスワードの組み合わせです。
ほとんどのインターネットユーザーはこの点を経験から知っていますので、ラベルが見えなくなったからといって大きなストレスが発生するケースは少ないように思います。
プレースホルダーの例：ツイッター
「名前」入力欄の「性」と「名」など文脈から判断できる場合
入れ子になっているラベルで、よく使われる形式のものであれば、たとえラベルが見えない状況でも文脈から容易に推測可能です。
名前の性と名や、郵便番号の4桁＋3桁の組み合わせなどが代表的ですね
※住所の入力欄には注意
住所は「郵便番号」「都道府県」「市区町村」「番地」「達物名、号室」など複数の情報が入れ子になっている定番項目ですが、
それらの組み合わせ方はフォームによって異なる場合が多く、どこに何を入力すればいいかユーザーが迷ってしまう可能性があります。
そのため住所欄でのプレースホルダーでのラベル表示はオススメできません。
他の方法で情報を補える場合
例えば、ラベルをプレースホルダーとして置きつつも、項目にフォーカスした時だけ登場する吹き出しダイアログなどで、ユーザーが入力に必要な情報を得られるように設計する場合は、ユーザービリティを担保できる可能性があります。
ダイアログでラベルや入力形式を補うアイデア
デザイン／レイアウト上やむを得ない場合は、このような補助ダイアログを活用してください。
※エフトラEFOでは「入力形式事前指示機能」としてこのような吹出し型ダイアログをフォーカス時に簡単に表示することができます。
最後に
いかがだったでしょうか。
本日は便利なプレースホルダーの落とし穴と、正しく使うための４つのポイントをお伝えしました。
あなたのフォームのプレースホルダーは誤った使い方をしていないか、チェックしてみてはいかがでしょうか。
