A carousel is a user interface (UI) design showing a revolving collection of items. These appear one at a time in a defined area or container in a web page or email.
Each item of content appears to travel along a common axis, which is typically horizontal. The user can control how they navigate the slides within a carousel. The slides can also move automatically or combine both automatic and manual movement.
A carousel – also referred to as a slider or slideshow – allows the user to conveniently cycle through multiple items of content while remaining in the same viewpoint of an email or page.
The screenshots below show a typical carousel example used in an email viewed in a desktop and mobile environment.
to view example in web browser.
The carousel example comprises:
- Initial automatic cycling of three slides (where supported by email environment), unassisted by user.
- Twelve seconds of automatic cycling of carousel slides, split equally across three slides. This has been configured to suit example content.
- Pause in automatic cycling when the user hovers a cursor over the carousel. The carousel pauses on the current slide and resumes cycling when the cursor is repositioned away from the carousel container.
- User navigation overriding automatic cycle of slides. The cycle is permanently stopped when the user interacts by clicking or tapping on navigation controls.
- Email environment constraints prevent the resumption of automatic cycling. It will restart when the HTML page or email is reloaded/reopened.
- Primary navigation controls (presented as directional arrows positioned on the left and right side in this example) enable the user to view the next and previous slides in order of their sequence in the carousel.
- A slide status indicator (presented as circular dots positioned at the bottom of the container) shows the total number of slides and current viewable slide position in the set.
This also provides extra navigation by allowing the user to jump to another slide in the set.
- Slides that transition along a horizontal axis, in both automatic cycling and user navigation of slides.
Why use it?
A carousel is typically used to present multiple content items, each considered to have equal or similar hierarchical importance, in the same position on a web page or email. It can provide a visually pleasing way of presenting content, partly thanks to use of large images that help evoke an emotional response to a message.
It is often used by web/email authors when they have difficulty deciding which content item should have greatest prominence on a web page or email. User experience (UX) communities sometimes criticise carousels for this reason.
When to use it?
(determining usage suitability)
Consider using a carousel UI when:
- There are multiple items to display, each with similar hierarchical importance. We recommend including no more than five items or slides of content. A carousel with six or more items can be too taxing for the user and discourage them from engaging with all the content.
- Large imagery is present. For example, photographs showing a product from different angles.
- Any accompanying copy or elements are succinct or minimal. Otherwise, consider using tabs as a UI for copy content.
- The message/information is communicated elsewhere within the email, so it remains intact regardless of whether the user views the carousel. For example, if a hyperlink features on slide two of the carousel, this hyperlink can be presented elsewhere in the message to ensure it is visible.
Please note that while this document provides guidance on the types of content suitable for carousels, its focus is on functionality and best practice design.
Which email reading environments support this?
At the time of writing, the basic functionality required for interactive carousels is supported by:
- Apple Mail on Mac
- Outlook for Mac
- iPhone Mail (mobile)
- iPad Mail (tablet)
- Samsung Mail (mobile)
Please ask your Profusion contact for an email environment opens report estimating the percentage of recipients opening emails in these environments. Carousel functionality is not supported by other popular email reading environments that may be listed in Profusion’s Email QA handbook. Please see the ‘Alternative fall-back presentation of interactive content section’ within this document for information on measures taken for non-supporting email environments.
Notes for designers and marketers
Unconventional coding practices are used to bring interactive features such as carousels into emails. HTML and CSS web languages are used to provide interactive functionality, leading to some constraints within the design:
Presentation and interactivity
The supplied design should show the carousel featuring:
- A primary control method allowing the user to navigate between slides.
- Use pointer scrolling via a scrollbar or swiping gestures (the latter if using a touchscreen device) only where absolutely necessary or appropriate. These are the least preferred methods of user interaction for navigating between slides, particularly when each slide or frame occupies the full area of the carousel container. This is because ‘snap’ positioning assistance of the carousel slides is not available when scrolling/swiping in email.
- The technology used to provide refined ‘snap’ positioning assistance of the carousel slides is not available in email. The preferred navigation solution for email is to provide controls which rely on pointer left-clicking or tapping to navigate to each slide. This enables precise positioning within the carousel container. For carousels in email, pointer-scrolling/swiping gesture navigation functionality cannot be provided together with left-clicking/tapping gesture navigation control functionality.
- Navigation controls that are prominent and sizeable within the carousel container and visible on every slide. As a general rule, the primary navigation controls should be no smaller than 35 pixels by 35 pixels.
- Navigation controls, typically in the form of directional arrows, positioned to the left and right side within the carousel container.
- In scenarios where slides in the carousel must transition along a vertical axis (eg bottom to top), the positioning and orientation of the controls should be presented accordingly within the carousel. Unless essential to the context of the carousel content, we recommend using a conventional transition along the horizontal axis or instant transition.
- When transitioning slides along an axis, the transition path must travel across the slides that are not in first or last position. Continuous revolving of slides in a constant direction, often seen in carousels on websites, is not possible for email. This limitation does not affect the user experience.
- The transitioning of slides along an axis is entirely optional and is implemented in the example proof of concept to provide a rotating ‘slideshow’ feel to the carousel. It is also possible to use alternative transitions or replace them with instantaneous slide changes.
- While directional arrows are commonplace for primary navigation controls, additional or alternative means of slide navigation can be provided. Examples include using the slide position indicator for slide navigation or adjacent positioned thumbnail previews of each slide for supplementary carousel navigation.
- Unless essential to the context of the carousel content, users may continuously cycle through the set of slides.
- Visual clues/indicators of the current slide position and total number of slides in the carousel.
- This encourages the user to explore subsequent slides by communicating that there are additional slides beyond the one currently visible.
- Setting expectation of carousel length in advance can increase the user’s willingness to view all slides.
- Providing the user with their current slide position in the set can also make navigation easier and add a sense of improved control over content, enhancing user experience. This is usually presented using a sequence of circle icons – one for each slide and positioned in corresponding order. Buttons or thumbnail previews of each slide may be used instead.
- The corresponding object for the current active/visible slide – such as a circle, button or thumbnail – should be styled so that it differs from the inactive slides. This shows the current position to the user and should be incorporated into the design.
- There is no technical requirement for the visible carousel slides to occupy the entire carousel container area. While this design approach might not be as aesthetically pleasing as full-area slides, it provides another clear visual clue that there are more slides to explore in the carousel. The screenshot below illustrates this ‘teaser’ approach.
- The content within each slide (not to be confused with the behaviour of the carousel container) should not be scrollable either vertically or horizontally. Forcing the user to scroll within a slide is counter-intuitive and likely to frustrate them.
- In the creative design for the email, show the visual designs of each carousel slide, featuring the content and navigation controls for the interactive carousel in desktop and mobile layouts of the email.
- The smaller screen size on a mobile device may require a change of layout for the carousel. As previously recommended, minimal copy/elements should be used on each slide to avoid significant reworking of the carousel between each layout and for legibility purposes.
- Visual designs for each carousel slide, featuring the content and navigation controls, should also be shown for alternative, non-interactive content fall-back designs for each layout (discussed later in this document).
Please supply us with supporting notes or diagrams for the carousel UI explaining:
- Whether the carousel is to be user-navigated. We strongly recommend providing navigation controls to ensure a better user experience.
- Whether the carousel will automatically cycle. If so, the total duration time for one complete cycle should be divided equally by the total number of carousel slides, allowing enough time for the user to consume each slide’s content. Note that automatic carousel slide cycling generates exposure of off-screen slides in the carousel to the user without interaction. Please consider whether this is appropriate for the content. Even in the email reading environments/applications that purport to support such technologies, the performance (such as the fluidity and synchronisation of the animation) of CSS-generated animation can vary. As such, to reduce dependency, it is preferable to provide navigation controls where possible.
- Pointing-device on-hover style states of navigation controls (recommended). For example, whether the navigation control should change its presentation to indicate interactivity when the user hovers on it.
- How the slides should transition – whether on an axis or instantaneously.
Opposite are screen shots showing each slide in a carousel for an email on a desktop layout (A) and mobile (B), with the navigation controls that should be presented on each.
Interactive content fall-back
What is a fall-back and why should my interactive email contain it?
When an email featuring interactive content is viewed in an environment that does not support it, an unpredictable user experience (such as loss of functionality, and/or presentation and layout issues in the email) may follow.
This can be avoided by presenting alternative, non-interactive content within the email. This is referred to as a ‘fall-back’ – a design and development consideration for interactive emails. Its purpose is to progressively enhance the appearance and functionality of the email where possible, and provide the best possible user experience. As fall-backs are best-effort attempts operating in email environments that are subject to change, they are not bulletproof.
Fall-back options for carousel
In the supplied PSD design for the interactive email, please supply a variant showing how the non-interactive alternative fall-back content should be presented within the email for desktop and mobile layouts.
Suggested design fall-backs for carousels:
- A single, non-interactive, static primary banner containing the primary message communicated in the carousel.
- A grid layout of non-interactive banners, to present the content.
- Non-interactive fall-back to carousel content, where carousel content remains hidden from email in a non-supporting environment.