My patience is wearing thin on this one. There’s a new image editor called Acorn, and it looks pretty cool. So I click on one of the screenshot thumbnails in the lower-right of the home page. And then it happened. The sky turned black, the lights went out, and a giant gleaming polaroid slammed me in the face. That’s right, I got lightboxed.
Here’s a time lapse of my experience on the Acorn site:
You know what that looks like? A strobe light. And it felt like one too.
There’s more than the headache. Lightboxing kills context, and worse, it kills personality. Every image in every lightbox is the same, floating in the same generic universe, cut off and disconnected from your site, your style, and your design.
So next time, save us the eye strain and think twice before you start playing with the lightswitch.
Kyle Pike
on 10 Sep 07I have hated lightboxes since they started becoming widely used. I want to view your image my way. Many times while reading something I will open enlargements of images in new tabs to review after I am finished reading. Not possible with lightboxes.
Brian H
on 10 Sep 07Every time I see a lightbox I think two things.
1.) If I click the image does it go away or do something else. 2.) Can I click outside the image to get back to the page, because I accidentally clicked on image.
Reminds me of the ole “Just because you can do something, doesn’t mean you should”
clifyt
on 10 Sep 07Personally, I believe it has been one of the more positive elements of ‘web 2.0’. Instead of having a pop-up window that I invariably click beside, and then realize I have a dozen windows open simultaneously, it shows up centered in the screen.
It doesn’t kill the content - you’ve already killed the content by deciding to click on an image that was going to go elsewhere. Of course you are disconnected - you are looking at an image, and the distractions of everything else is removed.
Almost every negative you throw up Ryan is a positive in my book.
Jeff Croft
on 10 Sep 07I’ve got mixed feelings about Lightboxes. While I definitely don’t think they’re usually an ideal situation, I agree with wlifyt that they’re a lot better than pop-up windows.
And, clifyt: Ryan said it kills context, not content.
Joshua Blankenship
on 10 Sep 07I’ve never really thought about the “kills content” angle, I just hate the way it forces me to use the web in a certain way instead of giving me options.
What’s annoying is the inconsistent way it gets implemented on various sites – where do I click? Is there a close button? A next button? Oh, I can’t easily bookmark that image? You like 80% opacity but over here this guy likes 67%, etc. etc. etc. It’s not in the least bit intuitive.
I end up control+Wing almost every lightbox-using site (inadvertently) because THAT’S HOW YOU CLOSE A WINDOW in a browser. The fact that it isn’t really a separate window points to the issue at hand. Don’t give something a default behavior that isn’t in keeping with what it actually is.
Joshua Blankenship
on 10 Sep 07Correction: “kills context” angle
Thanks, Jeff.
JF
on 10 Sep 07Just put the images on a single page and let someone scroll. All this clicking on and clicking off and clicking on and clicking off makes it more of a chore than it needs to be.
Brad
on 10 Sep 07Eh, I think this is overly critical. I like this feature in the same way that I like Writeroom. If I click the image, things go dim and I can focus on it. When I’m done, I hit the quite obvious “close” button. I agree that it’s somewhat overused these days, and consideration should be given to how much clicking you’re making people do, but you can’t just write it off; it “feels” a lot nicer than some generic “screenshot page” that I probably don’t want to scroll all the way through. Plus, this way, I only load the images I want to see.
clifyt
on 10 Sep 07Content / Context. Yeah yeah…context—you want to view an image by itself or you wouldn’t be looking at it.
What is the alternative? Remove the image from the context entirely where the thumbnail doesn’t give you an indication of what you want to see?
That removes the context. By this token, ANY hyperlink removes context. Ya’ll are entirely right—it isn’t an ideal situation.
JF—your idea of putting images on a second page and scrolling removes the context ENTIRELY. Want to see what some inline image does in more depth? I guess you should go to another page and scroll, and forget what you were looking at in the first place.
The Lightbox is the closest way of keeping context that anyone has found that is both aesthetic and useful.
isaacw
on 10 Sep 07It all goes back to application. Lightbox, is yet another tool available to the designer for his use, and it’s up to the designer to know when it’s appropriate to use.
Try playing a weewar and note their use of it as a replacement for dialog boxes. In fact, their application of the “lightbox” effect actually helps reorient your context, a helpful feat when interacting in a complex, untraditional environment, such as a game.
Josh
on 10 Sep 07I think lightboxes are overly used, but they have their place and can be utilized properly to they add convenience, not create annoyance.
Jeff Croft
on 10 Sep 07What about simply including the image inline, in your content (floated to one side, for example?). I’d say that preseves context a lot better than a lightbox does.
Jamie Tibbetts
on 10 Sep 07So far, I think I agree with clifyt on everything. Lightboxes are used to view enlarged versions of images, and they do it quite well. There’s no need to load an entire new page just to view an image, and when you’re done viewing the image, there’s no need to hit the “back” button and wait for the previous page to reload.
JF
on 10 Sep 07JF—your idea of putting images on a second page and scrolling removes the context ENTIRELY . Want to see what some inline image does in more depth? I guess you should go to another page and scroll, and forget what you were looking at in the first place.
No it doesn’t. It says “I’m going to a page to look at screenshots.” I can look at a screenshot, scroll down to see the next one, scroll back up if I want a quick peek at the one I just looked at, scroll real fast to get a “flipbook” like feel for the app.
One page is flexible, easy, and in my opinion, a simpler solution to execute (as a publisher) and view (as a customer).
The Highrise tour is a good example of this I think. One page with a scrollbar. Being able to see all the images in a lightbox would require about 20 clicks, screen fades, transitions, etc. That’s a pain in the ass if you just want to browse screenshots.
Tomas Becklin
on 10 Sep 07Everything has its place. I think that the Lightbox solution works great when you are viewing a photo library for example. Specially if an xmlHttpRequest is used to load in the next picture while I’m looking at the current picture. This way there is no load time in between pictures. Something that I would like to see is a strip of maybe 10 images in the library under or over the current picture to make it easier to skip ahead to an interesting picture. If you could scroll through those thumbnails, even better.
Josh
on 10 Sep 07I, for one, like the script. It lets you zoom in on an image without having to leave the page. I don’t see how that takes things out of context. In fact, I think it actually helps keep things in context.
Your screen shots look like you were just clicking around to prove a point. Yeah, it looks like a strobe light when you click around like an epileptic monkey. The point of the script is to zoom in and see more and look at it for a little bit. It’s perfect for screen shots.
The only problem I run into is not being able to show large images. It scales them to fit in the browser, which is a problem for low resolution screens.
And you can totally make it match your site design. You just have to modify the images and the styles in the CSS.
Stephen Jarman
on 10 Sep 07JF – The Highrise tour is a good example of this I think. One page with a scrollbar. Being able to see all the images in a lightbox would require about 20 clicks, screen fades, transitions, etc. That’s a pain in the ass if you just want to browse screenshots.
If I had loads of images or screenshots like on the tour page, I wouldn’t dare use a Lightbox installment. It would be painful, ugly and just darn slow. It would also eliminate the point of the Tour page (duh?)! ;)
I totally agree. But what if you have, say three, images with Lightbox that use the linked photos function (gallery). You can click forwards and backwards and it looks professional. My customers like it, I like it. I still agree with you, though, which is why I always change the appearance a bit with the CSS or JS effects.
PS… For real, I’m 13 and I love RAILS! (and your products)
Alejandro Moreno
on 10 Sep 07I agree that lightbox should not be used willy-nilly. It does kill context, and it comes with its own user experience. That is, you create this experience throughout your pages, but as soon as you hit a lightbox, it’s lost.
I would still use it for pure image galleries, though. If the page is all about the pictures and just the pictures, I don’t see any harm in isolating them further by the use of lightbox.
Erik
on 10 Sep 07issacw I think hits the nail on the head in this case. It’s all about context but on a broader level. It’s a personal aesthetic choice I think that depends on the feeling you’re trying to convey with the design of your site.
If you’re trying to convey a more artistic feeling (portfolio site for photographer etc), then Lightbox might be a good fit. If you’re going for a more functional feeling site (Highrise screenshots) then a single page might be a better solution.
It’s a balance of personal aesthetic and designing for your audience
David
on 10 Sep 07Yeah, I’m not a big fan of lightboxes either. At first I thought they were pretty cool, but I’ve changed my tune after accidentally hitting the back button a few times out of habit and once or twice closing the window like Joshua, above. Ultimately it’s very irritating.
They’re neat and they’re flashy, but I’m not convinced they’re better.
Nathaniel
on 10 Sep 07@Kyle, first commenter: lightbox images can be opened in new tabs. Lightbox links are just normal links to the enlarged images with a javascript onclick handler added. Right- or scroll-wheel- clicking the links behaves normally.
Josh Walsh
on 10 Sep 07You’ve made a gross justification that Lightbox is a bad tool because it was implemented in the wrong context.
That’s the same as someone saying Rails is bad because someone decided to use the tool for the wrong job.
The tool is good, the implementation is bad design.
elv
on 10 Sep 07I want to view your image my way. Many times while reading something I will open enlargements of images in new tabs to review after I am finished reading. Not possible with lightboxes. Right click -> Open link in a new tab. You can also wheel-click the thumbnail to achieve the same thing, but I think this won’t work on every OS/browser.
To me Lightboxes are handy for a small number of smallimages. If you use large images the close button may be hidden… I’d like the previous/next buttons to always be visible though. It would be more intuitive.
Mezza
on 10 Sep 07@Josh: hear – bloody – hear
Seth Aldridge
on 10 Sep 07I hate lightbox!
Darren
on 10 Sep 07Lightboxes, in my option, can actually be a good way to maintain context when viewing a large image. For example, if you have a couple of images that accompany an article, using a lightbox-like display keeps the user on the page and can, if used properly, still in the context of the content their are viewing.
Now, they are not perfect. I’ve seen many users click the back button after opening a lightboxed image. This can be corrected through more JavaScript (to capture the back-button) or through a less jarring transition or presentation of the lightbox.
In a photo gallery, I like to be able to easily click through the series of images without having to re-find the “next” and “previous” buttons every time a new, differently-sized, image loads.
Nonetheless, these problems can be corrected with greater attention to detail, user testing and a few technical tricks. In some contexts, lightboxes are an ideal solution.
clifyt
on 10 Sep 07“The Highrise tour is a good example of this I think. One page with a scrollbar. Being able to see all the images in a lightbox would require about 20 clicks, screen fades, transitions, etc. That’s a pain in the ass if you just want to browse screenshots.”
And in this case, it works out. You built a narrative around these images. Judos for you. Just because it works here, it may not work everywhere. Just like the lightbox motif. I’ve seen it used for thumbnails of a photo that isn’t much bigger than what is being used right on the page. Heck, I’ve used this idea for images that were actually SMALLER (but in the right context where I wanted to minimize the rest of everything).
Its just annoying when folks get on their soapbox and claim that things are bad ‘JUST BECAUSE WE DON’T LIKE IT’. In the beginning, I use to come to the 37SVN blog because it challenged my ideals, these days, it is almost as if the attempt to challenge is still there, but ya’ll are railing against beliefs just to keep the hits coming. This was a lame attempt at doing so.
I know there are plenty of reasons to use a Lightbox, and I know it is implemented badly most of the time. For instance, there is rarely any clue as to the action that will happen. I try to let folks know what will happen in mine to get around this. That is ENTIRELY upon the designer…no script is going to do everything for you. Maybe instead of complaining about hating a new technology, maybe instead of being negative, you can point out how this could be done better.
bryanl
on 10 Sep 0737signals rocks. They have covertly given a small mac vendor some good press!
Kudos!
Kyle Pike
on 10 Sep 07@Nathaniel – My statement was a bit of a catch all and I admit you are right in most cases. However, I have come across quite a few instances where the implementation was done poorly and you could not open in new window or new tab. I assume the javascript was embedded in the href in these instances.
Brian Pattison
on 10 Sep 07At least this particular Lightbox implementation is done unobtrusively… but then they mess it up with the Quicktime links! What’s up with that?!? They could easily link to the movie and use this.href in the onclick script to open it in a new window.
I’m personally using Lightboxes unobtrusively in a web app to allow a user to edit sections of a user generated page without leaving the page. Simple update/cancel buttons on the bottom of the form that opens. Works great!
I’m sure we’ve all seen good and bad uses of Lightboxes.
dieter
on 10 Sep 07“The tool is good, the implementation is bad design.”
That sums it all up.
It”s like using flash for a site that’s about content. It’s not because the tool is used in a wrong situation that the tool itself is bad.
And it’s not because it’s getting popular that it’s bad either.
Ryan
on 10 Sep 07I have to disagree on this one. I mean, I agree, for a tour of an app, a lightbox is not the way to go. Especially if you’re explaining things along the way. However, I think a lightbox has a niche set of situations where they are far more convenient and blend with a design. I use them on my site to show my photography portfolio from Flickr, but of course, there’s also an option to view them separately from the lightbox view.
I think the Highrise tour is perfect for what it is, but not every situation requires large 900×600 images, and sometimes they aren’t in a series (meaning there’s no need to leave the page for one photo). But of course, to each his own…
Dan Boland
on 10 Sep 07I lump Lightbox into the same category as gratuitous Flash. Spare me the sizzle and just show me the steak.
Jeff
on 10 Sep 07I do agree this particular implementation is not the greatest.
What about something like this? (scroll to the bottom)
It clearly states why to click the image, has a close link at the bottom if you can’t figure out to click the screen again, and it’s only one image.
Tomas Jogin
on 10 Sep 07Yeah I’ve got to disagree on this too. Lightboxes are absolutely awesome IMHO. Like all things though, they have their place and aren’t the answer for everything. Perhaps not ideal for product tours.
web guru
on 10 Sep 07My vote? Ron Paul for President!
Michel
on 10 Sep 07Not sure what all the hub-bub is about. You do have a choice. If you don’t like lightbox (or how it works), simply disable javascript and the image will load into it’s own page. Problem solved.
Ed Knittel
on 10 Sep 07Lightbox is great is for photo galleries and it’s the only time that I use Lightbox.
Darren
on 10 Sep 07One additional comment: If a site does use a lightbox for enlarging images, it’s probably a good idea to have the close button at the top rather than on the bottom (if not having it in both locations).
If the image is larger than the browser’s viewport, the user would have to scroll-down to see the close button. This can cause unnecessary confusion.
Matt
on 10 Sep 07What a coincidence, I was just browsing vehicles on a local Audi website. Their car detail page consists of a large image with five thumbnails beneath it. Clicking a thumbnail brings up a progress indicator and then the large image on a lightbox. I’ve used these in my own web applications for when I want greater control in enforcing that a user acknowledges something like a success or an error on the page. It gives the web application a “Windows” feel. They get an obvious way to close the window of course, and I like how it is centered and they can’t fool with anything in the background. Back to the car page I was referring to. This is a situation where lightboxes shouldn’t be used. When I’m going through 20-50 car ads, I want to be able to QUICKLY click through each of the car’s images – keyword QUICKLY. I don’t want to see/wait for a progress indicator and then have to click to close the window. Those thumbnails should be pre-loaded and just show up in the large image part of the page without a postback.
Jim
on 10 Sep 07Wow – I never realized so many people were against the Lightbox effect. I always thought it was cool, but now that I read these comments and think about it – it is kindof annoying and a timewaster. Thanks for the thought.
Andy Ford
on 10 Sep 07I think lightbox has its place. It may be a little overused and misused, but it still can be useful…
On the other hand, if I see one more website using snap.com “Snapshots” I’ll stick a fork in my eye – yuck!
Nick
on 10 Sep 07I don’t think the issue is the lightbox per se, it’s that it’s modal. If there were a way of introducing expanded images without using a modal dialogue pattern, there wouldn’t be a problem. A better, non-modal, design would be to slide the image into the document somehow and have the document reflow artistically around it.
Developers should use modal dialogues to force the flow of interactions in certain directions. Really, they’re best used as a means to force the user to make some choice (delete/don’t delete, save/dont save, give us your password, etc) before they’re allowed to continue. A lightbox obviously doesn’t make sense as a modal dialoge in this situation.
On the other hand, there are some valid real-world reasons why someone would want to use this lightbox design. First, it’s easy; the library already exists and it’s more-or-less drag and drop. If you aren’t a fiend for Javascript, as I imagine most are not (even you guys at 37s), this is very attractive. Second, it’s a really handsome effect that has a professional gleam to it that can really add some web2.0 chic to a site. Third, it’s a way to impress clients; this isn’t a big deal for 37s, but including eye candy to keep the client satiated is sometimes a necessary concession. It’s my experience that clients get the glassy stare when a passionate web developer starts in on abstract ideas about context and information flow.
Antonio
on 10 Sep 07Options. Some people like Lightboxes (I think they’re cool), some people would rather scroll. Different audiences have different likes and dislikes. There is never going to be one single way to solve a problem. Just like there are many ways to design a watch. (See previous SvN posts)
Give your readers options. That’s all.
Phill Price
on 10 Sep 07I don’t see the big deal – if you middle click you get the image in a new window, or you can disable JS if you like.
I think the main problem is the context of this particular placement – it’s meant for Photography – which is how I use it as a gallery in addiiton to my Zooomr account on my blog.
I personally hate having to turn on JS to comment on here – or I get some lovely source code… not the 37s I love!
Charles Adler
on 10 Sep 07Ultimately one’s hatred for something like Lightbox is entirely based on what they’ve used it for.
I hate lightbox implementations more often than not, likely for many of the examples listed above, but as with anything in design, if used judiciously and with consideration and thought for how the user might end up interacting with it, it could be a good thing.
Nathaniel
on 10 Sep 07@Kyle: I can see how that would be pretty annoying. Still, the problem there is in not using JavaScript the way it should have been used: as a way to add to the presentation for supported browsers without affecting the unsupported ones.
Auston Bunsen
on 10 Sep 07I think lightboxes and/or similar tactics, like a pop ups with a transparent overlays are great for web apps!
You don’t have to leave the page to submit info about something, like for instance, you click a message me button and a “lightbox” pops up for you to message whomever and you submit it asynchronously.
It’s pretty sweet if you ask me, but I don’t even use it for pictures or thumbnails.
— Auston
jimmy
on 10 Sep 07Haha.. watch lightbox usage drop thru the floor now that someone from 37signals has said they don’t like it.
LTL - RC
on 10 Sep 07“There’s more than the headache. Lightboxing kills context, and worse, it kills personality. Every image in every lightbox is the same, floating in the same generic universe, cut off and disconnected from your site, your style, and your design.”
Ah yes, and clicking an image to see a larger version that takes you to another page altogether is better? http://www.37signals.com/svn/posts/576-stphane-mallarm-a-painters-poet
As many others have said – don’t blame the tool, blame the user.
Nick
on 10 Sep 07@Phill:
Is there a reason you browse with Javascript turned off? Responsible JS usage has surged in the last few years to the point where you’re hobbling yourself unnecessarily by leaving it off.
Lee Martin
on 10 Sep 07I despise the lightbox. One of my clients is using it, and I couldn’t quite put my finger on what I hated about it. You’re right – it’s a complete disconnect from the actual website. A separate Universe that all the other lightboxed websites live in. Be unique, kill the lightbox.
kovocked
on 10 Sep 07I like them to focus a user down a path where they may not be able to go any further without taking a certain action (logging in). Or to guide them to better results ( multiple matches on a keyword search). However, when used for a repetitive action a user makes on the site (like adding a movie to your netflix queue) they can be extremely annoying.
Josh
on 10 Sep 07For screenshots I would agree that lightboxes are generally not a good idea. I’d rather scroll down a list of images and see if there are any images I want to get a closer look at. If perhaps clicking an image opens a lightbox, that’s probably all right, so long as I can scroll through a list of images beforehand so I’m not opening and closing 20 lightbox screens to view a screenshot tour of an app.
Greg
on 10 Sep 07The worst thing about lightboxing is that I’m used to middle-clicking a shitload of images in Firefox to pop them open in new tabs and browse all at once, without hitting the gallery page every time and making everything reload. Lightboxes don’t let you do that.
Mike Morper
on 10 Sep 07Like everything else, technology has its place. In this very specific case, I find lightbox to be very appropriate for photography presentation, though I do not find the same to be true for UI representation. The Acorn examples is poignant. I do actually concur with Dan’s post. To understand how the application works, I want to see the UI while at the same time reviewing the author’s thoughts on what I am looking at—why is the UI setup the way it is.
Photographs, on the other hand, 90% of the time should stand on their own. And a dark background draws the viewer directly to the key asset—the photograph. So when do I think a photograph should stand on its own? When it is art. When should it not? When the photograph is a “how to” image that is dependent and/or supplemental to text driving a message or task.
Britt
on 10 Sep 07I find the functionality behind Lightbox (or similar scripts) is best used for one-off functions. I prefer a Lightbox style log-in, instead of going to a new page.
Like a few others, I feel they don’t work for a gallery of images. If you only have one image, say in a blog post, Lightbox works fine. It allows me to decide if I want to see a bigger view of the image or not.
An Acrobat
on 10 Sep 07Surprise! It’s cool to hate lightboxes!
I was going to write a response about how I’m tired of the readers here jumping on the bandwagon with a slew of robotic agreement in which they kiss 37signals’ collective ass. But, I was surprised to see a lot of people here stand up and vouch for something they like—it was a refreshing change.
Good job, readers. I appreciate 37signals and use a lot of their principals in my design, but just because something “gives them a headache” doesn’t mean it’s bad for all of us.
Steve
on 10 Sep 07Comparing using lightbox to enlarge images (thumbnails or inline) to a series of guided tour screenshots is completely invalid.
Usually when lightbox is used, it’s to see more detail of a single image within some content, not a series of images. And when it is a series of images, you don’t have to close and click on the next image – lightbox has a next and previous feature which works well in that scenario.
Just because 37s was able to implement a series of shots on one page within their site/universe doesn’t mean that is the correct implementation for every other site.
Eivind Uggedal
on 10 Sep 07I truly agree. Lightboxes have haunted me since they became popular. Not to mention that most implementations tends to be very slow. When writing or using existing client side code one has to remember that users not always have as fast a computer as your own pimped out development box.
Mariondo
on 10 Sep 07There is a good exmaple of a product gallery without lightboxes, only with some jquery code at: Munich.cat.
Ward
on 10 Sep 07Sorry, but you lost me on this one. I would much prefer to use the Acorn method vs. wearing out my index finger scrolling down (then up, up, up) a long page of screen-shots (is it just me?). I just don’t get how the one-page tour method is more user-friendly or efficient (not to mention it increases load times). However, I can see how the dark gray lightbox background can strain the eye on a predominantly white website, but that can be easily changed in the css.
Eric
on 11 Sep 07Lightboxes are basically the web 2.0-ification of the old technique of launching larger images in a new custom-sized window from a thumbnail.
So Ryan, do you like how http://www.panic.com/coda/ does their thumbnails.. same effect, but no “strobe”?
Also, this technique (lightboxing or all photos on one page) is fine for portfolio/product sites, but any content driven (read: ad supported) website will take every opportunity to put every page, paragraph and photo on an ad-loaded page http://www.europeancarweb.com/firstlook/0705_ec_2007_audi_r8/index.html
Michelle
on 11 Sep 07I think lightbox scripts work great for images in a gallery or portfolio where you should isolate an image and not pop up a window that is positioned away from your thumbnail. You should always isolate a piece of artwork in order to appreciate it. Lightbox scripts help to mimic as close as we can to a real art gallery or museum. Scrolling only works if you have a few images on one page, but it becomes annoying if there are many images with long pages that a visitor would have to navigate through. Not to mention that your design has to accommodate these unnaturally large images and that would be very limiting.
td
on 11 Sep 07I would like to chime in and say that in itself, lightbox is a helpful and easy to use gallery viewing tool. In the wrong hands, of course anything can be useless.
The argument that I keep hearing about scrolling being better than clicking seems to go against the real-life equivalent. The scroll (in literal terms) was abandoned for the paginated book ages ago and I don’t remember the last time I heard someone argue against turning pages.
FredS
on 11 Sep 07Not a fan of lightbox. That said, LOL@”PS… For real, I’m 13 and I love RAILS ! (and your products)”. Yikes.
Steven
on 11 Sep 07I like the lightbox, especially for showing simple details… like this
activeCollab Vs. Basecamp
Josh (N)
on 11 Sep 07@td
“The argument that I keep hearing about scrolling being better than clicking seems to go against the real-life equivalent.”
Actually, I think people don’t mind scrolling. It only means 1 page load (unless the page is really, really long). Pagination was a trick invented to pump up ad sales/views.
Tory
on 11 Sep 07I noticed Apple that is using this on their site. It’s annoying as hell. I’d much rather have to deal with some popup box.
jos
on 11 Sep 07Lightbox is the new flash!
Spencer Lavery
on 11 Sep 07I don’t often disagree with you chaps, but on this one I disagree massively. Even more so due to the fact that you know you could say anything you like (even “Apple sucks”) and the majority of your readers would reply to the effect of “Yeah, I agree!”.
Lightbox allows slideshows, automatically resizes images that are too large for the window to fit, you can change the background colour if the black’s too much, you can even change the opacity, you can change the next, prev and close graphics. It also works with keyboard shortcuts. So no, you’re completely wrong, it improves user experience and accessibility tenfold when used properly.
I’m a usability consultant and I can tell you that the results we’ve seen point to Lightbox being a lot easier to use for Joe Blogs than scrolling is. In fact, in our tests Lightbox simplified the whole process of viewing enlarged images, from opening them, moving from one to another, and closing them.
We’re not all lucky enough to have ourselves as design clients, and I’m yet to work for a single client that would be happy with the utter simplicity of design you guys employ. So stop preaching to those less fortunate than you.
Jeremy Ricketts
on 11 Sep 07I love this blog. I completely disagree with this take on lightboxes. The lightbox doesn’t take you OUT of context, the lightbox IS the context.
Adrian
on 11 Sep 07huh? what’s the trouble??? lightboxes are awesome, i love them. you’re too picky on this one, have to say.
Thom Petrolta
on 11 Sep 07Oh noes my eyes have been forced into unwarranted contrast!!
Alex
on 11 Sep 07This is one of my favourite blogs but not only do I disagree with with post, I dislike its smug tone.
If you’ve got a lot of images then a lightbox mechanism can become a bit of a chore but as you guys are so fond of saying: “execution is everything”.
It would have been more constructive to venture some examples where lightbox is used appropriately. Your own house style is Marmite (love it or hate it), so a little balance and courtesy towards Lokesh Dhakar and his work would have been welcome.
Spencer Lavery
on 11 Sep 07Completely agree with the above comments on top of those I made. The smug tone is the sole reason I piped up. Everyone’s allowed an opinion, granted, but when it comes with as much authority as 37 signals’ it should be a lot more considered.
Mark
on 11 Sep 07You know, not too long ago Matt over there mentioned how “neat” the lightswitch effect for Virb is—
Design/copy ups and downs at Virb
Granted it’s not the same implementation of a lightbox effect, but it’s still the “lightswitch that turned the sky black” which, back in April, 37Signals (at least Matt) endorsed.
I’d honestly love to see a post on how you guys handle some of the contradictions you make in public.
John
on 11 Sep 0737 is getting so sanctimonious that it’s beyond a joke. The holier than thou declarations are becoming a pain in the arse. If someone wants to show an image and at the same time keep you where you went by using something other than what 37 has invented, they get slammed. I see no credit in this post for the creative logic that created Lightbox, all I see is a superiority complex. Lightbox provided a way for those raised on Flash and Js and all other gee wizzery, to present images, forms and information, without leaving the main page. If their biggest sin is to dim your lights then at least talk about how it can brightened you day instead of pouring your cool attitude all over it. Sorry but you guys are becoming so impressed with your own level of cool it’s becoming boring.
Jason
on 11 Sep 07“The Highrise tour is a good example of this I think. One page with a scrollbar. Being able to see all the images in a lightbox would require about 20 clicks, screen fades, transitions, etc. That’s a pain in the ass if you just want to browse screenshots.”
First, I wish the people who built Highrise actually put as much thought into their applications as they did their stupid tour. As a paying customer, I’ve had serious doubts as to whether they are serious about pushing useful things forward. The attitude of having less features is better is fine until you realize that what they think is needed is what people actually want to use. What they fail to realize is that sometimes these very features don’t require adding additional interface elements and instead just use common sense. I mean, I don’t know about you, but if I were going to create a suite of tools, I’d want to make sure that working with that suite of tools wouldn’t feel like you were working in different applications.
Indeed, the classic “80% of the people only use 20% of the features” is interesting. The problem is, those 80% aren’t using the same 20% of features! Also, people can’t use features you don’t implement!
Secondly, the page requires a lot of annoying scrolling. I use my mouse wheel for most of my scrolling, as it’s much easier to use then a scroll bar. This means I have to scroll down several times to see each picture. I’d much rather have a simple “Click” option that takes me to the next picture. Indeed, they don’t need to use Lightbox, but a simple way to move between the pictures would be much appreciated.
And guess what? This is nothing new! The concept of moving between pictures is something that has existed for a long time. Well, since there were slide shows of pictures to show. And what did all these slide shows ask you to do to jump to the next picture? That’s right, click the “Next” button.
Instead, the Highrise tour gives me two awful options. The first option is using the scroll bar. I don’t know about you, but the scroll bar is off to the side, away from the content. A person using the scroll bar is doing just that, interacting with the chrome, looking away from the content. And couple that with the fact that using the scroll bar is not always easy. On the Highrise tour, you have to find the little scroll bar button, or use one of the stupid errors, which aren’t exactly easy to always click on. Also, depending on the size of the page, moving the scroll button down an inch isn’t always the same. So while I really can’t say how far to move it.
My second option is the mouse wheel. At least with that, I can be sure I won’t scroll too far. So I spin the wheel down, and frankly, it feels like I’m scrolling a lot, as each image is a full page, and my mouse wheel is set to the default setting (which is fine for most things, like text).
Jason
on 11 Sep 07@John: I agree. I started using Basecamp and Highrise because I assumed that with their experience, using their products would be smooth. But it’s anything but. They have usability problems, their products don’t work together, and they get in the way of getting the job done in so many ways.
Take for example the fact that Highrise and Basecamp don’t share contact lists. This means if I have a contact entered in Highrise, I have to re-enter that contact in Basecamp. And god forbid you want to enter a contact into the system without a last name. Of course, on the page that you enter contacts in, there is no indication this is necessary. What’s even worse, if you try to enter a contact in without a last name, you don’t get ANY warning or error saying this is the problem.
Seriously. 37Signals preaches a lot of good things, but maybe they should start practicing it, too.
On that note, if you guys are looking to hire a usability expert to fix up your applications, I can arrange to speak with you.
ptamaro
on 11 Sep 07I’ve had similar feelings lately about the lightbox frenzy—kinda like, “oh jeez, here it comes again.” I click, and waiting during a progress indicator is cute, but it quickly becomes just another hassle for me. I generally spend less time on sites that use this technique gratuitously.
Thanks for putting the problems associated with this “latest craze” into words… Some folks lead, many follow.
On another note, I can also appreciate (and agree with some of) the comments made by others about your own 37s products. Very few products are exceptional, and many leave a lot to be desired and so many have room for improvement.
beth
on 11 Sep 07I think lightbox can have it’s appropriate places. I think it works really well in a portfolio. But sometimes it’s absolutely awful, particularly on Huffington Post. First, the lightbox always jumps down when I scroll, so I can never totally see the bottom. Second if I’m reading something, and the page auto-refreshes (they have it set to do so every 30 seconds or something equally ridiculous) I lose my place. Seriously grates on me.
RS
on 11 Sep 07Yes the Coda thumbnails are nice. Not only is there no strobe, they maintain context very well.
When I said ‘context’ in the post, I meant more than text and information. Context can also mean continuity of style, where a design element feels connected to its surroundings and the changes on the page are connected to each other as you move and click around.
The Coda website uses a technique that superficially seems similar to a lightbox, but they maintain the continuity of experience and it makes all the difference. There are no jumps. The image scales out from the location you clicked. The background stays just how it was at full opacity, so there’s no strobing. And the full-scale images themselves appear to be intentionally sized and proportioned to the page.
Thanks to Eric for bringing up the Coda example.
ML
on 11 Sep 07You know, not too long ago Matt over there mentioned how “neat” the lightswitch effect for Virb is
Yeah, I think that’s a pretty different implementation (a page dedicated to showing a video where you can minimize the contrast). As for more typical lightboxes, I think it all depends on how they’re used.
Mrad
on 11 Sep 07Totally agree. This isn’t the right use for lightbox. I don’t think I’d crucify it for misuse like this. Like anything “fun” or “snazzy”, lightbox has to be wielded with restraint – and with the right purpose in mind.
Benjamin "balupton" Lupton
on 11 Sep 07I use lightbox in my gallery work, and the users love it. The purpose of viewing a image is to see the image, the dimming takes focus off everything else so you just get that image. It also helps as you don’t have to keep going back and forth between tabs, and in some implementations it provides a simple left and right navigation between images in the gallery. I will assume that your post was about misuse of the lightbox concept, as it is a true blessing when used correctly.
But I will agree with John with a few of his points. You guys bring up great things on this blog, so I decided to try your products, and the experience was far from the utopia I expected.
Jonathan
on 11 Sep 07There is no such thing as right and wrong in design. There are only better or worse solutions to problems. I can think of reasons not to use a lightbox for something, and reasons for using it. Context, problems – solutions to problems in context. Really – the critique here is pointless. You may as well argue that all web sites should be built in Flash or something.
bill weaver
on 11 Sep 07Oh, come on. Lightboxes are a slick way of displaying an image, and to a lesser extent, a series of images. Darkening the surrounding window enhances the contrast and makes the image that much easier to view—if darkening your entire desktop were an option, you can bet that’d happen too. Properly implemented, a Lightbox effect is better than opening a new window with new chrome and losing the originating page entirely.
On the other hand, the Lightbox used at Acorn forces me to scroll to get to the close button on some images. And yes, if you want to open an image in another window you have to puzzle out how to do so. Lightboxes do increase the likelihood of accidental window closings and other miscellaneous confusions.
But back on the original hand, the primary problem is really the stock implementation without thought to design fusion.
Coda is cool, but needs the background darkened or lightened or something to increase the contrast. :-) Either way, it too puts the browser into some other, non-standard, world. A slick, cool world, but a non-standard world nonetheless.
undees
on 11 Sep 07It seems like a lot of the comments are conflating two aspects of lightboxes:
1) The sudden change of brightness from one extreme to the other and back a couple of times (which is nastily jarring, but is also implementation-dependent), and
2) The “not really a window” pseudo-window JavaScript or Flash thingie, which most of the “is it a good thing?” comments seem to have at the heart of their arguments.
With issue 1, the Acorn implementation is definitely retina-burning. Yuck. But not all click-to-zoom image thumbnails look that way.
On issue 2, I’ve seen the technique used effectively, where I’ve thought, “Cool, I don’t even have to leave the page.”
But I’ve also seen sites where an enlarged thumbnail feels out of place: it’s difficult to figure out how to close it, or it’s slow, or it’s too in-your-face, or my fingers reflexively hit Ctrl-W/Cmd-W and exit the whole darn page.
Hard to say what it was that distinguished the “good” uses from the “bad.”
Dylan
on 12 Sep 07I’m happy to use ‘lightboxes’ and I haven’t ever come across a client or user that didn’t appreciate it (other than many of you). Of course, everything is only good in moderation and context plays an important part in the need of such things.
matt
on 12 Sep 07Right clicking any example given above allows you to open the image in a new window anyway so you can have it both ways. I think it is great and they are SEO friendly.
Shaun
on 12 Sep 07I can see Ryan’s point. Lightbox might seem to be a bit of a MsgBox. It’s brings a z-order modality to a web page.
Lightbox is pretty smooth though for focusing up on pictures with lots of detail. This works great for consumer goods or photo album applications. Engineering applications where decisions are much more complex.. not so much.
Aaron Barker
on 12 Sep 07Much of this discussion has been around the use of the lightbox/modal for images. What are thoughts around using it for other content such as delete confirmations, other dialog type text, etc?
Jeremy Ricketts
on 12 Sep 07Did someone just say z-order modality? oh brother.
RS
on 12 Sep 07I’ve seen Facebook use Javscript overlays to great effect for confirmation messages and alerts. But, crucially, they don’t dim the lights out to show you the message. There’s no strobing. The message is superimposed on the page with a thick grey border. I think this works very well.
LJB
on 13 Sep 07Don’t use Window’s Vista then, because you will be lightboxed to death!
Ben Gold
on 13 Sep 07I initially put light box on my blog after seeing it used effectively on Cabel Sasser’s Blog (http://cabel.name), but after reading this post I removed it.
Luke
on 14 Sep 07I can’t think of a better way to display screenshots on a webpage, other than pop-ups which I hate. Lightbox works good for the purpose of screenshots.
37signals, any suggestions for a better way?
Tyler
on 14 Sep 07On an internal site we have a large table of orders, with links that pop-up in lightboxes (thickbox + jquery) to show the calculation of that subtotal. its frustrating, anyone have an ideas for a better way to handle lightboxing with data?
Ty Hatch
on 14 Sep 07Netflix has made nice use of lightboxing when adding to your queue.
Personally, it’s just another tool in my toolbox. I’ll use it when it’s appropriate.
It’d be great if Cabel Sasser made his method available. (Didn’t he come up with it to show shots of candy or something like that originally?)
Ben
on 14 Sep 07The lightboxes done on IconBuffet is pretty well done with no simple alternative that would make sense (at least not one that I can think of).
Camilo
on 16 Sep 07I hate lightboxes. really lock you on the load image screen, making you WAIT. And what is wait in the actual internet? stress, anger and the “way without look back” from a site. I’ve alread said I hate lightboxes?
cya
Ben Darlow
on 17 Sep 07Lightboxes don’t kill context; their misuse does. To suggest that their use is negative wholesale is like saying that using Flash is evil; it’s ignorantly generalistic.
Besides, implying that anything that changes state in that manner is strobelike (when you’re in charge of the process) is asinine; you might as well start frothing at the mouth about the way the sun does that whole rising and setting thing every day. I mean what’s the deal with that?
This discussion is closed.