by anthony on 03/23/11 at 10:48 pm
User interfaces use modal windows to prompt users to act before they can complete their task. 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 user-friendly modal windows.
A modal window is a secondary window that opens on top of the main one. Users have to interact with it before they can carry out their task and return to the main window.
You should use modal windows when there are steps the user needs to do before the task can be completed. Using a modal window instead of a full page allows users 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 them 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.
Put a Shadow or Transparent Overlay Behind It
When a modal window opens, users need to know that it’s a secondary window overlaid on the main one. Make it easy for users to recognize that they are in a mode by using a shadow or transparent overlay behind your window.
Make sure the transparent sheet is not too opaque so that users can still see the main window. If it’s too dark, then users could make the mistake of thinking they have left the main 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.
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 at the at the top-right corner.
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.
Knowing how to design modal windows will allow you to use them in a way that doesn’t annoy u. Keep these best practices in mind so that the modal windows you design will bring users a step closer to success.