0

We just launched a (very) new website on which we strive to give to the user a top-notch immersive experience.

Feel free to dig deeper on the site to get used with the mood around there.

It seems that the site is quite successful, however one of the main requests from our users is tied to the slide-shows.

We employ slide-shows to show our content on categories (see in the menus Body, Mind or Heart) and because in each category there are a quite variable number of photos, each one with its caption, the users demand:

  • a simple, intuitive way (a button?) to (re)start/stop the slide-show
  • a simple, intuitive way to control/change the speed of the slide-show

Also, please note that the slide-show already stops when one clicks on the thumbnails row but the users cannot discover it.

2 Answers 2

1

The best solution here is to put control in the hands of the user.

Give them buttons to slide from left to right and discover the images, in either direction, at their own pace.

Simplify the interface with two large, clear, clickable (desktop), tappable (touch screen), and keyboard navigable (for accessibility) action buttons that load either the next or previous slide.

Playback controls could be considered, but add a lot of complexity, especially if you try to add speed in there two, why bother? Just let the user control the speed as and when with manual buttons.

See how Google images do it - when you preview an image there are left and right controls and that's it, you can browse the images at your leisure.

Also, I would suggest making it clear how many images are in the sequence and where the user is in that sequence. For example, 1 of 5; 2 of 5 etc. or some other graphical way of saying the same - see the pips on this pattern tap

Finally, anything overlaid the images (such as controls, though also text as in your link example) should be designed to stand out regardless of the background colour - see this CSS Tricks article for a better idea of what I mean. This code pen (from the article) uses text, but demonstrates a simple way of using black and white to ensure any text or symbol always appears clearly. This will make your controls easier to discover and your text easier to consume, encouraging more exploration.

1

Your photo galleries look very nice ... Regarding your question, I would simply employ standard controls that you find on a lot of other image sliders such as pause/play buttons with next/previous buttons. No need to re-invent the wheel, image sliders are pretty common these days and most people are used to seeing them. I would just make sure to design these controls in a style that matches the style of your website.

Usually with a gallery that's full width, the controls are located on either side of the viewport, large in size but semi transparent so they don't over-powe the image.

Regarding the speed at which viewers can go through the images, I don't think it's necessary to have visitors dictate the speed of the gallery auto-playing, if you give them the option to pause the slide show, combined with the next/previous buttons (not even mentioning that visitors can click on thumbnails), visitors will be able to go through the images as fast or as slow they want.

Some other thoughts I had ...

  • Hiding the horizontal thumbnail list is not intuitive when a unique visitor first lands on the page. They have to know to move their mouse over to the bottom of the page to display the thumbnail list. Perhaps keep the thumbnail list visible at all times.
  • The hover show/hide effect combined with the mouse move scroll left/right effect is a little jarring. It's very easy to move your mouse too fast and have the list scroll too fast, combine that with accidently moving your mouse up off the list and it disappearing and you see where I'm going. It's a cool idea in theory, but putting function over form and I think removing these two pieces of functionality may be a better way to go. Like in previous comment, I would make it so the thumbnail list is always in view. And then put arrows on either ends of the thumbnails so users can scroll through the thumbnails easily.
  • When in doubt (KISS).

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.