Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this question
    
When you say "people" who are you referring to, users or developers? –  DarrylGodden Jul 31 at 7:18
1  
I would say that you could use the same guidelines as for form fields. Eg: ux.stackexchange.com/questions/8480/…. –  Jørn E. Angeltveit Jul 31 at 8:13
1  
@Vitaly: OK. Thanks for the explanation. –  Jørn E. Angeltveit Jul 31 at 8:47
8  
Why has a dedicated columns for the statuses been dismissed? –  Nate Kerkhofs Jul 31 at 10:34
1  
@VitalyMijiritsky: Then set a limit on the left column. If it's too long, cut it off and put an ellipsis, then use a mouseover to reveal the rest of the text. –  Aaronaught Aug 1 at 14:59

6 Answers 6

up vote 34 down vote accepted

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:

enter image description here

share|improve this answer
    
This format is common in Apple's mobile designs. –  Milo Aug 1 at 20:44
    
@Milo Cool, I never would have guessed. It's just something I picked up from a coworker once. –  Seiyria Aug 1 at 22:00
    
An example I can think of is in the App Store under the information for an app. –  Milo Aug 1 at 22:09

"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

share|improve this answer
2  
Other options like ... creating a dedicated column a bit to the right of the names have been considered and dismissed :). –  Vitaly Mijiritsky Jul 31 at 8:02
8  
Again, do multiple designs and let the end user choose. Design by committee always ends in disaster. –  Paul Dessert Jul 31 at 8:13
1  
"Let the user choose"? Really? You're supposed to do usability tests and gather actual data. If you're just going to ask the user for an opinion then you might as well forego the tests. –  Aaronaught Aug 1 at 14:58
3  
@Aaronaught - Understood. However, I donate my time here, I'm not getting paid. I do my best, but I'm busy. Read the answer "Do two designs and split test them". It's pretty clear what I'm advising. –  Paul Dessert Aug 1 at 17:04
4  
@Aaronaught It is perfectly clear to me, too. He refers to a "split test" which cannot reasonably be interpreted as a "survey." It is a type of A/B testing. Just because you misinterpreted doesn't mean what he wrote was ambiguous. It has been understood correctly by at least 30 people at the time of this comment. I think it is reasonable for him to conclude that your confusion is an isolated case and thus not worth editing the answer for. If you feel so strongly, why don't you edit it? –  trlkly Aug 2 at 13:54

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.

enter image description here

share|improve this answer

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.

mockup

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.

share|improve this answer
    
Benny, you're talking about forms, please see my answer to Jørn. –  Vitaly Mijiritsky Aug 1 at 12:05
3  
@VitalyMijiritsky I know and I wrote it at the end of my answer. But because of the layout of the statuses I believe it is still valid för your design when it comes down to readability. Following one line instead of two puts less cognitive load on the user. –  Benny Skogberg MCSA Aug 1 at 12:24

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.

enter image description here

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.

share|improve this answer
    
A river effect is when you have a vertical streak of white inside a block of text. Having some content on the left side of the screen and some more content on the right side does not mean that you have river effect there :) –  Vitaly Mijiritsky Aug 2 at 20:21

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] |-----------|

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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