The bad news
Modals are the crutch of the inarticulate designer and developer.
While there are genuine, good uses for them, many modals are…
- disruptive, invasive, and confusing
- used as an interaction junk drawer
- used too often :)
- hard to escape
- poorly accessible
- a frustrating user experience on small screens
- blocking the user's interaction with the “parent window”
- adding to cognitive load with non-essential content or interactions
- easily replaced with other patterns that are less jarring
The good news
It doesn’t have to be a modal!
Have you considered using the following?
-
Non-modal dialogs
Use them for non-critical interactions that don't block the user (like toasters).
-
Go inline
Present your content inline to be less disruptive.
-
Expanding elements
Use expanding elements such as accordions, toolbars, tooltips, or sliding sidebars (or other modeless elements).
-
New page
Lead the user to a different page to isolate the interaction without losing access to functionality such as navigation.
-
Undo patterns
Instead of for instance confirmation modals, consider using inline “Undo” option to speed up the user's interactions.
When all else fails
Getting modalz right
If you absolutely have to use one, make sure your modal is a good one!
-
Do:Easy to close
Make it simple to get rid of ‐ by escape key, clicking outside the modal window, and a clearly labelled close button.
-
Do:Single purpose
Limit the interaction to one, straightforward task.
-
Do:Keep it short
Be brief and concise in your content
-
Do:Accessible accessible accessible
This is fairly selfexplanatory — if you can't make it accessible, don't use a modal.
-
Don't:Modal inception
Avoid opening a modal from a modal.
-
Don't:Fullscreen modals
You might as well navigate to a new page then.
-
Don't:Multi-step modals
Never create a multi-step modal. That way madness lies.
-
Don't:Self-spawning modals
Never present modals unless prompted by the user.
-
Don't:Marketing modals
Seriously, nobody wants that shit — especially not your newsletter.
And remember to always ask, kids:
“Why does this have
to be a modal?”