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 :-)