ATLAS > UI Elements & Patterns > Work in Progress > Carousel Arrows

Carousel Arrows

Navigational arrows allow users to quickly move between hidden visual content outside the viewport or container.

Usage Guidelines

Use this when there is an overflow of visual content outside the left or right side of the viewable carousel window. Content is always lateral, so arrows will surface only when there is an overflow. Do not show navigational arrow if no additional content exists left or right the max. viewable area.

ADA Compliance

There are many accessibility requirements to ensure a carousel arrows are ADA accessible. The major principle to carousel arrow accessibility is increasing contrast to background ratio. This allows users with visibility issues to better identify & navigate the controls which complies with one of the four “non-interference” clauses in WCAG2. 

Requirements to ensure a carousel arrows are fully accessible:

  1. Provide visible controls accessible to the keyboard, mouse and touch
  2. Provide a valid and understandable focus order through the slideshow
  3. Valid coding and stylesheets
  4. Provide meaningful alternatives
Useful Links:

Rationale

Platform inclusions: desktop & tablet Currently there is no standard pattern for navigational arrows. UXR suggests usability is an issue, functional elements cannot be seen and comprehension in some cases is low. The purpose of the redesign is to create a singular design pattern to be used throughout the entirety of the site. The redesign includes functional design elements applied to the arrow pattern. These design elements help to increase visibility and user comprehension on the entirety of the site.

Research

Carousel Arrow Usability: Designing an Effective UI for Websites with Content Overflows

Carousel arrows allow multiple pieces of content to be progressively disclosed within a finite container.

Design Specs

  1. Existing margins.
  2. For the caret element use SVG for caret icon: download here.. Height of half circle is 68px; center align inside of graphic element. Color of half circle is #EEEEEE and an alpha of 80%. Drop shadow color is #AAAAAA, 1x / 2y / 1 Blur / 0 spread.
  3. See invision document, for specs see link.Graphic element to nudge left and right on hover. Extend width of graphic element from 34px to 64px wide. Caret element to nudge left & right 10px. Caret & tab have easing curve of (0.25x 0.1y) (0.25x 0.1y). Timing is 0.10 seconds / 100ms. See animation for visual example
  4. Default arrow color for sears is #001733, hover state for arrow is #005CCC. Default arrow color for kmart is #333333, hover state for arrow is #B10017.
  5. Note: When no content is available on either left or right of the slide sequence, no arrow is shown.
  6. Use same design specifications for contextualized containers. Center align inside and on top of image area. Shown here is the product description page image container.
  7. Use same design specifications. Shown here is the hero on homepage image container.
  8. Use same design specifications. Shown here is the thumbnail container.
  9. Use same design specifications. Shown here is the breadcrumb module.
Example of default state
    Default State:
cw
<strong>Hover State:</strong>
Hover State:
<strong>Micro Animation Example:</strong>
Micro Animation Example:
<strong>PDP Image Container:</strong>
Hero Example:
<strong>Hero Example:</strong>
Image Thumbnail Component:
<strong>Image Thumbnail Component:</strong>
Breadcrumb Module:
<strong>Breadcrumb Module:</strong>

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.