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