web-dev-qa-db-ja.com

フォームの値よりもラベルの方が重要なのはなぜですか?

これは私がいつも疑問に思っていることです。フォームをデザインするときに、値が重要なのにラベルが値よりもweightを保持するのはなぜですか?

次の例を検討してください(左側の列はフォームフィールド、右側の列は出力用です)。

enter image description here

例1が最も一般的なアプローチです:ラベルは入力フィールドの値よりも重みがあります(実際のところ、それはSEのアプローチです)

例2は、より論理的に感じられるものです。ラベルよりも値の方が重要です。一部のサイトではこのアプローチを使用していますが、これが最も一般的なものとはほど遠いものです。

例3は、両方の要素に同じ重みを保持します。かなりわかりにくいと思いますが、一方でデータ(値)はラベルほど重要ではありません。両方のオプションをトーンダウンしましたが、それは純粋な黒である可能性がありますが、重要なことは、ラベルと値の両方が同じスタイルとサイズを持っているということです(私がそれを見ると、値は小さいですが、同じサイズであるかのように、それは私が犯した間違いです)

例4は、私が最近よく使用するものです。値はラベルよりもはるかに重要です。これが最も論理的なことだと思いますが、あまり人気のないオプションです。

これはなぜですか?ラベルの背後にある値よりも重要な理由は何ですか?ここで何が欠けているのですか?特別な場合ではなく、一般的に尋ねています。

さらに:一貫性のために入力スタイルを「継承」して出力を形成する必要がありますか?

重要な編集:一部の回答では例をplaceholdersと記載していますが、画像にはfilledフィールド、そのため、これらのフィールドに入力する前にスキャンプロセスが行われました。

5
Devin

興味深い質問です!私は常に(ぼんやりと:P)ラベルを強調しており、これが私自身がUXエンジニアであることから、ようやく問題を調査するようになりました。

これは私が集めることができるものであり、これらは純粋に私の研究に基づいているため、信頼できないかもしれません。しかし、ユーザーとして、ラベルを強調する必要があると感じたのは次の理由によります。

フォーカスの必要性

すべての画面には、ユーザーが移動しやすいフォーカスポイントが必要です。グレーディング、マーク、ハイライト、ラベル、箇条書き、または見出しのない情報があると、リーダーがフォーカスを失い、読みやすさが低下します。

例3は良くないので、私も「混乱している」と感じます。

何に焦点を当てる

ラベルは高速道路の白/黄色の線のようなものです。それらは完全に必須ではなく、ドライバーが車線に違反するのを阻止することもできませんが、それがなければ、カオス(そしてはるかに)は確実です!

ラベルはユーザーに指示を提供します。このシナリオを例にとります。 eコマースサイトで製品ページを開いて、その寸法を確認するとします。

必要な情報-> 30x40x12ftまたは 15x10x5ftor10x10x15ftor...(本当にわかりません)

私が探すもの->寸法

したがって、「ディメンションが太字になっている」という言葉は、ページにあることを知っているので役立ちます。

下のフォームはきれいですが、フォーカスがありません

Example of a confusing form

下のフォームは複雑ですが、簡単に移動できるように感じます

Example of a focused form

6

人々は情報を読み取らず、情報をスキャンするため、ラベルの方が重みが高くなります。

スキャンする場合、何をスキャンしますか?

a)パスタアルフレド、スパゲッティカルボナーラ、スパゲッティボロネーゼb)麺料理

目的のオプションをできるだけ早く見つけたい場合は、オプションbを選択します。

フォームをそのように設計するときは、ラベルをスキャンし、ほとんどの場合値を読み取ることさえしません。通常、これは何か問題が発生したときにのみ行います。

tl; dr:labelsはユーザーがスキャンするのに役立ちます

3

ラベルは、値自体よりもユーザーにとって重要であるため、強調されています。ユーザーはラベル内の単語をスキャンして、フォームの目的と期待されるアクションを伝えます。彼らは主に、できるだけ早く簡単にフォームを完成させることに関心を持っています。それを行うために、彼らはスキャンではなく、ラベルに似たものをスキャンします。

ほとんどの人にとって、これは入力フィールドの上または横の単語または短い文章をスキャンすることを意味します。 (4)の例では、入力フィールドのコンテンツに目が非常に強く引き付けられています。そして、それはそれが危険になる場所です。

field emphasised

ユーザーはおそらくプレースホルダーを読んでから、ラベルを読んでから、プレースホルダーに戻って編集します。あなたがより長いフォームを持っているなら、たくさんの前後があります。これだけでも、各分野に費やされる時間とエネルギーは増えますが、別のリスクが伴います。既に入力されていると考えられる場合、このフィールドで強調されたテキストのみに遭遇するというユーザーの期待に反するでしょう。多くの人が事前に入力されたように見えるものを一目見ているので、それは問題です。 詳細はこちら

label emphasised

この形式により、ユーザーは上から下に自然にスキャンできます。

もちろん、ユーザーはいつか特定のフォームがどのように機能するかを理解しますが、そのためにははるかに多くのエネルギーが必要であり、フォームの変換が悪化する可能性があります。そして、それは通常、企業が危険を冒したいものではありません。

3
Wendy Wojenka

フォームコントロールのラベルは、誰もがその目的をよりよく理解するのに役立ちます。

たとえば、料理は趣味、職業、アルバイトなどです。誰かが職業ポータルでプロの料理人を探しているなら、彼らが最初に見るのはProfession Labelであり、次に値です。

0
DPS