45

It's called a Ghost Action Button, particularly used on above the fold for full-sized websites. Since the top fold fills up entire screen the users might assume there is nothing more to scroll down and see. This button informs the users that there is more content below the fold, so that they can scroll down and consume. Update Referring to @jacob's ...


41

Some research into Carousels usage on University of Notre Dame website has some interesting findings: Approximately 1% of visitors click on a feature. There was a total of 28,928 clicks on features for this time period. The feature was manually "switched/rotated" a total of 315,665 times. Of these clicks, 84% were on stories in position 1 with the rest ...


23

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 ...


19

Whether you use a particular html feature or jquery widget or whatever really depends more on what problem you are trying to solve. Identify the problems to be solved, then design solutions to those problems. Don't just grab solutions as seen elsewhere and then just use them. Regarding sliders (aka carousels) ... Use when your problem is: you have a ...


16

I think carousels can be effective as long as they give control to the user. That is, they can skip ahead, direct the flow, know where they are in the carousel, and turn off an auto-play function. Here is more on this idea: http://uxmovement.com/navigation/big-usability-mistakes-designers-make-on-carousels/


16

Visible not prominent Within a given component, help users know what to expect by visualizing app state. IOW, keep the arrow visible but clearly inactive. This way users will know where to find it at a glance and will have visual confirmation that the carousel is at the beginning/end. There has to be a better term for this but, recognition over recall ...


16

Naming It's called scroll arrow, as many noted before me. The icon itself called chevron sometimes and called keyboard arrow down in Material Design. Purpose Hence fullscreen image and hidden scrollbars e.g. on Apple devices (they are not shown until the scroll), some users may think that there is no content below the image. Icon signifies there is. Huge ...


15

I was going to make this a comment but actually I think this is an answer. Pause on hover doesn't work for mobile - and web pages should be designed to work on mobile devices, so yes a pause button or mechanism is necessary that doesn't depend on hover. I cannot stress enough the importance of considering the mobile experience when designing for the web. ...


14

Q: How many images must be in a carousel so that the user can see all of it? A: 1 In an interesting blog post about carousel interaction stats, Eric Runyon collected data on carousel interactions for various ND.edu web pages. What he found is that effectively users only interact with the first item in the carousel: A concise analysis of this data:


11

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 ...


9

There is one big upside to auto-scroll that you missed: Visitors may not be captured by what you consider the main feature items. Moving through a varied selection of samples may help broaden your reach and tame your bounce rate a bit. It's a site by site, page by page decision. If there isn't too much to take in on the page and the carousel is the primary ...


8

Depends on the goal. What are you trying to accomplish exactly? In the lobby the expectation (I assume) is that your employees breeze by while visitors grab a seat and wait for their appointments. If so, then there are a couple of questions to ask: Do visitors already know about your company/organization? If not, what information do you want to relay that ...


7

I don't have a definitive answer to your question, but there are two things to keep in mind: user control of the carousel's rotation and mobile-specific gotchas. User Control The Web Content Accessibility Guidlines (WCAG 2.0) are quite clear: users must have control over timed content: For any auto-updating information that (1) starts automatically and (...


7

Horizontal accordions have one advantage over carousels in that they do provide a complete overview of available content, whereas carousels by design only hint at additional content. Accordions provide overarching structure, carousels focus on item level details. If your content has a meta-structure and is not simply a collection of items then use a ...


6

Here's an article that cites a couple semi-recent studies at Notre Dame and Nielsen/Norman. It might be relevant to the discussion. To summarize: Arrows are distracting! Don’t use web carousels for showcasing products Do use web carousels to brand your site or offering Web carousels are not ideal for desktop websites Web carousels get very significant taps ...


6

You could replace the arrows with a simple swipe control, implemented via JS. You could hint that more pages are available by providing 'peeks' of the two extra pages outside the viewport (so it appears the far edges of the previous and next images are just within sight). The big advantage of the swipe control is that it gives the user a large touch area to ...


6

No, it's the other way around. As your having a carousel, there is a timing issue to address. The carousel switches images and users have to quickly click on the banner to get to the offer currently visible, before it swiches again. According to Fitts's Law, illustrated above, the time it takes a user to click an area is a function of distance and target ...


6

According the opinion that carousels are evil and one should not use them, regardless of what the customer thinks, the conclusion is: "Longer is better". The ideal time is "infinity" (i.e. don't use carousel). If you are forced to use some finite time, then make is as longer as possible without getting fired.


5

If UI space is your issue, why not take inspiration from Jelly Bean's own minimal, and familiar, carousel indicator?


5

From my own experience in looking at the analytics data of sites I've created, I can say that most users don't interact with a carousel, much less convert from one. I have noticed recently that a number of sites that used to have carousels no longer have them and are instead showing just one "panel" (if you look at the HTML, there's still remnants of a ...


5

Personally I do not use carousels anymore. I/we used them till about 1 year ago in our e-commerce websites that our company makes for clients. Carousels are a nice to place a few products in a limited space, especially on mobile. We stepped away from them because a great looking hero image gave a better CTR / conversion rate. TL:DR 7 or 8 seconds based on ...


4

Its going to be hard to represent a suitable solution unless we get an idea about the type of content you are going to show with the image since the size of the content could decide how much screen space could be shown. I am not a fan of using a carousal since its a one time view for a single image at one point and does not provide equal value to all ...


4

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 ...


4

Most people seem to agree on the common sense of a maximum around 5 images, but agree that less is better where possible. Jakob Neilsen suggests 5 because: it’s unlikely users will engage with more than that. It can be taxing to swipe through many frames on a mobile device, and it’s difficult for users to recognize topics they have already viewed when a ...


4

It isn't redundant. It's a function people already use on a regular basis. Don't over-think it. People are used to slide to the right, and people are used to see bullets on how far they have progressed. If you truly think it's redundant, than I would ditch the carousel, since I believe it's better suited for navigating to different destinations in your app ...


4

In television production, standard "hold" time for on-screen copy is 2x reading speed. In other words, if you have a block of copy on the screen, it should stay on the screen long enough to quickly read it through twice. This is to allow time for orientation, focusing on the text and slow readers. That being said, a web page is much different than a ...


4

An important factor to consider is the audience of the application (or website). It seems that typically, many younger audiences (or those familiar with touch devices) are used to swiping across carousels. If you look core applications of iOS (and I'm assuming Android as well), you'll find that carousels support swiping to switch to the next image. However, ...


4

I don't think most websites are trending away from accordions towards carousels. Sites are trending away from carousels, and they are also trending away from accordions (if I were to speculate, perhaps at a slower rate). Disadvantages You asked specifically for potential disadvantages of using accordions instead of carousels, so: If you need to present ...


4

Looking at your sketches it appears as a landing page; here the carousel version works best, because the business need is to show users more sections to go through without too much of vertical scroll. Once the user chooses a particular category you can switch the layout to long vertical scroll, here the users may not mind scrolling down because they are ...


3

I feel your pain! I say just don't use one :) This article explains why sliders are a bad idea with great details and examples. Basically: Their movement distracts users away from your content People glaze over things that look like banners They have terrible usability--as you mention, they always seem to move just as you're trying to read something! ...


Only top voted, non community-wiki answers of a minimum length are eligible