On Websites, overlays popups are increasingly used to direct the user’s attention to a sub-task, without taking them away from the current screen. Used in moderation overlays can be a very handy and effective design pattern, but use them too much will leave users feeling decidedly unwell and nauseous.
| Samples of Modal Popup | Usage of Featured Modals |
|---|---|
|
|
Apply to popup message that provides users with some informational description . |
|
Apply to popup message that give users conformatin for successful task. |
|
|
Apply to popup message that needs user to pay medium level attention. |
|
|
Apply to popup message that need user to pay high level attention. |
|
|
Apply to content with form items that need users to fulfill some inputs and execute some actions. |
1. Use overlays/modals carefully
Users have to deal with an overlay before continuing and are no longer able to access the page below. Sometimes this is a good thing, such as when users must confirm an important action, but most of the time it’s unnecessary and quite often it’s just annoying. Rather than using an overlay it’s often better to show the content that you were going to put into an overlay within the page. It makes most sense to use an overlay in situations where you need the user to interact before continuing, or when the cost of an error could be very high.
2. Don’t suddenly open overlays
An overlay should always open upon the user doing something. That something might be selecting a button, following a link or selecting an option. Suddenly opening an overlay without the user having done anything is akin to sneaking up on someone and suddenly letting off an air horn. It is not clever and bad user experience.
3. Always provide a clear close option
There should always be a close option in the top right hand corner. It's also a dood idea to include an additional cancel or close option within the overlay, usually as a link of button.
4. Keep overlays clean and simple for important information only
If there are lots of stuff to cram into an overlay, then it generally means that an overlay is not the best design solution. It’s important that an overlay doesn’t obscure information that might be useful for users, such as prices, dates and listings.
5. Include important information
If there are lots of stuff to cram into an overlay, then it generally means that an overlay is not the best design solution.
6. Mobile Friendly
It’s important to ensure that any overlays used are mobile friendly.As overlays on a mobile are more likely to require the user to have to scroll up and down it’s also a good idea to include the close / cancel action at both the top and bottom.
7. Ensure that overlays are accessible
Accessibility is obviously an important consideration for any design and it’s therefore important to ensure that any overlays used are accessible. For example, make sure that the focus is correctly set to the overlay on opening (rather than remaining on the page below) so that users can navigate using their keyboard. Also ensure that the close option has an appropriate label for screen reader users.