1

Let's say you are building a website and you want to display 2 related sets of information.

The first set is often brief while the second set is the detail. Ex: table of content vs article, product brief vs product detail, movie introduction vs movie details...

If your boss wants to display both set of information on one webpage, then how you design your page?

In my opinion, there are 2 ways to design this, supposing the height of the screen is 700px:

  • Option 1: put the first set of info into a top fixed panel (height = 350px) with a scroll bar & then put the second one a bottom fixed panel (height = 350px) with a scroll bar. See this picture. enter image description here

  • Option 2: Put both sets into one fixed panel (height=700px) with scroll bar like this picture

enter image description here

For Option 1, the first set & second set are separated, so the users can see 2 parts separately

For Option 2, they see all of the first set. They may need to scroll down to see the second set.

Which option is simple & brings the best user experience to the users?

Improve this question
2
  • Would be helpful to have a little more background information. For instance, the first set of info is this going to be a list of different things and depending on what the user selects in updates the 2nd set of info?
    – Jason Frade
    Sep 30, 2013 at 20:10
  • yes, that's right
    – Akaren
    Sep 30, 2013 at 21:59

2 Answers 2

Reset to default
2

When taking into account the interaction between these two sets of information I would go with an adapted version of Option 1.

With the first set of information having a greater importance over the second set (i.e. you must choose the article from 1st set in order for the second set to update) having the 1st set appear in the users line of vision first is more important.

My suggestion would go with a option similar to Apple Mail where the articles list on the left and the content appears on the right.

apple mail

The reason being that vertical space is more important to a user reading any type of content versus horizontal space. So by stacking the two sets of information on top of each other you are taking away that horizontal space.

Also by stacking them side by side it allows you to show the user more articles in the 1st set of information, potentially resulting in a lower bounce rate.

Improve this answer
2
  • my one is not the article title-article details, it is a a tree-table detail of that tree. So if I choose vertically then the width of the tree+ the width of the table may be too much as some users only have 1000px width in their screen, so i am still not sure i should go vertically or horizontally.
    – Akaren
    Oct 1, 2013 at 13:49
  • i think i can go horizontally , if it take too much space then i can build a simple icon to hide & unhide the 1st panel, it will be more effective than doing vertically since user has to scroll up & down quite a lot due to the height is quite short
    – Akaren
    Oct 1, 2013 at 16:40
1

Keep in mind the Gestalt principle:

Elements grouped together give the perception of being associated with one another.

If your information is the same, do not group them off on their own, for that will cause confusion as to what will be associated with what.

I think option 2 could work for the layout that you're doing. However, if you were to go with @Serg 's suggestion, that can help because they are grouped together, just in a different way.

Be mindful though: people's eyes can easily group elements if you section them off, concluding in their heads that these elements belong to their own respective groups thus comprehending them as different from other groups.

Your option 1 gives the perception of the two information fields as being different, but you explained them as being the same.

The first set is often brief while the second set is the detail. Ex: table of content vs article, product brief vs product detail, movie introduction vs movie details.

I suggest option 2 if the information is the same.

Improve this answer
2
  • i am not sure the 2 set of info are the same. My Info set1= a tree, my info set2 = a table of that tree. Actually they hold the same info but the way they present info is different, one uses tree & the other uses table. So i think option 1 could be the right one cos if tree & table go into 1 panel then user may need some extra time to separate them into 2 separated groups since tree & table r 2 different things though they present the same info.
    – Akaren
    Oct 1, 2013 at 14:11
  • Not necessarily. If the information is associated with one another, don't separate them, it might make it confusing.
    – UXerUIer
    Oct 1, 2013 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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