With overlay support now live in the latest update for Adobe XD, you can easily stack content over another artboard instead of having to duplicate huge amounts of content on multiple artboards. A few examples include drop-down menus, keyboards that slide up, and lightboxes.
It’s a very powerful feature that has many uses. The tasks that users are trying to perform are becoming increasingly complex, and overlays can really help to take off the pressure. Sometimes initiating an overlay is unavoidable, and they’re especially great for error reporting, security approvals, data capture, as well as supplemental interactions. They range from the informative to the frustrating, however, so we wanted to dig a little bit deeper and find out what best practices you should keep in mind when working with modals and overlays.
First, let’s look at some of the dos and don’ts:
- Use modals for focus and things that are going to benefit the user.
- Use overlays to take the pressure of a complex user interface (UI) (e.g., advanced controls, complex choices with multi options, explanations and help text, support stuff needed quickly).
- Place keyboard focus on the first interactive element inside the modal, and trap it within the modal’s content.
- Allow users to close modals (by clicking outside of them and with explicit ‘close’ buttons), unless action is required to move forward.
- Restore focus to the triggering interactive element when the modal is closed.
- Include documentation for overlay and modal components in your design system (as done by Australian health insurer nib: overlay and modal).
- Check out Google’s penalties for obtrusive interstitials.
- Don’t use modals unless their content requires 100 percent focus.
- Don’t cover up content that is contextually relevant to the modal/overlay being displayed.
- Don’t use overlays to just sell something.
- Don’t create a modal that only appears when you’re trying to leave.
- Don’t rely on a single way to close. The escape key and outside clicking need to work as well as an “X”.
- Don’t ignore accessibility guidelines.
Never disrupt the user journey
“Ensuring that overlays are not disruptive to a smooth and fluid user journey can come down to using the right interaction at the right time,” says Karl Randay, head of design at digital customer experience studio 383. “Understanding how people think when they’re following a process or trying to complete a task is crucial in knowing when and how to include overlays as a method of a potentially forced interaction. Make it clear what to expect when you click on something and what happens next in each interaction,” he says.
One way to set the right level of expectation is by using simple, humanized language, Karl says. Reduce the language around a complex task, and use carefully crafted copy and button labels. Decide when to use overlays as a subtle means of capturing user attention or when a full-screen change is necessary.
Choose your overlay wisely
As a user navigates a digital product or service, there can be a number of steps that they follow, events that they trigger, and inputs that they complete. “Keeping someone’s focus on content and interactions normally requires the use of a full screen change, dedicating the full attention of the UI to the task at hand,” Karl says.
“In the event that something happens that requires the user’s sudden attention, further user input is required, or additional contextual information is needed, use modal and overlay panels instead, which allow for additional functionality or messaging while still keeping a sense of context for where the user is in the background.”
Choose the type of overlay wisely because it can be a quick way to disrupt and provide a disjointed and unnatural experience during what could otherwise be a fairly natural flow.