ROTATING IMAGE CAMPAIGNS ARE CHEAPENING YOUR WEBSITE

Walking down Canal Street in New York is about two hairs shy of sensory overload. The cacophony of bright colors, glittering wares and tirelessly shouting merchants requires a coping strategy, most of which involves non-stop walking and keeping your eyes focused blankly in the middle distance. I was on the hunt for a specific look of watch on my last trip, and I am absolutely positive that it was there, somewhere, tucked into a small shop or stall. I never found it.

Following patterns is easy, and a common pattern in modern web design is that of the image rotator or carousel. It's hard to say exactly when they came into vogue, some Google trends show the concept dating back to the limits of trend search in 2004 while others show it beginning around 2007. If you take the 2007 number, it coincides nicely with the ubiquity of Web 2.0, that loosely defined trend where web sites broke away from static pages and into dynamic, living information.

Leave the Carousel, take the Cannoli

godfather

Carousels are popular because they seem to solve a persistent problem: how can you show your user everything you have to offer? It's a cruel mirage because the carousel rarely accomplishes anything, and usually is driving users away from your content. There's a couple elements at play here.

Banner Blindness, the Modern Coping Mechanism

The web is too frequently like Canal Street. When everything is shouting simultaneously, it all becomes background noise. We have become so accustomed to internet advertising, we literally don't even see it anymore. User experience deity Jakob Nielsen has been tooting this horn since I was 8 years old, and he lays it out bluntly in this 2007 article, with eye-tracking studies and surveys to boot. Many carousels look too much like a banner, too much like an ad, and they drop into the background noise as another thing to be ignored. In another Nielsen study, a typical user completely fails to see the banner directly in the center of the site, despite it taking up the vast majority of the real estate. Carousel interaction rates are atrocious. Much of the data is preliminary right now, but the results are pretty drastic. Erik Runyon, developer for ND.edu, did an in depth test of numerous carousels across the school's web properties, finding that non-news based carousels generated an average of about 1.2% of page clicks, with the majority on the first slide, sometimes as much as 80%.

Some sites cope with this by blowing out the carousel to take over the entire site. While this gives more likelihood that people will notice the elements, doubling down on the problem doesn't solve its inherent flaws.

Usability, Accessibility, Loadability, Not-ticking-off-the-user-ability

Since I design websites, the word "mobile" is used more than a tweenager saying "like." Carousels have a lot of hazards for mobile: multiple files, complex functionality, and obvious sizing constraints. All of these problems can be mitigated with clever front-end development—but if you can avoid it, why wouldn't you? Disabled users are at a huge disadvantage with auto rotating carousels, as the animation and formatting can exacerbate reading disabilities, screen readers, and touch limited systems. Even regular users struggle with this—distraction prevents them from accomplishing their goals and ends up frustrating them rather than helping.

I DON'T KNOW WHAT WE'RE YELLING ABOUT

bricktamland

I land on your website looking for a watch, a watch I'm pretty sure you have. As soon as I get there though, the yelling begins. FREE SHIPPING ON ORDERS OF SHIRTS!!! I'm sorry, can you tell me where the watches are? 20% OFF NECKLACES!!! Watches?

When you look at your own site, the banners work for you because you already understand the way the site is put together. You built it after all. Your user doesn't have that benefit, so the carousel more frequently ends up calling out things that they don't care about. Also, consider, if you are reading this article then you have some stake in web design so you use the web differently than your average user and are more likely to use features that may be useful, like a banner to advertise sales or advanced search feature to guide the user experience. Meeting the user where they are, and allowing them to find their way through your content will always be more effective than shouting at them.

rotating-images-user-experience
Tic Watches website is aesthetic, but the enormous, full screen transitions are fast, jarring, and hinders the rest of the site

How many times do I have to tell you, the right tool for the right job!

Carousels are just a tool—what are they useful for? How can we use them? Carousels generate a flattened information architecture—all of the slides have the same visual hierarchy, and are organized by time. Here's a few cases in which a carousel actually make sense.

News Items

If you are running a news section, the carousel makes perfect sense. The carousel is time-based and so is news; so put things in reverse order with the newest at the top. It's easily supplanted by a list of articles, so it's best to keep it to the most relevant things that a user would want to know.

Repetition is Good, and so is Repetition

Carousels are useful for driving home a single point in different ways. Instead of having each slide as a separate message, make them all support a central theme. R2i does this on our homepage, each project showing our strengths as a digital agency. Although there is change and variance, the message is consistent.

Pyrrhic Victories

When dealing with a big organizational structure, it can be almost impossible to place every piece of information on your site in semantic hierarchy. Sometimes, you have to make compromises so that you can tell the heads of each department that they have their claim staked on the homepage. If you're ready to swallow the bitter pill, take some steps to mitigate the damage by having prominent and legible headlines, allowing your users to navigate and take control of the slideshow, and keep the animation effects to a reasonable minimum.

Try Talking a Little Less

If you do implement a carousel, do everybody a favor and keep the slides to a minimum. Of the statistics that we've seen so far, the lion's share of views are on the first slide (usually over half), and the others trail off quickly. We've been recommending a max of 5, and averaging 3–4 slides.

rotating-images-user-experience
MMT Watches uses tasteful transitions that effectively tells their product's story

 

When you've tried all the easy things, try the hard thing.

Carousels can be used effectively, but they're no replacement for a solid strategy. When a user lands on your site, after 20 seconds can they explain to a third party what you do? No matter how flashy and garish they are, no amount of slides in a carousel can replace the strong copy and imagery that comes from a well-developed and executed content campaign. If you want some inspiration, try logging out of Facebook, Twitter, or Pinterest. In each case, they speak plainly to you the user and give you a clearly defined path to follow. Understandable, clean information isn't a trend. Don't become part of the noise to be tuned out.

rotating-images-user-experience
Though the rest of their site is cluttered, Zappos is heading in the right direction. The quiet transitions, limited number of slides, and effective control mechanism give the user the control.

 

About the Author: Lucas Roe

Lucas Roe
Lucas Roe is a web dork and UX designer from Baltimore. He is on a relentless pursuit of craftsmanship in everything from websites to cocktails, with an unhealthy fixation where nerd and hipster cultures clash together. At R2integrated he works in User Experience Design and Wireframing while researching user trends and being a fount of pointless information. He spends his spare time voiding warranties on his devices and reading the whole internet.

Connect with Lucas Roe on:

Comments

STAY IN THE LOOP