web-dev-qa-db-ja.com

テキストを左または右に揃えます

その横にLabelTextboxがあります。ユーザビリティに最適なレイアウトを見つけようとしていますか?

右揃えのラベル

Right-aligned labels

左揃えラベル

Left-aligned labels

15
Mike Darwish

場合によります。

LukeWはこれを彼の本Web Form Designで取り上げました。これは新しい本ではありませんが、Webフォームの一般的な問題のほとんどをカバーしています。

それぞれにadvantage/disadvantage:

右揃え:

右揃えは、完了するのに少し時間がかかりますが、垂直方向の画面スペースが少なくて済みます。ただし、ラベルの幅を変更すると、柔軟性に問題が生じます。アプリケーションをローカライズする場合、ドイツ語やフランス語などの言語は英語の2倍の長さになり得ることに注意することが重要です。左揃えのテキストは読みやすさを妨げるため、ラベルのセットをスキャンして何が必要かを確認する必要がある場合も、右揃えのラベルはうまく機能しません。

enter image description here

左揃え:

左揃えのフォームは、解析する必要がある眼球固定の数が多いため、3つのうちで完了するのが最も遅くなります。ただし、多くのオプションフィールドや見慣れないデータ(設定ダイアログや詳細設定など)が含まれるフォームの場合、ユーザーはラベルを効果的にスキャンできます。実際、ユーザーが速度を落としてフォームの各入力をより注意深く検討するようにしたい場合は、左揃えのラベルが適しています。

enter image description here

そして上揃え:(このオプションを検討しましたか?)

上部に配置されたラベルは、使い慣れたデータ(つまり、住所、クレジットカードなど)の場合、入力ラベルとフィールドの両方を取り込むために1つの目固定のみを必要とするため、完了時間(フォームの完了にかかる時間)を最も短縮する傾向があります。上部に配置されたラベルは、ページレイアウト全体に悪影響を与えずにラベルを拡大/縮小するための水平方向の領域が十分にあるため、ローカライズまたは長いラベルを必要とするフォームにも適しています。ただし、上部に配置されたラベルは、垂直方向の多くの領域を占めます。

enter image description here

Nielsen Norman Groupは上揃えのラベルを優先しています

対応するテキストフィールドの上にフィールドラベルを配置することをお勧めします。これにより、フォームの全長が長くなりますが、ユーザーはラベルと同じ固定でテキストフィールドを見ることができるため、フォームをスキャンしやすくなります。上部の配置では、水平方向のスペースが問題にならないため、長いフィールドラベルも使用できます。

25
Mike M

または、ラベルを入力の上に置くこともできます。

どうして?

  • 近接しているため、ラベル/入力を関連付けるのが簡単です。
  • より速い処理
  • 読みやすさを向上させる

唯一の欠点は、フォームが少し長くなることですが、みんなスクロールします。 http://www.hugeinc.com/ideas/perspective/everybody-scrolls

1
robert