How to indicate that clicking a photo will open a slideshow?

Question

I have a page which has a hero image. When the user clicks on this image a lightbox opens which contains a slideshow of images.

I want to indicate to the user that they can click on the image to open the slideshow, but I'm not sure of the best way.

Here is my layout with an arrow approach:

The problem with this is that if the arrow is clicked the image doesn't slide, a lightbox opens, so it feels like an inappropriate signifier.

A second approach with a button:

Using a button makes it obvious, but looks like a distracting call to action when placed over the image.

Are there any other approaches I'm missing?

Any advice welcome, thanks.

Answer 1

You can try use a band, with an icon and descriptive text.

Try to take the color out of the signifier, as you'll often have no control of the color of the actual photos.

One approach is a 80-90% black badge pinned to the lower left. It has some transparency, so it doesn't feel like it blocks the view of the photo (well, not as much).

With a dark photo

With a lighter photo

This way:

• you don't upstage the photos themselves
• have a straight forward text label (you can also try 'slideshow')
• using black and white will keep contrast regardless of picture
• a persistent location, and some kind of icon to suggest 'more'

(NOTE: your second approach in your post with the arrow pointing right, is more indicative of a carousel, in which the images slide, but don't open a lightbox or expand in size)