Modal Windows Best Practices

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

Modal windows are commonly used to display alerts, dialogs, settings and content to users. When they’re designed effectively, they can ease the user’s task. When they’re designed ineffectively, they can get in the way of the user’s task. These best practices will help you design modal and modeless windows effectively, so that your users can complete their tasks successfully.

Modal Windows

A modal window is a secondary window that opens inside the main window. Users have to interact with it before they can return to the main window. Use modal windows when you have to take the user’s focus off the main window to an important window that needs their attention.

Include a clear and visible title that matches what the user clicked.

When a modal window opens, it’s important for users to know where it’s coming from. Your modal window needs to include a title that matches what the user clicked to open it. That way the modal window that opens is consistent with what the user clicked. The title should go at the top of the window so that it’s visible. It should also look clear and distinct so that users know what task they’re doing when the window opens.

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 can contrast in shape, color or both. The example below shows contrast in both shape and color, making it hard to miss.

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.

Use Cancel buttons when it’s right.

Sometimes your modal window needs a Cancel button. If the user engages in a process or task that takes time to complete, it’s right to offer users a Cancel button. This lets users feel safe knowing that the information they entered is gone when they hit Cancel.

Close the window when users click outside it (except if there’s a Cancel button).

In case users can’t find your close button, allow users to close the window by clicking outside of it. This makes it easy and intuitive because users will often click outside of the modal window if they want to go back to the main window. However, if your modal window has a Cancel button, it’s best to not allow this function because users might accidentally click outside when they’re in the middle of a time-consuming task and could lose all of their information. When users have to enter a lot of information, using a cancel button and close button is much safer.

Add a drop shadow or transparent sheet around the window.

When a modal window opens, users need to know that it’s a secondary window on top of the main window. If your window doesn’t have a shadow or transparency around it, then it’s hard for users to tell. A drop shadow with a nice amount of softness around it will let users know. Or, a transparent sheet on top of the main window will also let users know. 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 painful for users. It would also cover up most of the main window, making users think that they have left the main window and are looking at a new page. Make your modal windows small, so that it doesn’t cover up the main window and users don’t have to scroll.

Modeless Windows

A modeless window is also a secondary window that opens inside the main window. However, the difference is that users don’t have to interact with it immediately before returning to the main window. Users can continue working in the main window with the modeless window opened.

Use when users need to view and interact with main window content.

When users need to view and interact with content in the main window, a modal window will not work. A modeless window is the right control to use in this situation because it uses a tiny part of the screen and allows users to continue working in the main window when it opens. Users can interact with the modeless window and main window at the same time.

Make it as thin and small as possible.

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

Attach to the edge of the main window and make it persistently visible.

A modeless window should display until the user has closed it. Attaching it to the top, bottom or side edge of the main window keeps it away from the main window content, but still visible for users to see. Users can scroll up or down and 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’ icon as the close button.

A modeless window doesn’t need as many exits as a modal window. All it needs is an ‘X’ icon button to close it. Make the button stand out and place it to the side.

When you follow these best practices, your modal and modeless windows will help users complete their task successfully. Instead of confusing and frustrating them with your modal and modeless windows, you’ll impress them with how easy they are to use.

11 Responses to “Modal Windows Best Practices”

  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…

Leave a Comment