UX (or user experience) trends for 2016 seemingly include the death of some age-old practices in website design and development.
A major one is the use of carousel headers (also known as sliders or rotating headers) to attract users. UX research showed us that a rapid change in something (including carousel) triggers the 'reptilian' part of the human brain, and can actually distract website visitors from their intended destination.
Movement is distracting
The human eye reacts to motion, even without you realising. Just the fact that the slide moves will distract the potential client or partner from getting to the intended message or location.
The United States Army funded some a research program to find out the level at which movement distracts test subjects from their task at hand. The test centred around a critical piece of information while designing control tower dashboards with multiple moving indicators, on which the lives of passengers depended.
Subjects were tasked to focus on a specific object on which a letter would appear briefly. The task was to identify which letter and the direction in which it appeared. At the same time, a peripheral object moved.
In almost all of the cases, the test participants were distracted by the peripheral-moving object and failed the task they were given. However, the most interesting fact is that the participants who failed the task didn’t consciously look at the peripheral object; their eyes just moved without them acknowledging it. So while they thought they were on the right track, their sub-conscious had taken over and lead them on a different path without them realising.
Another great example of this is the selective attention test from Daniel Simons and Christopher Chabris.
As you can from the video above, the majority of users were focusing on the target(s) and completely failed ot notice the person in the gorilla suit strolling across their field of vision.
"Simple content clearly communicates value proposition"
Usability guru Jakob Nielsen put this theory to the test and discovered that auto-rotating carousels annoy users and do in-fact reduce visibility.
In a UK usability test of Siemens’ website, the test subject failed to answer this seemingly simple question: “Does Siemens have any special deals on washing machines?”. This information was actually displayed in large text on the automatic carousel on Siemens’ homepage.
Shockingly, the user not only failed to identify Siemens’ special offer on washing machines, but also concluded that they wouldn’t be choosing a Siemens product unless they had a lot of money to spend. How could the user fail at this seemingly simple task? The website incorporates an automatic carousel that would only display the special deal for five seconds before moving on to the next slide which contained a different message. Because of this, the user could not focus on and understand the information because it was only available for five seconds.
“This example design is flawed in so many ways, but the worst offense is probably in making something move that should be static. It's sad to think that extra money was wasted on jazzing up this design with harmful moving features, rather than just creating simple content that clearly communicates the company's value proposition.”
"Rotating banners reduce conversion rates"
Brian Massey, the conversion scientist, also offered his take on sliding headers in his book The Customer Creation Equation:
“Imagine trying to read a book, and someone is waving something in front of you every few seconds. Both your reading speed and comprehension would drop. It turns out that the same is true for home pages. The motion of a rotating slider causes the reader to stop scanning the page and look back up. Almost every test I’ve seen on this is clear: rotating banners reduce conversion rates.”
The human brain is wired to react to movement
At the end of the day, it all boils down to the way the human brain operates; mainly the fact that it has three layers, the oldest of which humans beings share with reptiles. This part of the brain is focused solely on survival, and any sudden change in one's field of vision can be (mis)interpreted as a matter of life and death. Because of this, the human brain too is wired to react to movement, and when it does, it can unwittingly miss important information.
It’s now easy to see how this psychological circumstance can translate to the user not being able to understand or interpret the intended message of an automatic carousel.
As soon as the website user looks at the rotating header and sees a deal, marketing campaign or a promotion, the attention is interrupted by motion as the carousel reveals a new item. As soon as this occurs, the next task for the user is to figure out why this motion happened and what was changed, thereby taking away attention from understanding the original message in the carousel. Because of this, the user is now simply overloaded with too much stimuli - all of the different deals, marketing and promotion in the carousel on top of the motion effect.
What can you do?
Not all websites with rotating headers will really be impacted by this. While many websites have rotating headers, the fundamental element that the user is not able to focus on is the message or offer on the slider. If your slider contains purely images, you do not need to take action unless you were planning on adding text. However, if you do have slides with marketing campaigns and text on them, there a number of different methods you could use to prepare yourself for this steady migration.
- Still have multiple images in a slider, but turn off automatic rotation and add arrows/radio buttons to the slide so that the user can manually change to the next slide if they want to.
- Have one large header image with the desired overlays, but nothing more.
- Have one large header image with the desired overlays which would change each time the page is refreshed.