Web Design Tips, Tutorials & More!

All about Modal Windows

Content organization, that is what building websites is all about, and what better way to do it than with floating modal windows.  You’ve seen these as registrations forms, help boxes, even search menu boxes.  Now is the time to get to know them better.

First, what are the benefits of modal windows?  Modal windows offer a quick and sleek way to integrate large amounts of information or new information onto one page without forcing the user to load many pages one after the other.  It’s a smart way to increase the usability of a site since it saves the user lots of time and frustration and keeps the layout nice and neat.

In this post, we’ll take a look at several contexts for modal windows, and then provide a showcase for your viewing pleasure.  These tips and hints are sure to get you off to a good start, so that you can begin building your own modal windows in the near future.

Modal Box Contexts

1. Lightboxes

Videos and images work very well with modal windows, saving users time and effort.  Layout is kept uncluttered and free with a modal window doing the work of displaying video content rather than a new page or space within the layout.  Best practices here include linking all thumbnail images or video clips to the same modal window so that users can scroll through them using “next” and “last” buttons.

2. Contact and Log-in/Sign-up Forms

One good thing about modal windows is their versatility.  They can basically be utilized on each and every page without complications.  That’s what makes them perfect for contact and log-in/sign-up forms.  In fact, this is probably the most popular use for modal windows.  The best thing to do here is to make the link leading to the modal window clearly visible and convenient for the user to find on every page it’s used.

3. Delayed Functions

Modal windows are also great for delayed functions, such as page loads or to show that something on the site is currently downloading.  The user will know that action is taking place rather than be misled to think that there’s a problem with the site.  Make sure that the background fades correctly so that the alert or notice box is a focal point.  This will ensure that the message or notice is clear to the user.

4. Help Boxes

Another good use for modal windows involves those occasional elements that some users love but others don’t care for at all.  Help elements are one such case.  Design help modals to keep layouts clean and neat, like this highly functional help window below.

Usability and Styling

Notice how the modal windows featured here are focal points while all other site content fades to the background.  This is because the fade is an essential aspect of all modal windows.  Fading the background creates a center of attention for the information contained within the modal window.  This is great for usability since it engages the audience well with very little effort on their part.  The fade is usually achieved by adjusting opacity and employing the use of a drop-shadow, which quite often is used alone on white backgrounds.  Sometimes, when there is no fade, the drop-shadow is also used by itself, working alone to create basically the same effect as a fade.

Another common characteristic of modal windows is the exit strategy.  This can be done in a number of ways.  Some designers design the box to close with a click on a “Close” or “x” button.  Others employ the use of a click outside the modal window.  Whichever method is employed the key is to keep the method consistent throughout the site and perhaps even add a “Don’t show this message again” button when appropriate.

Leave a Reply