Forms

Why Modal Windows Have Killed Popup Windows

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-window-positives

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.

popup-window-negatives

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 widget to use.

The 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 interactions that need the user’s full attention. For example, if an important dialog box opens, users need to see it. All 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.


Book

Affiliate

elegant wordpress themes

This Post Has 16 Comments

  1. Cliff Tyllick Reply

    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 Reply

      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 Reply

    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 Reply

    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 Reply

      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 Reply

      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 Reply

    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 Reply

      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 Reply

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

  6. anonymous Reply

    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 Reply

    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!

  8. Jaime Guerrero Reply

    You are showing your youth (i.e. lack of experience). Back in the pre-web day, in Graphical User Interfaces, i.e. on Windows or Mac, modal dialogs were the norm and widely disparaged because of how they force a mode upon the user (designer+programmer controlling the interaction, rather than the user). Fashionable applications avoided them to avoid these usability problems by using much-harder to design and code *modeless* windows or embedded side panel inspectors and other trends. Along comes the web where opening a new window is the easy thing so it’s the norm, and you come along saying modality is better.

    Well “modal” windows on the web aren’t windows at all, they are not managed by standard operating-system defined window management tools (Alt-F4 or Cmd-W to close, Alt-Tab to switch, etc). They are a hack implemented in javascript libraries like JQuery that manipulate the DOM (the rendered web document), placing a full-window gray box (to trap mouse click events and make it /seem/ modal) stacked behind the fake window implemented as another box.

    Unlike real windows which are known to the OS and thus knownable to accessibility technologies like screenreaders and thus distinguishable, fake web modal windows can’t be detected or distinguished to a screenreader– remember because they are modal only by virtue of the placement and Z-ordering (not ‘visible’ to screenreaders) of those fake gray boxes.

  9. Scott M Reply

    I’m guessing this was written by another “marketing genius” who’s clueless as to what people really want. Back in the day, you used pop-up windows. We hated them so much that our browsers now block them automatically. No, we don’t have them because they appear in a separate window. We hate them because they distract us from and usually prevent us from seeing the content we came to your site to see. In other words, you’re being an overbearing pest. So what do you do? Instead of taking note of your customers’ actions and attitudes, you sneakily find a new way to do the same damned thing. You’ll never learn, huh? When I navigate to a webpage, it’s usually from a link on another page. Instead of showing me the content I came to see, I’m presented with a box that blocks the content and demands my email address. I just barely landed on your page and I don’t know you from Adam. If you think I’m going to give you my email address, not only are you wrong, but I’m GONE. Tab closed. This problem has become so pervasive that I’ve resorted to using No-Script. Yes, it’s a pain to have to whitelist so many sites as “developers” are addicted to javascript but until a better solution comes along, that’s the best I can do.

  10. Rachel Reply

    For people dumb enough to believe bullshitting marketing ‘experts’ and actually believe that modal adverts work: Adblock exists, and so does element hiding helper.

    When will gullible website owners with too much money stop listening to self-serving marketards, who want to sell them the idea that the internet is a machine for printing money? That works by annoying would-be customers into handing over their cash.

Leave a Reply

Your email address will not be published. Required fields are marked *