Image Carousel Appropriateness

Definition

A carousel is a rotating display of a site’s content that appears in a dominant spot on the front of the page. This short contribution seeks to synthesize the general consensus on the internet about image carousel appropriateness especially usability issues.

Conclusion

Carousels in a dominant spot on a web page grabs the attention of users and can be an effective element to attract visitors to its content. They are inappropriate when focus is to be given to other content within the webpage, since it is visually eye catching and can therefore be distractive. To reduce distraction soft transition, proper timing and control elements such as a pausing have been suggested. To increase navigability labeling, thumbnailing and timing of the carousel elements should be explored.

source: http://www.ixda.org/node/20817
source: http://www.ojr.org/ojr/people/paulruel/200902/1639/


Motivation for Image Carousels

In an effort to squeeze more content on web pages, designers sometimes turn to novel navigation features such as carousels that advance or rotate objects in a fixed space.

source: http://www.blinkinteractive.com/essays/usability_highlights_2008.php


Eye tracking and survey results

In a study conducted for the member of the DiSEL's Eyetracking Research Consortium three types of automatically changing carousels for a news site was tested using an eye tracker. Though the thumbnail version of the carousel is perceived as easier to navigate, users found all carousel versions similarly distractive. Eye tracking observations seem to suggest that if you are going to use a carousel element it may be best to place navigational elements above the display elements and to utilize a navigational design that clearly indicates the change from one story to the next.


Survey Results

source: http://www.ojr.org/ojr/people/paulruel/200902/1639/


Opinions

The http://www.marthastewart.com/ carousel has been praised by some bloggers as a good implementation because of its use of labeling and controls.
source: http://www.ixda.org/node/20817

“web site designers and content writers need to remember usability basics such as reinforcing a sense of place and keeping users in control.”
“Interaction designers need to take extra care to convey location and navigation options through labels, headings, and other visual cues.”
source: http://www.blinkinteractive.com/essays/usability_highlights_2008.php


Alternatives

Belts (sometimes also called carousels)
N.B.: YouTube has removed its video carousel in favor of a video belt to suggest related videos.


Keywords used to research

Image carousel photo carousel slideshow image gallery research paper study usability distraction jakob nielsen donald norman issues interaction design ixda automated eye tracking best practice

Resources:

Discussion on carousels on ixda.org
http://www.ixda.org/node/20817

Carousel collection:
http://ui-patterns.com/users/1/collections/431

Carousel patterns:
http://developer.yahoo.com/ypatterns/selection/carousel.html

Belt collection:
http://ui-patterns.com/patterns/Carousel

Flash rotators discussion on ixda.org
http://www.ixda.org/node/21965

Image carousel similar to marthastewart.com:
http://ca.lifestyle.yahoo.com/

blog comments powered by Disqus