Placement of table header

Question

Is there any guidelines that describe which way of displaying header in the table would enhance better user experience?

Design One is the more common design but Design Two would save user from scrolling down when the content is huge.

Would like to get some advice on which is better in sense of UX usage .

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

Answer 1

Here is my viewpoint.

I would prefer Design one. The reason is it would be great always whether data is long or short. If data is too long then when user scroll it only data fields would be scrolled and header would remain fix. if column value is less and column is more then design 1 will occupy less space.

In design two, if header fields are more but contain less data then it would be not user centric as per user experience. if data is more and header fields are less then also it would create lots of disturbance to understand the table data.

If you not getting it then see below example : Design One :

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

Design Two

^{download bmml source}

^{download bmml source}

Answer 2

I would go with design one (headers on top) for several reasons.

1. Tradition: users expect this format and showing a different option may be confusing
2. Sorting: seeing which column the data is sorted on is easier when the header at the top of a column visually indicates which column is sorted and in which direction (ascending/descending)
   3. Scanning: visually any column that is sorted is easier to scan to find what you are looking for. Eg if names, in sorted alpha order... if I'm looking for "Jon Skeet" I know that "J" comes after a,b,c...g,h,i so I can very quickly scan down the left edge of the column to find the "J"s and spot Jon. This applies even more so for numbers and prices.
   4. Typically you will have more rows of data than column headings... scrolling up/down on a desktop is much easier than horizontally (especially when some OSes/browsers use horizontal swiping gestures to navigate back/forward)
   5. Expanding data, if you have grouped data in your row (or column if design two) than can be expanded to show child objects, exposing it as indented rows below the parent row tends to be much more intuitive to users.

That all said if you have a small grid (like a product matrix) where you have only 3 or 4 columns/rows to show, with no sorting... if using the first column of headers makes more sense that's fine too.