Modal overlay window is fixed to 3 different sizes
View Small: 590 pix wide Overlay.
The height of the window is dynamic depending on the length of the content.
No scroll bar is available within 950 height.
Users should not be able to interact with the parent screen underneath until the overlay is dismissed.
View Medium: 770 pix wide Overlay.
Center-align the overlay vertically on the screen.
The overlay may or may not have the button bar at the bottom.
The button bar at the bottom is a persistent bar that should stay in place and not scroll up or down.
In the button bar, the 'Primary' button should be on the very right, and 'Back' or 'Cancel' should be on the very left. If there is a need for a secondary button, it should be placed to the left of the primary button.
View Large: 950 pix wide Overlay.
The user should not be able to drag the overlay.
Why use this patternThis pattern allows the user to stay on the same page while providing a defined path to complete a task. Another added benefit is that it allows the user to keep the context, this is especially helpful if the user is called away from the task or otherwise distracted. It is an effective technique to ensure users pay attention to something vital. The modal screen captures a user's attention and encourages the completion of a task. The user may also dismiss the modal, allowing the user to return at another time. Lastly, it simplifies user interface and can save precious screen real estate.
What is the solution
Overlay modal disables the original page underneath. It requires users to take an action or cancel the overlay until they can continue interacting with the original page. Modal overlays are easy to implement but they should be used sparingly. They interrupt the user flow, making it impossible to interact with the page and the overlay at the same time; and they also hide the content behind the overlay.
- If there is too much content to show, use the full screen modal overlay. If the content can fit comfortable in the small overlay, use the small one.
- A semi-transparent border can provide the needed visual separation between the message, or video modal window, and the user's screen. The modal has as a background color of #586877 with a 80% transparency.
- Make it easy to close the overlay.
- If you use the overlay for showing images or a wizard, provide controls for moving between images and steps in the process.
When to use this pattern
- When you want to interrupt the current flow and catch a user’s full attention. For example, warning a user about doing something that is not reversible.
- When you need to display information that is 'independent' from other pages. For example, application preferences. Placing them in an overlay saves the user a return trip to another page and makes it easy to get back to the original page.
- When it is important to show additional or related content or options in context. For example, showing larger versions of images or videos.
- When you need to get input from the user without losing the current context. For example, forms.
- Use this pattern for short, single tasks, so that users can complete them without being interrupted.
Do not use this pattern
- To show error or success messages (use same-page feedback messages instead).
- For long or multi-step tasks.