22

I am laying out an image gallery on a webpage and have several thumbnails of objects. How would I go about giving a visual clue that there is group of images behind each thumbnail? For example...lets say that I have a car as one of the thumbnails, that, when clicked, will show a large version of that car photo with nav arrows on the sides so the user can view more photos of that same object (slideshow).

Right now, the car thumbnail has a transparent magnifying glass on top of the thumbnail to show that it's clickable.

How should I give a visual clue on the thumbnail area to show that there's more photos "behind" that thumbnail and not just the larger version of that thumbnail? Or, is this extra affordance even necessary?

Note: I am using JQuery lightbox for the photo gallery.

Improve this question
3
  • If mobiles aren't targeted, an alternative other than the ones proposed would be to pass the other images when the user hover the thumbnail (just like a famous site already do it with his video thumbnails ;))
    – Alex
    Jul 22, 2015 at 14:34
  • @Alex, what famous site would that be? Seriously, I don't know what site you're referring to.
    – Anil
    Jul 22, 2015 at 15:53
  • I believe Flickr, Facebook, and iTunes have all done this at one point. Some rotate the images on a timer (like a slideshow), others show a different image depending on the cursor position over the thumbnail (iTunes did/does this).
    – alanaktion
    Jul 22, 2015 at 19:31

4 Answers 4

Reset to default
29

I think @Alan George approach is correct, I'll just add two possibilities thay could help the user to get the message easily:

Label + number: Because sometimes there's nothing better than being explicit

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Showing quantity in the same place where "there are more pictures" is expressed graphically thus following the proximity principle:

mockup

download bmml source

Improve this answer
4
  • 3
    My second example included numbers, but nice clean mockups are always appreciated!
    – Alan
    Jul 22, 2015 at 14:38
  • 1
    I see, good point on being explicit.
    – Alan
    Jul 22, 2015 at 14:46
  • @AlanGeorge You're right, I'd re-read your post and rapidly edited the part where I stated to add numbers was needed. I'm editing again to make it more explit that your approach is generally correct (not just the stack). (btw I repost the comment because my English was a mess)
    – Alejandro Veltri
    Jul 22, 2015 at 14:51
  • 1
    Thanks for your answer. I like the clean look of this method. Removing the word "photos" certainly does help lessen cognitive load when scanning.
    – redshift
    Jul 22, 2015 at 15:12
36

Stacks are an effective user interface method to indicate additional content behind what's currently visible.

Some examples of stacks in different applications:

Thumbnail Stacks

Most likely closest to what you're looking for. Additional thumbnails are hidden below, but with the edges visible to indicate their presence.

Thumbnail stacks

SoundCloud Playlist

Similar to the above example, however, this design utilizes a number count indicating how many items are in it. Also, the "stacked" thumbnails are static images to reduce graphical resources needed.

SoundCloud Playlist

Improve this answer
4
  • I like this , however, I am concerned about the extra overheard of having to make custom graphics to show the stacks. Just imagine having 30+ icons , won't it feel a bit "heavy" or cluttered?
    – redshift
    Jul 22, 2015 at 13:56
  • 1
    That's a valid concern, however, see the second example. The only thumbnail used is the top-most one; the "stacked" thumbnails are simply two static square images.
    – Alan
    Jul 22, 2015 at 13:57
  • The icon next to the "4" looks like an audio wave. What is that supposed to be?
    – redshift
    Jul 22, 2015 at 15:15
  • 1
    The example playlist contains four tracks. You could replace that icon with one that pertains to your situation (a car), text ("4 images"), or only keep the number if desired.
    – Alan
    Jul 22, 2015 at 15:16
3

I am suggesting a slightly different approach than what you had asked for. You can also consider the method which has been adopted by Facebook recently. You can consider showing few more car pictures in a block and trucks in another and so on. Further if someone is interested to see more cars they can click on the +number.

The Facebook Way

enter image description here

How could yours be? enter image description here

Improve this answer
0

Inline Carousel

Inline Carousel

An alternative if there is enough space. And you can see other pictures already within the preview.

Improve this answer
5
  • 20
    Isn't that an Inline Camelsel?
    – Chris
    Jul 22, 2015 at 15:25
  • 5
    Should I Use A Carousel? - the answer is no.
    – Mar
    Jul 22, 2015 at 22:39
  • @mouseas I'm impressed someone dedicated a site to such a thing.
    – Alan
    Jul 23, 2015 at 0:29
  • 1
    Nothing is ever bad. In some use cases (I have to admit they are pretty rare), carousels are not that bad as their reputation. Example: as a preview of an image gallery I like to know beforehand if more than the first image is of interest to me. Facebook is using that on the mobile e.g. thenextweb.com/facebook/2015/05/11/…
    – Gustav
    Jul 23, 2015 at 7:35
  • 1
    @Gustav I don't agree that carousels are the bane of UI/UX, but I think your example image didn't fully exemplify what you meant. The Facebook ad example is a much better one.
    – Alan
    Jul 23, 2015 at 15:25

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.