When it comes to Web applications, one of the biggest changes in user interface design over the past few years has been the growing use of LightBox dialogs.  Though they’re similar to a popup window, the LightBox doesn’t involve a new window at all.  Indeed, the LightBox is simply a dynamically created <div> that displays a new modal window with a semitransparent cover.  This cover blocks user interactions with other page elements while the LightBox is open.

Screenshot of a LightBox dialog in SiteExecutive

So, other than aesthetics, why use a LightBox dialog instead of traditional new window/ modal window approach?  Here are two key reasons:

1)      Usability – this is huge. With the LightBox your users won’t accidentally minimize or hide the modal dialog, and thus, they won’t become frustrated when they can’t access the main window.  Because the dialog is entirely within the scope of the window, it elegantly draws the user’s focus to the pertinent content within the LightBox, avoiding other functional distractions.

2)      Multi-browser support. A major advantage of using <div> based dialogs and one that has been especially beneficial for the SiteExecutive product, is compatibility across browsers. The LightBox approach relieves any worry about how different browsers interpret opening a new window. Because of this, modal LightBox dialogs encourage uniform functionality and easily allow for multi browser support.

When it comes to developing efficient and effective interfaces, LightBox dialogs are the answer for today’s developer.  We’ve begun leveraging LightBox dialogs in SiteExecutive, and customers should anticipate seeing more of them in the next version of the product.