Overlay

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.

Accessibility

Sources

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

Useful links

Example images (19 examples)

Comments

  • verizon wireless mobile black 2016 deals (www) ⋅ Nov. 19, 2016 22:30

    I think the admin of this web page is really working hard in support of his web page, as here every material is quality based stuff.

  • Alex1991 ⋅ Nov. 23, 2016 16:18

    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. - thx for this infirmation, i will show your page to my <a href="http://primedating.com/gallery.html">girlfriend</a>

  • Whatsapp login (www) ⋅ Nov. 28, 2016 10:10

    Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.

  • Primedating (www) ⋅ Dec. 4, 2016 12:09

    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. - thx for this infirmation, i will show your page to my

  • Assignment Expert (www) ⋅ Dec. 5, 2016 07:26

    Thanks for writing such a helpful article. Looking forward to read more such write-ups. College students having problem in writing an academic paper can try our assignment help online and can get the best assignment writing solution.

  • Axel Foley lions Jacket (www) ⋅ Dec. 6, 2016 14:04

    A nail overlay is just another name planned for an acrylic nail. Most the time when they say overlay.

  • uc browser for pc (www) ⋅ Dec. 7, 2016 10:40

    good one

  • snapchat pc (www) ⋅ Dec. 7, 2016 10:41

    really nice

  • mobogenie for pc (www) ⋅ Dec. 7, 2016 10:41

    good

  • mobogenie pc (www) ⋅ Dec. 7, 2016 10:41

    interesting

  • uc browser pc (www) ⋅ Dec. 7, 2016 10:42

    awesone

  • snapchat for pc (www) ⋅ Dec. 7, 2016 10:42

    thanks for this useful post

  • uc browser (www) ⋅ Dec. 7, 2016 10:43

    useful to everyone

  • whatsapp for pc (www) ⋅ Dec. 7, 2016 10:44

    good and useful one

  • xender for pc (www) ⋅ Dec. 7, 2016 10:44

    very good post. useful to all

  • bigphotographers (www) ⋅ Dec. 10, 2016 06:22

    Great Don't get so caught up in one discussion or one photo that you miss out on something taking place elsewhere. Ask yourself if you are missing a certain kind of shot. Fine.

  • Sujatha (www) ⋅ Dec. 16, 2016 13:51

    Woh I your articles , saved to bookmarks !.

  • Love U (www) ⋅ Dec. 16, 2016 13:52

    I value the blog post.Really looking forward to read more. Really Cool.

  • chaitukits (www) ⋅ Dec. 16, 2016 13:52

    I really liked your article post.Really looking forward to read more. Will read on...

  • Vidmate Download (www) ⋅ Dec. 17, 2016 11:14

    good As soon as Vidmate is mounted on your PC, there is no should search for most recent flicks on internet. Lot of time is saved by using this application and also one has the ability to see various motion pictures and tracks within this app nice.

  • cool math games (www) ⋅ Dec. 21, 2016 05:14

    wow its good one to see this kind of information.

  • www.hotmail.com (www) ⋅ Dec. 21, 2016 11:19

    Really a great addition. I have read this marvelous post. Thanks for sharing information about it. I really like that. Thanks so lot for your convene.

  • Sabrina (www) ⋅ Dec. 22, 2016 19:20

    Its undeniable!!!

  • instagram followers (www) ⋅ Dec. 23, 2016 17:24

    Excellent post.

  • jatin ⋅ Dec. 27, 2016 15:20

    Very good write-up. I definitely appreciate this website. Continue the good work!
    <a href='http://vmonlinetraining.com/devops.html'>Devops Online Training</a>
    <a href='http://vmonlinetraining.com/adobe-cq5.html'>Adobe cq5 Training</a>
    <a href='http://vmonlinetraining.com/dell-boomi.html'>Dell Boomi Training</a>

  • Mobdro APK Download (www) ⋅ Jan. 3, 2017 12:11

    awesome There are two techniques. Either you could move the APK data from your COMPUTER to android gadget or could download it directly with your browser nice.

  • Megabox hd app (www) ⋅ Jan. 4, 2017 08:16

    Good! thanks so much! Thanks for sharing. Your article are extra interesting and outstanding.

  • apps4yourpc (www) ⋅ Jan. 9, 2017 14:01


    Today's word has been very much competitive and to compete in this competitive world we have to be updated with the growing technology and the post you have been sharing is very much helping for me to do that. please keep posting..
    href="https://apps4yourpc.wordpress.com/2016/12/26/download-garageband-for-pc-on-windows-7810/">Download Garageband</a>

  • Greg (www) ⋅ Jan. 12, 2017 06:23

    Visit to: [url=http://bandarbola.io/]Bandar Bola[/url] - Go to: [url=http://judionline.io/]Bandar Bola[/url] - Click to: [url=http://travelpulauseribu.co.id/wisata-pulau-tidung/]Travel Wisata Pulau Tidung[/url]

  • Greg (www) ⋅ Jan. 12, 2017 06:23

    Do you find this useful? Sign up and add it to your style guide and share it with your team. Or, take a look at our features to understand better how Patternry can help your team.

  • flip diving online (www) ⋅ Jan. 13, 2017 04:40

    Thanks for the sharing this great article related to The Future of the Web.. this article is very usefull for me…..thanks again for sharing this great article!

  • apk (www) ⋅ Jan. 13, 2017 04:41

    good post guys and thanks for your article this is simply awesome. thanks for your info

  • classmates login (www) ⋅ Jan. 13, 2017 04:41

    Great article! Thank you to provide us this useful information.

  • Tania (www) ⋅ Jan. 14, 2017 04:29

    in this competitive world we have to be updated with the growing technology and the post you have been sharing is very much helping for me to do that. please keep posting..