web-dev-qa-db-ja.com

フィールドの上にあるラベルの後にアスタリスクを付けても大丈夫ですか?

ワイヤーフレームを見てください:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

フィールドの上のラベルにアスタリスクが付いていても問題ありませんか?または、ラベルをフィールドの左側に配置する必要がありますか?

これらの必須フィールドにアスタリスクがまったくない場合でも問題ありませんか?

Wordとアスタリスクの間にスペースを入れる必要がありますか(例:「Email *」と「Email *」)?

7
Andrei Botalov

それだけでなく、実際には正しい方法です。

フィールドが必須の場合は、フィールド自体のラベルにそのように記載する必要があります。

W3Cサイトから: H90:ラベルまたは凡例を使用して必要なフォームコントロールを示す

この手法の目的は、Webアプリケーションまたはフォームの特定のフォームコントロールがデータ送信を成功させるために必要であることを明確に示すことです。コントロールが必要であることを示す記号またはテキストは、ラベル要素、またはフィールドセットを介して関連付けられたコントロールのグループの凡例を使用して、プログラムでフィールドに関連付けられます。記号が使用されている場合、ユーザーは最初に使用する前にその意味を通知されます。

フォームの最初に、アスタリスクが必須フィールドであることを宣言する必要があります(「*でマークされたフィールドは必須」など)。フォームを初めて読む人は、これらのインジケーターが何を参照しているのかを認識できます。

この特定のW3C基準の詳細については、次を参照してください: ラベルまたは説明:ラベルまたは説明は、コンテンツにユーザー入力が必要な場合に提供されます。 (レベルA)

7
JonW

ラベルは上または左に配置できます(上から下に読むため、左右のリーダーでも機能します)。

留意する必要があるのはラベルのレイアウトです。そのため、ユーザーは、ラベルをその下の入力ではなく、その上の入力に関連付けることを混同しないでください。別名、グループ化のゲシュタルトの法則、主にこの場合の近接法則に従いますが、レイアウトを設計するときは常にこれらを覚えておく必要があります:)

enter image description here

アスタリスクについては、ラベルと一緒に、またはフィールドの最後に付けて、すぐにユーザーの注意を引き付けないようにすることができます。

アスタリスクのいくつかの代替方法は次のとおりです。

  • 必要な情報のみを尋ねる
  • 太字のテキストを使用する
  • 必要なテキストラベルを強調表示します
1
rk.

これを実証する研究があるかどうかはわかりませんが、編集フィールドに関連するすべての情報は、ユーザーがフィールドに関連する情報を取得する場所なので、ラベルに含める必要があると思います。

そして、それは私にもはっきりと見えます。

0

「必須フィールド」のアスタリスク(これを私が解釈しているもの)のさまざまな配置をいくつか見ました。

視認性の高い色(通常は赤)にすることをお勧めしますが、ラベルの最後では問題ありません(その後、ラベルの最初でもほとんど問題はないので、適切な問題です)サイトのスタイルとデザインに対する個人的な好み)

0
Ahrotahntee