Posted by April Sadowski and filed under Blog, Tips & Tricks, Usability

Do you really need a carousel? Designers like big/beautiful images and carousels are a nice way of doing that in a premium real-estate area, but stats show only 1-3% ever click and they can get super clunky on mobile. I’m a designer. I am guilty as charged, until I realized these numbers supported a change.

Replace the carousel with relevant content or just take that first carousel image and move it down the page. Take your slides images out and convert into content box headers. Think outside the carousel. What can you do to be different and unique?

See the Neilsen Norman Group write-up on designing effective carousels and you’ll note this important takeaway, “You can’t count on people seeing the information in carousels on websites and intranets. Whether looking at content on a 30-inch or 3-inch display, people often immediately scroll past these large images and miss all of the content within them, or at least the content that’s in any frame other than the first.” Don’t rely on your most important headings/subject matter in just the carousel. Make sure they are elsewhere in your content.

Take the time and focus on your most important message. Give it weight and don’t make it change. Too many messages can mean no message. Consider the fact the user might not even realize they are looking at a carousel (because you’ve got those hover-on arrows and fancy designed indicators that aren’t in a traditional position/size/etc) and once they start reading, the message is gone because the next slide is up. Do they want to click back and continue reading? Nope. It’s like a voicemail. If it was important, the caller would leave a message. If your message is important, don’t leave it on a SLIDE where it will shift position.

What does the technical director for the University of Notre Dame say?

About April Sadowski

Part designer and part developer, April has been working full-time for over a decade. She has a long line of ADDY Awards and published design and is the go-to person for HTML/CSS/LESS needs and front-end development. On her off-hours she can be found writing novels (she's published several), doing voice acting or audio production, or gaming. Find April at Stack Overflow

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>