5

It is obvious that we close popup when we click on dark area, on close button, or press escape key. But should we close it when we click on center image?

Let's assume that there are three scenarios, what should happen after clicking on center image:

  1. When it's popup with single image (#1).
  2. When it's gallery with multiple images (by clicking on arrows on sides user moves to next/prev) (#2).
  3. When #1 and #2 appear on the same page.

Thank you!

image lightbox

3 Answers 3

5

Personally I think that closing a single image by clicking on it it's a good idea since it will minimize mouse movements (and improve ux on small touch screens where it's hard sometimes to tap the close button).

Concerning multiple images I think that clicking an image should open next image because of the same reason (and close or restart the gallery at the end).

It's always a good idea to let users do something with minimum movement.

BTW, I think that it's better to place close button at the corner of the image because placing it at the corner of the screen will require more movement (not experienced users will try to click the cross instead of clicking somewhere else to close an image).

5
  • Thank you! What do you think should happen when on one page there is popup with single image and popup with gallery. Won't be that confusing if they behave differently? Jan 1, 2013 at 10:42
  • @DmitrySemenov I think that it's still ok to close the single image and show next in a case of the gallery. There will be no confusion if single image and gallery will look differently. I mean, you should keep the behaviour in a case of similar things and think about improving it for the different kind of objects. Jan 1, 2013 at 11:32
  • @DmitrySemenov and I edited my answer so I think you possibly should close the gallery at the end (i.e. every click will be an action). The only reason you should probably restart the gallery is the lot of content (it's interesting question itself, but it seems like users may often want to play the gallery once again). Jan 1, 2013 at 11:46
  • Yep, I probably should make it loopable. As if I don't, user that clicks on right small image may accidentally close the gallery when it reaches last image (as popup is closed when clicked on black overlay). But not sure if there is a simple way to indicate that user is watching image second time... Suggestions? Or I shouldn't care about that? Jan 1, 2013 at 12:19
  • @DmitrySemenov I don't think you should really care about it. You may show a transparent layer with a cycle icon for a moment as a visual aid. And I think you shouldn't show anything if there is just a few images since images are very well remembered. Jan 1, 2013 at 12:30
2

Clicking an image can do one of two things:

(1) Nothing, which would be the desired behavior... or

(2) Enlarging the image, preferably in the modal dialog you're showing. But this assumes that larger versions of the images is available. If not, then nothing should happen.

8
  • 1
    There are a lot of sites which require you to click on the cross to close an image. And it become a real pain if you visit these sites from the smartphone since you have to position very precisely (and even use zoom) to hit this tiny close button. Jan 1, 2013 at 10:22
  • We assume that image that is opened in popup is already "large" and there won't be larger. So enlarging on click isn't an option. Jan 1, 2013 at 10:38
  • 1
    Then clicking the image should do "nothing". On a mobile device you can always hit back button to close the image, @alexeypegov. Jan 1, 2013 at 12:00
  • 1
    @BennySkogberg back button works for browser history only, why should it close an image popup which doesn't affect history? Jan 1, 2013 at 12:13
  • @alexeypegov I've managed to resolve back button problem without filling the browser history - so popup is closed when hiting back button. I'm currently finishing this popup jQuery plugin, it'll be free and open source. Should be ready in about a week... Jan 1, 2013 at 12:19
2

I think that both type of functionality are common. Facebook demonstrates a nice example where clicking on the image shows the next one.

However, if there is no salient distinction between the first mode of a single picture and the second mode of multiple pictures, I'd go with a click showing the next picture. This is just useful for most of the time, but for cases of a single picture, don't make the user think in what mode she is in.

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.