1

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 .

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 2
    Everything totally depends on how large your content(num of rows or columns) is. – divy3993 Dec 23 '16 at 8:18
  • @divy3993 For my case specifically, there will only be 3 rows and at most 6 columns. – watermelonseed Dec 23 '16 at 8:38
  • Could you be little more specific? – NB4 Dec 23 '16 at 8:47
  • @NB4 Basically just wanted to know when should we use design one and when to use design two in order to have better user experience. – watermelonseed Dec 23 '16 at 8:55
  • i think depend on what the devices, either mobile or desktop view. For an example In mobile view table is a scary things though which you should remove some unimportant field and change the table form into card type to make sure it will fit the screen. – Rob H. Yamin Dec 26 '16 at 16:40
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 :

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Design Two

mockup

download bmml source

mockup

download bmml source

0

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)
    1. 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.
    2. 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)
    3. 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.