Multiple similar tables with varying column widths

Question

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.

^{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?

Answer 1

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.

^{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.

^{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.

Answer 2

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.

Answer 3

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