Is it better to represent simple labeled information as table or just text with subheadings?

Question

I'm redesigning a website that has some simple information presented as a table like this:

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

I read yet the again the Label Placement in Forms article. The article is a report on eye tracking study and basically says that forms are quicker to read if form labels are place above the fields instead of to left(left-aligned or right-aligned). I was wondering does the data from that article apply to any similar presentation of information? So would a better solution to the table above be simple linear list with headings like this:

^{download bmml source}

I appreciate any pointers to relevant articles.

Answer 1

Your linked article is talking about the relationshiop between labels and input fields. The use case is in there is read, think, type. Input, process, output. And during output (typing) a user may want to revisit reading and label-on-top-of-input facilitates that.

The use case of the information you are presenting is read, read. Or maybe simply read. Very different. Your illustration #2 doesn't facilitate reading. A table has too much unnecessary ink for a 2 item line and also slows reading. (But if you consider the information tabular in nature it would be correct to use a table, but I would either have it not display the grid or make the grid very faint.)

I think JohnBG's suggestion of the format is a good one.

Answer 2

For the most part it is a design issue. But in general I would use a table when there is a lot of information present, and simple text when there is little information presented.

When you present in text, however, you should pay attention to the formatting so that it is quick and easy to tell the label apart from the data. In general I would also keep the labels on the left rather than above the data.

Some rough examples:

Answer 3

Note that in some cases it would be even better to leave out the labels entirely... In your example it can look something like this:

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

Using less wording in your designs will always make the more clear and easy to scan. Images (in the right amount) that will represent repetitive wording will always make the page more easy to read because the eye ignores them while reading text.

That way you will be able to enhance the important information such as the product name and price.

You should also use different font sizes to attract the eye to different data.

Answer 4

From the article we also can see that people just focus on what they need. We know that a textbox is for something usefull towards our objective in the page.

In my personal opinion if the label is too far from the information that represents it to difficult to read; so I think that:

would (...) be a simple linear list with headings

Acording to Jakob Nielsen’s article (I recomend this site 100%), Horizontal Attention Leans Left, so I would also recomend that thouse label where left aligned and put in a way that they look related; and like @JohnGB said, give the lables a different than the content.

Finally, this could help you in a more general way (if you have some pictures in your content). Tunnel Vision and Selective Attention (nngroup.com/articles/tunnel-vision-and-selective-attention/) Sorry the don't let me pots more that 2 links.

Best regards.

Answer 5

Don't mix "Question A" with "Answer B". Labeling a form is something completely different than structuring the output of data. If I got your question right you want to design an output interface and try to draw conclusions from an input interface.

So I'll first try to answer your output related question: when structuring output, a horizontal orientation would be the "natural" orientation because users are used to read texts that way. If you additionally want to put an emphasis on either part of your output by making it bold, red, underlined etc, that's fine – but basically not necessary since you structured your output already by placing the label on one side of the ":" and the data on the other. Often these types of outputs are not even placed in tables. Just a quick example:

Name: John Miller
Job: Designer

Well - and then there are forms and input fields - and I don't want to dig into form design now, but maybe a screenshot of the scenario "labels above fields" might be useful at this point:

Answer 6

I have no links to the articles, but I think that you may look at Amazon, for example:

The screenshot above demonstrates one very important thing:

Let information describe itself. Use colours, currency chars, highlight the name of the product with font style, etc.

It actually doesn't matter how you will layout the labels if you can avoid them completely.

Answer 7

I'm facing a very similar issue. We have a list of articles that appear fall within 5 channels/categories (picture, text, video, etc, etc). They all have labels and headlines. Additionally each channel has a specific list of information like time stamps, date stemps, length of video, word count, image size, kb size, etc, etc. We have a view all page where you can see all articles from the different categories. The problem I faced was that the table columns were very inconsistent from category to category. After some research, I found that the user was most interested in the headline and label, so I stacked them. This makes the layout cleaner and allows for a quick scan.

Example:

LABEL
Headline that is pretty ridiculously long goes here
Time stamp | date stamp | image size | kb size

Additionally, I'm using color and line-height to emphasize the hierarchy of information.

Answer 8

I think you are trying at apply correct rules to wrong elements. Fist thing we need to do is keep the goals in mind.

GOAL: Complete form

The reason why "Labels" over "Input fields" is being used is because we want users to complete the form fast, so they could reach their goals, buy a product, subscribe or register. Also we want user to finish this asap because they can't reach their goal without completing the form.

GOAL: Get information about product

This is completely different goal. Here you want user to spend some time, to analyse the information that is provided. If they are not interested they don't have to read it, its not going to hinder their progress.

I believe there is no right or wrong way of displaying this information, as long as it is easy to understand what is the title and what is the item

Answer 9

This is the first time I've seen the study, but I remember it (or a similar one) being mentioned in a Lynda usability video. If I recall correctly, vertical alignment decreased scanability of the form when fields are not completed sequentially (basically any time the user goes oh hold on, I got that wrong a while back they end up spending a lot more time navigating within the form, arguably enough to offset or reverse the original reading speed increase).

How does it apply to your question? Unless you expect all your information to be highly relevant to the user, a tabular layout may be preferable. Consider this: would you stick nutritional labels into a vertical layout even if you knew they are faster to read? No, because they are impossible to scan and users would hate you:

_{(source: fda.gov)}

Answer 10

Why not have both and give users the option on which one they prefer?