0

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:

enter image description here

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:

enter image description here

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.

  • 1
    I like the second approach. Maybe you could have the "Image" animated (or a compound one) so that the users realize that the real content is behind the button. – WoJ Sep 16 '17 at 13:50
  • @WoJ I like the idea of a compound image, hadn't considered that. Thanks for the suggestion – sol Sep 16 '17 at 16:48
3

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

enter image description here

With a lighter photo

enter image description here

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)

  • Thanks for this answer. I think this looks great. The icon and black colour make it less of a CTA. I'll test this out over the next day or so. – sol Sep 16 '17 at 16:49
  • looks really nice! :) – Devin Sep 16 '17 at 17:51

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.