web-dev-qa-db-ja.com

プレースホルダーテキストとツールチップをいつ使用するかに関する基準はありますか?

ユーザーが<input>フィールドにデータを入力できるように、ツールチップとプレースホルダーを提供する予定です。 placeholdertooltipsの「いつ」を使用するかについてのガイドラインと標準を理解したかった。そして一般的に、placeholderまたはtooltiplabelおよびある種のhelpよりも優れた支援をどのように提供しますか。どんな例や説明も参考になります。

6
Arjun

placeholderを使用すると、ユーザーにリレーしようとしている情報、ヘルプ、または例が、ユーザーが何かを入力した瞬間から非表示になります。情報を表示するには、ユーザーがフィールドをクリアする必要があります(たとえば、テキストをクリップボードに切り取り、読んだ後に貼り付ける)。ほとんどのユーザーはプレースホルダーのテキストを元に戻す方法を理解できないと言いたくなりますが、その証拠はありません。

その意味で、placeholderよりもツールチップを優先することをお勧めします。ツールチップのテキストは、入力済みのテキストを変更することなくいつでも表示できるためです。ただし、ツールチップには明示的なアクション(マウスのホバー、入力)が必要です。 focus)ラベルが常に表示されている間にその内容を明らかにする。

したがって、ラベルとツールチップの側面を考慮する必要があります。有用性、長さなど。(控えめではありませんが)私の意見では、placeholderは慎重に使用し、代わりに意味のあるラベルを使用してください。一部のフィールドに詳しい説明や例が必要な場合は、ツールチップを提供します。

5
Jawa

プレースホルダーテキストは、必要な入力の種類の単一の例を示すのに役立ちます。日付を表現するには多くの方法があるため、私が考えることができる最も良い例は日付です。プレースホルダーテキストはyyyy/mm/ddを簡単に表示し、必要な入力のタイプに関するヒントを与えることができます。ただし、プレースホルダーテキストはいつか消えるので、ヒントは表示されますが、指示は表示されません。

ツールチップは、プレースホルダーテキストほどサイズや形状に制限されず、より複雑な指示や情報に使用できます。たとえば、日付スタンプをヒントとしてフォーマットする方法の例があった場合、ツールチップは"Please enter a date in yyyy/mm/dd format. You can also enter N/A or leave the field blank."と言うことができます。ユーザーにマウスを配置して、ツールチップ、または少なくとも標準の場所を使用します。

ツールチップとプレースホルダーが入力に何を入力することが期待されるかを示すところ、ラベルは入力が何であるかを示します。生年月日ですか?開始日?締め切りなどラベルは短く、データが表す内容を明確に示す必要があります。

ラベルとプレースホルダーについての簡単なメモ-ラベルより説明的で有用なプレースホルダーを考えることができない場合は、使用しないでください。フィールドに「名」というラベルを付けてから、「名」のプレースホルダーを指定することは役に立ちません。 「Birthday」というラベルと「yyyy/mm/dd」というプレースホルダーは、プレースホルダーが何か新しいことを教えてくれるので意味があります。

3
Surreal Dreams

規格はありますか?いいえ。ただし、固有のプロパティに基づいて、それぞれにベストプラクティス*があります。頭に浮かぶいくつかを挙げます。 2つは良い、1つは悪い。

プレースホルダー:

Input要素自体の内部で入力に関するメタ情報を組み合わせるため、スペースが問題になる場合に適しています。

プレースホルダーテキストが(xxx)xxx-xxxxのような入力構造を示唆している場合に、さらに役立つ

テキストがすでに入力されているとユーザーを混乱させる可能性があります。

ツールチップ

また、フォーム構造の外部で入力に関するメタ情報を取得するため、スペースが問題になる場合にも適しています。それにより、関連する要素のために混乱を減らし、スペースを節約します。

説明的な入力に関する追加情報を提供するのに適した選択肢です。例:「電話番号:[]ツールチップ:「ご注文が処理されなかった場合にのみご連絡いたします」

モバイル環境ではうまく機能せず、ユーザーの意図する行動を妨げることがあります。

*ユーザータスクの最善の解決策を「ベスト」プラクティスよりも優先させます。実際、それが彼らが到着した方法です。

お役に立てれば。

1
Itumac