carousel in responsive site - should I keep or remove the navigation arrows?

Question

I'm designing a responsive website and I have a question about the carousel element I have in the site:

the carousel has right and left arrows < content_content_content > that reveals previous and new content in it.

what do you think is more recommended:

• Keep the arrows in the tablet \ mobile versions (meaning there will be less place to the content)
• Remove the arrows and show the following elements in the carousel partly, so the user would understand that there are additional elements and that he can "swipe" to reveal them.

Answer 1

I would suggest hiding the arrows and allowing users to use gestures, or dividing the image into 2 halfs and the right half would behave as right arrow would. If you want to keep the arrows you have to remember to make them bigger so it would be easy to click on mobile devices.

Also I would suggest to move away from carousels much more studies have been done on them and by the looks of it the carousels are not effective. Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad

Answer 2

My first recommendation would be to make sure using a carousel for your content type is the right idea. I say this because user interaction with carousels is typically extremely low. Auto-rotating carousels have slightly higher interaction numbers, but not much. So if you're placing important content within the carousel...be sure it's on the first "slide".

In response to your actual question regarding navigation I would recommend you absolutely keep the navigation arrows. There needs to be blatantly obvious indication that this is a carousel to the user. Not sure if you have pagination indicators as is typical, but those generally are not indication enough.

As for your concerns for space if keeping the arrows just adjust the positioning of the arrows in your media query. Maybe move them so they're right below the carousel content. Perhaps position them absolutely so they're z-indexed on top of the carousel with a lower opacity. Both of these would not effect the amount of horizontal space required, and one would require a bit more vertical space depending on the dimensions of your arrows.

For touch devices enable the ability to swipe through the carousel. I'd also recommend enabling the ability to "peek" which is when a user drags just a bit and can see that there is another slide to the left/right.

Here are a few great links about carousels, their stats, patterns, best practices, etc. http://weedygarden.net/2013/01/carousel-stats/ http://bradfrostweb.com/blog/post/carousels/

Answer 3

I think first of all you should use a good plugin for that, one that uses both click and swipe interactions. One of the best ones I have ever seen is Royal Slider: http://dimsemenov.com/plugins/royal-slider/ - it's responsive and prepared for both touch and desktop.

Arrows act as buttons usually, and in really bad implementations on mobile, you need to tap on the side of the slider content just to reveal the arrow (same as on hover action on desktop) and then tap again on the arrow that has just appeared.

Arrows, however, indicate that user can click to reveal another content portion. So if you add swiping support, you need to make sure users will understand that there is more to swipe to.

Answer 4

This option for touch, definitely:

Remove the arrows and show the following elements in the carousel partly, so the user would understand that there are additional elements and that he can "swipe" to reveal them.

I would also show a sliver of the previous panel as well if there is one. This provides a clear indication that it can be swiped-scrolled and users won't even have to think about it. Arrow buttons, if overlaying the content, are problematic because they can obfuscate content (especially on the smaller phone screens) and sometimes content can obfuscate the arrows. Horizontal swipe-scrolling is a very comfortable action on touch UIs, much more so than button pushing.

Also, avoid auto-forwarding carousels for anything but the most superflous content: http://www.nngroup.com/articles/auto-forwarding/. If you haven't already I recommend reading up on carousel usability just to have some background on the subject.