User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Which of the following 2 is more usable:
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:
I added event tracking to the carousel navigation elements on our public site.
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.
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:
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:
via Hype & Slippers on dribbble
See also this recent UX SE question on why carousels might not be a very good idea at all.
When you have a small amount of pages, like in your example where there 5 pages, then you can use dots. (The dots fit inside the content.)
The advantage is that the user can move quickly from page to page, and have better knowledge of where he is.
When there's a large number of pages, eg imagine there are 12 dots, then it is better to use arrows. Too many dots will draw the attention away from the actual theme; not to mention issues of fitting in the content space.
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:
Arrows with numbers:
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/)
-cheers-
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!
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.
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?
