プレースホルダー｜UIデザインポリシー整理
リーガルテックAI SaaSスタートアップ、MNTSQのプロダクトデザイナーのクボスケです。
私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。この記事は、MNTSQとしてのUIデザインの基準や方針を決めていく「UIデザインポリシー整理」というプロジェクトのなかで行なわれたディスカッションをもとにまとめたものです。
このプロジェクトの主旨や運営については、初回の記事でも述べていますので、ぜひご覧ください。
それでは、今回のトピックは「プレースホルダー」です。
プレースホルダー
プレースホルダーは、フォームの入力の値が空の時にフィールド内に表示する短いヒントのテキストです。ヒントとして入力例や書式を示すことでユーザーの入力を助ける目的で広く使われていますが、ユーザービリティとアクセシビリティに課題を抱えています。
テキストフィールド、テキストエリアのプレースホルダーは使用しないこととします。
入力を助けるヒントは、フォーカス時にツールチップで表示するのを基本とします。ツールチップにすることで、テキストフィールド内へのテキスト表示では入りきらない長さの説明も提示できるとともに、フォームの見た目をすっきりとシンプルに保てます。また、入力開始後もヒントを参照可能にすることで短期記憶への負荷を減らします。さらに、入力済みの値との誤認を避けることができます。
ただし、複数のフィールドでひとまとまりの入力を構成するものや、フォーカスの事前に提示する必然性が高い情報は入力の前にテキストで配置します。
ユーザーの入力を助ける情報がとくにない場合には、ツールチップも不要です。
以下はやりとりの内容を一部抜粋したものです。
クボスケ：プレースホルダーは広く一般的であるいっぽうで、使わないほうがいいのでは、という主張もあります。とくにアクセシビリティ上の課題が指摘されています。ただ、入力の手がかりを示すのにプレースホルダーが有用なケースもあるのではないでしょうか
ナカシマ：基本的には、プレースホルダーテキストによる補足がなくても何を入力すればいいのか伝わるUIを目指すというのがまず前提としてあると思います。そのうえで、意義があるプレースホルダーは使ってもよいと思います
kassy：入力前はプレースホルダーとして表示されていたテキストが、フォーカス時に見出しになるフローティングラベルの例がありますね
クボスケ：Material Design 2でも提唱されていたものですね。フローティングラベルがその後一般的になっているかといわれると、そこまでスタンダードになっていない印象です。なにか普及が進まない理由があるのでしょうか
ナカシマ：実は今はCSSでわりとシンプルに実装できるんですよね。ただ、ラベルのふるまいが、ラジオボタンやチェックボックスの場合でも一貫したようになるには、と考えると難しいように思います
クボスケ：検索フィールドなど、側にラベルの表示がない入力もありますね
ナカシマ：プレースホルダーの代わりにフォーカス時にツールチップで表示するというやりかたも考えられますね
クボスケ：たしかに、補足的な情報をいちどに全部並べておくのではなく、ユーザーが必要としたタイミング（≒フォーカス時）に提示する、という段階的表示のアプローチは、情報のノイズを減らして視界をシンプルに保つことができそうです
kassy：たとえば会員登録など、初めてその画面に触れるユーザーが多い箇所については入力例を明示したほうがいいと思います。しかし、頻繁に使う画面では毎回ていねいな説明はなくていいかもしれません。書籍『ABOUT FACE』では「永遠の中級者」にむけてデザインするという視点が提唱されています
クボスケ：フィールドにフォーカスしたとき以外にも、ラベルテキストの隣においた（？）アイコンにマウスオーバーしたときに入力の手がかりとなるテキストをポップオーバー表示するなども考えられるでしょうか
ナカシマ：利用頻度が低かったりユーザーが入力しながら参照したいようなケースでは、マウスオーバー中だけポップオーバー表示されるのでは支障があるかと思います。たとえばパスワードに使用可能な文字種・記号の提示などです
kassy：初回アクセス時だけ、あらかじめポップオーバー表示するとか？
ナカシマ：実装面では「初回」を定義する難しさもあったりします。新機能を伝えるウィザードのようなものはまた別ですが
クボスケ：ポップオーバーの使い分けに自由度を残してしまうと、ポリシーとして有用な判断基準になるか不安がありますね。それにやはりラベルの隣の（？）アイコンからポップオーバーで情報を表示するなら、入力の手がかりとなるテキストよりも、用語の説明など別の用途に充てたい気もします
ナカシマ：ほかには、フィールドのそばに入力の手がかりとなるテキストをそのまま添えて表示するのも考えられるでしょうか
クボスケ：入力の手がかりとなる情報が、フィールドへのフォーカスする前から見えていたほうが、ユーザーの理解を助けるケースもありそうですね
kassy：やはり、フィールドにフォーカスした時にツールチップ表示でいいと思います。検索フィールドではまわりにテキストを添えるスペースがないことも考えられますが、履歴やサジェストなど検索機能の拡張で解決できることもありそうです
ナカシマ：さきほど挙げた、パスワードに使用可能な文字種・記号の列挙のように場所をとるケースもシンプルにできますね
ところで、複数のフィールドでひとつの入力を形成するようなケースではどうしますか。たとえば姓名、電話番号、住所、範囲などの入力です
クボスケ：その場合は、手がかりとなるテキストは複数のフィールドを横断することになりますね。複数のフィールドのうちいずれかにフォーカスしたときにツールチップを表示するのではなく、またがってテキストを添えるかたちになりそうです。そもそも複数のフィールドでなく単一のフィールドにするのが妥当ではないかという議論もあるかもしれませんが
ナカシマ：以前ツールチップの回で整理した、ツールチップにしないケースにあてはまるような場合も、テキストで添えるかたちがいいですかね
クボスケ：あと、入力の手がかりとして意味がないテキストをプレースホルダーとして表示していることがけっこうある気がしていて。「入力…」「（ラベルテキスト）を記録することができます」などです。必要がなければなくていいですよね。
kassy：なるべくシンプルにいきましょう