web-dev-qa-db-ja.com

入力フォームのラベルの配置は上または左ですか?

入力フォームのラベルの配置について調査しましたが、フォームラベルの配置を上に使用する場合と左に使用する場合、およびその理由についてしっかりした提案が必要ですか?

たとえば、次のフォームでは、ユーザー名とパスワードはそのままにしておきます。

left aligned labels

ここでは、ユーザー名とパスワードは上揃えです。

top aligned labels

33
Pir Abdul

Luke Wroblewski は、このフィールドの第一人者です。

彼はWebフォームデザイン( Web Form Design )に関する本全体を書き、数年前にレーベルの問題に関する興味深い記事を発表しました。

あなたはここで完全な記事を読むことができます: http://www.lukew.com/resources/articles/web_forms.html

記事の要約:

垂直ラベル

次の場合に使用する必要があります。

  • フォームを完了する時間を最小限に抑える必要がある
  • 収集されるデータは、ほとんどの場合ユーザーによく知られています

Image of "Vertical labels"

左揃えの水平ラベル

次の場合に使用する必要があります。

  • フォームによって収集されているデータはよく知られていない
  • データが処理しやすいグループに分類されない
  • 収集されているデータは、ほとんどのユーザーが使い慣れている[...]

Image of "Left-Justified Horizontal Labels"

右揃えの水平ラベル

[左揃え]ラベルと入力フィールドの間の距離は、長いラベルによって長くなることがよくあります。 [...]別のレイアウトでは、入力フィールドのラベルを右揃えにして、入力フィールドとラベルの関連付けを明確にします。

Image of "Right-Justified Horizontal Labels "

36

最近、私がデフォルトでトップレーベルになるきっかけになったとは思えないのは、モバイルWebです。トップラベルの大きな利点は、モバイルデバイス用のCSS全体を再構築する必要がなく、携帯電話でフォームを使用できるようになることです。

最近の多くの携帯電話はフォームフィールドを拡大表示するため、フィールドの左側に配置すると、拡大モードでフィールドのラベルが失われます。トップラベルはすべてのケースで完全に改善するわけではありませんが、明らかに左よりも優先されます(通常、電話ユーザーはPLUSを左右にパンするよりも、ページを上下にスクロールする方が簡単です)。

そして、そう、LukeWが言うことは何でも。 ;)

11
DA01

Quince からのアドバイスを以下に示します。これには、各パターンを効果的に使用するサイトとソフトウェアの多くの例があります。 このサイトをぜひチェックしてください

トップアラインメントの背後にある根拠

「各ラベルと入力フィールドは垂直方向の近接度によってグループ化され、入力フィールドとラベルの両方の一貫した配置により、目の動きと処理時間が削減されます。ユーザーは、一方向にのみ移動する必要があります。レイアウトに影響を与えることなく、ローカライズされた複雑な入力コントロールを使用できます。アイトラッキングの調査では、入力フィールドのすぐ上にラベルを配置すると、ユーザーは1つの目の動きで両方の要素をキャプチャできることがわかります。また、ラベルがユーザー(たとえば、名または姓)の場合、ユーザーはラベルを個別に固執して読んでいませんでした。同じ領域でラベルと入力フィールドの両方を表示できるため、追加の固定の必要がなくなりました。」

左揃えの根拠

「左揃えのラベルを選択する主な理由は、フォームが要求する内容をできるだけ簡単にスキャンできるようにするか、変更を許可することです。これは、いくつかの目的に役立ちます。必要な情報を持っているか、おそらくそれが正しいフォームであることを確認するだけです。それが既存の値を更新するために使用されるフォームである場合、彼らは更新したい値をより迅速に見つけるためにスキャンできます。フィールドを使用すると、フォームをすばやくスキャンしてそれらを見つけることができます。」

右揃えの背後にある根拠

「情報間の関係を明確にするために、ラベルをそれらが説明する情報またはフィールドに対して右揃えにし、それらの間に一貫した少量のスペースを残します。

互いに近いオブジェクトは、離れているオブジェクトよりも、関連性があると見なされます。フィールドとそれらを説明するテキストラベルが互いに関連していると認識されるようにしたいので、それらを互いに近くに配置する必要があります。このパターンをテキストラベルとフィールドのペアの長いリストに適用すると、各テキストラベルがその隣にある各フィールドを説明していることに気付きやすくなります。」

10
Matt Rockwell

私は、トップに位置付けられたラベルや他のタイプのラベルの長所に同意します。ただし、私の質問は、アプリケーション全体で一貫したラベルのタイプを使用すること、つまり、インターネットバンキングアプリケーション全体でラベル付けのタイプを一致させることはやむを得ないことでしょうか。

0
Dale