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 application (though what follows applies equal well to a report) there will be a panel which shows a list of various statistics or facts, of this general form: "Category: data". So, for example:

Date since last exam: Jun 15, 2009.

My issue is that I would like to diaplay perhaps about 10-20 such stats/facts in the panel, one fact per line/row, in a way that looks best (neatest, cleanest). But, as I began to do it, I realized there are quite a number of choices of how one might align the words:

  • Align the start of each category only.
  • Align each colon and start of each data only.
  • Align the start of each category and also Align each colon and start of each data
  • Etc...Etc...

What's important to note is that the total length of each line--category name + colon + data--will vary, sometimes quite a bit. Therefore, each of these alignment choices has a different look, but not one of them provides a list of statistics that looks particularly pleasantly even/balanced.

As an example, see this image:

enter image description here

Keep in mind, in this example, all but the last category ("Turn of the century average") are similarly long, but with my actual list of categories the lengths will vary all over the place, and produce a very "ragged edge" look to the list. It really doesn't look neat so far.

My question is: what is the "best" way to align things? Is there a standard? Or, alternately, is there a better way to present this sort of data?

share|improve this question
    
I asked a similar/related question here ux.stackexchange.com/questions/7938/… Got some great answers. –  Richard DesLonde Sep 18 '13 at 4:35

1 Answer 1

up vote 5 down vote accepted

If this is your actual content, you need to change 2 things in the copy:

  1. Annual instead of yearly (just sounds better).
  2. Centennial instead of turn of the century because turn of the century doesn't mean a precise amount of time but '00 +/- 5 years.

With these changes, the width of the left column will be more even.

Now, in terms of layout rules, they are the same as with forms because you're laying out labels and corresponding fields:

  • make sure the distance between columns is manageable (like No. 1);
  • don't right align left-to-right text when it takes up multiple columns (like No. 2);
  • don't introduce empty lines because of broken-up text (like No. 2).

Versions No. 3 & 4 are both usable but depend on the intent. Extrapolating from LukeW's analysis of forms, No. 3 is better when users need to scan for outlying values and No. 4 is better for scanning labels.

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.