web-dev-qa-db-ja.com

ラベルと同じテキストを持つプレースホルダー-良い習慣ですか?

次のようなフォームがあり、プレースホルダーには対応するラベルとまったく同じテキストがあります。

enter image description here

代替策は、プレースホルダーなしで各入力を残すことです。私はではありませんラベルとプレースホルダについて議論しています。ラベルは関係ありません!

これらの冗長に見えるプレースホルダーは、ある程度、そして何人かの人々にとって実際に有用であるように私には思えます。ユーザーが左側を見て、どの入力を入力していたかを覚えるのを防ぐことができます(長い形式の可能性があります)。

視覚的な影響はほとんどないので、これらを配置しても害はありません。

冗長なプレースホルダーが役立つ/有害であるかどうかに関する確立された慣行はありますか?

25
vemv

通常、私はプレースホルダーテキストを目的のコンテンツの例として使用するのが最適です。したがって、ラベルはフィールドを記述し、プレースホルダーはタイプを例示しますコンテンツの。

この記事の良い例を次に示します。 http://www.pardot.com/faqs/forms/placeholders-and-labels/

placeholder text in field

29
Caleb Sylvest

同じ情報を2回繰り返す意味はありません。プレースホルダーテキストを使用して、ユーザーがデータの入力方法を理解できるようにします。

たとえば、電話番号の形式を表示します。別の例は、アドレスの複数の行があり、キューがプレースホルダーになる場合です。

N/nの調査によると、一部のユーザーはプレースホルダーをすでに入力されているフィールドと間違えていますが、私の考えでは、小さな画面のおかげで広く採用されているため、この問題は以前ほど一般的に見られない可能性が高いです。

意味のあるプレースホルダーのあるフィールドと他のフィールドが空であっても害はありません。少なくとも、ユーザーは冗長性を無視することを学びません。

4
Rajmera

フォームフィールドのプレースホルダーは有害であるとニールセンノーマングループの記事を見ました http://www.nngroup.com/articles/form-design-placeholders/

ただし、ラベルを置き換えるか追加情報を提供するプレースホルダーを分析したようです。あなたの例ではそうではありません。

あなたが言うように、私の個人的な感覚は、これらの冗長なプレースホルダーは見栄えがよく、役立つことができるということです。バラエティを追加したい場合は、プレースホルダーのテキストの前に「Your」を付けることができます。例えば。:

メール:[あなたのメールアドレス]

名前:[あなたの名前]

3
firasd

いいえ、これは良い習慣ではないようです。

Nielsen Norman Groupの記事「 フォームフィールドのプレースホルダーは有害 」では、プレースホルダーを使用しない7つの理由のリストで、最後のプレースホルダーはラベルが必要な理由だけでなく、その理由も説明しています空でない入力がないのは悪いです:

  1. 中にものがあるフィールドは目立ちません。アイトラッキング調査は、ユーザーの目が空のフィールドに引き寄せられていることを示しています。少なくとも、ユーザーは空ではないフィールドを見つけるのに多くの時間を費やします—迷惑です。最悪の場合、彼らはフィールドを完全に見落とすでしょう-潜在的なビジネスを殺す災害。
  2. ユーザーは、プレースホルダーを自動的に入力されたデータと間違える可能性があります。フィールドに既にテキストがある場合、ユーザーはそこに入力できることに気づきません。一部のユーザーは、プレースホルダーテキストがデフォルト値であると想定し、フィールドを完全にスキップします。

ラベルに加えてプレースホルダーテキスト

プレースホルダーテキストをフォームラベルと組み合わせて使用​​することは、正しい方向への一歩です。 (...)ただし、ラベルを使用している場合でも、フォームフィールド内に重要なヒントや指示を配置すると、重大度は低くなりますが、上記の7つの問題が発生する可能性があります。

一方、プレースホルダーテキストの適切なソリューションは、一部の設計者によってフローティングラベルと見なされていることがわかりました。プレースホルダーテキストは実際にはデフォルトで表示されるラベルですが、入力フィールドがタップされてテキストが入力されると、プレースホルダーテキストはフェードアウトし、上部に配置されたラベルがアニメーション表示されます。

この記事の「 フロートラベルパターン 」では、Brad Frostには良い賛成/反対の引数がいくつかあります。

フロートラベルパターン

フロートラベルプロ

ユーザーがコンテキストを保持する-このパターンの主な利点は、ユーザーがフォーカスして値を入力した後もフィールドのコンテキストを保持することです。これにより、よりアクセスしやすく、イライラの少ないエクスペリエンスが提供されます。

デフォルトでクリーンでスキャン可能–このパターンでは、デフォルトでクリーンなインラインラベルエクスペリエンスが可能になり、ユーザーが入力した後にのみ、少し雑然とします。

Elegent –言う必要があります:このパターンはセクシーです。通常、フォームについてそれを言うことはできません。見た目も良く、アニメーションも微妙に感じられます。

フロートラベルの短所

それでも、ラベルとプレースホルダーの両方にスペースを提供するわけではありません–ラベルはプレースホルダーと同じスペースを占有しているため、追加のヒントの余地はありません。

小さなラベル–ラベルは小さくなり、読みにくくなる可能性がありますが、同時にそれほど重要ではありません。ユーザーが入力を操作すると、ラベルは指示ではなく参照になります。コードの悪用の可能性-私が見たいくつかのデモに基づいて、アクセシビリティとセマンティクスを破壊する可能性があります。

2
Madalina Taina

プレースホルダーの前に「Enter your」を付けることができます。

そのように彼らは

  • コンテンツではなくプレースホルダーとしてより目立つ
  • テキストを入力するアクションなど、ユーザーが行う必要があることについて、もう少し情報を提供する
  • ラベルを乱雑にすることなく、この追加のプロンプトを追加できることも意味します
2
Dave Haigh

そうすることは冗長に思われます...なぜプレースホルダーを取り除かないのか、またはあなたがそのようなものを試す必要があるなら

  • EMAIL:最高のメール
  • NAME:最初、最後

このようにして、姓を一斉に取り除くことができます

0
Stanley VM