Avoid Automatic Forwarding Content

Automatic Forwarding Content and Usability

In a 2013 usability study, Nielsen Norman Group found that users were unable to find the content they were looking for because it was in an auto-rotating carousel — even though the content they were looking for was very prominent.

Nielsen Norman Group goes on to explain several usability problems introduced by auto-forwarding carousels, including:

• Users just ignore carousels because they look like advertisements. This is commonly referred to as “banner blindness.”
• Not enough time to read content, especially for low-literacy users or users who do not speak the website’s language natively.
• Increased annoyance for users because they aren’t in control, and content they are trying to interact with keeps moving of its own accord, often before they are done reading/interacting with it.

For most situations, it’s more effective to have several rows of content instead of a rotating slider with the same information.

Automatic Forwarding Content and Accessibility

Automatic forwarding content rotates to the next section of content without interaction from the user. This creates accessibility and usability issues because the user consuming the content isn’t able to control when this transition happens.

You have to implement user controls (like a play or pause button) to meet accessibility requirements. This puts the onus on the user to manually progress, making it more likely that the user will not see any of the content after the first panel.

Content Discovery of Hidden Content

Hiding content by default makes it harder for users to find.

Automatic forwarding content by definition hides one or more panels of content at any given moment, and users rarely see the hidden panels. As Nielsen Norman Group put it, “Whether looking at content on a 30-inch or 3-inch display, people often immediately scroll past [carousels] and miss all of the content within them, or at least the content that’s in any frame other than the first.”

Often the only visual indication that there is additional content to be seen is through “pagination dots” which indicate which panel you are on out of the total number of panels. If auto-rotation is turned off for accessibility considerations, a user may not even notice that there is additional content to peruse within a carousel.

How to Create Effective Carousels and Sliders

Carousels and sliders can be only used if content contributors are willing and able to invest the time to learn how to make accessible, effective, mobile-friendly sliders and a web developer is willing to help find and implement them in an accessible way.

Importantly, these components must either:

• Not automatically forward/advance or
• Have an accessible play/pause button that controls the component

Here are some resources:

• Designing Effective Carousels for Websites and Mobile Devices
• A Step-By-Step Guide To Building Accessible Carousels
• Carousels on Mobile Devices

Alternatives to Automatic Forwarding Content in Aggie UX

If you are looking for ways to add motion to your website:

• Add a sizzle reel (soundless video) in a home page header or landing page header. Be sure to follow our instructions for making the page header video accessible.
• Animate in components using ScrollReveal. We have provided instructions on how to use the ScrollReveal JavaScript library if you are coding your own site.

If you are looking for ways to put a lot of information in a compact space:

• Use card groups (available in multiple layouts) to display multiple pieces of content together in a small space.

If you are looking for ways to add imagery to your webpage:

• Use media-centric components including captioned media, media features, media slabs or video embeds to feature photography or video.
• Use components with background images including CTA features, split features and sign-up features to add visual variety to pages when content allows.