Why Modal Windows Have Killed Popup Windows
by anthony on 03/19/11 at 3:12 pm
Users used to see popup windows everywhere on the web. Today, modal windows have taken its place. With modal windows dominating the web, popup windows are now a thing of the past.
Modal Windows are Better
Before modal windows came, users had to manage multiple windows on their screen because popup windows would open a separate window on top of the user’s current window. With modal windows today, users don’t have to deal with multiple windows. When a modal window opens, it opens inside the current page. This means that users only need to work within their browser window and don’t have to deal with extra windows popping up. It also makes the window that opens feel more like it’s apart of the website.
Modal windows are harder to miss than popup windows. With popup windows, users can often miss them because they don’t grab the user’s attention. When users click the browser window, the browser window comes to the front and the popup window hides behind it. Users can easily miss an important window by accidentally clicking the browser window and not even know it. Modal windows are easier to notice because they’re often styled in a way that matches the website theme. Popup windows use the operating system theme and controls, making one harder to distinguish from another.
Modal windows also darken the background to cut the background noise. This allows users to focus on the content in the window. This is effective because when an important dialog box opens, you want users focused on reading the message so that they can make the correct decision. When an image gallery opens, you want users focused on the images without getting distracted by the elements in the background. When users are configuring options or entering their information, you want users focused on finishing their task before they going back to the browser window.
Modal windows are also safer and more secure for users. When they open, they don’t look or feel like an ad. Popup windows are easy for users to dismiss as ads because many popup ads open the same way. Users could also have ad blocking software installed on their browser that would block all popup windows. This means that some users won’t have a clue if they missed something important because their popup blocker won’t even show the window.
The Criticism
Many designers criticize modal windows for all the wrong reasons. The problem isn’t with modal windows, it’s with designers using modal windows improperly. One criticism is that modal windows don’t allow you to refer back and forth between two sources of information. If the user needs to refer back to the browser window for information, a modal window is the wrong interface widget to use. The real purpose of a modal window is to completely take the user’s focus and attention off the browser window to the new window. This is a beneficial user constraint that’s needed for important user interactions.
For example, if an important dialog box opens, users need to see it. All of their attention needs to shift from their current workflow to the important message. Another example is when a modal window opens and users need to do a specific action. A modal window forces users to complete that action before going back to the browser window. This makes users more productive because they’re doing one action at a time instead of multi-tasking. Users are less likely to get confused and lost in their workflow because of the control and constraint modal windows have.
Modal windows are a useful and effective interface widget to use when designers use them right. They’re so much better than popup windows, that it’s no wonder why popup windows today are nearly extinct. Modal windows have changed the web for the better. Despite the criticism they get, they’re here to stay.
Cliff Tyllick
Mar 19th, 2011
How about modal windows and accessibility? For example, can people who must rely on screen readers tell that a new window has opened, and which part of the content is in that window? What happens to keyboard operations and tab order when the modal window is open? Are there well-documented best practices for controlling these issues?
anthony
Mar 20th, 2011
Those are valid questions. Modal windows are accessible if the they are designed right. Designers should use them on appropriate elements, label the window with a title, use the correct title that matches what the user clicks, put the focus inside the window when it opens and take the focus off when it closes.
Here are the practices you’re looking for: http://www.w3.org/TR/wai-aria-practices/#dialog_modal
Jack Moffett
Mar 22nd, 2011
While I agree with post, I wouldn’t refer to them as “windows”. They aren’t windows, as they are contained within the webpage and don’t have the properties of a window. I simply call them “popups”. Sometimes they are modal, and sometimes they aren’t, depending on whether they require the user to acknowledge them.
Matthew
Apr 11th, 2011
You’re right to differentiate here: the window is the container with the OS chrome. An alternative and very common term you might prefer to be using is “modal dialog”, instead of “popups”.
Samples of the term “modal dialog” being used elsewhere in this context:
http://javascript.about.com/library/blmodald1.htm
http://jqueryui.com/demos/dialog/
http://cookbooks.adobe.com/post_Bringing_focus_back_to_a_modal_dialog_after_dismis-4941.html
“Popups”, to me, reminds me of the paradigm used to serve a different niche entirely: The trying to drive the customer away from the site, rather than one trying to get the user to focus on an important issue.
@jrdesign
Mar 23rd, 2011
Excellent thoughts. Thank you. Am currently working on a project where we open additional information in a new tab. The experience before the new tab is very fluid. The new tab is a static article in the same website (only different navigation/static page) that directly relates to what someone has selected in the fluid experience. Wondering what your thoughts are on modal vs. new tabs in general and also this experience in particular?
Cliff Tyllick
Mar 25th, 2011
My thoughts on opening content in a new tab? My thoughts don’t matter. But if your users are like the dozens of participants in a usability test where we probed this very issue, they’ll hate you for deciding they wanted that information in a new tab.
When they want a new tab, they know how to get one. And if they don’t know how to get a new tab, they almost certainly won’t recognize what you’ve done. All they’ll know is that their “Back” button suddenly stopped working while they were on your website.
Just imagine what that means for the efficacy of your design: You had them focusing on their task, operating your site or app without even having to think about what they were doing. Every link, button, and input field was positioned perfectly — and then you ruined that magical state by opening a new tab “for” them.
Leave the user in control. If you don’t, you’ll just be in their way.
anthony
Mar 29th, 2011
If it’s an article that belongs to the website, use a modal window or load a new page. If it’s an article to another website, use a new tab.
Jamie
Mar 26th, 2011
One bad thing about modal windows is they’re basically a popup window that can’t be blocked by a popup blocker. You’d have to turn off javascript, which would break functionality of the rest of the website.
Meri Kuusi-Shields
May 30th, 2011
I agree. Modal windows are often used in a similar fashion as pop-up windows. For instance, when visiting a blog type of website one is hit with a contact form on a modal window almost instantly. Darkening rest of the screen makes the experience even more annoying than experiencing a regular pop-up window.
Chris
Jan 18th, 2013
They are the worst thing to come to the internet. ANNOYING and overused. I leave any site that uses them.