Remember about five years ago, when the new hotness in interaction design was to have flashy layers in your website scroll at different speeds, creating a faux-3D effect? The effect was called parallax scrolling, and it’s still easy to find across the web.
According to the usability nerds at the Nielsen Norman Group, parallax scrolling never really went away–it just got more subtle. Take Apple’s iPad Pro site: It scrolls horizontally instead of vertically, but the visual elements still slide around at different speeds like the background of a retro video game. That’s a shame, because as Nielsen Norman Group researcher Katie Sherwin explains, this newer, subtler parallax effect still has all the same UX problems as the older, more obnoxious kind. All too often, it can cause pages to load slower, or it creates nonsensical interactions.
So why are big-name companies still using it? According to Sherwin, it’s because the parallax effect is a “pre-attentive trait,” or something that grabs your visual attention involuntarily. As Sherwin puts it: “An object that moves at a different speed than everything else in a scene stands out like a cheetah sprinting through open grasslands; people will notice it without making any explicit effort to search for it.”
[Screen capture: Apple]
That’s too powerful a tool for designers to fully abandon, even if it can easily degrade the overall user experience. A recent post from Sherwin points to damning examples of slow page-load times and broken interactions on mobile devices, like an interactive infographic from the New York Times whose parallax-enhanced captions whiz by too quickly to read. “As long as designers have a tool [like this], there is a risk to the user experience,” Sherwin tells Co.Design.
But here’s the biggest UX problem with parallax effects, according to Sherwin: Even when they don’t break the website, they still barely accomplish their intended effect of holding our attention. That’s because we’ve been conditioned over time (and through overuse) to categorize them as visual noise and tune them out, a phenomenon Sherwin calls “banner blindness.”
“In many cases, people have learned to ignore movement on a page because they’ve seen so many advertisements that use motion to get attention,” Sherwin explains. “People have learned to ignore content on a page that looks like an ad, even if they’ve only seen that content in their peripheral [vision]. With parallax, people might vaguely notice something moving on a part of the page, but they might decide not to pay attention to it because they think it will be unworthy of their time and effort.”
Sherwin says that judicious use of parallax effects may make more sense in augmented-reality applications, where the faux-3D effect of an interface element is more directly mapped onto real life. “For instance, one app [we tested last year] used a large, colorful 3D button that landed with a jiggle on the virtual table,” Sherwin says. “Pre-attentive processing still applies in a 3D space, so it is still relevant when designing [these] environments.”
Granted, parallax motion isn’t the only pre-attentive trait that designers take advantage of. Relative size (like the difference between a large headline and tiny body text), as well as differences in color, contrast, and length are common visual cues that leverage our pre-attentive processing to draw attention and convey meaning. If designers didn’t rely on these hardwired features of human cognition, they probably wouldn’t be able to effectively design anything at all.
But there’s a difference between using pre-attentive processing for good and using it for ill. Parallax motion isn’t by definition a dark pattern (that is, a UI-design trick that encourages a user to do something against their own interests). When it doesn’t work correctly, it’s more of an eye-rolling annoyance than an outright design crime. But that’s the irony of parallax: According to Sherwin, even when it does “work,” we’re probably going to try to tune it out anyway, thanks to the aforementioned banner-blindness effect. (Really, Apple: You can probably sell just as many iPad Pros without the wacky scrolling effects on your website.) Parallax motion is like the 21st-century equivalent of the tags that festooned websites 20 years ago, or the schlocky skeuomorphism of 10 years ago: an outdated attention-goosing technique that most designers will probably be embarrassed to look back on. So maybe they should think twice about using it in the first place.
Still, bad design habits die hard–so we probably shouldn’t expect the use of parallax motion to fully disappear anytime soon. But with new applications like augmented reality, hopefully we’ll see it applied in a more functional way.
Recognize your brand’s excellence by applying to this year’s Brands That Matter Awards before the early-rate deadline, May 3.
