Combining multiple pieces of data into single column

Question

I am currently working on a program that will involve a grid like control on the main page. There are a few pieces of data that the user wants to see that are closely related (i.e. a unique ID for a person as well as that persons name). My initial idea was to show both pieces of data in one column but this leads to some technical difficulties when it comes to sorting, filtering, ect.

Is this even appropriate or should I keep the data as separate columns? Because of the nature a lot of data is needed in the grid and I was trying to save space as much as possible.

Answer 1

What i tend to do in some cases where i have too much data to show than the table can hold, is only show the most important data in a row that is expandable like an accordion. The other data is only shown when the user clicks on that row to expand it, a bit like this.

A good article on this is: http://www.jankoatwarpspeed.com/ultimate-guide-to-table-ui-patterns/ with a very valuable add-on from Theresa Neil: http://theresaneil.wordpress.com/2010/03/08/ultimate-guide-to-table-ui-patterns/

I hope this might work for you. Success!

Answer 2

Don’t combine multiple data fields in one grid column. Additionally to the sorting/ filtering problems you mention, the data will not be aligned. Non-aligned data are difficult to scan.

In your example, if the ID has variable length, the starting position of the name will vary. This will make vertical reading of names difficult for users.

Alternative option for saving space

If you want to save space, a better option is to make the width of some grid columns less than the maximum width of the data field.

Choose a grid column width so that at least 85% of data fit. For the remaining data use a tooltip on mouse over to display the full field. This works best for data fields that the user can infer the full data by seeing only part of it, e.g. code descriptions.