By using the Together Incredible site you agree to the use of your data as per the guidelines in our privacy policy

Discuss and share how to improve a user's digital experience Join Slack Channel

Guidelines for designing a user-friendly homepage carousel

24.05.2018

Image carousel by Oliur

Image carousels are popular on desktop websites, especially on the homepage. Studies by Baymard Institute found that 52% of the top e-commerce sites have a carousel on their desktop homepage and 56% on mobile sites.

But are homepage carousels helpful to users, or do they merely represent an easy way to group content? From experience, carousels can have both a positive and negative impact.

 

Positive Impact of a carousel

➕ They make it possible to showcase more than one piece of content in a primary location on the website.

➕ More information appears near the top of the page, and there may be more significant opportunity for people to see it.

➕ Highly effective when showcasing a gallery of images for a portfolio

 

A negative impact of a carousel

➖ Users don’t stay at the top of the page long enough to see multiple slides on a carousel (even if the slide auto-rotate).

➖ Sliders can look like advertisements and be ignored.

➖ Designers often see carousels as a neat way to showcase a collection of images, but users will take the first carousel as a leading opinion of what services or products you offer – this could lead to false impressions.

➖ Moving elements can negatively impact accessibility, especially for those with motor skill issues

➖People expect control over their user interface. Taking away their power with an auto-slider can ruin an otherwise engaging experience.

“1% of site visitors click on the carousel feature— and 84% of them were on the first image” Erik Runyon

On the whole, carousels don’t sound like great features to have, BUT if executed correctly they can be notably helpful to users. Below we have curated some guidelines for good carousel design.

 

Guidelines for good carousel design

Content is key
Carousels can only ever be as good as their content. If the content is not interesting or useful for your visitors, they won’t engage with it. The content should be simple and guide them to a single call to action.

Content in your carousel should not look anything like an advert – users will bypass this due to banner blindness. It is crucial to use brand fonts, colours and photography styles to set the site content apart from desperate advertisements.

The carousel should never be the only way to access site features and content. It would be wise to put any valuable information on another section of the page, that way the visitors have a good chance of engaging with it.

apple_airpods_1

Apple has curated a high-quality hero image with simple text and one call to action

Slide Series
The majority of users won’t see all the slides in a homepage carousel, even if it auto-rotates. In the series of slides, the first should always show the most valuable piece of content and has to sell the next slide to the user. As a UX designer, it is your role to choose the slide series carefully and only use the carousel to highlight significant site features and information.

Keep in mind – On desktop users have a higher chance of seeing more than one slide in the series, however, on mobile the user may scroll past the image while it loads and there’s nothing else on the screen to catch their attention.

 

Auto-rotation
Auto-scrolling should be used to spread exposure across slides. However, companies use carousels as some dumping ground to keep stakeholders happy. Users like to be in control of their interface, so auto-rotation can be incredibly distracting, and like any animating graphics, it will draw the user attention away from other static content.

If auto-rotation is deemed relevant on a website it sets the standards even higher for the quality and curation of content. If you want to create a good user experience we advise you to implement the following:

  1. Slides shouldn’t rotate too fast
  2. Auto-rotation should pause on hover
  3. Auto-rotation should permanently stop after any active user interaction
  4. Never use auto-rotation for mobile sites

 

Limit the number of slides
The maximum number of slides in a carousel should be five; however, its unlikely users will engage with that many. Limiting the number of slides helps with discovering important content further down the page.

 

Provide a progress indicator
Clearly show the users how many slides are present in the series with a “dot navigation” – not only does this show progression through the slides but helps the users feel in control of the UI and understand their position on the website.

Alternatively, you can use arrows, to advance to the next slide, or go back. These are often placed on the left and right-hand side of the image and always pointing in the correct direction. left–back, right–forwards.

 

pagnition

 

Mobile considerations
Never use auto-rotation on mobile sites because users can accidentally open the slides as they tap their screens to scroll. Instead, you should support swipe gestures for mobile devices. A progress indicator can still get implemented on mobile however they should get support with the additional swipe gesture.

Keep in mind – users have less patience for slow-loading carousels on mobile devices.

swipe_gesture

Mobile swipe gesture by Nathan Riley

Alternative to a carousel

Carousels get overlooked as users have little/no idea of what slide comes up next. We would advise using just one hero image instead because users can focus on one image rather than be distracted by looking at the less important things.

As a UX designer by choosing only one image, it allows time for more thought to go into what best represents the company. You can prioritise content and give the user a single call to action

 

Is a carousel good for your users?

Don’t just use a carousel because one of your competitors does, or it looks better or it makes your website look more interactive – if your content isn’t well curated the experience will not be good.

Test different options before dismissing a carousel on your homepage and make sure the guidelines are ticked off.