Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
add comment

4 Answers

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…).

share|improve this answer
add comment

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.

share|improve this answer
    
+1, we (Rightmove) use this method in our mobile apps to signify that more property images can be found. –  Jimmy Breck-McKye Sep 7 '12 at 20:08
    
@JimmyBreck-McKye which method? –  Mervin Johnsingh Sep 7 '12 at 20:08
    
Sorry, the first. You can see a photo at cdn.pocket-lint.com/images/FAMR/… –  Jimmy Breck-McKye Sep 7 '12 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 '12 at 13:58
    
I'm up-voting this because I believe it is still a good answer. –  kretzm Sep 20 '12 at 16:53
add comment

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.

share|improve this answer
add comment

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.
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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