Overlays and Inlays
Overlays
• Overlays are really just lightweight pop
ups. We use the term lightweight to make
a clear distinction between it and the
normal idea of a browser pop up.
• Browser pop ups are created as a new
browser window .
• Lightweight overlays are shown within the
browser page as an overlay .
• Lightweight overlays are just a lightweight
in-page object. They are inexpensive to
create and fast to display.
We will look at three specific types of
overlays:
• Dialog Overlays,
• Detail Overlays,
• Input Overlays
Dialog Overlay
• Dialog Overlays replace the old style browser
pop ups. Netflix provides a clear example of a
very simple Dialog Overlay.
• A user can click on a “Buy” button to purchase a
DVD. Since the customer purchasing the DVD is
a member of Netflix, all the pertinent shipping
and purchasing information is already on record.
• The complete checkout experience can be
provided in a single overlay.
Lightbox Effect
• One technique employed here is the use of a
Lightbox Effect. In photography a lightbox
provides a backlit area to view slides.
• On the Web, this technique has come to mean
bringing something into view by making it
brighter than the background.
• In practice, this is done by dimming down the
background.
Detail overlay
• The Detail Overlay allows an overlay to present
additional information when the user clicks or
hovers over a link or section of content.
• Use Detail Overlays to give a sneak peek at
detailed information. This will avoid
unnecessary page transitions.
• Taking another example from Netflix,
information about a specific movie is displayed
as the user hovers over the movie’s box shot.
Input Overlays
• Input Overlay is a lightweight overlay that brings
additional input information for each field
tabbed into.
• Use Input Overlays to simplify the visual style of
a form
• American Express uses this technique in its
registration for premium cards such as its gold
card.
Inlays
• Not every bit of additional control, information,
or dialog with the user needs to be an overlay.
Another approach is to inlay the information
directly within the page itself.
• We will look at specific types of inlays:
❑ Dialog Inlay
❑ List Inlay
❑ Detail Inlay
❑ Tabs
Dialog Inlay
• A simple technique is to expand a part of the
page, revealing a dialog area within the page.
• This Dialog Inlay is similar to a drawer opening
with a tray of tools.
List Inlay
• Lists are a great place to use Inlays. Instead of
requiring the user to navigate to a new page for
an item’s detail or popping up the information in
an Overlay, the information can be shown with a
List Inlay in context.
• The List Inlay works as an effective way to hide
detail until needed—while at the same time
preserving space on the page for high-level
overview information.
The Accordion is an interface element that
employs the List Inlay pattern to show only one
open panel in a list at a time.
Detail Inlay
• Hovering over a movie revealed a Detail Overlay
calling out the back-of-the-box information.
• Use Detail Inlay to provide additional
information in context without hiding other
information.
Tabs
• Tabs can be used as a Detail Inlay. Instead of
moving the user from page to page (site
navigation), tabs can be used to bring in content
within the page, keeping the user in the page.
• The tabs can be
Traditional tabs
Content tabs
Personal assistant tabs
