A label had many forms — a clothing label, a logo, you can even “label” a person. But in UX writing, labels are a little more straightforward than the psychology of a Louis Vuitton tattoo…
In UX writing, a label allows the user to understand a single element.
It's often in the form of information, and can have an implied instruction.
For example, the label for a text field might say “Last name”, describing what the text field is for. The implied instruction is “please state your last name in the text field”.
Why do labels matter?
Without a label, it’s pretty hard to piece together what’s being asked of you. For example, take this screen with no labels:
Clear label microcopy is one of the primary ways to make user interfaces more accessible and understandable. Labels tell the user the purpose of the field, and labels should stay visible even after completing the field.
What makes labels effective?
Effective labels are:
- Succinct
- Simple
- Imply the right possession
Effective labels are succinct
Labels aren’t help text. That means they don’t serve the purpose of explaining something to the user. Instead, labels serve the purpose of describing what’s required.
For example:
Help text: Write your full legal name in this field
Label: Full legal name
Labels should use succinct, short and descriptive labels (a word or two,) so users can quickly scan your form.
Take this example of Amazon’s old registration form:
It has a lot of extra words, which can result in slow completion rates. Compare that to Amazon’s new registration form:
Its labels are much more concise, allowing you to scan what’s required and act quickly.
Effective labels are simple
Labels aren’t a time to be clever or cute. Save that for onboarding and the website.
Since successful completion is so dependent on the clarity of a label, labels need to be as simple as can be.
For example, here’s an example of a label that tries to be clever:
It’s fun and has some spunk, but it’s pretty unspecific as to what it’s asking. Now, compare it to a more clear label:
It’s less fun, but you know exactly what the form is asking for.
Effective labels imply the right possession
The word “my” implies possession to an absolute degree. But the word “your” implies possession only to a relative degree.
For example, if someone were to say, “I like your dog,” you only own the dog from that person’s perspective. But this isn’t necessarily the case. It could be someone else’s dog that you’re taking care of.
If you were to say, “This is my dog,” you own the dog from your perspective and theirs. The word “my” implies a higher degree of possession and ownership.
This is why you should use “my” on items that users own or have control over. In other words, use it on items that users can personalize.
Use “your” on items that are relevant to the user. In other words, use it on items that the interface has customized for the user.
For example, a site might recommend events for the user based on their location. But they might also offer a way for the user to save events they want to go to.
The recommended events should use the label “Your Local Events” because it’s customized to the user. The events that the user saved should use the label “My Events” because it’s what they have personalized.
At the end of the day, if “my” vs “your” confuses you, or you can’t figure out which one is best, avoid them all together for the sake of simplicity.
Good vs. bad examples of labels
No label [bad] Â vs label [good]
In case you were wondering if labels were optional, they’re not.
Labels are imperative for accessibility. Screen readers communicate each label to users. Without proper labeling, forms are inaccessible to many people. And we can’t have that happen.
Placeholder [bad] vs label [good]
Thought maybe you could save space and put the label in the input field? Think again…
Using a placeholder as a label puts a burden on short-term memory. The label disappears as soon as the user starts typing, and the user must clear input text to expose the placeholder label again.
We’re going to talk about placeholders in more depth in the next lesson, but for now, placeholders create additional issues when they are too light or dark. When they’re too dark, the placeholder can be mistaken for a filled in input. When they’re too light, some users might not see the placeholder.
Long label [bad] vs short label [good]
Avoid long labels whenever possible, so forms are easy to read and scan.
Happy UX writing đź––
