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