6

Carousels appear massively in my web projects, usually for making users able to check each "slides" in detail, we will make the scrolling paused when hovering on the banner content.

However, one recent client of mine thinks a pause button outside the banner would be better as it makes the ability to pause the scrolling function more explicit.

Does a pausing button really work better to them?

--> Pause button VS pause upon hover VS both <---

2
  • The layout is very much like the one appearing in Harvard Business School site hbs.edu/Pages/default.aspx My carousel is with 6 thumbnails at the bottom as the navigation.
    – punkaoru
    Nov 7, 2012 at 6:58
  • Sorry, I will not give an answer, but I suggest reading this other question: Are carousels effective?. It makes very good points.
    – Pep López
    Nov 8, 2012 at 21:53

4 Answers 4

15

I was going to make this a comment but actually I think this is an answer.

Pause on hover doesn't work for mobile - and web pages should be designed to work on mobile devices, so yes a pause button or mechanism is necessary that doesn't depend on hover.

I cannot stress enough the importance of considering the mobile experience when designing for the web. The web is not 'desktop only'.

4
  • 1
    In addition to the mobile problem it's also an accessibility issue. As well as being an accessibility issue in my experience, in user testing, carousels and rotating banners perform very poorly in getting the info across.
    – adrianh
    Nov 7, 2012 at 10:48
  • Thanks Roger you raised a good point here. Pause on hover doesn't work on mobile (Click is also counted as hover in mobile devices so it will stop when you click on the banner) Just for discussion - Do you think there should be no scrolling banners appear on mobile devices? To my personal view, i think scrolling banners usually perform badly on mobile devices (lagging or even stopped due to JS performance), secondly i think we should consider the change in intention when navigating by mobile devices - usually users tend to search for info rather than random exploring.
    – punkaoru
    Nov 8, 2012 at 2:36
  • 1
    @MONKICHI.K.KICHI Removing the banners is certainly an option on mobile as done in your HBS example but not a necessity, especially if there's a business case for it and/or A/B testing finds it favourable. Actually mobile users can fall into an explorer mode as well as the search mode, but you should design for your mobile target audience purpose, and explorer mode may not suit your particular purpose. See my next comment for info and example. Nov 8, 2012 at 7:38
  • 3
    @MONKICHI.K.KICHI See my slideshare on considering the mobile experience when moving a desktop website to mobile. Watch the whole thing. See REI.com example from slide 75-105. Notes in a tab below the slides or on my website. Nov 8, 2012 at 7:38
2

I think the transition should not occur to rapid (depending on the content on the banner). Secondly if the banners are more than 10, I think there should be a pause button.

2
  • 1
    Yes it's true, the duration would be like 4-5 secs for each slide. There are 6 banners in total. Can you explain more on how the consideration of putting a pause button is related to number of banners?
    – punkaoru
    Nov 7, 2012 at 6:59
  • Sorry, basically it depends on the content not the number. And as you have done, pause on hover it the best option... if not then, I think, you were supposed to put a manual pause option... as the content on each banner is to much and it will be really annoying for a user to click again and again on the thumbs to navigate to the banner. I think you have done it perfectly! Nov 7, 2012 at 8:47
0

If the carousel has thumbs on it like the Harvard Business School site, you could pause on the click of a thumb.

So if the user is in the process or reading, and it slides, they'll click the one they were reading and then not need to additionally click pause. From my own experience, if I'm reading a slide, I don't think "Oh hey, I need to pause it" until it slides to the next one.

You could have a resume button, but I usually just leave it paused. They can then just page through the thumbs if they want to, and it's not a distraction if they choose not to.

0

If you are using carousels excessively it can become annoying rather rapidly. Even for news websites I would advocate a low threshold (something like a maximum of 2 visible in the viewport at any given time). As an alternative I would recommend an activity stream layout instead; with the added benefit of gaining some screen real estate. That said, if you are using carousels "massively" (à la App Store) I would advise you to add a disable all animations switch in the page's top right corner.

So to answer your question, no a pause button would clutter the scrolling banners needlessly: a scenario where an user would like to pause one banner while another would continue scrolling—hence disturbing him while he scans the text—is highly unlikely. What you should provide to the user is a way to somehow return the page to a motionless state thus granting him the leisure to browse through the content as he pleases. As a bonus it will also smooth the scrolling experience quite significantly.

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.