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.

When multiple forms are displayed on a page that display the same type of data, grouped into categories, is it OK for the columns in each table to be varied or should fixed widths be used to enforce consistency?

E.g.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

EDIT:

The same columns will be shown on all tables, the data will be very similar, just grouped together depending on the area they are relevant to. (One could imagine a single large table with a column containing area)

I'd like to change my question slightly and ask is it BAD for columns to be of different widths like this? Do users actually notice or do that look at tables in isolation?

share|improve this question
    
It depends on what are you using the columns for and how. If your user ends up resizing columns every time they see this form then you need to reconsider the sizing. This also depends on if the form itself is resizable and if the columns resize with the form –  Sten Petrov Mar 21 '13 at 21:43
add comment

3 Answers 3

up vote 9 down vote accepted

Users will notice.

Interfaces that display the same information in different ways increases the cognitive load placed upon the user which makes the experience inefficient.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Allowing the user's eye to track vertically along a continuous line is a visual guide you provide which tells them that all of those values are related.

The white space between the tables shows the user that there are distinct groups of data, but that the data is of the same type ("name", "age", "nickname", etc.).

The combination of linear alignment and grouping makes clear visual cues that helps the user easily identify and put into context data on the screen. This is a lower cognitive load than if the eye has to zig and zag from group to group.

mockup

download bmml source

While the user may choose to resize column widths, by defaulting to uniform column widths you are giving your user an easier to use interface that they can then choose to alter if they wish.

share|improve this answer
add comment

If each column contains the same kind of data then why not use one large table?

This table could have different sections, using <th> elements in rows for section headers. You can style these headers as you wish, adding the right visual attention to each section start.

By doing this the consistency will be in the semantics, not in styling only. The cols will get the same width.

W3C has some interesting examples: http://www.w3.org/TR/html401/struct/tables.html#h-11.4.2

In general: do not force a consistency in form that is not there in meaning. So totally different tables with totally different data in it could have different column widths. Forcing columns to have the same width when there is not any relation between them sends out the wrong message. Users have the right to know what they are looking at and should not be tempted to make false conclusions, based on visual hints.

share|improve this answer
    
This is likely how I shall go about it. Will need to see how much it effects the styling but I do like the consistency in semantics. –  AverageMarcus Mar 21 '13 at 22:36
1  
Given the question asked for solutions based on multiple tables, can you expand your answer to include what to do with this variation? As this answer does not fully cover the question as titled, nor in the body - both using what to do with "multiple tables"; so, someone seeking that specific answer will see that combining the tables is the way to go. While it is a good suggestion/recommendation, it does not actually answer the question as posed. Just a request to expand the answer. –  Josh Bruce Mar 21 '13 at 23:29
    
JB, thanks for the request. After reading the case and having looked at the visuals I interpreted the question the way I did: "Multiple similar tables with varying column widths". Exactly as the question is formulated at the moment. This way my answer fits the question, IMHO. I added my general view on consistency over different tables. –  Aldous Huxley Mar 22 '13 at 9:13
    
@JoshBruce Based on that (thinking of other coming to the question) I am going to accept Charles answer as it will likely be most suited to other peoples needs regarding similar problems. I'd like to point out though that this answer is the solution i will be implementing. –  AverageMarcus Mar 22 '13 at 16:19
    
@AverageMarcus - No doubt, and thank you. While our answers were similar, even I did up-vote Charles's answer because it was much more succinct and thorough (with illustrations) than mine. Thanks again. And, I am glad you did get a solution that worked for you. –  Josh Bruce Mar 22 '13 at 16:34
add comment

If the tables are displaying the same number of columns, I would say it's a better experience to have a shared width of the columns; however, if you are displaying a different number of columns, probably not so much.

If the tables were not groupings of a similar nature - using the same column widths may actually be a negative experience, because people have a tendency to see patterns as being the "same".

Do they look at tables independent:

To find out the absolute answer - you would want to test your specific users. Having said that, it depends on how they are styled or chunked - to put it in a general terms.

If you have 5 tables vertically down the page - each with the same number of columns - with no more spacing than what you have in the mockup, your users will most likely group them together as being similar (which may be good or bad - it depends on if you want them to consider the data to be similar or not). If you have one table placed on one side of the page and another on the other, with a different number of rows and/or columns - then probably not.

For the wireframe you have - it is "bad". However, the users will probably see table one containing information from category 1 and table 2 containing information from category 2.

But, the rule of thumb still applies. Tables lined up in the same vertical space - with varying column widths - despite having the same number of columns, break "the grid" - and will most likely cause the user's brain to do a little hiccup; or, think it was unintentional.

I hope that helps clarify things.


http://www.andyrutledge.com/eye-paths.php

share|improve this answer
    
I've updated my question slightly. –  AverageMarcus Mar 21 '13 at 21:08
    
Updated answer to question –  Josh Bruce Mar 21 '13 at 21:38
add comment

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.