Emphasize Label or Value?

Question

I've often wondered what is the recommended item to emphasize -- the item label or the item value -- when you want to draw a user's attention to a specific piece of information. For example, our application has a confirmation dialog after booking an order that contains the confirmation number for the order. It's often important for the user to make note of the confirmation number for subsequent use -- e.g. communication to the client; data look-up; etc.

The application currently shows the dialog with the label highlighted as follows:

An alternative would be to highlight the confirmation number itself:

I've always felt the former approach was preferred because it's more scannable -- it help's the user find the confirmation number but the latter approach I've seen often also and it makes the order number itself stand out better once it has been identified.

Another consideration is would the same practices apply if there was more than one item needing to be emphasized.

Any best practices here?

Answer 1

I believe it depends on the situation.

In your case (booking confirmation dialog) I think it would be best to make the value in bold because it is the result of the booking operation and it is THIS value that the users will need to note down or remember. The dialog is small and the number is the most important piece of information. Also, it is a one-time result popup which presents one single piece of information: it is not used to search for information. For instance:

^{download bmml source – Wireframes created with Balsamiq Mockups}

However, if you have another page that is accessible at a later time by the user and that presents a summary of the booking (more than one piece of information), then it would be best to make the labels in bold. For instance:

---

...

Confirmation number

TL118755483

Flight itinerary

Mon 29 Oct 2012 15:20

From Bangkok to Phnom Penh

Passengers

Bill Cosby

Passport ABC12345DEF

...

---

In this case, the user can scan more easily to fond for the right information. In combination with left-alignment paragraphs/groups of information are more easily identified. It can be used to search for a piece of information.

Answer 2

While I agree with Riche that the user is looking for content more than the "fluff" around it like labels, I think that the labels are what any user uses to find the content. Looking at both examples, I immediately "grog" the one with "confirmation number" emphasized, while I need to look twice at the one where that number itself is emphasized. It did draw my attention to the number, but immediately popped up the question "what is this number", making me look around to find the answer.

Generalizing a bit to document structure, titles are usually emphasized, not the body text. Now, apart from the fact that having the body text bold would sort of defeat the object of the exercise in any document of sufficient size, emphasizing the titles helps you get around the document and find the bit you are interested in. It also helps when already in a specific part of the text, to know whereabouts in the document's structure you are.

So I'd say emphasize the label as it helps someone find what they are looking for and finding the actual number from there will be an action performed on auto-pilot.

Answer 3

I think it depends on the specific case:

• If the user expects to see a specific value, highlight that value, not its label.
• If the user does not expect a specific value or if several values are shown, highlight the label(s).

I guess in most cases the latter variant would apply. Examples for highlighting the value might be:

• an address book search: highlight "John Doe", not "Name:" (but highlight "Post code:", not "12345")
• product search results: highlight "17 €", not "Price:" (but highlight "Weight", not "1.7 kg")

After re-reading this, I think I'd say: If the label could be omitted, highlight the value. But if you have several label-value pairs, be consistent and highlight all labels (and probably omit the label for the most important value, if there is one).

Answer 4

I am not sure there is a definite answer there. Much of the more modern UI emphasizes the value over the label. The label really is a type of UI, whereas what the user wants to get at is the content. If he needs to find what the content is, he will look around and find the label. In this context, I expect most repeated users will likely make an accurate guess as to what that number is.

An example of good data visualization I have seen circulatin are the Feltron reports, which, as you can see, have small labels for big data: http://feltron.com/ar11_04.html

Answer 5

First, labels are not titles! As @marjan venema said in other question, labels are hardly ever titles.
We could talk about titles if we had a form with sections, and the sections had titles. Highlighting these is a Good Thing that helps to scan the form.
That said, let's talk about labels.

I think that forms should emphasize the user's input, which is the ultimate purpose of the form.
By means of a gedanken experiment, like allowing the users to manage the relative visibility of labels vs. values, I conclude that over time users prefer to de-emphasize the labels.
This will not happen the first time they see the form, when they still need to read the labels carefully.
But after a few times, when they need only to briefly glance a label to clearly realize what it is asking for, then deeming them would be the chosen option.
On the other hand, nobody will deem content over time.

Actually, I've seen this behavior in real life, years ago, with users tweaking the terminal contrast and brightness in order to achieve this effect: very deem labels attached to normally visible input fields.
These were users that used that UIs for hours, frequently, as part of their work.

I'd like to see a web UI offering a more minimalist expert mode.

The rationale behind all this is that making UI artifacts more "invisible" lowers a bit the cognitive load needed to grok the screen layout, and that these small reductions, when repeated enough times, make a difference.
The contrary, higher cognitive load, make the users get tired sooner.