Modal window
The Design Need:
The system needs some specific action or input from the user before it can proceed with normal operations.
Design Examples:
Design Solution:
Show a separate overlay window (modal window), asking the user for the necessary info or action. Allow the user to perform the action or provide the information in the modal window.
- Allow users to resize the window.
- Provide a clear exit button.
- Close the window if the user clicks outside of the modal window.
When to use:
In all instances when content needs extra attention from the user:
- Lightbox for images, video’s
- Forms
- Search
- Alerts
- Help
- Login
- …
Why use this solution (rationale):
When users are using a website or web application they are not always aware of the information or actions required. Meanwhile, developers cannot always know up front what a user will do and when. If specific information or action is requested when it is needed, users do not have to take much action before they can start using the website or application.
You'll find this pattern is often on:
- Middle of site
More info elsewhere:
- A collection of modal windows on www.patterntap.com
- “Modal Windows In Modern Web Design” on www.smashingmagazine.com
