右揃えのフィールドラベルの方が良いのはなぜですか？
長い間、次のようにフォームで左揃えのラベルを使用しています。
ラベルを揃えたままにしておくと、読者がラベルのリストを簡単にスキャンできると思ったので、これを行いました。
しかし、私は最近、自分の公理が ビリーホリスの講演のビデオNDC 2011 から見ているときに問題があることに気づきました。 ：
私はたくさんの研究をして、アプローチを比較対照する このUXの質問 を含む多くの議論を見つけましたが、決定的なものは何もありません。
特に、ビリーホリスがラベルの配置を左から右に変更した理由を示すものは何も見つかりませんでした（どうやら2007年頃に切り替えたようです）。
私はビリーが賢すぎて証拠なしで変更を加えられなかったと思います-だから私は自分自身でその証拠を見ることに興味があります。
Luke Wroblewskiがこれについて 上、右、または左揃えのフォームラベル （2007年4月）に書いています。
その中で彼は、Matteo Penzoによる Label Placement in Forms （2006年7月）という記事のアイトラッキングデータを参照しています。 Matteoは、この研究からいくつかの結論を導き出しました。たとえば、右揃えのラベルは、ユーザーの認知作業負荷が軽減されます。
ラベルの配置-ほとんどの場合、入力フィールドの左側にラベルを配置する場合、左揃えのラベルを使用すると、ユーザーに認知作業負荷がかかります。入力フィールドの上にラベルを配置することをお勧めしますが、入力フィールドの左側に配置する場合は、少なくとも右揃えにします。
ビリーがルークの記事を見て、それに基づいて彼のスタンスを変えた可能性があります。
間違いなく右揃え。
これは Gestalt Grouping Principles の関数として見ることができます：互いに接近しているオブジェクトは、視覚的に解析され、一緒に属していると解釈されます。明らかに、これは人々がラベルからテキストフィールドまでスムーズに読むことができるので便利です。したがって、対応するテキストフィールドの横にあるラベルを右揃えにすることで、視覚システムがラベルとフィールドを自然に組み合わせるので、読みやすくなります。
あなたが示す例では、フィールド自体がラベルとフィールドよりも互いに（暗黙的にグループ化されている）近くにあるため、ラベルをテキストフィールドに少し近づけることもできます。近接は一般的にグループ化の最も重要な手がかりです（ Quinlan＆Wilton、1998 ）。図形がどこにあるのかを判断するよりも、脳がテキストを処理するのに時間がかかります（ "どこ？"は通常、 "何？"の前に回答されます）。そのため、読者であるIMOにとってできる限り簡単にすることは価値があります。
ラベルをフォーム要素の真上または左側に配置することもあります。それは私が扱っているページのスペースの制約に単純に依存しています。しかし、私が決断したら、それと一致します。
それぞれのケースについて、いくつかのガイドラインがあります。
- テキストボックスの上にラベルを配置する場合は、テキストボックスの下にampleの間隔を必ず指定してください。ラベルが密集しすぎているため、ユーザーにラベルを混同させたくない。
- フォーム要素の左側にラベルを配置する場合、alwaysはラベルを右揃えにします。一目でラベルをテキストボックスに接続するのがはるかに簡単になります。これは、ラベルの長さが大幅に異なる場合に特に当てはまります。
ここで最も重要なことは、ユーザーがラベルをリストのようにすばやくスキャンできるようにすることではなく、ラベルをそれぞれのフォーム要素にできるだけすばやく簡単に関連付けることです。
私は最近、Webフォームのデザインに関する広範なユーザビリティ調査を実施しましたが、これらは私の重要な結論でした。
最適な配置は、中心軸の周りです（つまり、右揃えのラベルと左揃えのフィールド）。
別の配置も同様に機能しますifフィールドの強調表示が使用されます（色付きのアウトラインまたは現在使用されているフィールドの強調表示）。
ユーザー検証メッセージはインラインで、ヘルプのヒントと確認と統合する必要があります。つまり、ユーザーがフィールドに入ると、その横に何をすべきかを説明する何かが表示され、そこから離れると「問題があります」または「それです」と表示されます。素晴らしい」（通常は、目盛りや十字などの記号の形式です）。
継続ボタンは右下にある必要があります（アイトラッキングに基づいて提案されている理論もあります）。小文字/文の大文字で、方向を示す必要があります（たとえば、右向きの矢印）。
もちろん、私はもっと多くのことを学びましたが、うまくいけば、上記のこれらの重要なポイントがあなたを助けるでしょう！それらは決して画期的なものではなく、実際に私たちがすでに知っていると私たちが思っていたことを確認するだけのものです。
UX Mattersには、この議論のあらゆる側面について すばらしい議論 があります。
短いバージョンでは、さまざまな方法が最適に機能するさまざまな状況があります。現在、非常に長いフォームを作成しています。最も重要なタスクは、フィールドのリストをスキャンして、データを入力するフィールドを探します。この場合、左揃えにすることを選択しました。短いフォームや、すべてのフィールドが順番に入力されるフォームの場合は、右揃えの方がおそらく良いでしょう。
近接の原理 により、フィールドに近いラベルは常により使いやすくなりました。これは、「脳が多数の小さな刺激を処理する代わりに要素をグループ化することで、情報をより迅速に理解および概念化できるようになるため」です。
右揃えのラベルよりさらに便利なのは、上揃えのラベルです。これにより、ユーザーはフィールドに近づくことができますが、モバイルユーザーがフィールドにズームインしたときにラベルを確認することもできます。また、ラベルが言語の翻訳で長くなる場合でも、ラベルが途切れることがある側ではなく、フィールドの上にあるため、ユーザーはラベルを見ることができます。視覚的な例については、以下の記事を参照してください。
右よりも好きな左揃えのラベルに関するコメント。ほとんどのコメントはラベルと関連フィールドのみを参照していますが、考慮されていないのは、空白とフォーム全体のバランスです。ギザギザの左端を使用すると、ユーザーが最初にフォームを見たときに強い不均衡が生じます（ユーザーが一度に1つのフィールドを見て処理している間、それは事実ですが、フォームが最初に開いたとき、ユーザーはフォーム全体とその結果をスキャンします第一印象は、一般的にプログラムが「好き」か「嫌い」かに大きく影響します。
私が考えることができる左揃えの唯一の利点は、ほとんどのフィールドが各ユーザーに無関係であるかどうかです。この場合、ユーザーが必要なフィールドを選択できるように左揃えにする必要があります（ユーザーがF字型のパターンでWebページを読み取り、余白に「ドッキング」しているときに最適なものを見つけるためです）。
繰り返しになりますが、ほとんどのフィールドが無関係である場合は、おそらくフォームに問題があります。回答者のタイプごとに異なるバリアントに分割したり、無関係なフィールドの整理を検討したりできます。