It’s the opening of the website Olympic Games and your organization has been invited. Your homepage is your flag bearer; proudly marching into the stadium brightly adorned for the whole world to see. Behind the flag bearer march the rest of the team, your inner pages, in shiny, bedazzled tracksuits, each a specialist in their field. As they march around the track, you begin to worry. How can one flag represent your entire organization? Quickly, you stitch together another flag and another, and put them in the hands of your athletes and push them to the front. Phew. Now everyone will understand what you are all about. You’ve got three flags. Oh, but wait! What about that limited-time special offer that you are about to launch. Get another flag up there and shuffle them about. Much better. Oh, but wait. Where has everyone gone? While you were busy adding and switching out new flags, the Olympic torch had been lit, the ceremony performed, and the stadium emptied. The same thing is happening on your website. By the time all of your homepage offers have cycled through, your visitor has likely packed up and left.
So, what’s the answer? How do you represent your entire organization with a single homepage? For almost as long as banks, universities, hospitals, et al. have been using websites to represent their business (at least as far back as the ‘96 Atlanta summer games), the answer has been carousels.
Carousels are the image rotators that you see on almost every business homepage. Sure, even Apple, that beacon of clean, utilitarian design, uses them. In almost every project they will come up, whether or not our clients actually know what they are. At a university for example, the stakeholders will be all in for featuring a beautiful photo depicting campus life until someone in the corner of the room mentions alumni engagement. Yikes! We need that on the homepage too. Oh, and what about important campus events and online resources for current students! Now, we have three equally important and compelling cases for homepage placement. Well, let’s call it a compromise the client will invariably say and add an image rotator.
So, what’s the problem with image rotators or carousels? They don’t work.
Homepage Image Rotators Don’t Work: The Numbers
As you can imagine, the case against carousels has been a vociferous debate in the world of designers and developers, particularly in recent years where viable alternatives are beginning to emerge (we’ll get to that in a bit).
Back in 2013 (a non-Olympic year), HigherEd developer, Erik Runyon, ran some tests with the carousel feature on the homepage of Notre Dame. From mid-October 2012 to January 2013, 1% of website visitors clicked on a rotating image, for a total of 28,928 clicks. The image rotated 315,665 times during this time period, suggesting a balanced presentation of all five images in the rotator. However, 84% of the 28,928 clicks were to the image in the first position. The remaining 4 positions split the rest of the clicks evenly and meagerly.
If these numbers aren’t damning enough, Dr. Jakob Nielsen of the renowned, Nielsen Norman Group, cautions that there are several serious usability issues with carousels, particularly those that auto-forward. “Moving UI elements usually reduce accessibility,” he states. They often scroll too fast for even the most literate web user. Imagine how carousels make low-literacy users, seniors with reduced motor skills, or international users feel? At best, then, carousels are annoying, at their worst they reduce accessibility. If you’ve read our post about forthcoming ADA guidance on website accessibility, you know it’s possible that carousels could be a compliance risk.
What’s the Alternative to Homepage Image Rotators?
The short answer is personalization. Today’s content management systems are advanced enough to tailor the website experience to individual users. A prospective student coming to a university’s website can be shown a homepage that speaks to campus life and navigation that focuses on presenting relevant degree programs. Meanwhile, an alumni visiting the site can be presented with a homepage that highlights upcoming alumni events and shows off donation calls-to-action. There is some heavy lifting to do to get here, but even anonymous site visitors can be given a personalized journey as your content management system contextualizes the clicks and other indicators to tailor the experience.
In the meantime, what are you to do? If you have to have carousels. Interface design expert, Brad Frost suggests cycling through like items, making navigation obvious, and providing gestural hints. Additionally, presenting a random image for each unique visit is a viable alternative. However, as with any change to your website, we recommend A/B testing different options to find out what really works for you.
As we enjoy the Olympic Games and watch our favorite athletes on the medal podium this summer, keep in mind that even a nation as diverse and unique as ours can be represented with one flag. Likewise, your organization can be represented by one homepage, albeit a dynamic and personalized homepage. What are your thoughts on image rotators? Have they been successful at your organization?