Overlay

Also known as: Lightbox, Floating Window, Lightweight Pop-up, Layer

Tags: content, navigation

An overlay is a mini page in a layer on top of a page. Overlays simplify the user interface and provide a way for the user to access additional information without leaving current page. It is also an effective technique to catch user’s attention to something vital.

Overlay pops up when a user who haven’t logged in yet clicks on “Customize” button. When the user clicked the button he didn’t know he needs to log in first to customize the page. If he decides not to login/register, he can easily move back where he came from by closing the overlay.

Overlay pops up when a user who haven’t logged in yet clicks on “Customize” button. When the user clicked the button he didn’t know he needs to log in first to customize the page. If he decides not to login/register, he can easily move back where he came from by closing the overlay.

What problem does the pattern solve?

Modal Overlays
Modal overlay disables the original page beneath the overlay. The user needs to take an action or cancel the overlay until he can continue interacting with the original page.
Modal overlays are easy to implement, but they should be used sparingly. They interrupt the user flow, make it impossible to interact with the page and the overlay at the same time, and hide the content behind the overlay. This can be very annoying to users.
Consider using modal overlays when:

  • You want to interrupt current process and catch the user’s full attention to something really important.
    • For example to notify the user about some major changes to you service since the last login, tell the user that his login has expired and provide a login form to let him login again, warn the user about doing something that is not reversible etc.
  • You need to display application preferences or other options that are “independent” from other pages.
    • Placing them in an overlay saves the user a return trip to another page and makes it easy to get back to the original page where he came from.
  • It is important to show additional or related content/options in context.
    • E.g. user wants to view suggested products related to the one he is viewing without losing the current page (see example).
    • Another example is using modal overlays for showing larger versions of images and videos.
  • You need to get input from the user.
    • Overlays work well for showing forms for feedback, sign-up, contact, etc.
  • Do not use Overlays for showing error or success messages (use same-page feedback messages instead), or for warning dialogs when you mean undo.

Modeless Overlays
Modal overlay lets the user continue with the original page. Modeless overlays are useful for displaying additional options/controls or for requesting information that is not essential to continue and can be ignored. They don’t get in users’ way like modal overlays.
Modeless overlays can be used for:
  • Providing a quick access to additional options or controls.
    • E.g. Date picker.
  • Showing help elements, tips, and additional information about something on the page.
    • Use modeless overlays when the user needs to interact with the original page while the overlay is open.

When to use it?

Modal Overlays
Modal overlay disables the original page beneath the overlay. The user needs to take an action or cancel the overlay until he can continue interacting with the original page.
Modal overlays are easy to implement, but they should be used sparingly. They interrupt the user flow, make it impossible to interact with the page and the overlay at the same time, and hide the content behind the overlay. This can be very annoying to users.
Consider using modal overlays when:

  • You want to interrupt current process and catch the user’s full attention to something really important.
    • For example to notify the user about some major changes to you service since the last login, tell the user that his login has expired and provide a login form to let him login again, warn the user about doing something that is not reversible etc.
  • You need to display application preferences or other options that are “independent” from other pages.
    • Placing them in an overlay saves the user a return trip to another page and makes it easy to get back to the original page where he came from.
  • It is important to show additional or related content/options in context.
    • E.g. user wants to view suggested products related to the one he is viewing without losing the current page (see example).
    • Another example is using modal overlays for showing larger versions of images and videos.
  • You need to get input from the user.
    • Overlays work well for showing forms for feedback, sign-up, contact, etc.
  • Do not use Overlays for showing error or success messages (use same-page feedback messages instead), or for warning dialogs when you mean undo.

Modeless Overlays
Modal overlay lets the user continue with the original page. Modeless overlays are useful for displaying additional options/controls or for requesting information that is not essential to continue and can be ignored. They don’t get in users’ way like modal overlays.
Modeless overlays can be used for:
  • Providing a quick access to additional options or controls.
    • E.g. Date picker.
  • Showing help elements, tips, and additional information about something on the page.
    • Use modeless overlays when the user needs to interact with the original page while the overlay is open.

How to use it?

  • Don’t use more than 50% of the screen real estate for the overlay.
    • If you use more, the user might think he navigated away from the original page. Use a separate page instead if there is too much content to show.
  • Decide on when and how to show the overlay.
    • Overlay can be activated by the user, or it can be surfaced automatically. In most cases it is best to let the user launch the overlay when he decides so, but sometimes showing the overlay automatically works better. For example, it is often a good idea to show help elements or additional information related to something on the page automatically when the user hovers over an item. And obviously, when the user needs to be notified about something important, the overlay should show up automatically.
  • Provide a simple way to access the overlay and invite users to use it.
    • Use a link or button for revealing the overlay, and label it clearly.
    • Use icons or other visual cues with the link/button that describe the behavior.
    • In addition, you can use Tooltip Invitation to help users understand what will happen if they click the link/button.
  • Make it easy to close the overlay.
    • If the overlay is activated by hovering over an item, it should disappear when the mouse moves away.
    • If the overlay is modal, close the box when the user clicks a button (e.g. cancel, close, action button).
    • Closing the overlay should be as easy as opening it.
  • Provide navigation controls.
    • If you use the overlay for showing images or wizard, provide controls for moving between images/steps in the process.
  • Consider using Lightbox effect if the overlay is modal.
    • It tells the user he can’t interact with the page below until he closes the overlay (differentiates itself from modeless windows), and makes the overlay feel more important.

Why to use it?

Reasons for using overlays include:

  • Simplifies the UI and saves screen real estate. Additional tools or content are hidden by default, but when user needs them he can access them quickly.
  • Allows the user to stay on the same page. This saves user’s time because he doesn’t need to wait for another page to load and then move page to the original page.
  • Keeps the context. When user opens an overlay, he still knows where he is and how to get back because he actually doesn’t leave the original page.
  • Get user’s attention. Overlay provides a way to notify the user about something important he needs to notice.

Sources

This pattern is inspired by “Overlays“ in “Designing Web Interfaces: Principles and Patterns for Rich Interactions“.

Useful linksUseful links icon

Example images (19 examples)

Comments

  • Smart Company Software (www) Feb. 3, 2011 16:33

    Some great images. Overlays are becoming very common now on web browsers.