Overlays are handy user interface (UI) components that can simulate interactivity within your design and encourage users to take an important action. Among other things, you can use them for dropdown menus, slide-up keyboards, or lightbox effects.
However, as explained in our article on best practices for designing overlays, they can also disrupt the user journey and leave your users annoyed. We asked five designers and UXers for their opinions on overlays and the principles to keep in mind when considering their use. Here’s what they recommended.
Focus on the content and situation
Krystal Higgins.Overlays are just one method for displaying content. Before deciding to use them, we need to understand what’s appropriate for the content they display and the situations in which they appear. Overlays frustrate users when they don’t address these considerations.
If the content is essential for use (e.g., UI labels or instructions) or is a dedicated, complex task (e.g., a checkout flow), it needs to be integrated into the primary interface, not displayed on a separate layer. If the content is supplemental, lightweight, or isn’t continually needed, then an overlay may be appropriate. An overlay should not display content that is unrelated to the interface’s current state.
We also need to think about the user’s situation. Overlays are naturally more disruptive than the “fixed” state of the primary interface. To avoid further disruption, overlays should not interrupt a user’s current task. A study from BYU found that users ignored security dialogs (a type of overlay) that appeared while they were closing a browser window or doing other tasks. This natural reaction can also happen when overlays appear during first run or reading an article. So, be mindful of the user’s current situation — show overlays in response to user action or when users are in-between tasks.
Overlays get a bad rap when they’re used without regard to the interface’s content or the user’s situation. By thoughtfully applying them in service of these two things, they become a welcome addition to our design toolkits.
–Krystal Higgins, senior interaction designer.
Be aware of the downsides
Harry Brignull.Overlays can be handy UI components, but it’s important to be aware of their downsides, so you make the right decision when choosing to use them.
The first thing to be aware of is that an overlay is modal. In other words, the UI is put into a mode, and the main application UI is not available. This is good if the user needs to focus on the thing in the overlay to the expense of the stuff behind it. It’s bad if they need to be able to see or interact with the UI behind. This seems obvious when it’s spelled out, but lots of designers make this mistake.
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
Liya Safina.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.
First, let’s define an overlay as something that pops up and blocks the user from further action until they take an action to get out of it. Everyone knows that being unnecessarily interrupted and forced into something is a pain point — but it’s effective for business, so we’re stuck in this loop forever. To break out of it, we need to consciously notice that this is happening. Next up, let’s bring ethics back into overlay design and use these two simple rules as our guide:
1. If it covers the whole screen, it should be triggered by the user.
Think pausing a user’s action from doing something they can never reverse, providing extra information because it was requested, playing videos in modals because the user hits “play.” All the standard best practices of design apply — darken the area behind the window, click anywhere outside the modal to exit, etc. Interfaces that allow users to change their mind at any point are good.
2. If the information is optional, it should not cover the whole screen or block action.
Think small top/bottom/corner sticky bars, notifications that pop at the top of the screen and disappear (like a new text alert), or even better, contextual information that is simply designed in a way to grab users’ attention. For example, provide fun animations/interactions attached to an important piece of content, or simply minimize the amount of content around an important message, so the eye naturally wonders to it.
–Liya Safina, product designer at Ueno.
Consider your users and test your designs with a prototype
Dan Goodwin.If you’re thinking of using an overlay, and you want to be confident that it’s a UI pattern that improves the user experience, you should test it with some users. Create a prototype, think about the following things when you’re designing, and test them with some usability test tasks. When you present an overlay, is the user expecting something to happen? Your user should be able to understand that something has triggered any change of UI state. If you slap an overlay up out of the blue, your user could be left disorientated, confused, and annoyed. Those are never good things for anyone to feel.
Is an overlay going to make sense in the user’s flow through their task? Your user should be able to see and understand how this new interaction relates to the previous thing they were looking at, and the last thing they did. So think about aspects such as where and how the overlay appears, how much of the viewport is covered, and how opaque versus transparent your overlay is.
The user should be able to do one of two things in your overlay quickly and easily: either make a choice and move forward with their task, or not make a choice and get back to where they were. Consider the number of options that the user has to choose from — the relative sizes, layout, description, and design of the choices — and have a clear and easy element to close, cancel, or go back.
–Dan Goodwin, UX director at fffunction.
Context, content, input collection
Julie Delanoy.Overlays don’t have to be annoying. They can be an excellent solution when used correctly. Unfortunately, overlays earned their bad reputation because they are sometimes used to “quick fix” flawed flows, or for marketing purposes, which can be very frustrating for the user.
So, if you’re about to design an overlay, I recommend asking these questions before diving in:
- Would users want to stay in context? Overlays help to keep context. For example, on Twitter, when you’re looking at your timeline and click on a tweet, it opens an overlay. You learn more about the tweet without losing the context of where you are. After you close it, you can go back to what you were doing.
- Do users need to focus on the current task? Overlays can highlight critical content. Having an overlay welcome new users and give them the big picture of how to use your product is an excellent way to begin onboarding them.
- Do you have to collect the user’s input? Is the user trying to perform an action that requires them to log in first? An important point here is that an overlay should never pop up in the user’s face without them first doing something.
If you couldn’t answer yes to at least one of these questions, I’d recommend finding a different design pattern to reach your goal.
Another tip: Always make sure that the content in your overlay is short and sweet. Bring delight, don’t bore people to death. Nobody wants to die because of an overlay.
–Julie Delanoy, product designer at Product Hunt / AngelList.