Why Modal Windows Have Killed Popup Windows

by 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.

12 Responses to “Why Modal Windows Have Killed Popup Windows”

  1. 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

  2. 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.

  3. @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.

  4. 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.

  5. Chris

    Jan 18th, 2013

    They are the worst thing to come to the internet. ANNOYING and overused. I leave any site that uses them.

  6. anonymous

    Oct 31st, 2013

    if you thought pop-up ad windows were a pain pop-up ad modal windows are worse. you cannot do anything until you close the modal window, and frequently they feature buttons which are misleading which do not really close the window but take you to their offending website and some even hook on to the dialog close event to take you to their website. meaning you are screwed one way or the other

  7. conray

    Apr 19th, 2014

    As a user and not a designer, I fucking hate those modal windows. No, I don’t want to fucking sign up for your newsletter, and I don’t fucking want to like you on facebook. Why isn’t adblock blocking these modal windows correctly? They piss me off!

Leave a Comment