左または上へのラベル配置の研究に精通しています。私はフォームデザインのフィールドの左側にあるラベルを右揃えにします。
ただし、インラインプレースホルダーテキストはトレンドであり、ページの混乱をさらに減らします。その使用を裏付ける研究はありますか?誰かが共有できる形式でユーザビリティ調査を実施しましたか?
研究リンク:
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
インラインプレースホルダーテキストの主な問題は、いくつかのフィールドに入力した後、そのフィールドの本来の目的が何であったかを判断することが困難または場合によっては不可能であることです。
たとえば、フォームに入力して入力を変更することにしたとすると、フォームをクリアしてから、他の何かの電話によって何らかの形で脇道に追い込まれることになります。ページを更新せずに、そのフィールドの目的を知る方法はありますか?
右または上(または左)に配置されたラベルを使用すると、フィールドの目的が常に明確になります
プレースホルダーテキストの短所について説明している記事へのリンク 。それ自体で使用するかどうかについては触れていませんが、それを使用して作成できる複雑さについては触れています。要点は、ユーザーがプレースホルダーテキストを完全にクリアできないことから、プレースホルダーテキストを完成したフィールドと誤解することまでさまざまです。
ユーザーがほとんどのフォームを操作するとき:
空白のボックスが表示されます。彼らはタイプする。ボックスは塗りつぶされたように見えます。これが発生するたびに、ユーザーは
- 記入する必要があるボックスが空白になっている
- テキストが入っているボックスはすでに入力されています
この質問が出されて以来、ウィジェットにいくつかの素晴らしい開発がありました。
placeholder only
、label only
、またはlabel + placeholder
から選択する必要がありました。Placeholder only
は、入力時にフィールドの意味が不明瞭になるため、問題があります(他の回答を参照)。Label only
には問題があります。これは、(1)フォームが縦または横のスペースを多く占有するため、視覚的に大規模なモバイルデバイスでは問題になります。 (2)ラベル/入力/ラベル/入力のストライピングのコントラストは、特にユーザーが最初にフォームに到達し、フィールドを処理する必要がある場合、視覚的なフローを混乱させる可能性があります。Placeholder + label
はユーザーにテキストの壁を提示しますが、これは多くの認知的負荷です。入力のマイクロインタラクションを調べることにより、デザイナーはプレースホルダーがラベルにもなれない理由がないことに気づきました。
これが ハイブリッド入力のデモ がGoogleの マテリアルデザイン で使用されている例です。
デモへのリンクが将来壊れる場合、入力は次のようになります。
多くの(すべてではありませんが!)状況では、これらのハイブリッドウィジェットは、プレースホルダーのレイアウトの簡素化の利点を提供する一方で、ラベルの最良の利点を維持できます。
フォームフィールドには、ラベルとプレースホルダーテキストの両方を含めることができます。これらは2つの異なるものです。
すべてのフォームフィールドにはラベルが必要です。すべてのフィールドにプレースホルダーテキストが必要なわけではありません。
ラベルをフィールドの上に配置して、がプレースホルダーテキストのように見えることもできますが、実際のラベルのままです。ラベルを非表示にしてプレースホルダーのテキストのみを表示することもできますが、スクリーンリーダーには不便です(両方を読み取るため)。
だから、言ったことはすべて、
label
タグとplaceholder
属性は、コンテンツとアクセシビリティの観点から異なる目的で設計されていることに注意してください。 プレースホルダーはラベルの代用ではありません。私が遭遇する最も一般的な問題は、私が試して修正したいものです:
答えは、ユーザーがコントロールに触れる頻度によって異なります。
ユーザーがフォームを頻繁に使用する場合は、各フィールドについてトレーニングを行うことができます。筋肉の記憶が引き継ぎ、ラベルの読み取りを停止します。内部または外部。これは、プレースホルダを使用するgMailの根拠です。人々は毎日gMailを使用しており、プレースホルダーの学習曲線を克服しています。
ユーザーがフォームを1度しか表示しない場合は、フォームがWeb上のフォームの動作に関するユーザーのアプリオリな知識を利用していることが不可欠です。美的改善がユーザビリティの不利益を上回るユースケースはほとんどありません。