最高の使いやすさのためのフォームラベルの位置
訪問者にfirstname、middle initial、およびlastnameを要求するフォームを作成しています。これらのテキストフィールドをすべてインラインにしたいのですが、ラベルをどこに配置すればよいですか？左側、上部、またはフィールドの下。
ユーザビリティの観点から最適なアプローチを探しています。
Xmattersによるこの調査 をご覧ください。これはかなり詳細で、視線追跡に関するデータが含まれており、一番上のラベルが全体的に最良のソリューションであると結論付けています。
Luke Wroblewskiによる同様の記事 があり、これもかなり詳細です。両方の記事を読む価値があります！
最も重要なことは、サイトの他の部分と一貫性を保つことです。一般に、ほとんどのWebサイトでは、テキストフィールドの左側にラベルを付けます。この原因では長い説明になりますので、余裕があり、うまく流れるようにしてください。
左側が正しく見えない場合、またはそれを行う余地がない場合は、上記で行います。それは非常に明確です。
私が避ける唯一の方法は、ラベルをテキストフィールドの下に置くことです。ラベルがフィールドの下にある場合、より混乱します。
通常、あなたの状況では、上部または左側が最適です。ラベルがアクセシビリティのために入力フィールドの前に来るようにしてください。
それでもページをレイアウトしてアクセス可能にする方法はたくさんあります。
フォームラベルは、それができる限り、必要な場所に表示できます。このリソースは一見の価値があります http://patterntap.com/tap/collection/forms
最適と考えられる2つのオプションがあります。
- フィールドの左側にあるラベルは、入力に近いように右にフラッシュされます。
- フィールド自体の上のラベル
ラベルのfor属性を使用していることを確認するために、使いやすさのために注意すべきもう1つの重要なことは、ラベルをクリックすると、ラベルを付けるフィールドにフォーカスが合うようにすることです。
回答：上記のどれでもありません。フィールド自体の中にプレースホルダーテキストを使用します。プレースホルダー属性は、HTML-5の組み込み部分です。
それ以外の場合は、フィールドの上に左揃えで配置すると言います。
これは少し接線ですが、firstname/lastname/initialを使用しないでください。全員の名前がそのきちんとしたグループに分類されるわけではありません。
StackOverflowについて説明します。
多くのアジア文化では、家族が個人よりも重要であると考えられるため、familyの名前を最初に付けます。
両親から授与された名前ではない名前を使用している人がかなりいることに注意して、私は次のスキームを使用してある程度成功しました。
氏名（メールの宛先指定用に通常書かれている）;苗字;既知（会話で一般的に使用される名前）。
例えば。：
氏名：ウィリアムゲーツIII;姓：ゲイツ;別名：ビル
氏名：Soong Li;姓：Soong;別名：リサ
詳細については、 https://stackoverflow.com/questions/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694 を参照してください。