Quick summary:
The modal overlay element is versitile tool in the UI toolbox, it's ideal for focusing a users attention on a single piece of content, dialog, or key action. The element should be clear, simple and only appear on a user initiated trigger. The current trend of using modal overlays for advertising, not only becomes an intrusion into a user browsing session, but also imparts a negative perception on the element itself. If this trend continues the viability of this element may become endangered as users become 'banner blind' or it becomes actively blocked by browsers.
With the ever increasing amount of content being offered online, sites are becoming increasingly aggressive in securing an audience. Overlay elements once used for highlighting content are now more often being utilized as a new form of advertising pop up. If the modal follows the history of the popup, we might find the usefulness of modals ending very shortly.
The lightbox overlay arrives on the web
The modal overlay element could be considered an evolution of the pop-up window in many respects. Both seek to focus a user's attention by isolating and bringing specific content to the forefront of the browsing session. Unlike the popup, the overlay loads over the existing page as opposed to a new one. The dimmed background and bright center content lead it being named after the illustrator's 'lightbox' tool.
The 'lightbox' is credited to the developer Lokesh Dhakar who authored the original Javascript library. Because of the way lightboxes dim the background content they are great at focusing a users attention on specific content.
Lokesh Dhakar's original Lightbox. The background dims highlighting the image content.
Developers then eventually expanded the use of lightboxes to display non image content and transform it into a versatile UI element that has been leverage throughout the modern web landscape. Examples of non media content uses include displaying contact information, or dialog boxes. As the element has become more flexible, the term lightbox has become less appropriate, generally favoring the term overlay or modal overlay.
Modern lightbox overlays (modal overlay) are used for more than just image content such as on twitch.tv's Facebook login dialog.
The growing trend of abusing the overlay
The Internet is a a vast arena of information. According to Reelseo, Youtube is now uploading upwards of 300 hours of content every minute. Nearly all this content is freely available for users. But as the old adage goes "nothing in life is free". For every online interaction, there is a transaction being undertaken between the provider and the consumer, content is offered in return for some form of remuneration. This remuneration can range from simply online recognition through to a financial purchase.
Before the invention of the overlay, popup's were traditionally used online for focusing a users attention on specific content. Eventually sites began to use popups to display advertisements to try and monetize page views. These became so prevalent that the term 'popup' became synonymous with internet ads, leading to all major browsers blocking popups by default. This has lead to the demise of the pop up element despite there being legitimate uses for it on the web.
Classic advertising popup behavior, also seen in here, is the more sinister popunder. All which are blocked by default in modern browsers.
Modern sites are are still looking to for ways to monetize or seek remuneration for the content they provide, and such many sites are now employing overlay to display ad's or push sign up forms, or call to actions in front of users. This has essentially replicated the history of the popup element. I initially came across a site that implemented this idea back in 2010, asking you to sign up to a newsletter, and the setting a cookie as to not appear again to the user. Initially I thought that was a relatively good mix of a soft and hard push for sign up. A few years later it seems to be a very common trend on fashion sites, editorial sites, and pretty much every corner of the web. When researching this blog post I actually asked a few co-workers to forward on any instance of this popup that they come across. It eventually came to a point when I had to stop since my collection was quite substantial.
These forms of overlays are popping up right on page load, pushing content in front of the user. Even worse are sites that show a overlay asking users to subscribe to or sign up before even letting them read the content. This backwards behavior is more likely to push users away over getting any sign ups despite how enticing the content may be.
Lynda.com asking users to signup for a free 10 day trial even before a user has a chance to determine the value of the content.
The core issue with this is that it's asking the user to give something of value before the site has even offered anything in return.
Imagine you're out in town on a sunny Sunday looking for somewhere to eat lunch. You see a cafe and go to read the outdoor menu, only for a server to step between you and the menu to hand you a form to sign up to their weekly newsletters.
This behavior is likely to begin to train audiences to instantly be skeptical of any overlay that appears. I know of people who have already begun actively closing any site that opens an overlay before the content even loads. If the overlay goes the way of the popup then browsers may begin to actively block or limit the overlay functionality from happening on sites.
Making the best of overlays
The overlay element is a great tool to add to a UI UX toolbox when used appropiately. Removing or lessening the visual distraction of a page's content can help focus users on completely important tasks. Overlays should focus on being clear, simple, and most importantly expected.
Overlay elements display best when there is sufficient contrast between the element and the background. The lack of contrast can cause visual confusion as to whether it is indeed an overlay or simply content on the page.
Google hangouts uses an overlay.The overlay has a white background, and whites out the background causing a lack of contrast.
Additionally whiting out the background content is very similar to how many operating systems indicate that a program has stopped functioning and should be avoided.
Windows whitings out a program when it stops responding. Note how similar this is in appearance to the google hangouts overlay.
Overlay elements are also best used to display content that does not require complex interactions or functionality. Lightboxes for images and videos work great since the user only has a single point of focus. The restrictive space offered by smaller overlay's means heavy content should be avoided. Full width overlays alleviate this issue, but it becomes an argument as to whether or not you need to use an overlay at all at this point.
Despite appearances this is actually a full width overlay to view a full article on USA today. It's not clear as to whether there's any real benefit in using an overlay at this point
The most crucial point in using overlays is that they should be triggered by an appropriate user's interaction on the site. The functionality should be appear because of the user clicking a button, a link or undertaking an action on a website such as submitting a form. This ensures the user has an expectation of something happening as opposed to something simply appearing for no reason.
Twitter shows an overlay after clicking the new tweet button on the desktop. The overlay has clear focus with a single main call to action.
What's the alternative?
Asking sites to completely abandon the overlay's without offering any alternative is always going to fall on deaf ears. What can be done is suggesting some alternatives that allow sites to push the same existing overlay content but ensure that they are less intrusive and happen in more appropriate context.
Asking a user to sign up, view more content, or continue the conversation should happen after a user has had a chance to view the page they landed on. Once the user has had a chance to read and digest the content, then it would be appropriate to show the overlay content. Some sites have already introduced this less intrusive style, where the overlay only appears once the user has scrolled to the bottom of the page.
The overlay on Vector tutorials, only appears once you've scrolled down to the bottom of the page, indicating you've read the content.
Alternatively look to see if an overlay is indeed the right approach to use at all. In my article I used Lynda.com as an example of a overlay appearing before even offering content. I've just reviewed the site again and they've removed that overlay (great improvement)! Instead Lynda.com has used the same overlay content as the last frame in the tutorial video. Which means after you view the content you are pushed the offer to sign up for a trial. This is the appropriate position for this as it happens after the user has completed an action, in this case viewing a video.
Lynda.com has vastly improved the experience by ditching the intrusive overlay and instead choose to only display the trial advertisement after the user has watched the video content.
Conclusions
Overlays are a great way of highlight specific content, without the drawbacks of opening a new page like a popup. Much like popups they've slowly been turned from a useful functional element into an intrusive vector for online advertisements. If this behavior continues, users are likely to be more skeptical of all overlays, and could eventually lead to them being actively blocked by browsers. Sites should endeavor to find ways to push the content in a less intrusive manner, by looking at the appropriate context to show the overlay content.
Bonus!
After writing this blog, I was lucky enough to come across an extraordinary overlay that I just had to share as well.
The fabled overlay inside an overlay