Best Practices To Use Scrolling Effects (With Examples)
Web Design today is not just static anymore. With advanced prototyping tools and animation software, designers get to explore more dynamic web experience. Scrolling effects are the ones that we have seen a lot on interactive websites. With libraries of animations triggered by scroll action, it’s become much easier to create dynamic scrolling web experiences.
You might have seen some interactive websites that bring delightful experience as users scroll down for more content. Or you might even have built one yourself using some scroll techniques to enrich the user experience. Having done some research and worked on a few websites using scroll effects, I decided to compile what I found and learned to share with you.
WHEN TO USE
Here are some use cases for scrolling effects:
01 Keep Scrolling
When you want your users to stay longer on the webpage, adding some scrolling effects can intrigue users to explore and keep scrolling. Especially for long and boring content, scrolling effects can keep them engaged and spending more time on your page.
02 Break Content
When you want to break content into a few sections, Adding a transition to the new section gives users a visual break cue. It suggests a section ends and a new one starts.
03 Navigate Three Dimensionally
Scrolling gives another dimension to things. It’s not just vertical up and down, you can zoom in / zoom out, or even go inside an object. It can create a three-dimensional experience.
04 Guide The Eyes
Human eyes are attracted to moving objects. When altering the order of how different content shows up, you can guide the users’ eyes to focus on where you want them to look at.
05 Keep Something Still
Not only movements can be triggered by scrolling, but things can be frozen still when scrolling the page. Thus users can stay in the same section with more content passing by.
06 Scale Up / Down
Changing the size and scale of an object can shift the focus and introduce the next content. With easing, the transition can be also very soothing and delightful.
07 Navigate A Journey
Using scrolling as a way to navigate a path or storyline gives users control of the journey. Narrative storytelling makes the content easier to digest and more fun to interact with.
08 Parallax
Parallax has been a very popular technique in building an interactive webpage. It creates a very convincing three-dimensional experience with depth. By controlling the moving speed of different layers from back to front, it mimics what objects really look like when users change view angles.
WHEN NOT TO USE IT
Okay! There are so many ways to use scrolling effects. Does it mean the more effects the better? In what cases we should avoid adding scrolling effects?
01 Create A Distraction
Motion directs attention, thus we don’t want to create scrolling effects that will distract users from focusing on what they should be focusing on the screen. If a motion creates a distraction from the target content, it’s not the best place for scrolling effects.
02 Different Brand Identity
Motion adds characters to the design. To create a coherent experience browsing the web, we should try not to include effects that express a different feel and brand. For example, elements bouncing into the page might not add value to a serious business website.
03 Usability Issues
Like designing user interface, avoiding usability issues is crucial in designing motion and animation effects. You know you don’t want the motion to distract users from the key information, not to mention to cause usability issues.
04 Too Much
Less is more is still valid here. When everything on the screen moves around and changes shapes, it might be worse than having no motion at all. Try not to use too much motion and effects on the same screen and too many different kinds of effects on the same webpage.
05 Causing Discomfort
If adding a transition or motion makes people feel dizzy and uncomfortable, it’s better not to have it. Especially when using three-dimensional effects, it can look super cool but also can cause discomfort in some cases.
06 If There’s No Need
Last but not least, if there’s no need for a scrolling effect, don’t include one. It’s fun to try different effects and explore what you can do with different motions in your design. If there’s no purpose for including that spin or scale, just leave it out of the webpage.
