Why are labels more important than values in forms?

Question

This is something I always wondered: when designing a form, why do labels hold more weight than values when values are what matter?

Consider the following examples (left column is form fields, right column for output):

Example 1 is the most common approach: Label has more weight than value in input field (as a matter of fact, it's SE approach)

Example 2 is what feels more logical: value is more important than label. While some sites use this approach, it's far from being the most common.

Example 3 holds the same weight for both elements. I feel it's quite confusing, but on the other hand data (value) isn't less important than labels. Note that while I toned down both options, it could be pure black, the important thing is that both label and values have the same style and size (Now that I see it, values are smaller, but think of them as if they were the same size, it's just a mistake I made)

Example 4 is what I tend to use nowadays: values are way more important than labels. I feel this is the most logical thing to do, yet it's the less popular option of all.

Why is this? What is the reasoning behind labels being more important than values? What am I missing here? I'm asking in general, not very particular cases.

Additionally: should form outputs "inherit" the input styles for consistence?

Important Edit: while some answers mention the examples as placeholders, the images show the status of filled fields, so scanning process has happened before filling those fields, sorry for the mistake

Answer 1

Interesting question! I have always (absentmindedly :P) emphasized the labels and this finally made me look into the matter as I am UX Engineer myself.

This is what I could gather and these are purely based on my research and hence might not be credible. But as a user, here's why I felt labels need emphasis:

Need for focus

Every screen needs to have focus points that help the user navigate. Having information that isn't graded, marked, highlighted, labeled, bulleted or headlined causes the reader to lose focus which in-turn lowers the readability.

This why I feel Example 3 won't be good and I too "feel confused"

Focus on what

Labels are like the white/yellow lines on the highway. They aren't entirely mandatory and nor would they stop the drivers from violating the lanes but without them, chaos(and much more) is a certainty!

The labels provide direction to the user. Take this scenario as an example. Let's say I open a product page on an e-commerce site and want to check its dimensions.

Info I need -> 30x40x12ft or 15x10x5ft or 10x10x15ft or... (I don't really know)

What I'll look for -> Dimension

Hence, the word "Dimension being in bold would help me because I KNOW that would be on the page

The form below is clean but lacks focus

The form below is complicated but I feel like it helps me navigate through easily

Answer 2

Labels have more weight because people don't read information, they scan information.

If you would scan, what would you scan for:

a) Pasta Alfredo, Spaghetti Carbonara, Spaghetti Bolognese b) Noodle dishes

You would go for option b if you would want to find your desired option as soon as possible.

When designing forms its exactly like that, you scan for the labels and mostly don't even read the values, usually you only do this when something went wrong.

tl;dr:labels help the user to scan

Answer 3

Labels are emphasised because they are more important to users than the value itself. Users are scanning for words in labels that tell them what the form is for and what action is expected of them. They are mostly interested in simply completing the form as quickly and effort-free as possible. In order to do that, they scan - not read - for anything resembling a label.

For most people this means that they scan for words or short sentences above or next to an input field. In your example of (4), the eyes are drawn very strongly to the content of the input field. And that is where it gets dangerous.

The user will now probably read the placeholder, then the label, then back to the placeholder to edit it. Lot's of back and forth if you have a longer form. This alone causes more time and energy spent on each field, but there's another risk involved. You'd go against user expectation of only encountering emphasised text in this field when it's considered filled already. That's a problem because a lot of people glance over anything that looks pre-filled. More about that here.

This format allows users to naturally scan from top to bottom.

Of course users will at some point figure out how your particular form works, but it requires far more energy to do so, which can lead to worse conversion on your form. And that is usually not something a business would want to risk.

Answer 4

A label for a form control helps everyone better understand its purpose.

For example, Cooking can be a hobby, profession, part-time job. If someone is looking for professional cook on job portal; the first thing they will look at will be the Profession Label, and then the value.