2

Should the main content of the screen (a layout of cards) be scrollable, when a modal window is open (without any overlay)?

What about the solution like this: when the modal window is open, the main content is frozen, but the content of the modal window is scrollable horizontally. It will contain a number of cards, displayed in a horizontal stream (see the picture below). And when clicking outside the modal window, it will close automatically.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • What is the relationship between the modal and the main content? – jazZRo Jul 5 '15 at 9:22
  • There are 'stack cards' in the main content layout. When clicking on it, this pop up window opens to show the cards in the stack – katya Jul 5 '15 at 9:53
1

There may be quite different user behavior on different devices. While it is quite easy to use the vertical scroll bar of a desktop web browser, on tablet the user would probably tap the background area that would lead to closing the modal window. Generally, I find better to freeze the background content where possible and let the user focus only on the popup.

Horizontal scrolling of the modal window content will be ok in most cases (especially if you add swipe actions for touch devices), just consider if a horizontal scroll bar is needed or if the side scroll buttons are enough. The scroll bar may be useful if there is lot of content in the modal window.

1

Should the main content of the screen (a layout of cards) be scrollable, when a modal window is open (without any overlay)?

In ordinary cases nope, cause after closing modal view I want to start from the last point in the screen. But sometimes you need different decision. From the top of my head, you can see live stream of news and at the bottom of the page keep open modal view with hot topics of the day - so in that situation users need be able to scroll lifestream content. It depends from ur case.

What about the solution like this: when the modal window is open, the main content is frozen, but the content of the modal window is scrollable horizontally. It will contain a number of cards, displayed in a horizontal stream (see the picture below). And when clicking outside the modal window, it will close automatically.

Horizontal scroll may confuse users. I promise that they'll use arrows for navigation. Moreover, as a mac user I've a lot of problems when I use horizontal navigation via trackpad, sometimes it works as 'go back'.

1

To quote Wikipedia:

In user interface design, a modal window is a graphical control element subordinate to an application's main window which creates a mode where the main window can't be used.

Generally speaking, a modal window, by definition, takes complete control and one isn't able to interact with the content in the background--including scrolling.

Of course, there is no law stating this. That's merely the traditional implementation. So if you have a really good reason to allow the background to scroll, by all means, go for it.

As for your proposed solution: I think that's exactly the standard modal implementation...only content within the modal is scrollable, and you can dismiss it by interacting with the background outside of the modal window itself.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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