User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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:

enter image description here

share|improve this question
Could you post a sketch or screenshot of what you're currently doing and/or what you're planning to do? – PhonicUK Feb 18 '13 at 15:32
I just did that :) – Cristian Feb 19 '13 at 8:06
up vote 4 down vote accepted

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.

share|improve this answer
Thanks. It makes sense that further tests should answer my question. But I was wondering if someone already did that tests and concluded something. By the way, I uploaded some sketches. – Cristian Feb 19 '13 at 8:04

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.

share|improve this answer
The other elements are not usable or visible enough (the transparency of the modal 'curtain' is only about 20%). So the scrolling inside modal made sense to me initially. – Cristian Feb 19 '13 at 8:06

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:

Google search with additional information displayed

Hope this is helpful.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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