Lightbox is ruining my user experience
A few online shops thought:
When the user clicks over the thumbnail, we'll open the larger image in a new layer over the content, so that we don't need pop ups.
I like to arrange my windows in a certain manner, so if a new one appears unexpectedly, it distracts me. Also, pop ups have a strange tendency to end behind the main window, which makes them completely useless (this often happens when you're constantly tabbing and switching between applications like I do). So I think the idea is good.
Unfortunately, the implementation is not. For some strange reason all of those shops chose to use a script called Lightbox, which, when clicking over images with the rel="lightbox" attribute, makes an overlay fade in, obscuring everything in the page, possibly showing a loading image for giving some feedback as to explain that unexpected behaviour, and when the image is loaded, it shows a new layer which sometimes painfully and slowly grows until it's the same size as the loaded image. And then the image might fade in from 0 to 100% transparency.
Isn't that description tedious and boring to read? Then imagine how tedious and boring is it to see it in action for every image you want to enlarge. Could you even imagine using it throughout an entire portfolio site? You guessed it correctly, I would only check two images; once I closed the second image I would close the portfolio tab as well.
There are even more ways of torturing the user with Lightbox:
If the big image is larger than your browser window, you would expect your browser to show you a version, adjusted to your window size, that when clicked would expand to show the full size image, like this:
But what you get instead is this:
(Try it yourself here) Update: they have replaced the image with a smaller one
Where do I click to close it? I don't know - and if I mistakenly, instinctively press the Back button, it won't bring me back to the product profile, but to the previous page instead. Some of you may argue: hey but if you click in the overlay, it will close the lightbox!
Now tell that to an average user, or occasional shopper. Sure they know what an overlay is, or where did the page they were browsing go…
Yet more vicious abusing of Lightbox: using it for extremely small images. Like for example this page:
Quite ironic: providing a larger image which is more or less the size of a thumbnail already, and even more, make the user wait for it to appear.
Also, did you notice that although sometimes ajaxy loading icons are shown, you never know what's the real loaded percentage? What if for some reason it gets stuck?
And I wonder if has anybody else realised that during the time the user is forced to wait for all the bells and whistles to finish, the browser could have loaded the image three or four times already? Or maybe the user could have examined the bigger image, verified that's what he wanted, and clicked the magical Add to cart
button.
With all this I am not saying no to fancy effects and transitions
, but no to abuse of technology
instead. Lightbox is not going to make your website more attractive; in fact it will probably make it look like a run of the mill one, since everybody else is using it already.
What I would suggest is to have big, gorgeous and good quality images by default, so that I can get an idea of the details of the product at a glance. If I am really interested in it, I will request to see a bigger image, which will appear almost instantly on my screen; otherwise please let me browse comfortably, and I may find something else that I fancy, thank you very much.
UPDATE: gst posted this to reddit and you all have gone crazy. Whining as it might be, this is still my personal opinion as a user.
Having said that, please enjoy the whining or ranting or however you like to call it :-)
she
20080313
Agreed.
It seems that some people want to ruin user experience.
The only way to get around is to stop using any site that uses user-annoying stuff.
Venkman
20080313
Mmm… It seems your rant isn't against Lightbox per se, but more against some implementations and uses of Lightbox.
Not exactly
20080313
I don’t fully agree with your comments, especially having good quality images by default
Frank
20080313
There a several implementations of Lightbox (lightbox2, lightbox lite,..) and clones (black-, grey-,… box) and I don't know which one you used, but there are features in some implementations that help with your problems.
First you can say s.th. like rel="collection1[picture]" and lightbox let's you zap through the whole collection with an arrow-left-right-navigation.
Second: The Lightbox I used lately comes with auto-resizing for images that are to big for screen and also has a button to resize it back to original size if you want to see more details.
Check this site for exmple
http://www.theater.htwg-konstanz.de/?q=node/4#program
Bart
20080313
It seems that Dolphin Music (your first example) fixed that page already: the larger image of the Mackie Onyx Satellite is sufficiently small now so you no longer get the effect from your screenshots.
RE closing images: I would expect that clicking on the larger image will close it. That is what usually happens everywhere else…. but not here: the image itself is the only place where clicking on it *doesn't* close it.
The larger image could already be loaded in the background when you look at the page, in anticipation that you might want to see the larger image. But for huge images (> 100k) I would not recommend it… and neither when there are many of those images in a single page.
Will
20080313
I'll take the bait. Your argument should be titled "Foo Implementation of the Lightbox Principle Is Ruining My User Experience." Also, a number of the usability issues you cite seem to just be your preference, not backed up by any convincing arguments. I guess I would say that the two things to take away from this post are: don't pick a crappy implementation and don't show the user small "large" images. I'll be referencing the ThickBox implementation (built on top of jQuery) throughout my notes since it is a good implementation I have used a few times.
1. Your first point about growing lightboxes going slowly. ThickBox? No.
2. Image fade-ins. Thickbox? No
3. You don't have to click on every image, it seems like the person who implemented the lightbox did not set up a gallery properly. Then you just click the left and right arrows. This is much more user friendly than having the user have to wait for a full page to load for each image in a portfolio. Don't even mention loading the plain image, then the user has to go back and forth using the back and forward buttons.
4. Thickbox sizes the image as large as possible, but within the size of your current browser.
5. Thickbox provides a "close" link, allows the user to click anywhere to close, or they can hit the esc key.
6. If someone loads small images into a lightbox that is purely a poor web developer, not a fault of a lightbox. It is like a web developer setting their site to use 8px fonts.
7. Have you ever gotten an image stuck loading? I honestly don't care what percentage of the photo is loaded at this second, and most people don't either, we just want to view it.
8. On average it takes longer to do a full request to the server, have it build a dynamic page to display the image, than using JS to load an image into a div that is switched from display: none to display: block. With lightbox there is no dynamic script (since we are just requesting the image), the request and response don't contain anything more than the user wants and the browser doesn't have to do a full page render. The other benefit of the lightbox is that the user will not ever lose their scroll position from having to go forward and back.
9. No, having a page full of 20 huge gorgeous images sucks for the user. They are usually only interested in 2 or 3, or want to view them one at a time in a sequence. Instead, show thumbnails and let the user pick, or provide a slideshow, or use a lightbox gallery where they can pick and choose, or view them sequentially.
The one usability issue I have with ThickBox (sort of, kind of with the web developer) is when images of all different sizes are used, the next and previous button move around the screen, which sucks. This could be solved by the web developer providing consistently sized images, or thickbox aligning itself a specific distance from the top of the browser window.
h3
20080313
Good rant.
Still, I don't think Lightbox ruin user experience. But as anything else, there will always be some tards to abuse it.
Here's my 2¢
1. I like thickbox better, less fluff (no animations), faster. It just load the image and show it as fast as it can. Oh and it resize the image if it's too big for the screen.
2. You don't have to click each images to display them, if you over the left or right side of the image you'll see a next/prev button appearing (if the person knows how tu use Lightbox gallery mode), ok that's *really* stupid I know. But again Thickbox does a better job, the next/prev/close button are always visible, thus more accessible.
3. You can right click thumbnails and select "open in new tab", only the image will show up like it would normally do without [Light/Thick]box.
Again, it might not be the optimal solution, but most clients really like it. And if it's the only thing I have to do to make them happy, good.
I'd rather have a client who wants Thickbox on his site than one who wants music :D
Cheers
Thomas
20080313
You think that's annoying…try being on a 2kB/s connection with Lightbox when your browser hasn't quite grokked the "Esc" keybinding that's supposed to exit the box, and the close link is also missing (only shows up once the image has loaded). Lightbox, in that case, locks down your browser window (or tab).
Chris
20080313
I can't say that I agree with your wish for large high quality images either and it wouldn't sit to well with people on a mobile or slow connections. Lightbox does what it was deigned for, although I agree it could be done at a faster rate and eliminate the needless visual effects, but those are not enough for me to dislike it as it is still better than the alternative option of large images.
The sites that you made reference to used the tool in a poor manner, and it isn't fair to use them as an example of why Lightbox is ruining your experience. There are a number of other sites out there there that use it well which should be mentioned, but weren't.
There is a nice library at http://famspam.com/facebox that I like the best. It doesn't have the useless frills and allows me to move through the images with the arrow keys, so it is really the best of both worlds.
sole
20080313
I think I maybe didn't explain myself properly:
As a final user I couldn't care less if Lightbox has been properly configured or not, if there are more versions of Lightbox, better alternatives to it, or anything. What I care about is to be able to browse and shop comfortably.
In this situation, Lightbox (or any of its incarnations and clones) is what prevents me from doing so. Hence the title.
Jingxxo
20080314
Exactly, I couldn't agree more, sole!
david
20080314
Thank you for posting this, I have always felt the same way about Lightbox, et al.
Venkman
20080314
But imagine I said "Bicycles are ruining the city" and then started explaining how _some_ bikers (e.g. those who run through the sidewalk and hit pedestrians and break trash bins or whatever) are ruining the city.
Would it really be fair to say that it is bikes -and not only those using them wrongly- that are ruining the city?
sole
20080314
@Venkman: although I know what you mean, I don't think that's a fair comparison. Bikes are concepts that normal users understand, and they can distinguish between them and their implementors.
A potential buyer it's not going to say "Oh look at this shop, it's using this beautiful Lightbox thingie which properly configured makes images appear and all that but here the web team didn't read the manual, and these fades and waiting time are really annoying me, I wish they adjusted the parameters so that I could enjoy my visit!".
Venkman
20080314
But yours is not the rant of a normal user. Yours is one of someone who does know, even if you pretend to write "as a user". If you were a normal user, you'd use "popup thingie" instead of Lightbox. You wouldn't talk about "vicious abusing of Lightbox" but about "this site having shitty small images" (or extremely big ones), which btw is quite unrelated to Lightbox.
sole
20080314
I like to show "the other side" to developers and web2.0 uberenthusiasts which never put themselves in the place of final users.
Delfina
20080314
Hahaha, I decide to take a peek and see what are you doing, and what a nice big rant we have here ;)
I agree. Nothing makes me go "OHSHI–"* faster than clicking on an image and oh, the screen fades, and the white square of doom appears.For ages. It's also a nice way to scare readers from your webcomic (yes, I've seen that script used for loading webcomic pages. Best idea ever, isn't it? I'd point the offender, but guess that; I stopped reading months ago and never looked back).
So here you have, the 2 cents of someone who get lost when trying to write CSS. That qualifies me as "95% final user", I hope?
(Pardon mah english, I spend too much time on inanets forums :D I hope it's still understandable and I didn't sound like a teenager.Too much ).
*Only one thing is scarier: korean websites with MP3 music as BGM.
Venkman
20080314
Yes, but if we consider Lightbox as the actual source of distress and simly rid of it, does that solve the real problem? (i.e. that clicking a thumbnail to see a larger picture, opens an image of the same approximate size)
What I mean is, your criticism is still valid, sure, but it's aimed at the wrong target.
What's more, you claim to be showing the user side to developers, so shouldn't you actually take into account that those developers _do_ know about Lightbox, its clones and configuration? The message you seem to be sending is "users think Lightbox is annoying", but instead you should probably say "if you use Lightbox wrong (or do not take care to make sure that larger means larger), users'll think your site is annoying".
sole
20080314
Well, it is the weapon. Just as people say Flash is 99% bad, Javascript is evil, etc.
And now please stop arguing about this. It really doesn't deserve any more attention, and it's getting really boring too.
Thanks all for the comments!