Design

Five killer ways to use overlays

Used incorrectly, overlays can be disruptive and act as barriers, but use them well and they can boost focus and minimise server calls. Matthew Smith explains

Clever JavaScript implementations have made overlay windows a popular alternative to pop-ups. But do we know how and when to use these things?

Overlays are a great solution for giving a user a moment of focused interaction, or in the case of modals, asking the user to make a decision about an action or alerting them to a response or error. Designers have co-opted this tool for all kinds of other scenarios including portfolios, contact forms, advertising, shopping cart details and more. 

Overlays take a user out of the regular flow. They’re akin to a speed bump. Using one for an action in a web application can be a great way to keep users centred on the page and reduce server calls. New Twitter does a great job of this with its implementation of the tweet window, which overlays content but can be easily moved so that the content below can still be accessed.

Advertisement

Then there’s a modal overlay, which is more of a stop light than a speed bump. These are used when it’s important to help the user focus on an action that needs to be taken before they can move forward or go deeper into the site. They might come in the form of a log-in box, an error alert or something global such as a preference handler. The concept behind overlays and modals is well explained at www.patternry.com/p=overlay.

Modals are often overused because they can be so easily implemented, and they can sometimes be obstacles for users. Ask yourself why the content shouldn’t be on a page of its own. Will it help the user to see the content behind the modal? If not then why have a modal? Some alternatives to consider are drawers or slide-ins. As with any interactive element, think before you implement.

 
Five examples to check out

1. RelayFoods Relayfoods.com provides an ecommerce usage for a modal overlay that helps users access product details, reviews and other product thumbnails. 

Relay Foods website

2. Apple The ever-clever folks at Apple have designed a great modal delivery for their trailer videos. If you hover over the video, you see controls and thumbnail options to view other videos. If you’re not hovering, it’s all video focus. 

Apple video overlay
3. WPcoder The site of WPcoder, a “small group of developers who love WordPress”, places its FAQ content inside a modal overlay. This is a great example of when a small amount of content is more appropriate in an overlay than a separate page. 
 
WPcoder website

4. Twitter Twitter.com uses an overlay for its new tweet function while letting users move the tweet window to access the content on the page. 

Twitter overlay example

5. Art Version This overlay from Chicago design company Art Version helps users to see that their new Versions App has started downloading: a great example of a notice-oriented modal.

Versions app overlay
Use with care

Hopefully these examples can help you choose the best way to implement overlays on your projects, and ultimately decide whether overlays are even neccessary. Used well, overlays can add extra functionality and focus to an app or site, but use them with care. They can bite!

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection