Why websites usually block the navigation interaction when under a full screen overlay?

Question

I'm working on a research project of web navigation. During research, I found that when there is a full screen overlay, websites tend to block the interaction of the navigation bar. Like web Twitter, when you click on a image, the site overlay block the whole page. I can no longer search or go to other page at this point. I was wondering if there is a purpose of this approach? Many thanks!

Answer 1

Let's look at the example you cited: Twitter's tweet modal

The full-screen background overlay here serves two purposes:

1. It helps focus the user's attention on the modal by visually dimming non-essential content.
2. It blocks non-essential interactions.

The second purpose is what you're asking about specifically. Here Twitter has made a decision that clicking the "Tweet" button, navigating, or searching are not interactions the user should be concerned about right now. Instead they should focus on a specific set of actions: namely, Reply, Retweet, or Favorite.

Twitter's overall goal is for you to either create tweets or interact with other tweets. By focusing you on key actions, they've reduced your cognitive load by limiting your options. You're now able to more quickly discern what actions are available to you and then what you like to do next.

A person can achieve all of the previously actions (Reply, Retweet, Favorite) from the feed. Clicking on individual tweets allows users to focus on a certain action items and/or content. Previously Twitter used to take users to a stand-alone page if you visited a specific tweet link. They've changed that now to take to the user's profile and display the tweet there. It has the advantage of focusing your attention on a particular tweet, but then allowing you to quickly exit the modal and start viewing other tweets by that user. Their goal here, again, is continued engagement. A stand-alone page is a dead-end experience.

Answer 2

That´s a very common implication of modals - one task at a time.

-Background to understand the context for modals.-

Applications can be too overwhelming for users and guiding them to do one thing at a time reduces the amount of workload, hence the thinking process which reduces processing times and overall experience with the platform.

Hick’s Law: "The law states that the more options users are exposed to, the longer it takes them to make a decision. This means that the more options you give to users, be it products to choose or pictures to look at, the more time and energy it takes to make a decision about the next step of interaction. The possible result here is that the users make the choices but get unpleasant feelings after using the product, or in the worst case, they may not want to take such a significant effort and just leave. That’s why designers are recommended to keep any options including buttons, pictures, pages to a minimum. Removing unnecessary choices, you make the usability of the product more effective."(1)

To understand the importance of darkening the background to highlight the active modal:

Gestalt Principles: "Figure/Ground. This principle demonstrates the eye’s tendency to separate objects from their background. There are lots of examples of pictures that shows two faces depending on where your eye is focused the object or background." (1)

Now regarding the specific question:

Definition of Modal: "A modal dialog is a dialog that appears on top of the main content and moves the system into a special mode requiring user interaction. This dialog disables the main content until the user explicitly interacts with the modal dialog." (2)

On the other hand

Definition of nonmodal (or modeless): "Nonmodal dialogs and windows do not disable the main content: showing the dialog box doesn’t change the functionality of the user interface. The user can continue interacting with the main content (and perhaps even move the window, minimize it, etc.) while the dialog is open." (2)

So by understanding the different elements available to present information, and taking into consideration best UX habits and design principles, the main purpose of a modal is to get the user´s attention on a specific window of the platform while disabling any kind of "distracting" or unrelated elements that could create confusion or increase the processing times to complete a certain task. It is important to mention that the background of the modal still allows you to see the main page in case you need some contextual information to understand where are you standing on the platform. (e.g. you are on your profile but editing a specific element and unable to interact with other elements of your profile)

(1)https://uxplanet.org/psychology-in-design-principles-helping-to-understand-users-10bcf122f4b0 (2)https://www.nngroup.com/articles/modal-nonmodal-dialog/

Answer 3

The goal of overlays is to steer your attention towards whatever the website deems its primary action to be; e.g. sign-up for newsletter, view images, registering etc. Some sites use this as a way to block access to their content, like LinkedIn or Pinterest; you can see a glimpse of the content behind the overlay, but you are forced to do whatever the sites wants you to in order to actually start seeing the content. Other sites use similar overtaking overlays in order to fully divert your attention to the purpose of the overlay, like viewing images. The use of navigation in these cases is undesired, because they enable users to simply skip whatever is going on in the overlay.