0

I am creating a very small list of data for a device which will be displayed on an overlay. The following format is as follows: enter image description here

There are many different ways these items can be aligned and I've created a few of them here. enter image description here Is there any benefit to picking one alignment over another?

2
  • Is keeping the colon a requirement? If not, it might be useful to work with different font weights and colors instead. Feb 9, 2023 at 19:22
  • @LeoWattenberg Not necessarily. So if there's no colon, how should the left and right column be aligned?
    – Gene Lee
    Feb 9, 2023 at 21:41

2 Answers 2

4

You can do either. But test if you can to validate.

A very common (and fairly safe) pattern is a left algned bold Label, and a left aligned value in a regular weight.

enter image description here

You can do right aligned, but here's a thought from designer leader LukeW, in his book Web form design. Note the bold text in the quote.

Granted, he's talking about forms, but you also have label-value pairs, just in a static state.

He writes that in forms:

Right-aligned labels also have the advantage of close proximity between input field and label and, as a result, are quick to complete (see Figure 4.6). The resulting left rag of the labels in a right-aligned layout, however, reduces the effectiveness of a quick scan to see what information the form requires. In the Western world, people read from left to right, so their eyes prefer a hard edge along the left side.

It's easy to scan the labels when they are left aligned. There's also no need for a colon if it's not part of the value. It just adds extra visual noise.

0

Another format to consider...

label right format small italic

Here the label is to the right of the value and formatted to be referential but not detract from the value it refers to.

Here's why...

The primary purpose in a block of information such as this is to locate and read the value. The only purpose of the label is to locate the value. Giving emphasis to the value allows, with experience, internalization of the location of particular values, reducing and even eliminating the need to cognitively process the label.

The difference between a block of information and a form is in the form the value is undetermined—there's no value expressed to help identify the type of the value, so the label is an essential part of determining a type value. Whereas a block of information has the values, and in many cases the type is self-evident.

The label is not always necessary to locate the value. In this example, the Last Reported date value is distinctive—the type of value is self-evident and the user quickly learns what kind of date it refers to and thereafter does not need to use label. Even the Serial Number and IMEI, although similar constructs, the user will learn, with use, the Serial Number is first and IMEI is second.

The technique here is to de-emphasize the label:

  1. Place after the value.
  2. Make the font smaller.
  3. Italicize.

 

Other options:

label right formal small parens

label right format small

label right format small ghost

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.