4

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?

mockup

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.

  • shouldiuseacarousel.com It depends of the content. Could you be more specific on the content, sequence of images, kind of relation or not of the sequence? – Carlos Martins Aug 8 '16 at 12:18
  • @CarlosMartins Sorry for the lack of imformation, I edited my question. – Big_Chair Aug 8 '16 at 14:29
  • 1
    I think this also depends on whether this is a mobile app or mobile web. In an app, it's probably sufficient to just "peek" the next image so the user knows that there's more. In an app context, the user intuitively knows to swipe. On the web, however, swiping is not a very common interaction, so this might differ. I'm not really sure, which is why this isn't an answer. – user69458 Aug 9 '16 at 19:17
6

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/

  • Your answer is worded well, but unfortunately I am not speaking about homepage carousels, it's specifically about one single product page. Sorry for the lack of information, I edited my question now! – Big_Chair Aug 9 '16 at 9:17
  • I think most of these tips apply whether it's a homepage carousel or a product-page image-list: e.g. not making arrow "hover only" applies to both. Another reason for always showing arrows (and making them switch images) would be that for some people, tapping the arrow may be easier than swiping. – TripeHound Aug 11 '16 at 10:55
  • Yeah, generally the same principles apply to both. Ultimately, it's about creating signifiers that resolve any ambiguity about whether the element is a carousel, or just an image. Having dots and arrows are two ways of doing that. – Paj Aug 11 '16 at 14:51
1

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)

  • Sorry, I had to add some information afterwards, so your answer might not be accurate anymore (like pointing a dots) – Big_Chair Aug 8 '16 at 14:36
  • @Big_Chair so the overall conclusion would be, it depends on the context. Chill:-) – Hemalatha Aug 9 '16 at 5:48
1

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.

Kohl's app product page screenshot

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.

0

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.

0

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 :-)

  • But as Paj said in his answer, "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" – Big_Chair Aug 9 '16 at 9:08

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.