web-dev-qa-db-ja.com

フォームでは、インラインプレースホルダーテキストは各フィールドの外側のラベルよりも優れていますか?

左または上へのラベル配置の研究に精通しています。私はフォームデザインのフィールドの左側にあるラベルを右揃えにします。

ただし、インラインプレースホルダーテキストはトレンドであり、ページの混乱をさらに減らします。その使用を裏付ける研究はありますか?誰かが共有できる形式でユーザビリティ調査を実施しましたか?

enter image description here

研究リンク:

http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

http://www.lukew.com/resources/articles/web_forms.html

48
Itumac

インラインプレースホルダーテキストの主な問題は、いくつかのフィールドに入力した後、そのフィールドの本来の目的が何であったかを判断することが困難または場合によっては不可能であることです。

たとえば、フォームに入力して入力を変更することにしたとすると、フォームをクリアしてから、他の何かの電話によって何らかの形で脇道に追い込まれることになります。ページを更新せずに、そのフィールドの目的を知る方法はありますか?

右または上(または左)に配置されたラベルを使用すると、フィールドの目的が常に明確になります

プレースホルダーテキストの短所について説明している記事へのリンク 。それ自体で使用するかどうかについては触れていませんが、それを使用して作成できる複雑さについては触れています。要点は、ユーザーがプレースホルダーテキストを完全にクリアできないことから、プレースホルダーテキストを完成したフィールドと誤解することまでさまざまです。

ユーザーがほとんどのフォームを操作するとき:

空白のボックスが表示されます。彼らはタイプする。ボックスは塗りつぶされたように見えます。これが発生するたびに、ユーザーは

  • 記入する必要があるボックスが空白になっている
  • テキストが入っているボックスはすでに入力されています
38
Matt Rockwell

この質問が出されて以来、ウィジェットにいくつかの素晴らしい開発がありました。

旧世界

  • デザイナーはplaceholder onlylabel only、またはlabel + placeholderから選択する必要がありました。
  • それぞれに欠点があります:
    • Placeholder onlyは、入力時にフィールドの意味が不明瞭になるため、問題があります(他の回答を参照)。
    • Label onlyには問題があります。これは、(1)フォームが縦または横のスペースを多く占有するため、視覚的に大規模なモバイルデバイスでは問題になります。 (2)ラベル/入力/ラベル/入力のストライピングのコントラストは、特にユーザーが最初にフォームに到達し、フィールドを処理する必要がある場合、視覚的なフローを混乱させる可能性があります。
    • Placeholder + labelはユーザーにテキストの壁を提示しますが、これは多くの認知的負荷です。

今日

入力のマイクロインタラクションを調べることにより、デザイナーはプレースホルダーがラベルにもなれない理由がないことに気づきました

これが ハイブリッド入力のデモ がGoogleの マテリアルデザイン で使用されている例です。

デモへのリンクが将来壊れる場合、入力は次のようになります。 enter image description here

多くの(すべてではありませんが!)状況では、これらのハイブリッドウィジェットは、プレースホルダーのレイアウトの簡素化の利点を提供する一方で、ラベルの最良の利点を維持できます。

13
tohster

フォームフィールドには、ラベルとプレースホルダーテキストの両方を含めることができます。これらは2つの異なるものです。

すべてのフォームフィールドにはラベルが必要です。すべてのフィールドにプレースホルダーテキストが必要なわけではありません。

ラベルをフィールドの上に配置して、がプレースホルダーテキストのように見えることもできますが、実際のラベルのままです。ラベルを非表示にしてプレースホルダーのテキストのみを表示することもできますが、スクリーンリーダーには不便です(両方を読み取るため)。

だから、言ったことはすべて、

私が遭遇する最も一般的な問題は、私が試して修正したいものです:

  • labelタグの代わりに使用されるプレースホルダー属性。プレースホルダーテキストがフィールドのラベルとして機能している場合、それはactualラベルタグである必要があります。
  • ラベルを無意味に繰り返すプレースホルダー。私が遭遇する一般的なものは、たとえば、「名前」というラベルの付いたフィールドと「名前を入力してください」というプレースホルダーテキストです。
1
DA01

答えは、ユーザーがコントロールに触れる頻度によって異なります。

ユーザーがフォームを頻繁に使用する場合は、各フィールドについてトレーニングを行うことができます。筋肉の記憶が引き継ぎ、ラベルの読み取りを停止します。内部または外部。これは、プレースホルダを使用するgMailの根拠です。人々は毎日gMailを使用しており、プレースホルダーの学習曲線を克服しています。

ユーザーがフォームを1度しか表示しない場合は、フォームがWeb上のフォームの動作に関するユーザーのアプリオリな知識を利用していることが不可欠です。美的改善がユーザビリティの不利益を上回るユースケースはほとんどありません。

0
mrbmc