Lightbox usability

Modal dialog boxes, i.e. windows/dialogs that once opened must be closed before the user can continue, have always been a bit of an usability no-no.

The biggest problems being that the user either doesn’t notice the modal dialog has appeared, or doesn’t realise that it requires their attention before they can continue.

During usability testing I’ve seen first-hand the frustration that can be caused by modal dialog boxes. Thus I’ve always diligently tried to define interaction solutions to avoid/minimise the need for modal dialogs. But the clever Javascript Lightbox code seems to have put an end to these problems.


As you can see from the above example on the BBC’s site, the Lightbox technique leaves the user in no doubt what they need to do before they can return to the main window.

I haven’t yet conducted any usability testing on this kind of Lightbox dialog, but my guess is that it will test far better than traditional modal dialogs.


I see that Jakob Nielsen named the Lightbox his “interaction design technique of the year” in his Year’s 10 Best Application UIs 2008. Nice to get there before the Dane.


4 responses to “Lightbox usability

  1. It might be true to some extent that Lightbox provides an advantage over popups but there are also some problems with them:
    They force you to react immediately, there is no way to drag it out of view.
    It breaks link usability. Middle clicking doesn’t yield any result and light box links are usually indistinguishable from traditional urls.

    The true power of the Lightbox lies in system critical modal feedback or critical user input (login for example).

  2. simplerisbetter

    @ Peter

    Thanks for your comments. I agree that Lightbox’s force you to act immediately, but isn’t that what is good about them? Context of use is the big thing. Can we agree that Lightbox is better where modal feedback is required?

    It is funny isn’t it how often that the strength of an interface device is also its biggest weakness. For example, the inability to drag the Lightbox out of view is precisely why I think it is better than a traditional modal dialog. Lightbox’s strength is that it far more clearly communicates that you must act on THIS thing before going back to THAT thing (which you can still see in the background).

    As long as the Lightbox has a clear Cancel/Close/etc button it seems to make far more logical sense to me. But hey I am not your average user.

    The point about middle clicking I assume refers to users trying to click on something behind the greyed out Lightbox area. I can see that this could be a problem. I have seen the Lightbox used with varying degrees of transparency. The example I gave, from the BBC Beta Homepage, has quite a high degree of transparency. I think a less transparent version could somewhat mitigate this problem, i.e. the background would be less noticeable.

    Your other comments are all valid, but I question whether points like “light box links are usually indistinguishable from traditional urls” isn’t just an example of usability professionals over-analysing a situation. Providing the flow makes sense to users and the Lightbox environment doesn’t cause a judder to the users sense of the familiar environment in which they are going about their task, I question whether it is really useful/necessary to provide some visual indication of Lightbox links.

    But all this is just my opinion, as said I’ve not conducted usability testing on this, so mine are just the thoughts of someone that’s done a lot of usability testing over the years.

  3. An additional purpose of a lightbox is to “pause” a process and provide additional, indirectly related information. In this manner, the user is not removed from the process itself.

  4. Pingback: Information Development : Dovetail Support Suite Provides a Rich User Experience – Part I

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s