While designing for web, when should I use a light-box and when should I direct the user to a new page? For example, if the user clicks the "contact" link, should I open a small form in a light-box or send them to new page on the site?

  • 4
    It's not a fair answer, but generally speaking I hate lightboxes (which isn't to say I don't use them, just that I do so reluctantly). I think they're an anti-pattern. By having a fixed dimension, they make perfectly fine desktop webpages feel awkward on a phone (or TV or print or insert other non-standard media here).
    – Kit Grose
    Jul 2, 2012 at 4:45
  • 3
    @kitgrose I agree with all the above. I also find myself pressing back when I open one by accident and it taking me back to the previous page which is irritating.
    – Wander
    Jul 2, 2012 at 12:35

5 Answers 5


Some broad guidelines for lightboxes:

  • Does the action in the form or window somehow interact with or alter the contents of the original page? Lightboxes communicate that relationship and allow users to see the change take place on the page after the box closes, rather than trying to spot the differences between two page visits.
  • Modal dialogs work well if the user benefits from staying in the same 'context' as the original page. For example, if you have individual pages dedicated to products, and you want to communicate that the user's action specifically relates to the current product, a lightbox or modal window will make the relationship unambiguous.
  • Will the user typically return to the original page after the action? Moving between pages will always create a cognitive cost for users, so avoiding transitions is best. Lightboxes make transitions easy to follow, and help users guess their destination after submitting the modal form.
  • Can the content or element work well in a small viewport? Lightboxes on the web require small dimensions to support low-resolution clients. Scrolling isn't optimal in lightboxes because users don't see content continuing under the fold / outside the viewport.
  • Are the costs of a user mis-using the browser 'back' button low? Whilst most users seem to understand the lightbox context, others are used to relying on browser navigation. You shouldn't use lightboxes when hitting 'back' could create a major cost.
  • Is the form in the lightbox somehow tangential to the user's current workflow? Moving users between pages will be disorientating; using a lightbox clearly communicates that the original workflow has been suspended, but the user will return to it.
  • Is the form multi-stage? Users expect a lightbox to close on submission, rather than act like frames, so you shouldn't have multiple 'pages' within a lightbox (though using progressive disclosure is acceptable). Try to keep modal dialogs to a single 'page'.

I like to follow the rule that lightboxes should be used if after the task is completed the user will want to get back to the page they were viewing previously. Lightboxes keep the user in the context of what they were viewing and users expect to be returned to that page once their task is complete.

I think the context of the contact link is important when thinking about this question and could alter the answer.

  1. If you are talking about a general contact us link from the homepage of a site which has a simple form and then the user's task is complete I would use a new page rather than a lightbox.

  2. If the contact us form will give the users more information about a particular product for example and is launched from a product details page I would use a lightbox so that the user is quickly and easily returned to the product page so that they can keep browsing. Similarly I would use a lightbox on a real-estate site where you select that you want to 'contact an agent'.

Hope this helps but in this situation I always find that the answer "it depends" most often fits. Consider the context in which users will click the contact us button and whether they will want to return to their previous task and that should give you your answer.

  • What you suggest in a grid where the user can insert an item? When press "add new" (from the list page), the destination will be the item detail page. When press "update" (from the item detail page), the destination will be the same item detail page. Jul 10, 2012 at 15:14
  • Wouldn't it make more sense to send the user back to the list page with the new item showing on the list rather than having them remain on the item detail page? Sorry if I misunderstood. If you do intend on them staying at the item detail page you need to make sure you have got some sort of message or indication that the item was saved successfully.
    – rsparis
    Jul 12, 2012 at 4:39

Quick answer: It depends.

Adding to rsparis's answer: Although it's not a 'significant' number, quite a few computers don't have javascript enabled. Those computers will not be able to see the lightbox. Therefore, if what you are going to show is going to be key information (like a contact form), I would guarantee it works for every user possible.

I (personally) like using lightboxes/tooltips for adding content. Depending on what's essential, important and not too relevant in your site, and also on how much js you are using already, think of it either as an add-on, or as a functional part of your structure.

  • 5
    The technical solution to the no-Javascript problem you describe, for anyone interested, is to have the link point to a real page, then use JS to prevent the link from opening when you open a lightbox instead. That has the profound benefit of letting me Cmd/Ctrl/Middle-click links to open them in a new tab if I want.
    – Kit Grose
    Jul 2, 2012 at 4:42

I use light boxes when there really just isn't enough content for a new page, like a contact form or subscribing to a news letter, and when I don't need that content on the page


Not strictly speaking of lightbox (I personally grew tired of lightbox), but any sort of AJAX request is better than loading an entire new page if you're only replacing a bit of content on the screen; such as an image, a caption, or even a few images and a caption that go together.

The only time you'd really want to load an entirely new page is if the user would possibly want to bookmark or return to this specific set of content, or if you're changing UI elements in some way. For example, turning a five item slideshow into five sepparate pages would be unnecessary, and an annoyance to the user. However, if every page of a site were on the same HTML page, and simply requested new content with AJAX, users wouldn't be able to bookmark, or save in their history, or use the forward and back buttons, to navigate through your site.

This of course isn't considering any possible SEO benefit to users requesting more pages per visit.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.