Best Practices for Modal Windows

by on 03/23/11 at 10:48 pm

Many user interfaces use modal windows to alert or prompt users to take action. When they’re used right, they can ease the user’s task. When they’re used wrong, they can get in the way of the user’s task. Here are some best practices that will help you to design task-focused modal windows.

Modal Windows

A modal window is a secondary window that opens on top of the main one. Users have to interact with it to carry out their task before they can return to the main window. Use modal windows when the user is doing a task that doesn’t need a full-page. And use it when the user needs the main window to maintain the context of their task.

Include a clear, visible title that matches the clicked button

When a modal window opens, it’s important for users to know where it’s coming from. Your modal window should include a title that matches the button they clicked to open it. This shows consistent behavior and tells thems what task they’re doing.

Offer a high contrast close button in the top corner

Closing the modal window when they need to. Use the conventional ‘X’ icon for your close button. A high contrast close button will allow users to see their exit better. Your close button should stand in shape and color.

Allow users to close the window with the ESC key

For accessibility reasons, your modal window should close when users press the ESC key. You should also allow users to tab through controls in the modal window if you have them. This will allow users who use screen readers and keyboards to navigate your website.

Close the window when users click outside it

In case users can’t find your close button, allow them to close the window by clicking outside of it. This makes exiting easy and intuitive because users will often click on the main window to go back to it. But you don’t want to allow users to exit this way if they’re entering information on a form, otherwise they could lose it.

Use ‘Cancel’ buttons when necessary

Your modal window will need a ‘Cancel’ button if the user is doing a task where they’re entering information. If there’s a form in your modal, it’s important that the user doesn’t click outside of the window to close it. To prevent this, offer users a ‘Cancel’ button as the only way the user can close the window.

Overlay a drop shadow or transparent sheet on the page

When a modal window opens, users need to know that it’s a secondary window on top of the main one. If your window doesn’t have a shadow or transparent sheet around it, it’s hard for users to tell. Make sure the transparent sheet is not too opaque so that users can still see the contents of the main window. If it’s too dark, then users can mistakenly think that they have left the main window.

Drop shadow around window

Transparent sheet around window

Don’t make the window size too tall or wide

If your modal window is taller or wider than the user’s screen, they’ll have to scroll to see all of it. This makes it especially frustrating for mobile users. Make your modal windows the right size for the user’s screen, so that they don’t have to scroll.

Modeless Windows

A modeless window is also a secondary window that opens inside the main one. However, the difference is that users don’t have to interact with it before returning to the main window. Users can continue working with the modeless window opened. It doesn’t require their immediate attention.

Use when users need to refer to main window information

When users need to compare or refer to information in the main window, a modal window will not work. A modeless window what you should use in this situation because it takes up a small part of the screen and allows users to view and work in the main window when it opens. Users can interact with both the modeless and modal window at the same time.

Make it as small as possible

Modeless windows should take up a very small amount of space on the main window. Make your modeless window as small and understated as possible, so that users can still interact with the main window. The main window is always the primary focus of the user’s task.

Attach it to the main window edge

A modeless window should display until the user has closed it. Attaching it to the side edge of the main window keeps it visible to users. They can scroll and still interact with the modeless window when they need to.

Attached to the top of window

Attached to the bottom of window

Attached to the side of window

Use an ‘X’ for the close button.

A modeless window doesn’t need as many exits as a modal window. A simple ‘X’ icon button should close it. Make the button visible and place it in the corner of the window.

Final Thoughts

Modal windows are an effective user interface element when you design and use them right. They can help user’s complete tasks faster and easier. But they can also frustrate them when they’re done wrong. Know whether you need to use a modeless or modal window on your interface. Keep these best practices in mind so that the modal windows you design bring users a step closer to success.


Light Resume Light Freelancer

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

12 Responses to “Best Practices for Modal Windows”

  1. Cooper

    Mar 30th, 2011

    Great advice on Modal windows, but I don’t agree that modeless windows should be attached to the top, bottom, or side of the main window – this works on a smaller monitor, but when you are using a large monitor (as more and more of us are) and the modeless window appears on the other side of the screen (eg form element is at the bottom, but the modeless window appears at the top), it is VERY easy to simply not notice it!

    Instead, I think modeless windows should appear within the page, like tooltips or other non-modal popups.

  2. CSS Web Standards

    Apr 8th, 2011

    I don’t agree with “A mod­e­less win­dow should dis­play until the user has closed it.” User off course should have the option to close it, but in most of the cases it should be close itself after some seconds or minutes.

    • viral

      Apr 10th, 2011

      Situation one:
      >halfway through filling out form
      >closes randomly

      Situation two:
      >open page, modal window displays
      >grab coffee
      >completely miss it

      Terrible idea. Everything on a website should be done with the consent of the user. Same thing as having autoplaying videos.

      • Matt

        Mar 29th, 2012

        Dude was talking about modeless (not modal) windows.

        But there should be a further distinction for “notifications” which are a special kind of modeless element that has even more behavioral nuances. For instance, you don’t want to display a bunch of notifications in an inactive browser tab…

  3. Aditya Saxena

    Jul 26th, 2011

    A nice post – Thought most UI Desig practitioners would know about this, it is always nice to know that the fact is documented and presented well… Thanks for sharing!

  4. M

    Sep 6th, 2011

    What are people’s thoughts on having a modal window in a modal window? Good or bad?

    • roel

      Feb 10th, 2012

      Bad

    • Mike

      May 15th, 2012

      Terribly bad. A modal should ideally avoid having any sort of navigation in it: no scroll bars, no tabs, etc. If you need those extra elements then you probably shouldn’t be using a modal in the first place.

    • tim

      Jul 23rd, 2012

      Defeats the definition of putting the user into a mode in order for them to complete an action and exit that mode.

    • Evan

      Jul 2nd, 2013

      Actually this can be done effectively with some different styling of the secondary modal. Mac OS does this well. I’m filling out a form in a modal dialog window, then when a secondary modal is needed it slides down from the top of the window in a lightweight format. Now a THIRD step would be a no-no. I have spoken, thus it is so.

  5. Alexandroid

    Jun 28th, 2013

    I think modal windows are often overused and produce more bad UX than good.

    Even examples in the article demonstrate this:
    1. Facebook compose message – GMail does it better, because often people need to look something up while composing a message and there is no way to do that because modal window blocks everyting.

    2. Thank you message – does it really need to block everything and require user to click ok? This seems to feed the developer’s/company pride more than serve the user’s goals.

    3. welcome to Groupon requires user to notice the X on the top right without providing clear “Continue to the website” button under the text.

    4. In cases like creating “new class”, or “newsletter signup” there is often little reason why those forms should be modal and could not be embedded in the page (or be a separate page) as edit-in-place.

    Modal windows are rude and disruptive way to force the user to do what you want one step at a time, which is often conflicts with how users think and interact with the information…

  6. Rob Miller

    Aug 18th, 2014

    How (or where) would you add a Help button to a modal window?

Leave a Comment