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.

  • 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 '15 at 14:34
  • @Alex, what famous site would that be? Seriously, I don't know what site you're referring to. – Anil Natha Jul 22 '15 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 '15 at 19:31
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

  • 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 '15 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 '15 at 13:57
  • The icon next to the "4" looks like an audio wave. What is that supposed to be? – redshift Jul 22 '15 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 '15 at 15:16
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

  • 3
    My second example included numbers, but nice clean mockups are always appreciated! – Alan Jul 22 '15 at 14:38
  • 1
    I see, good point on being explicit. – Alan Jul 22 '15 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 '15 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 '15 at 15:12
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

0

Inline Carousel

Inline Carousel

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

  • 20
    Isn't that an Inline Camelsel? – Chris Jul 22 '15 at 15:25
  • 5
    Should I Use A Carousel? - the answer is no. – mouseas Jul 22 '15 at 22:39
  • @mouseas I'm impressed someone dedicated a site to such a thing. – Alan Jul 23 '15 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 '15 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 '15 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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