What Parallax Is Missing, Research

Parallax scrolling effects add visual interest, but they often present usability issues, such as slow loading or hard to read content. Consider whether it is worth using them.

A few years ago, a colleague and I decided to test out a new design trend that has won awards in web design and has received praise in the design forums. This trend was the parallax scrolling effect. However, we were not impressed with it. More importantly, users do too (for reasons I ll explain below). After a couple of years, the trend of parallax effect gradually faded away, probably because everyone saw the same results as us: harm to the user experience or at best a low-key user response. The results do not justify the work of creating and maintaining complex parallax scrolling effects, and therefore the popularity of this trend has diminished. For some time.

Fast forward to today. Parallax scrolling is back. Similar to the sequel to the movie, our testing today shows a familiar cast and storyline: it still didn t impress users and retained a number of usability issues. In this sequel, however, the parallax is more subdued than before. While earlier implementations of parallax were a horror movie due to usability issues, the modern version is closer to a family comedy with a PG-13 rating: not particularly fun, but also unlikely to force people to close the tab.

Definition: animation parallax effect is created by two or more layers of the interface moving at different speeds or in different directions to create a depth effect.

(To understand why the parallax design creates this illusion, try the following experiment: keep both hands in front of your face, one arm extended as far as possible and the other halfway between your first arm and your eyes. Now turn your head from left to right, keeping your hands still: it will appear as if the two arms are moving relative to each other, especially if you close one eye to get a 2D view).

The GIF below shows an example of parallax scrolling on a restaurant website.

In this article, we ll discuss why parallax is a popular trend, why it can be problematic, and how it can sometimes be used to improve user experience.

Why designers use parallax effect

If you ve ever played an old video game, you might remember the parallax effect. Game designers have separated the foreground and background objects separately to add depth to the game universe and immerse players in it. The same desire to offer an “immersive” experience on the Internet often motivates website designers to use the parallax effect. They believe such effects create a memorable design and a creative, unique branding statement.

Another reason to use parallax is to draw attention to certain elements of the page. Travel speed attracts attention: An object that moves at a different speed than everything else in the scene stands out like a cheetah running through open meadows. people will notice it without making an effort to find it.

Unfortunately, parallax effects come with some costs… Designers need to know their pros and cons.

4 problems of parallax effect

For sites considering adopting (or re-adopting) this trend, let s look at some of the main parallax UX issues.

1. Parallax content can be difficult to manage… While parallax is supposed to draw attention to animated elements, these elements are often ignored. Most of the users in our test don t wait for parallax effects to load: they quickly scroll the page, scanning for keywords of interest. Because this effect takes time, targeted users looking for specific information may skip important content presented with the parallax effect.

When using parallax animation pages may take longer to load… On Apple s website, some users scrolled the page and saw almost nothing on the screen because the parallax animation hadn t even started yet. Blank screens are not what designers wanted or what users came for.

But parallax effect that is too fast can also be a problem: when the animation is tied to the user s scrolling speed, people may not be able to read the animated text if they scroll too quickly. User when scrolling a mobile site New York Times, noticed a bar scrolling text up and away from the table she was reading. She said, “Oh, it happened so quickly that I couldn t even read the text.” The effect slowed down her ability to interpret the spreadsheet and feel in control of the process.

1. Too much movement, especially text, can cause dizziness. Using parallax to animate many different page elements and blocks of text makes it difficult to read and can even make people nauseous. If this sounds like an exaggeration, remember that in 2013 Apple released an update for iOS 7which allowed users reduce movement (Reduce Motion)because the parallax animation for switching tasks was causing a lot of people to experience symptoms of dizziness and nausea. Let s learn this lesson and hope that in the future the parallax effect will not do any harm…
2. The user may not notice the parallax effect at all… By now, users know that many advertisers use traffic to get attention. Some people purposefully ignore page traffic due to the association with unwanted ads. On mobile devices, subtle parallax effects are easy to miss because the user s hand can block the animation appearing at the bottom. Skipping parallax effects may not be detrimental to the experience (until the content disappears), but designers should consider whether these effects are worth creating and maintaining.
3. Parallax is not very impressive users. Will people appreciate the parallax effect? Most likely only other designers or developers. When you know how difficult it is to create things like long-scrolling parallax pages, you can appreciate the work. But let s face it, average users don t care. The reaction of users today is the same as it was five years ago – indifference. They are not “surprised.” User testers don t stop to comment on how cool these effects are; they don t scroll up and down the page for fun, to see how the effect animates the page. They don t pause to watch each effect fade into the main content area. Instead, the vast majority of people focused on contentso the animation effects are secondary, if noticed at all. This begs the question for designers: is parallax the best way to impress users or make a name for themselves?

(A note on doing custom research on the effect of parallax or other animations: If you ask users to talk about animation while scrolling, you might hear praise for the interaction design. Be careful before flagging comments like this: sometimes users say one thing, but their behavior shows a completely different reality. Once you draw users attention to a function, you bias their interpretation of that function. For example, at the very end of two testing sessions, one participant had difficulty controlling animated parallax text blocks, while others did not notice them at all. But when we asked people about any the movement they saw on the page they said, “Oh, this is so cool,” or “It s as cute as it appears when you move down the page.” But we mustn t forget what actually happened when they tried find an answer or read an article: they were uncomfortable or ignored parallax).

Be discreet

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

No problem, no problem. Parallax is most secure in environments where users are looking for relaxation without a specific goal or purpose. In these cases, parallax can be used to support storytelling or to give a brand identity. If you are unsure if your use case fits this category, you can always refer to 3 Bs testto see if parallax is a good choice for your business and your users.

If the user has a task, put content first… The parallax usability test is whether users can accomplish their task easily and quickly. Here are some suggestions to get you started:

• Provide in-page navigation links on long pages with parallax scrolling so that scrolling isn t the only way to navigate down the page. Use a conspicuous navigation interface, not just small vertical dots that the user might not notice (and that have poor information smell).
• Save parallax effects for background or peripheral images so they can be easily ignored and not distracted from the content.
• After users scroll down the page and activate all parallax effects along the way, leave these objects in their final positions instead of reanimating each object when scrolling up or scrolling down. In a targeted context, users start to move up and down the page because they are looking for information. Forcing people to revise parallax effects delays their access to this information and can quickly become tiresome and annoying. It s like listening to the same joke over and over again. Show restraint and your users will benefit from it.

The following example uses a parallax scrolling effect to describe an iPad. The animation is subtle but draws attention to the main features of the device. They also stay in place – keywords stay outlined as users scroll up or down the page. (Note that this is the same page that was slow to load due to large parallax effects when swiping through iPad images on the screen. Smaller, more subtle effects are unlikely to cause such delays.)

Conclusion

Trends come and go, but human behavior remains largely unchanged. The downsides to parallax are the same as before because people are still focused on their goals and don t like slow-loading sites. Fortunately, we can learn from past mistakes. If your team is considering using parallax effect, make sure it doesn t get in the way of users, slow them down, or rob them of their ability to quickly and easily find what they re looking for.

Link:

Healey, CG, Perception in visualization Department of Computer Science, North Carolina State University, available at: https://www.csc2.ncsu.edu/faculty/healey/PP/