Do users recognize "slideable" areas with dots as indicators for multiple images?

Question

Are more explicit visual cues, like the arrow buttons in "Variant 2", necessary to convey that there are more images available and the user can reach those by swiping left or right?

Or are users already used to dots like these as indicators?

^{download bmml source – Wireframes created with Balsamiq Mockups}

EDIT: I completely forgot to mention that this question is mainly about mobile displays. The desktop version would use something else than those dots.
So the main interaction is supposed to be swiping.

It's about fashion product presenation of ONE product, like Adidas or Nike would do, so it's not about homepage carousels. So the images are all related and I think users already expect multiple pictures of the product.

Answer 1

Arrows serve as a signifier that the carousel contains multiple images, so if you remove them, you may run the risk of users not noticing the slide indicator dots underneath. Removing the dots is risky too, as it is a clear indication to the user of how many slides are in the carousel, as well as their current position in the set.

I personally would also not make the arrows only visible on hover for two reasons. One is because that this limits their discoverability, and secondly because tablets and mobile devices have no support for hover functionality, so they would never see the arrows.

There are other alternatives to arrows too - you can show a 'peek' of the next slide which can act as a good tool to show users that there is something to come.

This article has some more good tips about carousel use, and is very recent: https://www.smashingmagazine.com/2016/07/ten-requirements-for-making-home-page-carousels-work-for-end-users/

Answer 2

Nowadays it has become a very common assumption that the banner image may contain multiple images. So it is not always necessary to have the carousel with big arrows in the left and right. Distinct dots at the bottom is enough. Although, users look out for the arrows for an easier navigation than the dots which are smaller and hard to point.

It depends on the context of the image, whether the user wants to look back what has gone or just skim through the images.

Best option is to make the arrows visible on mouse hover. This gives a sudden attention to users that an arrow is available to switch between slides. In this case, the dots are not necessary.

For example, take a look at e-commerce websites, wherein the banner slide usually have arrows. This helps the users to look out for the products with offers without waiting for few seconds until the next slide comes.

Dots are used in cases where the images are not more than 7 or 8. Arrows could have more images with just a click(ease of navigation)

Answer 3

Do you need more explicit information cues than the dots? Regardless of users familiarity with the dots, they lack information scent (visual or textual cues to suggest what information it or its links may contain).

In Nielsen Norman Group's 4 iOS Rules to Break,

In usability testing, these dots are often too subtle in the interface to clearly indicate to users that there is another view of content available. As such, they should never be used for key functionality, such as navigating between features, or as the sole method for accessing information.

Many fashion and e-commerce websites use thumbnail pictures or color squares instead of the dots.

In the above example, the Kohl's app allows you to swipe the above picture to see variants. However the user isn't lost if they never attempt to swipe. They can also select the color squares below instead.

So you could add arrows but they may not be necessary at this point. Most users will probably gravitate towards choosing the thumbnail pictures that look the most interesting to them (or still select all of them). They also won't have to worry about remembering which image they want to revisit since a quick glance at the thumbnails will provide enough guidance.

Answer 4

Without having to rely on the common sense of the user, simplify it by putting the "< & >" arrows to either side of the dots, respectively. This way you do not have to jeopardize the margin in either side of the image block.

Answer 5

Using the < > signs on top of the image should offer a natural and comprehensive signaletics to the user and also equal responsive design on mobile and desktop display. Please avoid the "dots"cliche :-)