Display carousels are a popular way to showcase content, especially on landing pages. The idea is that you get to feature a number of different pieces of content while saving screen real estate. Unfortunately display carousels are hard to implement- they oftentimes end up failing because users are unaware they can scroll through the different items of content, or because they are confusing and difficult to use.

In this case study, I pick apart a display carousel that I saw on a few weeks ago. This implementation failed on multiple levels. The first part of this article explores how the carousel was implemented from a UX and technical perspective. After pointing out its weak points, I suggest two alternative solutions I made to make this interface more usable.

Context on the user (me) and my goal

A friend recommended I check out a clothing company called Brooks Brothers, which specializes in formal clothing. I was a brand new potential customer who had never heard of them before. I am a female in my early 20s, very technically savvy, and I frequently shop on Amazon. I do not typically purchase clothing online, nor do I browse online for clothing very often. My goal was to discover the kind of women’s clothing Brooks Brothers sells and whether or not I was interested in it.

That’s the back story. Now let’s take a look at some of UX issues I ran into while trying to accomplish my goal. All of these screenshots are from my laptop with a 1024x768 resolution. I have annotated some of the images for better clarification.

Figure 1I went to the Brooks Brothers website and navigated to the women's section. I was intrigued by a navigation link titled "Our Iconic Navy Blazer" so I clicked on it. I was greeted with an image of a cool looking blazer that took up more than my entire viewport. In big letters the image advertised there were “7 ways to wear the iconic navy blazer.” I was actually excited to see these 7 ways.

Figure 2By hovering over the image, my cursor changed to the hand, which gave me the immediate visual cue that this image was a link. I clicked on the text about the 7 ways to wear the blazer.

Figure 3I was taken to a page that appeared to me to be the product landing page. There was nothing in sight about the 7 ways to wear the blazer. I scrolled up and down, even counting the thumbnails of the other products. I counted 6, and they didn’t seem to be “ways to wear the blazer.” Confused I went back to the previous page and thought I had missed something. This happened a bunch of times. I went back and forth, trying to click on the 7 ways to wear the blazer and always ending up at the same page.

Figure 4It was a solid 8 minutes or so before I realized this was a client side image map which had multiple hot spots. Clicking anywhere within the red rectangular area goes to the product landing page seen in Figure 3, however clicking the small right carrot I’ve circled actually begins a nice JavaScript carousel display of the 7 different styles. Keep in mind I’ve scrolled down here to show the full image... on a 1024x768 screen, this image is just too big. It becomes problematic, especially given there is more text below the fold. Additionally this highlights a potential problem with image maps. As a savvy internet user, I am used to checking the status bar to see where a link will take me. Highlighting over the image didn’t show anything in the Chrome status bar.

Figure 5This is a look at the HTML that makes up the image map using FireFox and FireBug. The different images are located within li elements and then the map coordinates are given below. Here is some helpful documentation about creating accessible image maps and the differences between client and server side.

Figure 6In FireFox I get something in the status bar when I hover over the different parts of the image. This would have probably been enough for me to understand there were multiple links going on here, if I was that intent on finding them. The JavaScript function in the status bar that represents my link wouldn’t be very informative to anyone that doesn’t know JavaScript.

Figure 7The display carousel is the main way to scroll between the 7 different ways to wear the blazer. On further inspection of the product page, I noticed a next and back button. I had never realized these buttons also function as a way to view the 7 different styles. Great feature, but it was entirely hidden to me.

Figure 8After scrolling through the 7 styles using the next and back buttons, I started to understand that the other clothing items on the right actually corresponded to the “look” shown in that particular style. There is no clear indication of this on the page. I only started to get this after clicking through the styles a bunch of times. I drew the circles and arrows in for emphasis here.

A video of interaction with the display carousel

My solutions to the jacket carousel problem

I believe the large jacket image is a poorly implemented display carousel. The actual content is solid and the idea is cool- show the customer 7 different ways this jacket can be worn to impress her with its versatility, and at the same time promote other products that are part of the total outfit. Unfortunately, the navigational issues make this content nearly inaccessible. This is a UI problem inherent to carousels. By nature there is content hidden until interacted with, and unless it’s obvious there is interaction to be performed, the content will remain hidden. The next/back buttons were hard to notice and there was no indication of what the other products on the right side of the product page pertained to. These navigational issues only added to my frustration and confusion.

Figure 9So how can we make this implementation better? Just to remind you, this is the original ad Brooks Brothers used on their site. Keep in mind I had to scroll down below the fold on my 1024x768 screen in order to see all of this.

Figure 10: Ideal SolutionThis is my ideal solution. I would not have used a carousel in the first place, and instead opted for a list of links with a changing main content box. The links would correspond to one of the 7 ways to wear the blazer, and clicking on one would change the main image. I would stress the numbers, and use them as a way to clue the user into the fact that there are 7 unique options here to click on.

Figure 11The link next to each picture, “shop this look” would go to each style’s landing page, like seen in Figure 8. For example, this is the screen you would see for hitting style #2 while the previous mockup shows the original state of the ad, which would be style #1.

Figure 12Here is another solution if the carousel must be used. The most important part is to make it more obvious that there is motion involved. Did you even notice in the original image that the models were numbered? Probably not. (Check Figure 9 if you think I'm lying). I literally didn’t see this until I was adding annotations in Photoshop, since the font color is so light. Instead of only displaying one style by default, I would display two styles to enforce the idea there are 7 unique styles, and I would make the numbers more prominent. The carrot to advance the carousel is huge and obvious and I made it the same color as the number circle to subtly relate them on a visual level.

Wrap Up

Here's a recap of why this display carousel implementation failed:

• The image element was way too large and looked more like a nice graphic rather than an element that could be interacted with
• The only clue that the carousel was interactive was a tiny carrot that was very hard to see
• An image map was used and it wasn’t obvious that it had multiple clickable areas
• The navigation on the product landing page was confusing

And here's a summary of the takeaway themes:

• Display carousels are cool UI elements because they save screen real estate while showcasing multiple content items
• If it is not obvious to the user that a carousel can be interacted with, it will fail
• It is helpful to stress the number of items in the carousel, so that the user knows he or she can find more by interacting with the display
• A list of links with changing content is a more intuitive way to accomplish the same goal of a display carousel