Two separate areas on the same page with separate scroll bars?

Question

On a home page I have two modules with a content that doesn't fit within the fold of the page: the main content and notifications on the right side. So I have some options:

1. Two separate scroll bars for each module. But then it will look strange if I have a scroll bar of the main module almost in the center of the page.
2. Only the main module has scroll bar on the right side of the home page (as usual). The user can see only a limited number of notifications, and the full list of notifications on a separate page (I have this notification page anyway). The notification module of the home page is floating and always visible when scrolling.
3. Each module (main module and notifications) are placed in a kind of a container. So visually, it will look more logical if each of the containers will have separate scroll bar.
4. Use hidden scroll bars. Both modules are scrollable, but the scroll bars are not visible even while scrolling. (Not good idea, since it doesn't give the user to feel the control)

Which one seems better? Any other ideas?

Answer 1

I think this would really need user tests. Without that information and if I understand correctly I would opt for:

A- Most users use the notification panel and don't frequently click on show more or they just do it a few times (let's say 2/3)

• By default scrollBar just for the main page.
• By default show some limit amount of notifications.
• If the user clicks on show more, load more notifications and show the scrollBar for this section.

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

B - They click show more a lot of times

• Add a Show all link would be a good idea.

^{download bmml source}

The advice I would give is: the design must be based on the desired functionality, aside from the advice we could offer you here, the best design will be the one that works better for your specific users so you have to get that information (i.e. test users!)

Answer 2

First, I would definitely not go with option #4 for the reason you outlined. I have to ask, without being able to see exactly what you are talking about, is there a reason it's a problem that the content doesn't fit within the fold of the page? Is there a lot of content and it would just stretch the page too much?

Out of the choices, mine would be #2. That limits it to one scrollbar and reduces the amount of clutter with the ability to see the full listing elsewhere. When in doubt, have as few scrollbars as possible.