10 guidelines to consider when using overlays / modals

6 minutes read

Overlays, dialog boxes, modal windows, light boxes, call them what you want, that little window that pops up in the middle of the screen and demands your attention like a tantrum throwing toddler is a much used (and abused) design pattern. Within apps, on the web and even on mobile overlays are increasingly used to direct the user’s attention to a sub-task, without taking them away from the current screen. Used in moderation overlays can be a very handy and effective design pattern, but like strong Belgian beer or Krispy Kreme doughnuts use them too much and you’ll leave your users feeling decidedly unwell and nauseous. Ensure that your users don’t come down with a bad case of overlay poisoning by considering these 10 overlay guidelines.

1. Use overlays very sparingly

Overlays are the bad boys of the UI design pattern world. Like Justin Bieber at a Hollywood party they always need to be the centre of attention and will constantly demand that you, “look at me, look at me, LOOK AT ME”. Users have to deal with an overlay before continuing and are no longer able to access the page below. Sometimes this is a good thing, such as when users must confirm an important action, but most of the time it’s unnecessary and quite often it’s just damn right annoying. Rather than using an overlay it’s often better to show the content that you were going to put into an overlay within the page. For example by expanding part of the page, by using a static popover or by switching UI elements. Appway have a nice article titled Design patterns for replacing modal windows that outlines some of the design patterns that you might utilise as an alternative to using an overlay.

LinkedIn employs a good alternative to overlays on their profile page (see below). Rather than the usual design pattern of bringing up an overlay to allow users to edit a field a user can click on the field to edit it within the page.

Curiously whilst Twitter utilise an overlay for composing a new tweet (like a tweet is some sort of orchestral symphony) they also allow users to enter their tweet within their feed page (see screenshot below). This is a much better experience because a user can still use the page (for example to copy and paste text) and are not locked into an overlay. Rather than opening an overlay I think that they’d be better off expanding the navigation bar at the top (see mock-up below) so that users can always enter their tweet within the page.

It makes most sense to use an overlay in situations where you need the user to interact before continuing, or when the cost of an error could be very high. For example, when confirming the deletion of something, or entering an email address in order to download an eBook.

2. Don’t suddenly open overlays

Suddenly opening an overlay without the user having done anything is akin to sneaking up on someone and suddenly letting off an air horn. It’s not big, it’s not clever and you shouldn’t do it (not unless you’re filming the results and posting the resulting shenanigans on YouTube). An overlay should always open upon the user doing something. That something might be selecting a button, following a link or selecting an option. This even applies to survey invitation overlays. Don’t just pop these up, but instead show the invitation on loading a new page, or even better include the invitation within the page itself. An overlay warning a user that their session is about to time out is just about the only exception to this rule that I can think of.

3. Darken the page behind the overlay

When opening an overlay it’s important that the page behind is slightly darkened. This does two jobs. Firstly it draws attention to the overlay and secondly it lets the user know that the page isn’t currently active. Be careful with that tinting though. Too dark and users will no longer be able to see which page they’re on. Too light and users might think that the page is still active and might not even notice the overlay in the first place.

4. Allow users to click (or tap) away (most of the time)

Overlays come in two main flavours. Firstly there are attention seeking modal overlays which force a user to interact with them before continuing. Secondly there are more chilled out non-modal overlays which allow users to click or tap outside of them to dismiss them. As a general rule you should only use modal overlays (the first type) for very important interactions. For example, when asking users to confirm that they do really want their account deleted, or that they do really agree to the terms and conditions they’re signing up for (which of course they will have read thoroughly, as we all do). Most of the time it’s best to use non-modal overlays and to allow users to click (or tap) outside of the overlay to close / cancel it.

5. Always provide a clear close option

Following on from the previous consideration, not only should users be able to click (or tap) away to dismiss an overlay, there should also always be a close option in the top right hand corner (sorry Mac users but the convention is top right, not top left). It’s also a good idea to include an additional cancel or close option within the overlay, usually as a link or button. This prevents users from having to play a little game of ‘hunt the little grey cross’ in order to get back to their original page.

6. Don’t include multiple steps

If an interaction is complex enough to require multiple steps, then it’s complex enough to warrant its own page, and to be afforded the extra space and flexibility that a page provides over an overlay. Try to avoid overlays with multiple steps like the one below from Barclays Bank. Breaking a complex task into multiple steps is a fantastic idea, but it’s also generally a sign that something is too complex to ask users to complete within the confines of an overlay.

7. Don’t cram in too much

Like a good cocktail, or a youth hostelling break with Chris Eubank you shouldn’t try to cram too much into an overlay. Leave out those random spirits and mixers that were left over from last year’s Christmas party and keep your overlays clean and simple. If you find that you’re trying to cram lots of stuff into an overlay then it generally means that an overlay is not the best design solution.

8. Include important information

It’s important that an overlay doesn’t obscure information that might be useful for users, such as prices, dates and listings. In fact any important information should really be featured within the overlay. For example, an overlay asking users to confirm the deletion of some items should ideally list the items being deleted.

9. Try to avoid using overlays for mobile designs

It’s generally best to avoid using overlays for mobile designs because with such a small screen an overlay will need to take up the full width anyway (the last thing you want is a teeny, tiny mobile overlay) so why not use a page instead? If overlays are utilised for a responsive design then it’s often easier to retain the behaviour across devices. It’s therefore important to ensure that any overlays used are mobile friendly. For example the Bootstrap modals (see screenshot below) work equally well on desktop and mobile. As overlays on a mobile are more likely to require the user to have to scroll up and down it’s also a good idea to include the close / cancel action at both the top and bottom.

10. Ensure that overlays are accessible

Accessibility is obviously an important consideration for any design and it’s therefore important to ensure that any overlays used are accessible. For example, make sure that the focus is correctly set to the overlay on opening (rather than remaining on the page below) so that users can navigate using their keyboard. Also ensure that the close option has an appropriate label for screen reader users. Nomensa have an excellent article titled How to improve accessibility of overlay windows with everything you need to know about making overlays accessible. I recommend you read it.

See also

• Best Practices for Modal Windows (UX movement)
• Design patterns for replacing modal windows (Appway)
• Modal Windows In Modern Web Design (Smashing Magazine)
• 10 Rules to Follow for Popups and Modal Windows (Specky Boy Design Magazine)
• How to improve the accessibility of overlay windows (Nomensa)