You are here:
< Back

4 Problems with Parallax

For sites considering adopting (or readopting) this trend, let’s look at some of the top UX issues with the parallax scrolling effect.

    1. Parallax-presented content can be difficult to control. While parallax is supposed to draw attention to the animated elements, often these elements end up being ignored. Most users in our testing don’t wait for parallax effects to load: they scroll quickly, scanning for keywords of interest. Because this effect takes time, goal-oriented users looking for specific information may miss important content presented using parallax.
    2. Pages can take longer to load when parallax animations are used. On the Apple site, some users scrolled and saw almost nothing on the screen, because the parallax effects hadn’t animated yet. Blank screens are not what designers intended, nor are they what users came to see. But too fast parallax can be a problem, too: when the animation is tied to users’ scrolling speed, people may not get a chance to read animated text if they scroll too fast. One user scrolling on the New York Times mobile site noticed a panel of text scroll up and past the graph she was reading. She commented, “Oh, that happened so quickly I didn’t even get to read it.” The effect delayed her ability to interpret the graph and feel in control of the experience.
    3. Too much movement, especially of text, can be dizzying. Using parallax to animate many different page elements and blocks of text makes reading hard and can even cause people to feel sick. If this sounds exaggerated, remember that in 2013, Apple released an update to iOS 7 that allowed users to Reduce Motion, because the parallax animations for task switching caused many people to feel symptoms of vertigo, nausea, and dizziness. Having learned from that mistake, let’s hope future parallax doesn’t cause harm.
    4. Parallax effects might be missed entirely. By now, users have learned that many advertisers use motion to attract attention. Some people purposefully ignore movement on a page because of the association with unwanted advertisements. On mobile, subtle parallax effects are easily missed because the user’s hand can block animations that appear underneath. Overlooking the parallax effects may not be harmful to the experience (as long as the content doesn’t go away), but designers should consider whether these effects are worth the effort to build and maintain.
    5. Parallax is just not that impressive to users. The people most likely to appreciate parallax effects? Other designers or developers. When you know what goes in to building something complex like long-scrolling parallax pages, you can appreciate the work. But, to put it bluntly, average users could care less. Today, users’ reaction is the same as five years ago: indifference. They aren’t “wowed.” User-testing participants don’t stop to comment on how cool the effects are; they don’t scroll up and down for fun, to watch the effects bring the page to life. They don’t pause to watch each effect smoothly transition into the main content area. Instead, the vast majority of people are focused on content, and so the animation effects are an afterthought, if they’re noticed at all. The question to designers, then, becomes: is parallax the best way to impress users or make a brand statement?

(A note about doing user research on the impact of parallax or other animations: if you prompt users to talk about the animation on scroll, you might hear comments that praise the interaction design. Use caution before celebrating such comments: sometimes users say one thing, but their behavior shows a completely different reality. As soon as you’ve directed users’ attention to a feature, you’ve biased their interpretation of that feature. For example, at the very end of two testing sessions in which one participant struggled to control the parallax-animated text blocks and the other did not notice them, we asked people about any movement they saw on the page. That was when they gave praise, with comments like “Oh that’s so cool” or “That’s so cute how it appears as you go down the page.” But we shouldn’t forget what really happened when they were trying to find an answer or read an article: they struggled or ignored the parallax.)

Make It Work: Use Restraint and Put Users in Control

As I said at the beginning of this article, the latest iteration of parallax is subtler than five years ago. This is a good thing. Remember that parallax is a form of animation, and, for most animations, less is more.

No task, no problem. Parallax is safest in environments where users are browsing for leisure, without a specific goal or task in mind. In those cases, parallax can be used to support a narrative or to contribute to a brand’s identity. If you’re not sure whether your use case fits this category, you can always refer to the 3 Bs Test to see if parallax is a good choice for your business and your users.

If users have a task, put content first. The ultimate test of parallax usability is whether users can easily and quickly complete their task. To start, here are some suggestions:

  • Provide in-page navigation links on long scrolling parallax pages, so that scrolling isn’t the only way to navigate down the page. Use noticeable navigation UI, not just small vertical dots, which are likely to be missed (and have poor information scent).
  • Save parallax effects for background or peripheral images, so that they are easy to ignore and don’t detract from the content.
  • Once users have scrolled down the page and triggered all the parallax effects on the way down, leave those objects in their final positions, instead of reanimating each object on scroll up or scroll down. In a goal-oriented context, once users begin to go up and down a page, it’s because they’re looking for information. Forcing people to rewatch parallax effects delays their access to that information and can quickly become tedious and irritating. It’s like listening to the same joke again and again. Show restraint here, and your users will benefit.
Previous Keeping key information on the left
Next Using icons in design