8

I'm in the process of adding responsive design to our website and one of the main features that users interact with is our image gallery (we are an editorial-based website). At normal viewport sizes, the user would click on our left-right arrows to scroll through the image gallery. When moving down to tablet and mobile size, we want to give the users the ability to swipe to cycle through the gallery.

Would it be too much to keep the left-right arrows in at the sides (note they will be scaled down to give more viewing space for the images) AND also have swipe capabilities? What would be the most intuitive way for our mobile/tablet users to recognize that our gallery is swipe-able?

Improve this question

4 Answers 4

Reset to default
15

Though the left and right icons would give information that you can continue scrolling, another option is use a layout where only part of the images are visible and the user will have to scroll to the right to see them as given below:

enter image description here

Another approach which I am not a fan of would be to use a horizontal scrollbar at the bottom which informs the user that there is content to the right

enter image description here

The reason I am not a fan is because in a recent usability test we found that most users missed this scrollbar since it was right at the bottom while navigating pictures on a windows 8 app.

Improve this answer
6
  • +1, we (Rightmove) use this method in our mobile apps to signify that more property images can be found.
    – Jimmy Breck-McKye
    Sep 7, 2012 at 20:08
  • @JimmyBreck-McKye which method?
    – Mervin
    Sep 7, 2012 at 20:08
  • Sorry, the first. You can see a photo at cdn.pocket-lint.com/images/FAMR/…
    – Jimmy Breck-McKye
    Sep 7, 2012 at 22:00
  • 1
    As good of a solution as this is, I don't believe that it will work with our current setup. Our gallery images are displayed one-by-one inside a container of pre-defined width. Users are able to cycle through the gallery by clicking next/previous buttons. We want to keep the same functionality when we move down to mobile size. If we had a separate mobile site I could see using this strategy, but not with responsive design.
    – kretzm
    Sep 10, 2012 at 13:58
  • I'm up-voting this because I believe it is still a good answer.
    – kretzm
    Sep 20, 2012 at 16:53
3

I would:

  • cut off the last column of thumbnails as mervinj suggests it, to show that there is more to see
  • make the grid of thumbnails slightly slide from right to left when page is loaded, to indicate the user what part of the screen moves when swiping.
Improve this answer
1

It is never wrong to give users cues on what you can do on any device. However, it could be annoying if they are present at all times. I would make the arrows visible when you first access the gallery, and then dimed out after two seconds. The user knows that there are controls if they want to use them.

If the user swipes images, the arrows wouldn’t appear again, since it would again cause more information than the user really needs. But if the user taps the image, the arrows would appear again with the same time out dimmer of two seconds. If the user clicks the arrows, instead of swiping – I would let the arrows be visible on the next image view – since the user like to use the arrows instead of swiping.

To support more than one action to the same task is usually a good thing. Think about in how many ways you can copy-paste on a desktop computer (keyboard, right mouse click, application buttons…).

Improve this answer
0

Due to constraints of "images displayed one-by-one inside a container of pre-defined width" you told in previous comment, it is good to show these left right arrows above the first image and fade them out — just when user opens gallery. You can even improve this hint by showing first image (only it) swiping in to the screen (I think it is simpler to achieve than to remove constraints) below arrows, or make some simple animation of this arrows moving left and right before fading out.

This will help the user to understand that gestures are required, and also remove additional visual noise if arrows were visible all the time.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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