Do position dots under a carousel need to be clickable?

Question

It is common convention to make position dots under carousels (as shown on Apple's site below) clickable.

My question is: is this convention based in any user research, or any experience of user responding badly to non-clickable dots?

I have two reasons for challenging this convention.

1. Given that these dots give no indication of what content is on which "page" of the carousel, there is no information-seeking objective that can be satisfied by them (unlike a "sort and jump" strategy with e.g. alphabetical pagination)
2. They are almost always too small to hit on a touch-based device, and so have diminishing usability in themselves

Does anyone have any personal experience or research to confirm / disconfirm their usefulness?

(Please don't refer me to sites where this is used, unless you were involved in the design/evaluation of those sites. I understand this is widely adopted convention. What I want help with is evaluating this convention, not recognizing it as a convention.)

Answer 1

Perhaps it's worth coming at this from the other angle. You might ask yourself two questions to help answer this problem.

The first is: do those links reduce usability in any way? From a usability perspective, they're entirely discoverable given that the primary purpose of the dots are to afford the carousel mechanism itself. Given that, I can't think of a reason why you wouldn't want them to be a control, so the answer to this is probably not.

The second is: what's the alternative? (Also, what benefits does a potential alternative provide?) The alternative presumably is no links at all, though keeping the indicators. Does having a plain indicator provide any special usability benefit? Probably not.

Given that there appear to be no costs (or opportunity costs) to having these links, then they can only increase usability, and improve the user experience. Obviously if you have different circumstances which make these links a cost in some way, then you will need to weigh up the costs and benefits and make a decision based on the balance of the two.

Answer 2

I can't offer research, just views! I would consider that touchscreen users are not the only users of websites - I find it easy to click these dots with my mouse. Also, while the dots don't offer any cues for the information they contain, they are typically on a carousel with a rotation of (say) 5 seconds, so I will sometimes want to move onto the next screen out of a sense of curiosity, and I'd probably feel frustrated if I couldn't do that.

Answer 3

The one caveat to making the dots clickable is if a situation arises where a user accidentally clicks the dots. In a desktop environment this is unlikely, however in a mobile environment you want to make sure a user can't click the dots while attempting to scroll.

I think one thing that makes a difference here is the size of the dots. If the dots are larger there is more of an expectation that they can be clicked. Smaller dots act more of a status indicator, indicating that there is more content to the left or right.

I've noticed you're using a blue dot to indicate the active page. Blue is typically used as a primary action color, so if you're using blue I would say that yes, you should make the buttons clickable.

If you need a control for the carousel desktop users should have arrows on the left and right of the carousel window on hover. Mobile users will likely expect the ability to slide the content left/right.

The answer to your question is "it depends."

Primarily it depends on the functionality expectation generated by the styling (size/color) of your dots.

Answer 4

I have had a fair bit of experience bringing websites up to accessible standards in Ontario under the Accessibility for Ontarians with Disabilities Act (AODA). It is based largely on W3C's Web Content Accessibility Guidelines (WCAG). All that's just to say they make some big rules from pretty well-established usability conventions.

In working with sliders, if usability is of great concern, it's worth considering users that are utilizing screen readers or users with low vision that may primarily be using the keyboard for navigation or some other assistive technology while using your site.

All these methods require that you use Aria labels to identify the role of the site element (your banner), and appropriately paginate the slides to allow users to effectively 'see' the options for viewing other slides (a screen reader will read out the options to navigate through the slides). The only caveat to this is that if you are intending to be 100% accessible you also have to add an option to pause any automatic slideshow so that those with low vision or those using assistive technology are able to take their time to 'read' the slides.

Answer 5

1. Not using any type of navigation for the slider is not a good option - please see this research on Nielsen Norman Group "Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility".
2. I understand why you think dots are not a perfect idea, but you have a better solution? Your argument is "these dots give no indication of what content is on which page of the carousel", but neither arrows or even pagination does. So what is an alternative? It can be a preview, but this just makes the user focus on this and not on the actual content and this is not ok.
3. With any better alternative, dots seems an elegant solution and are recognizable by the users. In conclusion, I think dots remains one of the best solutions for navigation on a slider.