Web design has come a long way from just creating HTML documents. It is essentially the art of presenting information in a readable, useable and functional manner. There are numerous interface elements that one can use to achieve the goal, for example tabbed layouts, paginated view and modal windows. In this article will see the different uses of modal windows.
A modal window is a window that floats above everything else. It has many advantages. For example, when you want to draw the user's attention to a message, you can show the message in a modal window with an 'OK' button. The user can't click on anything else until she OK's that message.
Modal windows are extensively used in desktop applications. On the Web however, they are starting to be used more and more. Why weren't modal windows used on the Web from the start? The answer to that is partly in the fact in that in the early days of the Internet, web pages were looked at as flat documents (an electronic replacement to a printed document). Back then, JavaScript was capable of performing not too much more than merely validating input forms. As JavaScript became more powerful, web developers started increasing interactivity on their websites, and thus modal windows were introduced to Web.
When Should You Use Modal Windows?
Displaying a Photo or a Video
A picture speaks a thousand words; and a video some more. However, if you load up the page with several large images, the page will take forever to load. You should instead display thumbnails on the page, and when the user clicks on any of the thumbnails, you can load the large version of the particular photo.
Modal windows is extremely useful when you are dealing with videos. When the user clicks on the poster frame, you can load the video in a modal window. You should probably have a dark overlay on the page so that the user isn't distracted by the other content on the page.
Slideshow
When you have multiple photos on a page, it is a pain if the user has to click on the thumbnails one after another to go through all of the photos. You should provide a 'Previous' and 'Next' link in the modal window. You can also automatically play through the photos; the user doesn't even need to click to view the next photo. You should also experiment with different transitions like cross fade or slide in between the photos.
Forms
Whether you are selling a service or providing some information to your users, you are bound to have forms on your website. It could be a signup form or a form in which the user tells you what she thinks of something. Most users are too lazy to fill in forms. Specially if at the end of the page, you have a link like "click here to sign up" and when the user clicks on it, the page reloads to show the sign up form. While the page is loading, the user might have switched to another window where she is reading her daily news. Once there, she will forget that she was signing up for your service. What you should do instead is to show the signup form in a modal window. This window will come up instantaneously and thus reduce the chance of her switching to another window and forgetting about your awesome service.
Promotions
Popup-window advertising was a very effective way to advertise until Web browsers included the feature of blocking popup windows. Using modal windows you can bypass that ad-block completely and display your ads. I am not in favor of this style of marketing, but as it is one of the uses of a modal windows on the Web, I thought I should bring it up.
Alerts
When you want to alert the user of something, the best way to do so is through a modal window. You see this very often on desktop applications. When you try to close an application and you forget to save the open document, you get an alert asking you if you want to save the changes you have made. The user can't perform any other actions until she clicks on one of the buttons in the modal window.
Heads Up Display / Tool Tips
HUDs are also modal windows that are mostly used for displaying additional information (like help elements). Though this information is extremely useful, it doesn't deserve screen space all the time. Users who are familiar with your service won't need this information, but new users (this number will grow by the day) need to be able to access this information easily. So, what you should do is to put the information into a modal window and provide links to display the HUD in a convenient location on the page.
Authentication
In a multi-user system, authentication plays a critical role. Certain actions can be performed only by certain users. So far, we don't see this use of modal windows on the Internet, but it is used often in desktop applications. The best example is when you are installing an application on the Mac, you are prompted for the administrator's username and password.
Conclusion
As mentioned above, modal windows were brought into the web pages not so long ago. Lokesh Dhakar's implementation of modal windows (called Lightbox) that uses JavaScript was one of the first ones to become popular. Ever since, modal windows on the Web have been aliased with that name, Lightbox. His implementation is extremely useful for displaying a single photo or a photo album in slideshow mode. However, it doesn't have support to play videos or embed forms into them. Many people have come up with variants of the Lightbox to deal with other uses of it or using different frameworks to build it.
Original: August 10, 2009
Find a programming school near you
