On overlays

In the past weeks I’ve been explaining at work the notion of overlay. My colleagues were using the term “pop-up” to describe the lightweight layer assuring stay-on-the-page functionality. I’d like to sum up things and use this post as future reference.

1. What is an overlay?

a mini-page displayed in a lightweight layer over the page, obtained by using either Flash or Ajax-style techniques (Dynamic HTML)
in-page object, controlled by the web application, not the browser, so the developer has complete control over the visual style of the overlay making it visually integrated into the application’s interface

Why not browser pop-ups?

browser pop-ups display a new browser window; as a result these windows often take time and a sizable chunk of system resources to create
browser pop-ups often display browser interface controls (URL bar)

Why not using JavaScript alerts?

don’t provide a consistent user experience between operating systems; under Microsoft Windows they will appear centered in the browser window, but with the Macintosh they will slide out from under the title bar; depending on where the action takes place, users may have to move their mouse a lot further each time they need to dismiss the alert
there is no way to control the look and feel of the alert pop-up

2. Modality

Overlays can be modal or non-modal. A modal overlay requires the user to interact with it (perform the action or cancel the overlay) before he can return to the application. Modality can be reinforced with the Lightbox Effect.

Lightbox effect = Dimming down the background behind the overlay; this cues the user that this portion of the interface cannot be interacted with. The Lightbox Effect should be used to emphasize modality or call attention to special information in an overlay.

In the case of a non-modal overlay the user can click anywhere outside the overlay (in the dimmed area) and the overlay will dismiss; the Lightbox Effect is not needed for most non-modal overlays.

3. Types of overlays

Dialog Overlays
Detail Overlays
Input Overlays

4. Activation

on click
on mouse over
delayed mouse over

5. Anti-patterns

Overlays are a good way to avoid sending the user to a new page. This allows the user to stay within the context of the original page. However, since overlays are quick to display and inexpensive to produce, sometimes they can be tempting to use too freely, and in the process, may actually break the user’s flow.

idiot boxes - avoid unnecessary dialog overlays
mouse traps - avoid activating the overlay on mouse over too easily; presents an annoying experience
non-symmetrical activation/deactivation - it should take the same amount of effort to dismiss an overlay as it took to open it
needless fanfare - once activated, show the overlay immediately; avoid lengthy animations or effects that delay showing a overlay
hover and cover - the overlay can completely obscures other items displayed on the page
don’t use an overlay when a simpler, in-page interaction would suffice

Theme created by David Summerton.