Blank screens are not what designers intended, nor are they what users came to see. On the Apple site, some users scrolled and saw almost nothing on the screen, because the parallax effects hadn’t animated yet. Pages can take longer to load when parallax animations are used. Because this effect takes time, goal-oriented users looking for specific information may miss important content presented using parallax. Most users in our testing don’t wait for parallax effects to load: they scroll quickly, scanning for keywords of interest. While parallax is supposed to draw attention to the animated elements, often these elements end up being ignored. Parallax-presented content can be difficult to control.4 Problems with Parallaxįor sites considering adopting (or readopting) this trend, let’s look at some of the top UX issues with the parallax scrolling effect. Designers need to know what their risks and benefits are. Unfortunately, parallax effects come with some costs. The velocity of motion is a preattentive trait: an object that moves at 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. The same desire to offer an “immersive” experience on the web often motivates the use of parallax effects by website designers, who assume that such effects make for a creative, unique branding statement and a memorable design.Īnother reason for using parallax is to call attention to certain page elements. Game designers moved objects in the foreground and background separately, to add depth to the game universe and make players feel immersed in it. If you ever played early video games, you may remember the parallax effect. In this article, we’ll discuss why parallax is a popular trend, why it can be problematic, and how it can still sometimes be used to enhance user experience. : In this example of parallax scrolling, the fish and the white menu boxes move at different speed than the scrolling background, creating the impression of being layered on the screen. The animated GIF below shows an example of parallax scrolling on a restaurant’s website. Now move your head from left to right while holding your hands steady: it’ll look as if the two hands are moving relative to each other, particularly if you close one eye so that you get a 2D view.) (To understand why parallax design induces this illusion, try this experiment: hold up both of your hands in front of your face, with one hand as far away as you can stretch your arm, and the other hand halfway between the first hand and your eyes. If the earlier parallax implementations were a horror show of usability issues, the modern version is closer to a PG-13 family comedy: not particularly entertaining, but also not likely to send people screaming to close the tab.ĭefinition: The parallax animation effect is created by two or more layers of an interface moving at different speeds or in different directions in order to produce an impression of depth. In this sequel, however, parallax scrolling is more restrained than the original. Like a sequel to a movie, our testing today reveals a familiar cast and storyline: unimpressed users and a range of usability issues. Just when we thought the web was safe, parallax scrolling is making a comeback. The outcomes didn’t justify the work that went into creating and maintaining elaborate parallax-scrolling effects, and so the trend dwindled in popularity. After a short couple of years, the parallax trend slowly faded away, likely because those early adopters saw the same results we did: harm to the user experience or lukewarm user reactions, at best. More importantly, neither were users (for reasons I’ll explain below). Several years ago, a colleague and I ventured out to test a new design trend that was winning web-design awards and earning praise on designer forums.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |