1

I have a CMS-based website with the ability to add lightbox galleries to blog posts. Galleries can have one or more images and will be represented in the body of the post by a thumbnail of the first image. Click the thumbnail, see it blown up, lightbox-style with arrows and a close button and all that.

Are there preferred UX practices to indicate the following:

  1. This is a thumbnail that when clicked will present a larger version of this photo
  2. This single photo actually represents multiple photos, of which you can see larger versions if you click. OR 2A. This single photo actually represents just one photo, of which you may see a larger version if you click.
Improve this question

2 Answers 2

Reset to default
1

Design by the principle of least user surprise. A single image in and of it's self does not provide any affordance (hint's) to the user that there are multiple pictures in a galley behind it.

There are different ways of of hinting that a gallery of pictures exist. The "best" way depends on what is practical, given the UI where you are launching the gallery from.

The most useful way is to show a mini-gallery, carousel or 'cover flow' UI because this means user could quickly browse and click on image of interest.

But if launch UI is restricted then other affordances could be label "12 pictures", a badge "12" or a multi-image stack. I've sketched the badge and multi-image stack together.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In all cases

  • start the gallery showing the image of the thumbnail that was clicked.
  • allow user to move around the gallery, do not return them to thumbnail to select another enlargement
Improve this answer
3
  • The current UI design is restricted to allow browsing through multiple images in the thumbnail view. We also cannot use the multi-image stack approach, though it is interesting. We are following both of your "all cases" direction, and I like the idea of using a badge.
    – Brian Whitton
    Feb 4, 2014 at 15:12
  • One question: if we just use a badge to indicate number of images in a gallery, is a number in a badge enough to mean "there are this many images if you click this thumbnail"? Or is there another affordance possible?
    – Brian Whitton
    Feb 4, 2014 at 15:14
  • Ok, you can have a static HTML content which is just suggestive of image borders behind the thumbnail (don't need real images). If you don't have visuals indicating 'many photos' then can be more explicit and badge it with "12 photos", but given low impact and learning curve I'd rather err on side of being brief. I'd would mark it for a user test.
    – Jason A.
    Feb 4, 2014 at 19:29
1

If you just enlarge one photo in the lightbox I would use a thumbnail as preview with an magnifier-icon. For a gallery this is different: From an accessibility point of view I would indicate a gallery not only visually but by words, like "View gallery (x images)". The gallery view then should always start with the first image in the set so that users can browse through the gallery in an unidirectional way. For galleries I would use a generic gallery-icon and a textlink.

Improve this answer
2
  • What is a generic gallery-icon?
    – Brian Whitton
    Feb 4, 2014 at 14:31
  • I meant an icon for gallery, that is used thoughout the whole site and the same icon for every gallery.
    – pseudonym
    Feb 4, 2014 at 18:19

Your Answer

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

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