4

Folks, What is the optimum speed for carousels in a mobile website? For you to answer better -

  • optimized copy (say 6-10 words for mobile) as against 12-20 words in desktop
  • Maximum of 4 banners in carousel
  • When i saw few websites, realized they set speed between 5-8 seconds
  • Some websites have carousels but they don't auto rotate in mobile version
  • 5
    I think this site is probably the best source. shouldiuseacarousel.com – akanoodles Jul 21 '18 at 22:05
  • 3
    For me, on any website, the optimum speed is zero. On the very few occasions there is something interesting in a carousel, very few things are more annoying than have it scroll out from under me just as I realise I want to read it. If you insist on auto-scrolling, detect a touch in the carousel area and stop it. – TripeHound Jul 23 '18 at 10:45
  • 1
    Are you sure that the carousel is the best solution?Why do you want to use it?What's its purpose? – Matteo Vacca Aug 2 '18 at 9:19
  • @TripeHound do you want to expand the comment into an answer? – Michael Lai Aug 8 '18 at 22:43
  • A more recent article from NNg regarding mobile carousels: nngroup.com/articles/mobile-carousels – Michael Lai Aug 24 '18 at 21:28
5
+25

Personally I do not use carousels anymore. I/we used them till about 1 year ago in our e-commerce websites that our company makes for clients. Carousels are a nice to place a few products in a limited space, especially on mobile. We stepped away from them because a great looking hero image gave a better CTR / conversion rate.

TL:DR

  • 7 or 8 seconds based on mentioned facts in the question (if you wish to have auto rotation however I and Nngroup do not suggest it).
  • Not auto rotating gives performance boost for mobile websites & is better for SEO (You can read my reasoning in the later part of my answer). Nngroup also advises to not rotate on mobile devices.

Determining rotation speed

So before you can decide on the rotation speed you should think about how you implement the timer of the carousel.

  • Will the timer start when the user lands on the website.
  • Will the timer start when the website is fully loaded?
  • Will the timer start when the user has navigated to the carousel section.

I would suggest you start the timer when the website is fully loaded and when the user has navigated to the correct section. This gives the highest chance that the item they see first is the item you put first in the carousel.

Factors that influence rotation speed

There are some factors that influence the rotation speed. Some are location based and some are user based.

Reading speed

The reading speed of people will influence the rotation speed. You mention that the image will contain 6 - 10 words so research what the average reading level of your user is.

In Holland (where I live) the average reading level is B1, based on CEFR. Your country should use a similar system and the information should be online available for you (also make sure you know the reading level of the user group).

Research done in 2012 measured the speed at which subjects read a text aloud, and found the average speed across 17 different languages to be 184±29 wpm or 863±234 characters per minute. However, for the languages that use the Latin or Cyrillic alphabets, the number of wpm varied, as low as 161±18 for Finnish and as high as 228±30 for English.

Source: Wikipedia

So according the the above mentioned research, just reading the text will take take about +/- 3 seconds (average) (Latin or Cyrillic alphabets: ~4 second / English: ~2 seconds).

What level words do you use?

Secondly it is important that you do not use difficult words. For instance the word 'difficult' is easier to understand than 'arduous'. I am in no way a linguistic expert. If the text you will use is in English, friends in the English stackexchange network should probably be able to give better advice on the difficulty of the text.

If you use words that are to difficult for your target group to understand (or harder to understand). The process time will take longer.

Understanding the image (banner) and text

As mentioned above, it will take at least 3 seconds before someone reads the text in the image. I think(*) it will take about 2 seconds before someone comprehends the meaning of the sentence and the image together. Keep in mind that this estimation is based on that there is a direct correlation between the text and the image (so for instance: 'New laptop with GTX video card' + image of laptop).

If the image is more ambiguous the time it takes will probably be a good bit longer. (for instance: 'Salvador Dali shows everyone is puppet of life' + image of 'The Burning Giraffe')

*I could only find scientific research regarding the comprehension time of larger bodies of text. For instance 'Reading skill: Some adult comparisons.' is used as a reference in a lot of papers.

Optional: Mobile internet speed

If you decide to start the timer of your carousel as soon as a user visits your website, be sure to also include extra time to download the information. Speedtest.net has a great amount of information regarding the average download speed in every country.

Conclusion

So, in your example I say it should take at least 5 seconds to understand the slide. Secondly you want to add some time for the user to 'decide' if they should click. I would suggest you take 7 or 8 seconds for the duration of a slide if you choose to auto rotate. Remember that you can user test this to find the perfect duration.

I however suggest that you do not auto rotate the slides on mobile. You can see my reasoning below.

Not rotating gives performance increase

Our company would not rotate the items on mobile, this is because it gives a few easy performance increases for your website. I will explain why we did not actively rotate the items.

Smaller JS load

Firstly, the JS file that is actively loaded is smaller. This makes your website load faster on mobile. High-end phones will not notice an active speed increase on the website, budget phones however do.

JS is run client side so the rendering of the interaction has to be done by the clients browser. Budget phones have slower processors so that influences the experience to some extent. From testing we noticed that native browsers (for example the Samsung web browser) of not updated smartphones had a lot of trouble with the JS.

Less initial images loaded

If you optimize your code that you only load images after you click the 'next item' your initial website also loads faster because 'hidden' images are not loaded by the browser (It is great for SEO. Google puts mobile first).

Give users the option

Not rotating gives your users the option to change the image. So when and if they want to see the image/item it will be shown to them if they click 'next'. If you use an auto rotate they might be mid sentence when reading.

Edit: I found an old article on nngroup. Just like I mentioned earlier they state that you should not auto forward on mobile devices.

Do not auto-forward on mobile devices, because: (1) it slows down the page, and (2) because pages are short, users often scroll quickly, so by the time the carousel changes, the user is likely looking below the fold and won’t see the change anyway.

Secondly they use a 3 words per second as a guideline for rotation speed, I do not agree with this (as it takes about 2 to 3 seconds to just read text and you still need to process the information to make a decision).

Test for the right timing, or at least estimate how long it might take the average user to read the text and process the images. We use 3 words per second as a guideline.

  • +1 Seems like you've looked into this question and found some really good explanations. – Michael Lai Aug 4 '18 at 14:15
0

IMO there's no accurate answer right away. It depends on your target group of people, on the connection they have etc. You should run some A/B testing in the following cases:

  • 3-4 secs rotation - don't forget we scan, we don't read everything.
  • Have a teaser to make the users swipe/scroll left and right - no auto rotate
  • Have no carousel at all. Have your pictures and your wording on after the other.

When you see the results of your convention rate, then you decide as accurate as possible what to do.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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