Ragged edges vs. alignment

Question

In an enterprise application I have a list of items and their statuses, and we can't agree on the layout.

Some people are bothered by the ragged edge that's created on the left in the first version. They insist on aligning the statuses to the right.

Others are bothered by the distance that's created between the items and their statuses in the second version, and they insist on the first version.

Other options like moving the status to the left of the names or creating a dedicated column a bit to the right of the names have been considered and dismissed.

Each line has a good visual frame of its own and they're pretty wide apart (vertically), so even if the statuses are moved to the right, it's very unlikely for users to misalign a status to the wrong name, so that's not a concern.

This takes up the entire width of the screen.

How can we settle this?

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

Answer 1

"How can we settle this?"

You can get everyone in a room, give everyone boxing gloves and the last man standing wins!

Or...

Do two designs and split test them. Have the end user decide which is better. You can debate it all day long (as I'm sure you did today) but in the end, nobody will be right and nobody will be wrong. So, if you have to satisfy multiple people in your company, take the decision making process out of their hands and give it to the people that really matter...The customers.

p.s. if you want my opinion, start the statuses at the farthest most edge of the name column i.e.

name          [status]
long name     [status]
longest name  [status]

and then zebra stripe them

Answer 2

When I do something like this, I make those two a table, bold / right-align the left column, and then it looks nice and even. The result ends up being something like this:

Answer 3

Paul's solution is great: left aligning both the first and second column.

Alternatively, you could go for smaller labels, and divide the information into separate columns.

Answer 4

There are opinions on this topic, and there are a lot of guidance to it. From a readability perspective based on science (I was told in my bachelor education), you could also use the one line approach. This means that you center your name/value pair along a single line instead of two lines.

Reading this content downward the user only has to follow one line and don’t have to stretch nor guess which label belongs to which content. The blue line in the following mockup represent that (and shouldn’t be present in production).

A study of eye tracking data from an article by Matteo Penzo called Label Placement in Forms (July, 2006). Matteo drew several conclusions from this study, including that right-aligned labels have a lighter cognitive workload for users:

Alignment of labels—in most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.

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

Now, you don't have input fields in your outline, but I'd say it's safe to say that a highlighted value to the right is as close as you get to a real input field.

Answer 5

I completely agree with @PaulDessert. A/B test the two against a user sample and see which sticks.

Personally, I think neither are ideal. The ragged edge is hard to read, while the right-ranged visually associates statuses to secondary content (which I don't think you intend).

That said, my eye is drawn to #2 and, if you were to do that, I would either zebra stripe the rows or put in subtle range markers b/w text and label, eg Name........................... [Status] |-----------| Longer Name............ [Another Status] | Secondary | An even longer name........ [And Status] |-----------|

Answer 6

Your second option is perfect for eyes fitness, but could slow down information processing.

In typography they call this River effect and try to eliminate it:

A carefully composed text page appears as an orderly series of strips of black separated by horizontal channels of white space. Conversely, in a slovenly setting the tendency is for the page to appear as a grey and muddled pattern of isolated spats, this effect being caused by the over-widely separated words. The normal, easy, left-to-right movement of the eye is slowed down simply because of this separation; further, the short letters and serifs are unable to discharge an important function—that of keeping the eye on "the line". The eye also tends to be confused by a feeling of vertical emphasis, that is, an up & down movement, induced by the relative isolation of the words & consequent insistence of the ascending and descending letters. This movement is further emphasized by those "rivers" of white which are the inseparable & ugly accompaniment of all carelessly set text matter.

As name−status pairs suggest sequential reading, I think it worth to consider Rivers effect. In your second UI rivers become ocean, so I'd prefer other layout.

Another disadvantage is caused by proximity from Gestalt principles. Currently names and labels look less related.

Paul's solution fixes these issues and has good aesthetics.