Maximum number of table columns in from UX point of view

14 Oct 2011 - 5:00am
1 year ago
4 replies
559 reads
Adam.Dew
2011

Hello,

Does anyone have any clear UX  guidelines on the number of columns to use in HTML tables. Current client wants upwards of 25 columns!! They just don't seem to understand the UX implications of this and why we need to reduce it.

Also, has anyone come across any nice methods of presenting tables that have a fixed left column but a tabbed X-axis? I.e. we shrink the 25 columns into 2/3 tabs hiding some of the content until a tab is selected??

Appreciate any recommendations!

Adam.

Comments

16 Oct 2011 - 10:05am
frank dahle
2007

Why use a table at all? Create a multi line list in stead, in which you select the 5-8 most important data elements visible while the rest are behind an expand function (a button or just Enter). This one of the patterns that mobile app design has made common, that really works on a large screen too. You can have long lines combined with short ones. Much easier to read, study and to pick from.

16 Oct 2011 - 2:38pm
Adam.Dew
2011

Thanks Frank. I do like the expand interaction on list style content, especially when used in Mobile design. However, we can't use that here because it is tabular data (X and Y axis layout) and a different kind of interaction. There really isn't any other way to present it.

16 Oct 2011 - 10:08am
Paul Eisen
2007

Adam, here are three clear design guidelines for table columns:

  1. Provide a default view of the table such that the number of columns does not cause the user to have to scroll horizontally in the target browser width. (The target browser width would be something your would decide based on predominant access devices and resolutions) [Rationale: Horizontal scrolling is generally clumsy and often hides key fields.]
  2. Enable the user to personalize their view of the table (either through other pre-configured options or by selecting individual columns). [Rationale: Leave the user in control.]
  3. If the user selects a configuration that will cause them to have to scroll horizontally under their current browser, provide a warning in the configuration dialog. [Rationale: Provide feedback as to the consequences of user actions.]

 

Hope this helps.

Paul

16 Oct 2011 - 2:46pm
Adam.Dew
2011

Thanks Paul, that helps a lot. I have decided to go with seven columns (left column is fixed) but also hiding 3 further content types behind 3 tabs that each change the 6 columns (left column remains fixed). I have also gone with a 'change columns' function to give the user some control over the columns used which just changes the column headings into drop downs, and an advanced 'filter' feature completely tailoring the content of the tabel. We'll see how it stands up in testing but it seems to work first hand...

Syndicate content Get the feed