What's (or is there) a difference between a Modal Windows and Modal Window Overlay?

Question

Wikipedia says https://en.wikipedia.org/wiki/Modal_window

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. The modal window is a child window that requires users to interact with it before it can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box.

But sometimes, people are saying «Modal Window Overlay». Why the confusion and what's the difference from the user perspective?

Answer 1

Popup windows can be classified into three distinct categories based on their modality:

1. System Modal windows (lock any interaction with OS)
2. Application Modal windows (lock any interaction with application)
3. Non Modal windows (allow users to ignore and continue working)

   ---

1. System Modals:

This is when the whole OS is locked and the user must select an option in order to continue. This is the type of popup that you want to avoid; unless you have a very important reason to deal with it.
If you are on the web, as far as I know, you will not deal with it. Btw on Windows OS a typical system modal (also has an overlay), looks like the following:

2. Application Modals:

This is the interesting part. Now pop-up blocks any further work in the application window (that showed the popup), but let the user to interact with other applications.
In a browser this could be a javascript generated alert box, or anything else like a browser settings dialog. For example this is from chrome settings somewhere. App doesn't let you click anywhere else in its window, and also uses a shadow instead of black background.

When using alert boxes, have in mind that users can disable popups in browser, so it's a bit risky to rely on them.

3. Non Modals

Those type of windows allow users to ignore them, and continue doing what they were doing. Probably they can't relate to your question.

---

But what about overlays?

Below you can see an image gallery . It is a popup window and it uses an overlay (like facebook does).

The interesting part here is that the black overlay doesn't indicate that something is locked; it is just decluttering and brings contrast to the field. Also when you click on background, you are leaving the "gallery mode"!

Now if we compare image gallery with application & system modals, we can easily observe a pattern (transparent background and a window), but their behaviour is somewhat different.
And as the time passes, users on web expect that they can easily close windows and continue what they were doing, just by clicking a transparent black background.

So we must be careful when a user has to take an action on a modal and you want to indicate that something is unavailable to click.

By the way for sake of simplicity i used the term window equally to dialog, which is not always true

Answer 2

There is no difference from a user perspective as they don't often know the terminology behind them anyway (so they can't get confused). I didn't know modals were called modals (starting to wonder if the plural is 'modi' haha) until I was like 23 but interacted with them in their various guises from probably the age of 8-9. It hasn't really changed how I feel about them since either apart from a word to use when moaning about their unnecessary prevalence

Answer 3

I don't think there is a difference. In both cases the modal locks the action in the background until the user closes the modal.

I think that "overlay" is only a more accurate way to explain the way in which it is presented, with the darker background and the consecutive option to close it by clicking outside the modal.

Answer 4

There is an interesting UX issue behind modal window overlays.

On overlays

UX wise, one thing to remember with regards to (visible) overlays is that systems cannot automatically put them whenever a modal window is shown since the content underneath might still be important to users. Consider a case on OS X where I first open the Trash folder and then ask to empty it. When getting the 'are you sure' modal, I may still want to inspect the folder content just to double check, and an overlay can well be in my way.

So having automatic overlays (by either the OS or the browser) with modals is based on invalid assumption that users never need to clearly see the rest of the viewport.

However, not showing an overlay is a bit of bad UX since there is nothing to tell the user "You can't click here".

Also, overlays focus the user on the modal window.

Web applications

On the web, browsers offer modal windows - such as the alert() in Javascript. These block the browser window/tab from user interaction:

The alert window is rather ugly and its style is browser/OS dependent. So web developers opt for simulating modal windows, having the manually block the rest of the viewport from user interaction. There are two principle ways of doing this:

• Either intercept all browser interaction events (keyboard, mouse, touch) and 'kill' them unless targeted at the modal window.
• Simply display an overlay below the modal.

The later solution is far easier to implement, and it can also darken the rest of the browser window to both signify "You can't click here" and to focus the user on the modal.

Back to overlays

There is one catch though - that a visible overlay is not always appropriate (as users may still need to see the content behind the modal).

So this is where there is a difference between 'modal window' and 'modal window overlay' - one comes without visible overlay, the other with.

Which one you choose should be determined by each specific use case and not be automatic by the OS, browser, or framework your'e using.