Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Which of the following 2 is more usable:

  • Having dots on the carousel
  • Having back and forward arrows, with some text to indicate the position and number of slides in the carousel

The carousel is non-chronological, and let's assume it is a big photo with a little bit of text on it, being used for promo space.

See example below:

enter image description here

share|improve this question
1  
i think it actually depends on the context – can you add a little more details about what the caousel will show? how many items? product presentation or news? etc? –  tillinberlin Feb 1 '13 at 22:35
3  
Tillinberlin is correct. It depends on the context. If the slides were chronological screenshot steps for an app, I would go with the arrow/numbers. If they were a few shots for a wedding, I would go with the circles. –  Chris N. Feb 1 '13 at 22:44
    
Lets assume that it is just a big photo, with some text over the top. Like a banner you would see on an ecommerce site, for promotional purposes. Non-chronological. –  Rich Feb 1 '13 at 22:51
    
"being used for promo space" then, who cares? It's an ad. Most will ignore it. ;) –  DA01 Feb 1 '13 at 23:21
1  
@ChrisN. I agree, dots plus arrows could the best of both worlds. From my perspective as a visual designer, I'm always trying to minimize elements to make cleaner layouts, that would be the only reason I may choose not to use both. Definitely would be good usability though. –  Rich Feb 2 '13 at 0:25
show 3 more comments

7 Answers

up vote 18 down vote accepted

I added event tracking to the carousel navigation elements on our public site. enter image description here Those that navigated the carousel overwhelmingly used the main side arrows. less than 10% used the bottom secondary navigation arrows. And practically no one <.5% clicked the dots.

Dots may have some purpose of indicating how many slides (does that matter to people?) but they neither attract nor serve the user very well.

The arrow is a far better choice to indicate direction and available action on a carousel. Even better is when the two directional arrows are right next to each other, as you have on the right hand image. The one on the right is far and away the better choice.

share|improve this answer
    
+1 for awesome answer. Some really good insights there. Was wondering what technology you used to add event tracking to your site? Could you point me in the direction of some resources to help set it up? Cheers man! –  Rich Feb 3 '13 at 0:27
    
Great. I love evidence when I can get it. I used mixpanel. I recommend them highly. The technology is easy and it delivers. –  Itumac Feb 3 '13 at 1:41
add comment

I find that dots are useful for showing progress, but they're way to small click targets to be usable for navigation. They're probably best suited for mobile applications like the iPhone home screen where a swipe is the means of changing slides:

iPhone

If you do decide to build a carousel, make your nav buttons BIG. Allow keyboard navigation for desktop users and swipe for tablets. Generally I expect to see nav buttons on either side of the carousel content and some kind of progress indicator:

enter image description here

via Hype & Slippers on dribbble

See also this recent UX SE question on why carousels might not be a very good idea at all.

share|improve this answer
add comment

When you have a small amount of pages, like on your example, 5 page, that can fit in dots inside the content then you better use dots.

The advantage is that the user can move quickly from page to page, and have better knowledge of where it is.

When there's a large number of pages, eg imagine there are 12 dots, then it is better with the arrows. Many dots can draw the attention from the actual theme, maybe they don't fit in the content space, and you have lost what you have seen on them.

share|improve this answer
add comment

ok (referring to my previous comment above) so if it's just a few big photos with some text like for a portfolio or for a gallery website, then I would definitely go for the dots. Quickly some thoughts - or actually a loose list of pros and cons:

Dots:

  • not very practicable for larger number of slides (probably max. 7)
  • abstractness good for slides that show "moods" or "impressions"
  • abstractness not good for technical or "dry" content like news
  • advantage: direct click-jump to any item in the list
  • advantage: dots could also feature thumbnails or title of the item

Arrows with numbers:

  • works also for larger number of slides (more then 7)
  • concreteness not good for slides that show "moods" or "impressions"
  • concreteness good for technical or "dry" content like news
  • disadvantage: no direct click-jump to any item in the list

And for the sake of it: I would probably use a combination – like dots and arrows. BBC actually uses this on their news site (http://www.bbc.co.uk/) and Apple uses also dots and arrows (that are first hidden) on their product presentation pages (http://www.apple.com/iphone/)

BBC News slider

Apple Slider

-cheers-

share|improve this answer
add comment

One thing I would like to add from an interaction design point of view is the principle of navigating the user.

I agree with the comment that the usefulness and usability of the component should be based on testing, as should all aspects of your design.

But principles such as navigating the user dictate that you should know where you are, where you have been and where you can go.

Having dots, whether they serve a functional or aesthetic purpose give feedback (another interaction design principle) although it's loosely applied here.

The arrows are an obvious choice for reducing cognitive load for the user, e.g "thanks for providing me with visual structure, I'm guessing I can go back or forward"

It's your responsibility to test and find out what combination works and what doesn't, especially when it comes aesthetic styling.

share|improve this answer
add comment

I have two issues with this really.

Firstly, and less importantly, Arrows are clearly navigation UI elements, dots have become pagination. Dots may well be touchable, but they don't serve as a strong enough click cue. As such the large news sites use both. They compliment each other and for that reason I'd advise you to use both.

Secondly, and fundamentally, a carousel with no way of previewing the rest of the content is more of an issue for me. We all know that the first slide in a carousel is far and away the most successful. And you get diminishing returns with each slide there-after. Making users click through each slide to see if it's relevant or useful is bad practice IMO. Essentially, unless its an image gallery (which it doesn't sound like it is) you are just burying content in the carousel.

If its a message that's important enough to warrant a space on the page then give it one. If not be brave and drop it. If you go 320up it will give you a good focus on what content you need and what you can afford to drop.

Good Luck!

share|improve this answer
add comment

Don't take anyone's opinion, no matter how plausible. Especially an "expert" opinion. Go and test across your range of users, with samples of your content. Get real evidence.

Why? Because usability and quality of experience depend on specifics, not generalities. There are no magic formulas.

And, smart people can create a plausible argument for (or against) anything. An "expert" has ego and reputation to boost. So without evidence, how can you know the truth?

share|improve this answer
    
I have to disagree here. Getting expert opinion on matters such is as this is a sensible approach - other people would have had the same issue so it makes sense to learn from their experience. An expert opinion could be 'the dots are too small and close together so from an accessibility point of view it requires a higher degree of precision and is therefore less usable than providing larger arrows'. Would you dispute that statement and require full user testing to decide if that statement bears merit or not? –  JonW Feb 6 '13 at 14:02
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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