Modal Windows, Overlays, & Boxes, Oh My!

By Joseph Suarez

Two fundamental questions constantly in the mind of anyone navigating through an eLearning course are, “Where am I?” and “How do I get back to where I was?”

That’s exactly why popping up an overlay of additional content without loading into a new page or slide can be advantageous. Without breaking the user’s navigational frame of reference, additional content, feedback, or interactivity can be presented. In user interface terms, this is referred to as a modal window. It also goes by several other names with subtle differences including modal overlay, dialog box, and lightbox.

Not to be confused with those annoying browser window pop-ups, a modal window temporarily prevents interaction with the original screen by overlaying it with a separate view state and requesting an action be taken before continuing. Ideally, this occurs with some additional visual indication that the original page is inactive such as a faded, darkened, or blurred background. A modal window is typically triggered to appear in response to an event such as a button click or page load.

The process to create a modal window depends on the eLearning authoring tool used, but in the most basic form, it consists of the following: A content container, a text area, and a button to return to the original screen state. More advanced components include a semi-transparent background, text header, icon(s), input fields, images, and/or video.

Modal Windows can be as simple as an alert dialog box, or as complex as a photo gallery. A common technique in eLearning is to use Modal Windows to provide question feedback on quizzes and surveys. But really, there is no reason why we have to stop there. Here are some more potential uses:

• Hide long sections of text accessible through a “Click to learn more” link.
• Place links to additional information and files inside a modal window.
• Pop-up a movie clip and add a “dim the lights” effect.
• Hide a course’s table of contents inside a modal window. (Does it really need to be taking up 20% of the screen at all times?).
• Prevent accidental course closes with an exit course confirmation box.
• Use image thumbnails that open to full size when clicked to save screen space.
• Alert the user of important information (use sparingly).

When creating a modal window, always make it clear how to return to the underlying screen, and think through which method works best from a user interface standpoint. Most of the time, a close button or link will suffice, but you may need a pair of OK/Cancel or Yes/No buttons. You’ve no doubt encountered these types of interactions frequently from your computer’s operating system, and you should be able to discern which is appropriate.

There’s plenty of room for creativity with Modal Windows as well. The content containing window doesn’t need to be a boring rectangle. It could be a post-it note, chalk board, or talk bubble. For inspiration, here are a couple links for nice examples of modal windows used on the web.