If the information on the modal needs to be recalled by the user when interacting with the main page, you are giving the user a short term memory task that they might resent. For example, if you’re designing a registration page and you put the password requirements in an overlay, the user will tap the tip link, read them in the overlay, memorize them, dismiss the overlay, then try to enter their password. If they forget, they then have to go back for another look, which is super tedious. It’s usually best to try to design a page, so that the user has all the key information they need ‘at a glance’ without needing to tap or interact to get to it.
With overlays, it’s quite common to use a small overlay component and to use a partial opacity background or blur effect to mask the page behind it. This can help prevent disorientation by conveying the idea that the main UI is ‘just there’ and only a click away.
Designers sometimes use overlays to ask the user “are you sure?”. Bear in mind, it can be better to offer “undo” instead. This means the user has to tap fewer times to take the happy path through your software, which makes the user experience a little slicker. If it’s an irreversible step, you can go the other way and try to interrupt the user’s flow as much as possible. This is sometimes called a ‘speed bump’ or ‘safety catch’ UI technique. For example, on GitHub when a user tries to delete a repository, they’re required to type the full repository name before the delete button will work. This prevents accidents.
Overlays are easy things to add to an existing UI as they involve changing very little. This can make them appealing when you’re in a lazy mood. Be careful. If you catch yourself thinking, “we can fix that with an overlay,” you should take a breath and check your reasoning. It’s important to think about user needs first, then think about the UI solution afterwards.
~ Harry Brignull, independent UX consultant
Ethical design for overlays
As designers, we sometimes become too driven by the needs of the business we’re designing for. Think about it: it’s a no brainer that if two CTA buttons are next to each other, we’re going to make one of them pop less (because we want the user to click on the other one); or if there’s a checkbox to sign up for a newsletter before proceeding, it’s going to be pre-checked (because we want them to miss it or not care that it’s pre-checked). Misleading behavioral tricks like these become best practices of usability when, for a split second, we stop caring about our users. Oftentimes the same thing drives the design of overlays.