Scrolling inside overlay or on the whole page

Question

I have this web-app that has mostly web pages with search results (such as google is), so there's scrolling normally. But I have this scenario that you can open an overlay that shows additional content. The idea is that the content is complementary to the one shown by default, and showing the new content by navigating to a new page could break the flow of exploring the other search results.

Initially I made the overlay so it's always in a fixed position, occupying about 90% of the screen's height. If the content overflows, scrollbars are added inside the overlay (behaviour similar for a popup window). The content sitting beneath the overlay cannot be scrolled.

I want to add that the rest of the page is behind a transparent black curtain, so one cannot really use the content beneath directly without closing the overlay.

Now I received feedback from a user that this is counter intuitive and the user would expect the whole page to move when scrolling.

So I'm asking myself, and all of you UX experts, can you guide me in what makes most sense:

1) When the overlay opens, scrolling should be done only inside the overlay and the rest of the page should not move until you close the overlay.

2) When the overlay opens, the content in the overlay expands as much as it needs to, making the scroll action perform on the whole page, including the content beneath (that is shadowed by the curtain)

I hope I made my question clear enough. If not, let me know and I'll post some sketches.

Update: As I promised and you guys requested it, here are some sketches that hopefully illustrate my question:

Answer 1

Since you're basically using this as a modal (that's what I assume the "black curtain" is for), it makes sense that scrolling would scroll only the modal. (By definition, a modal dialog should block you from interacting with anything else.)

That said, the user's opinion is more important than mine. If you only had one user say this, I'd find a few more to test with and see if you get that feedback consistently.

Sketches would also be helpful; the nature of the interaction is a little unclear as-is.

Answer 2

Scrolling with modal dialogs largely depends on the type of modal dialog.

If it's a full screen dialog (i.e. it takes focus away from any other elements on the page) then I'd expect scrolling to only affect the modal dialog. It might look odd however if the rest of the page is too visible, so I'd be inclined to hide it or fade it out.

However if it's not full screen and other elements of the page are still usable, then I'd expect scrolling to scroll the entire page.

Answer 3

This doesn't really answer your question, and I was just going to leave a comment but I cant attach a screenshot there so here goes.

Besides what has been said already I think that it is worth saying that a modal can disrupt the users flow as well due to the blocking nature of the action. Maybe displaying what you have in the modal in a different way would solve this problem by solving the larger issue of how to display supplemental information on an item without taking the user out of their current context.

My suggestion would be to check out google's search page. If you click on the double arrow next to a result a preview of the website is shown to the side of the page. Here is a screenshot:

Hope this is helpful.

Answer 4

I generally dislike modals. They come with a slew of their own problems including accessibility, responsive issues, and deciding on using unusual internal scrolling is it's own beast. Two things to consider: Fitts law (how far is the user going to need to go to find your modal/internal scroll and the time that might waste) vs. do you care about responsive design/accessibility? Have you considered other layouts or are you just making this decision because it came to mind or is easy for you? Look for similar patterns elsewhere - in use - do you like how they function?

One example of a popular site using modals that function poorly would be YouTube. If you are a broadcaster, YouTube offers modals for making certain decisions about video updates from you manage video list. These things must be done from the main site, which google decided to block the functionality from responsive smaller screens like phones and tablets. Another problem, why would you ever make it hard for your users to accomplish common functionality? This is poor design.

Are you using this pattern any where else? If so, what case studies are there? How can you align with universal design standards/patterns and create common easily accessible components for your users? You are their advocate, so if one user tells you something doesn't make sense - usually you can easily find more users with similar opinions.