What I’m talking about are often called “modal windows,” “overlays” or “light boxes.” there’s no official rule about how and when to use an overlay. However, I consistently see inappropriate use of overlays on the web. I also must consistently explain why using an overlay isn’t the best solution to a problem. Maybe this post should be called when NOT to use an overlay.
Overlays are great for short, minimal interactions that comfortably break the workflow.
Good overlay examples:
Often abused overlay examples:
Here are some questions you should ask when deciding whether or not to use an overlay.
If you are asking the user a simple yes/no question, then consider displaying the query inline with the action that triggers prompt. Lots of confirmation dialogs fit inline with the content, such as confirming whether or not you want to delete a table row. You can even leave the row in place with an undo button if you follow this model.
If the content overflows the screen, it should be on its own page. You don’t want to make the user face the awkwardness of a scroll bar inside or out of the overlay. End User Agreements are probably the only exception to this case, because nobody scrolls to read it anyway.
Often times, you want to focus the user’s attention on one action, and stop them from clicking on anything else on the page. This means either bringing them to another page, masking all other content on the current page, or allowing the user to click off the current action.
You need to validate that form both client-side and server-side. If the transaction fails, how will the user get back to the form? Returning them to overlay after a page refresh can be an awkward and difficult interaction. Get around this with AJAX calls, or put the form on its own page.
Other best practices
I’m sure there’s lots more to cover, but I’ll leave it to the comments to fill in the gaps!