How should I design scrolling on my web site?

Question

I'm redesigning an old reporting application for the Web, - previously it was a Windows Application. I have in mind two approaches, and I do not know which one is preferable for the users, so I hoped to find an answer here. The layout looks like this:

• The red part represents a navigation bar menu that allows users to go through different parts of application, like reporting, configuratione etc. Currently I am discussing only reporting.
• The green part represents a side navigation bar and allows users to select a report. They are added by the users, so can be many.
• The blue part represents the report result itself. It can be very long, easily containing 300+ plots.

This design was used in the old application and in order to support the switch for the old users, we are stuck with it.

The question is how do I design a scrollbars. I have two approaches:

Scrollbars are marked as white in the next pictures

Have scrollbars per layout as in old application:

There is no page scrollbar, and instead each layout has it's own scrollbar:

Or have a single scrollbar and long page as in most web sites

The red menu is stuck on top and green and blue scrolls together

I prefer the first option as it is closer to what the old application was, but it feels not very web-oriented. Am I right if I go with the first option? Are there any good examples like this over there in the web?

Answer 1

The advantage to your first example is that you can keep the main content scrolled to your preferred view, while being able to move around in the navigation without disrupting that view. The other advantage is that if your main content is very long, you'll still have quick access to the left nav without having to scroll back up.

On the other hand, most web apps I can think of use the second model. (Including this one, Stack Exchange). The advantage of this model is that it's simpler to scroll a single pane, it's a simpler look, and it's not usually a problem to scroll back up.

Most of all, it depends on your goals. You could try asking your audience, or measuring to see if your goals are affected. For example, measure to see if engagement level with the navigation correlates with which layout is used.

Answer 2

As you mentioned, if it is a reporting application, I am sure user want to see statistical data/grid/charts/figures etc.

I recommend that it should not scroll, only the important data should be displayed at once.

For example

1. Data grid/table - use pagination
2. graph/chart - use "load more" or filtered views (based on the day/month/year)
3. Numbers/figures - use tooltips (large tooltip with the detailed data)

All the information should be organized based on your user need. But, as you are re-designing use best practices such as minimize scroll bars, etc.

try some dashboard/report application example on internet to get more ideas.