Carousel research k by Kristen Chon

Carousel Usage Research AGENDA ITEMS: Function and Reasoning behind Usage of Carousels Pros and Cons of Carousels Good and bad examples of Carousels Recommendations

.biz

Carousel Usage Research

Carousel/Rotating Banners What A rotating display of a siteâ&#x20AC;&#x2122;s content that appears in a dominant spot on the home page. Source: digital eskimo

Why To better utilize page real estate while providing an engaging experience. To promote new features, products and specials Source: Yahoo! Design Pattern Library and The Meta

.biz

ÂŠ 2010 AT&T. All rights reserved. AT&T, the AT&T logo and all other AT&T marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All other marks contained herein are the property of their respective owners.

Carousel Usage Research

Types of Carousel Navigation-driven Used to help users navigate the website and help users to get to the right content. It should not dominate too much real estate

Source: Smart Insights

.biz

Carousel Usage Research

Types of Carousel Information-driven

Used to present multiple pieces of information while using the benefits of a slideshow environment. Good for when content is informational and less sales-driven.

Source: Martin Ashal

.biz

Carousel Usage Research

Types of Carousel Content-driven

Used to showcase features or newest posts. Theyâ&#x20AC;&#x2122;re useful for putting the content one wants the user to focus on front and center to get maximum attention

Source: Smart Insights

.biz

Carousel Usage Research

Advantages • Users may save time since the carousel focuses their attention on the content

• Carousel navigation is small in volume. This allows companies to compact large volume of content

• Good for presenting the latest and most popular product

• Carousel promotes

suggestive marketing by tempting users on the home page

• Good for browsing, upselling, or cross-selling

• Good for supporting content and content for non-specific browsing

Source: Smashing Magazine and The Meta

Source: The Meta

.biz

© 2010 AT&T. All rights reserved. AT&T, the AT&T logo and all other AT&T marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All other marks contained herein are the property of their respective owners.

Carousel Usage Research

Disadvantages • Moving elements reduce accessibility • Low-literacy users don’t have enough time

to read the information before it’s removed

• International users read more slowly if not in native language

• Inconvenient to lose control • Users assume banners are advertisements and often ignore it Source: NN Group

“Almost all of the testing I’ve managed has proven content delivered via carousels to be missed by users. Few interact with them and many comment that they look like adverts and so we’ve witnessed the banner blindness concept in full effect. In terms of space saving and content promotion a lot of competing messages get delivered in a single position that can lead to focus being lost.” Source: Adam Fellowes

“There was a total of 28,928 clicks on features for this time period. Approximately 1% visitors click on a feature” “These numbers were gathered from midOctober 2012 to January 22, 2013. The percentages are based on the number of clicks recorded through Google Analytics Events and compared to the number of visitors to the homepage. “Feature” refers to the individual calls-to-action that are either manually or automatically rotated in and out of view. Source: Weedy Garden

Source: The Meta

.biz

Carousel Usage Research

Elements of a successful carousel Auto and manual control

Good transitions

Thumbnails, numbers or buttons

Button placement and styling

Source: Smashing Magazine

.biz

Carousel Usage Research

Elements of a poor carousel

Design-elements that resemble ads causes carousel to be ignored It looks like an accordion, but it acts more like a carousel because it auto-rotates to show a new panel every 5 seconds Carousels, if used, should show a new panel only when users ask for it. It should stand still and let the user have control

Content-free content damages dysfunctional design even more In the carousel, the meaningless phrase, “Rewarding.Life.Style” is used as the link text for the button to show the discount offer. Since users read very little on websites, it’s ineffective to use words for a link Successful navigation can be achieved when people only click on links that make sense and describes what they want

Placement in the right column reduces the number of users who will see the Source: NM Group

item Web users spend 69% of their time viewing

Source: NN Group

the left half of the page and 30% view the right half. A conventional layout is more likely to make sites profitable

.biz

Carousel Usage Research

Carousel Mistakes Top 5 Usability Mistakes Designers Make on Carousels Auto-sliding after the user has already taken control Default auto-sliding wontâ&#x20AC;&#x2122; stop after the user has taken control of it

Showing item progress in a confusing way Showing the users the range of items with the total number of items in the carousel is unnecessary

Displaying new items in a row one at a time Takes too long to click through

Infinite Sliding Causes users to unintentionally view the same items over again

Tiny Click Targets Arrows on the carousel should not be smaller than the size of the mouse cursor Small semi-transparent dots are in effective as indicators in a carousel Arrows are more effective than dots Source: UX Movement

.biz

Carousel Usage Research

Avoiding Carousels Despite its popularity, it is suggested that we avoid carousels

• Marketing departments

prefer them taking the risk because it is an opportunity to show off multiple items

Source: Soho TV (Example for 1)

.biz

• Static images gives an old-

fashion feeling and requires more high production images, advertising, time and money

• Both visually aesthetic and the opposite exist. The effective carousels persist

Source: Adobe (Example for 2)

Carousel Usage Research

Thumbnails Versus Page Indicators Thumbnail: Advantages • Provides manual control

Thumbnail: Disadvantages • Complication in navigation

• Allows user to browse • Fitting a big, detailed quickly

• Good for setting an impression

• Provides carousel

perspective and context to each slide

picture into a thumbnail will seem cluttered

Source: Liquid Interactive and NN group

Page Indicator: Advantages • Familiar to users since it is used in Safari, Stocks, Weather and other built-in applications Source: iOS Developer Library

Page Indicator: Disadvantages • Does not help users retrace their steps through a specific path (Not good when displaying information in hierarchy)

• Small semi-transparent dots are often overlooked by users

Source: iOS Developer Library ,UX Movement

Source: Smashing Magazine

.biz

Carousel Usage Research

Recommendations Make navigation obvious It should be clear what area of the carousel is interactive

Suggest more content to users Overhang, set of arrows, scrollbars, gestural hints, auto-rotation etc.

Provide gestural hints Correct use of subtle initial animation or autoadvancement can be successful

Only load what you need Extra panels incur serious performance

Treat touch as an enhancement Carousels can be great for improving interface with gestures

Use of thumbnails Correct use of thumbnails can be effective as it provides manual control

.biz

Source: Brad Frost Web

Carousel Usage Research

Hilton

Static image provides

stability and control Focusing on one image will

Example of successful rotating banners

diminish distraction and the manual option to view slides should give the users more control and have enough time to scan or read

Minimizing the number of words Since users usually scan the website instead of reading, itâ&#x20AC;&#x2122;s best to have as few words as possible to hold attention

Subtle yet clear button Buttons should appear clickable therefore be bigger than the cursor. Subtlety adds aesthetic value while providing clear navigation

Auto-rotation switches to manual control Including both autoSource: Hilton

rotating and manual control is effective because users can take control whenever they want to by clicking the arrow

.biz

Carousel Usage Research

Nest

Example of successful rotating banners

Successful transitions Picture and the rest of the banner change by quietly fading from one slide to another avoiding abrupt transitions

Grounded image The rest of the banner transitions quietly to another image or word, but the position of the thermostat remains

Controlled banners By clicking on the tabs, the bottom carousel transitions to the next page

Source: Nest

.biz

Carousel Usage Research

Carousel Auto-Rotation Time • Depends on the amount of text • Distraction can cause users lose focus on carousel, so more time may be needed

• 2.5x the “read-aloud time” is recommended Verizon Wireless Carousel 4 seconds

Nike Carousel 4 seconds

Bell.ca Carousel 5 seconds

Source: UX Stack Exchange

.biz

Carousel Usage Research

Verizon Wireless Competitive Analysis

Auto-rotating carousel lasting 4 seconds each Title and minimal description

Clicking the button navigates to a stated destination

Clicking the carousel navigates to a location check page

Uses thumbnails

When user clicks on a thumbnail, it switches to manual control

Source: Verizon Wireless

.biz

Carousel Usage Research

Nike

Competitive Analysis Title and minimal description Auto-rotating carousel lasting 4 seconds each

Clicking the button navigates to a stated destination

Carousel itself is not a link

Uses page indicators. When users click on a page indicator, it switches to manual control

Source: Nike

.biz

Carousel Usage Research

Bell.ca

Competitive Analysis

Clicking the button navigates to a stated destination

Title and minimal description

Auto-rotating carousel lasting 5 seconds each Clicking the carousel and button navigates to destination

Uses rectangular page indicators which is better because they provide a larger surface area to Source: Bell.ca

click on. When user clicks on a thumbnail, it switches to manual control

.biz

Carousel Usage Research

Thank you

.biz